Your SlideShare is downloading. ×
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Academia Verão 2011 - HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Academia Verão 2011 - HTML

236

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
236
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DECA, CTC, P3 e P4
  • 2. P4 – Desenvolvimento para a Web: HTML, CSS e Javascript
  • 3. HTML
    • H yper T ext M arkup L anguage
    • É a linguagem que fornece os “blocos” elementares com os quais se constrói a estrutura das páginas web
    • É escrito com recurso a etiquetas ( tags ) encapsuladas em “< >”
      • <html>, <form>, <script>, <img>, etc...
      • Normalmente surgem aos pares, uma de início e uma de fecho: <span> </span>
      • Dentro destas etiquetas é colocado o conteúdo
    • Estas tags , quando processadas por um browser, não são mostradas ao utilizador mas sim interpretadas pelos mesmo e mostrada uma representação gráfica do conteúdo. (Para ver estas tags temos que recorrer à opção View Source/Ver Código Fonte do browser)
    • Permite-nos criar documentos com uma estrutura semântica .
    • Pode ser complementada com CSS para associar estilos aos elementos da estrutura
    • Pode ser complementada com Javascript para associar comportamentos aos elementos da estrutura
  • 4. HTML - História Um pouco de história do HTML http://en.wikipedia.org/wiki/HTML - History
  • 5. HTML - Elementos
    • Os elementos de HTML são representados sobre a forma de <tags>
    • Elementos de estrutura do documento
    • Elementos do <head>
    • Elementos do <body>
      • Block elements
      • Inline elements
    • Imagens e formulários
    • Tabelas
  • 6. HTML – Elementos de estrutura do documento
    • <html>
    • Elemento base de qualquer documento HTML
    • <head>
    • Contém informação e metadados para o processamento do codumento
    • Os CSS são incluídos neste elemento
    • Os scripts (javascript) podem ser incluídos neste elemento
    • <body>
    • Contém o conteúdo a ser mostrado ao utilizador
  • 7. HTML – Elementos do <head>
    • <link>
    • Ligação para um CSS externo
      • <link rel=“ stylesheet ” type= “ text/css ” href= “ estilos.css ” >
    • <style>
    • Contentor para regras de CSS
    • <title>
    • Define o título da página
    • <script>
    • Pode funcionar como contentor para código javascript externo ou como link para um ficheiro javascript externo
      • <script>alert(‘Sou um bloco de código Javascript’);</script>
      • <script src=“ javascript.js ” >
  • 8. HTML – Elementos do <body> | Block level
    • Os elementos de Block level devem ser compreendidos como:
    • Objectos rectangulares que não quebram entre linhas
    • Têm margens, largura e altura
    • Podem , na sua generalidade, conter elementos inline
    • <p>...</p> - define um parágrafo de texto
    • <h1>...</h1>, <h2>...</h2> (...) <h6>...</h6> - Definem cabeçalhos com diferente destaque em casa secção do HTML.
    • Listas
      • <ol>...</ol> - Lista ordenada
      • <ul>...</ul> - Lista não ordenada
      • <li>...</li> - Item de lista
    • <div>...</div> - Contentor genérico
  • 9. HTML – Elementos do <body> | Inline level
    • Os elementos de Inline level devem ser compreendidos como:
    • Parte do fluxo textual de um documento
    • Não têm margens, largura e altura
    • Não podem conter elementos de block level
    • <a>...</a> - Elemento de âncora. Geralmente utilizado para criar links
      • <a href= http://campus.ua.sapo.pt >Sapo Campus UA</a>
    • <span>...</span> - Contentor genérico
  • 10. HTML – Elementos do <body> | Imagens e Formulários
    • <img>
    • Utilizado para incluir imagens no documento
      • <img src=“ imagem.jpg ” alt= “ Foto super gira ” >
    • <form>
    • Contentor para formulários
      • <form action=“ comprar.php ” >...</form>
    • <input>
      • type= checkbox | radio | button | submit | text | password | fille | hidden
    • <label>
      • Descrição de um input
  • 11. HTML – Elementos do <body> | Tabelas
    • <table>...</table>
    • <tr>...</tr> - linha da tabela
    • <th>...</th> - célula do cabeçalho da tabela
    • <td>...<th> - célula da tabela
    • <thead>...</thead> - cabeçalho da tabela
  • 12. HTML – Atributos, Classes e IDs
    • Cada tag possuí uma série de atributos próprios:
    • <a href=“”>
    • <img src=“” alt=“”>
    • <form action=“”>
    • <input name=“”>
    • <label for=“”>
    • E todas podem possuir os atributos genéricos “ id ” e “ class ”
    • A mesma “ class ” pode ser reutilizada tantas vezes quanto desejado em qualquer número de elementos, deve ser semântica, descrevendo a função do bloco e não a sua aparência.
      • É utilizada como alvo dos CSS
    • O id tem que ser único, só podendo aparecer só podendo haver um elemento com determinado id em cada página
  • 13. CSS
    • C ascading S tyle S heets
    • É uma linguagem de folhas de estilos que descreve o aspecto de uma estrutura semântica de markup (HTML)
    • O CSS usa selectores para aplicar o estilos
  • 14. CSS
    • C ascading S tyle S heets
    • É uma linguagem de folhas de estilos que descreve o aspecto de uma estrutura semântica de markup (HTML)
    • O CSS usa selectores para aplicar o estilos
    • #corpo – aplica estilo ao elemento HTML com o id=“corpo”
    • .post – aplica estilos aos elementos HTML com a class=“ post ”
    • Depois de cada selector escolhe-se as propriedades a aplicar - http ://tech.journalism.cuny.edu/documentation/css-cheat-sheet /
    • selector {
    • propriedade1 : valor;
    • propriedade2 : valor;
    • }
  • 15. CSS - selectores .post { color: #333; text-size: 14px; font-weight: bold; } Pseudo-selectores a { color: blue; } a:hover { color: red; }

×