0
DECA, CTC, P3 e P4
P4 – Desenvolvimento para a Web: HTML, CSS e Javascript
HTML <ul><li>H yper T ext  M arkup  L anguage </li></ul><ul><li>É a linguagem que fornece os “blocos” elementares com os q...
HTML - História Um pouco de história do HTML http://en.wikipedia.org/wiki/HTML - History
HTML - Elementos <ul><li>Os elementos de HTML são representados sobre a forma de <tags> </li></ul><ul><li>Elementos de est...
HTML – Elementos de estrutura do documento <ul><li><html>   </li></ul><ul><li>Elemento base de qualquer documento HTML </l...
HTML – Elementos do <head> <ul><li><link>   </li></ul><ul><li>Ligação para um CSS externo </li></ul><ul><ul><li><link rel=...
HTML – Elementos do <body> | Block level <ul><li>Os elementos de Block level devem ser compreendidos como:  </li></ul><ul>...
HTML – Elementos do <body> | Inline level <ul><li>Os elementos de Inline level devem ser compreendidos como:  </li></ul><u...
HTML – Elementos do <body> | Imagens e Formulários <ul><li><img> </li></ul><ul><li>Utilizado para incluir imagens no docum...
HTML – Elementos do <body> | Tabelas <ul><li><table>...</table> </li></ul><ul><li><tr>...</tr>  - linha da tabela </li></u...
HTML – Atributos, Classes e IDs <ul><li>Cada tag possuí uma série de atributos próprios: </li></ul><ul><li><a href=“”> </l...
CSS <ul><li>C ascading  S tyle  S heets </li></ul><ul><li>É uma linguagem de folhas de estilos que descreve o aspecto de u...
CSS <ul><li>C ascading  S tyle  S heets </li></ul><ul><li>É uma linguagem de folhas de estilos que descreve o aspecto de u...
CSS - selectores .post { color: #333; text-size: 14px; font-weight: bold; } Pseudo-selectores a { color: blue; } a:hover {...
Upcoming SlideShare
Loading in...5
×

Academia Verão 2011 - HTML

248

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
248
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Academia Verão 2011 - HTML"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×