Your SlideShare is downloading. ×
0
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

240

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
240
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 <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 “&lt; &gt;” </li></ul><ul><ul><li>&lt;html&gt;, &lt;form&gt;, &lt;script&gt;, &lt;img&gt;, etc... </li></ul></ul><ul><ul><li>Normalmente surgem aos pares, uma de início e uma de fecho: &lt;span&gt; &lt;/span&gt; </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. HTML - História Um pouco de história do HTML http://en.wikipedia.org/wiki/HTML - History
  • 5. HTML - Elementos <ul><li>Os elementos de HTML são representados sobre a forma de &lt;tags&gt; </li></ul><ul><li>Elementos de estrutura do documento </li></ul><ul><li>Elementos do &lt;head&gt; </li></ul><ul><li>Elementos do &lt;body&gt; </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. HTML – Elementos de estrutura do documento <ul><li>&lt;html&gt; </li></ul><ul><li>Elemento base de qualquer documento HTML </li></ul><ul><li>&lt;head&gt; </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>&lt;body&gt; </li></ul><ul><li>Contém o conteúdo a ser mostrado ao utilizador </li></ul>
  • 7. HTML – Elementos do &lt;head&gt; <ul><li>&lt;link&gt; </li></ul><ul><li>Ligação para um CSS externo </li></ul><ul><ul><li>&lt;link rel=“ stylesheet ” type= “ text/css ” href= “ estilos.css ” &gt; </li></ul></ul><ul><li>&lt;style&gt; </li></ul><ul><li>Contentor para regras de CSS </li></ul><ul><li>&lt;title&gt; </li></ul><ul><li>Define o título da página </li></ul><ul><li>&lt;script&gt; </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>&lt;script&gt;alert(‘Sou um bloco de código Javascript’);&lt;/script&gt; </li></ul></ul><ul><ul><li>&lt;script src=“ javascript.js ” &gt; </li></ul></ul>
  • 8. HTML – Elementos do &lt;body&gt; | 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>&lt;p&gt;...&lt;/p&gt; - define um parágrafo de texto </li></ul><ul><li>&lt;h1&gt;...&lt;/h1&gt;, &lt;h2&gt;...&lt;/h2&gt; (...) &lt;h6&gt;...&lt;/h6&gt; - Definem cabeçalhos com diferente destaque em casa secção do HTML. </li></ul><ul><li>Listas </li></ul><ul><ul><li>&lt;ol&gt;...&lt;/ol&gt; - Lista ordenada </li></ul></ul><ul><ul><li>&lt;ul&gt;...&lt;/ul&gt; - Lista não ordenada </li></ul></ul><ul><ul><li>&lt;li&gt;...&lt;/li&gt; - Item de lista </li></ul></ul><ul><li>&lt;div&gt;...&lt;/div&gt; - Contentor genérico </li></ul>
  • 9. HTML – Elementos do &lt;body&gt; | 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>&lt;a&gt;...&lt;/a&gt; - Elemento de âncora. Geralmente utilizado para criar links </li></ul><ul><ul><li>&lt;a href= http://campus.ua.sapo.pt &gt;Sapo Campus UA&lt;/a&gt; </li></ul></ul><ul><li>&lt;span&gt;...&lt;/span&gt; - Contentor genérico </li></ul>
  • 10. HTML – Elementos do &lt;body&gt; | Imagens e Formulários <ul><li>&lt;img&gt; </li></ul><ul><li>Utilizado para incluir imagens no documento </li></ul><ul><ul><li>&lt;img src=“ imagem.jpg ” alt= “ Foto super gira ” &gt; </li></ul></ul><ul><li>&lt;form&gt; </li></ul><ul><li>Contentor para formulários </li></ul><ul><ul><li>&lt;form action=“ comprar.php ” &gt;...&lt;/form&gt; </li></ul></ul><ul><li>&lt;input&gt; </li></ul><ul><ul><li>type= checkbox | radio | button | submit | text | password | fille | hidden </li></ul></ul><ul><li>&lt;label&gt; </li></ul><ul><ul><li>Descrição de um input </li></ul></ul>
  • 11. HTML – Elementos do &lt;body&gt; | Tabelas <ul><li>&lt;table&gt;...&lt;/table&gt; </li></ul><ul><li>&lt;tr&gt;...&lt;/tr&gt; - linha da tabela </li></ul><ul><li>&lt;th&gt;...&lt;/th&gt; - célula do cabeçalho da tabela </li></ul><ul><li>&lt;td&gt;...&lt;th&gt; - célula da tabela </li></ul><ul><li>&lt;thead&gt;...&lt;/thead&gt; - cabeçalho da tabela </li></ul>
  • 12. HTML – Atributos, Classes e IDs <ul><li>Cada tag possuí uma série de atributos próprios: </li></ul><ul><li>&lt;a href=“”&gt; </li></ul><ul><li>&lt;img src=“” alt=“”&gt; </li></ul><ul><li>&lt;form action=“”&gt; </li></ul><ul><li>&lt;input name=“”&gt; </li></ul><ul><li>&lt;label for=“”&gt; </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. 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. 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. CSS - selectores .post { color: #333; text-size: 14px; font-weight: bold; } Pseudo-selectores a { color: blue; } a:hover { color: red; }

×