HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web [email protected] .
Transcript of HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web [email protected] .
![Page 1: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/1.jpg)
HTML e CSS – Básico, módulo 1
Davi da Rocha ”Phius”, 24, desenvolvedor web
[email protected] www.phius.net
![Page 2: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/2.jpg)
HTML e CSS – Básico, módulo 1
Módulo 1 = HTML
![Page 3: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/3.jpg)
HTML – O que é
O que diabos é e para que cargas d'agua funciona?
HTML é um documento hipertexto
![Page 4: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/4.jpg)
HTML – O que é
O que diabos é e para que cargas d'agua funciona?
HTML é um documento hipertexto Hiperlinks ou links
![Page 5: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/5.jpg)
HTML – O que é
O que diabos é e para que cargas d'agua funciona?
HTML é um documento hipertexto Hiperlinks ou links Um site é uma coleção de páginas hipertexto
![Page 6: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/6.jpg)
HTML – O que é
O que diabos é e para que cargas d'agua funciona?
HTML é um documento hipertexto Hiperlinks ou links Um site é uma coleção de páginas hipertexto É feito de um arquivo de texto marcado com
etiquetas (tags) HTML
![Page 7: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/7.jpg)
HTML – O que é
<html>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
<p>Faltou uma idéia melhor...</p>
</html>
![Page 8: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/8.jpg)
HTML – Ferramentas
Editor de texto Navegador web
![Page 9: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/9.jpg)
HTML – Ferramentas
Editor de texto Bloco de notas, gedit, TextMate, Komodo Edit,
Dreamweaver, vim etc Navegador web
![Page 10: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/10.jpg)
HTML – Ferramentas
Editor de texto Bloco de notas, gedit, TextMate, Komodo Edit,
Dreamweaver, vim etc Navegador web
Google Chrome, Mozilla Firefox, Safari etc mas não o Internet Explorer
![Page 11: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/11.jpg)
HTML – Sintaxe
Uma tag (são exemplos, não são tags reais) <tag></tag>
![Page 12: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/12.jpg)
HTML – Sintaxe
Uma tag (são exemplos, não são tags reais) <tag></tag>
Tag com parâmetro e valor <tag parametro=”valor”></tag>
![Page 13: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/13.jpg)
HTML – Sintaxe
Uma tag (são exemplos, não são tags reais) <tag></tag>
Tag com parâmetro e valor <tag parametro=”valor”></tag>
![Page 14: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/14.jpg)
HTML – Sintaxe
Uma tag <tag></tag>
Tag com parâmetro e valor <tag parametro=”valor”></tag>
Tag envolvendo algum conteúdo <tag>O conteúdo está aqui</tag>
![Page 15: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/15.jpg)
HTML – Sintaxe
Uma tag <tag></tag>
Tag com parâmetro e valor <tag parametro=”valor”></tag>
Tag envolvendo algum conteúdo <tag>O conteúdo está aqui</tag>
Tag sem fechamento <br />
![Page 16: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/16.jpg)
Estrutura base
O esqueleto
![Page 17: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/17.jpg)
HTML – Tags básicas
Tag de cabeçalho – h1 – h5 <h1>Curso de HTML da Ung</h1>
![Page 18: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/18.jpg)
HTML – Tags básicas
Tag de texto (parágrafo) – p <p>Texto lalala</p>
![Page 19: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/19.jpg)
HTML – Tags básicas
Listas não-ordenadas
<ul><li>Motor</li>
<li>Pneus</li>
<li>Carroceria</li>
<li>Portas</li>
</ul>
![Page 20: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/20.jpg)
HTML – Tags básicas
Listas ordenadas
<ol><li>Valentino Rossi</li>
<li>Jorge Lorenzo</li>
<li>Casey Stoner</li>
<li>Marco Simoncelli</li>
</ol>
![Page 21: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/21.jpg)
HTML – Tags básicas
Formatação de texto básica Negrito – <strong>Texto aqui</strong> Itálico – <em>Texto aqui</em> Riscado – <del>Texto aqui</del> Código – <code>Texto aqui</code>
![Page 22: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/22.jpg)
HTML – Tags básicas
Formatação de valor semântico Bloco de citação (fora do p) – <blockquote>Texto
aqui</blockquote> Citação em linha (dentro do p) - <cite>Texto
aqui</cite> Endereço - <address>Endereço</address>
![Page 23: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/23.jpg)
HTML – Tags básicas
Divisão - <div>Conteúdo</div>
![Page 24: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/24.jpg)
HTML – Tags básicas
Tabelas (obs. A tabela da foto está com borda para melhor visualização)
<table>
<tr>
<th>Campeonato</th>
<th>Vencedor</th>
</tr>
<tr>
<td>MotoGP 2010</td>
<td>Jorge Lorenzo</td>
</tr>
</table>
![Page 25: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/25.jpg)
HTML – Tags básicas
Mesclar células na tabela (parâmetro colspan)<table> <tr> <td colspan=”2”>Curso HTML + CSS</td> </tr> <tr> <td>22/01/11</td> <td>Módulo 1</td> </tr> <tr> <td>29/01/11</td> <td>Módulo 2</td> </tr> <tr> <td>05/02/11</td> <td>Módulo 3</td> </tr></table>
![Page 26: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/26.jpg)
HTML – Tags básicas
Mesclar linhas na tabela (parâmetro rowspan)<table> <tr> <td rowspan=”3”>Curso HTML + CSS</td> <td>22/01/11</td> <td>Módulo 1</td> </tr> <tr> <td>29/01/11</td> <td>Módulo 2</td> </tr> <tr> <td>05/02/11</td> <td>Módulo 3</td> </tr></table>
![Page 27: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/27.jpg)
HTML – Links
Criando links – a tag ”a”
<a href=”arquivo.html”>Link</a>
<a href=”http://www.phius.net”>Link</a>
![Page 28: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/28.jpg)
HTML - Exercício
Criem uma página falando um pouco sobre este curso, com a seguinte estrutura:
Título – Curso de férias da UNG Sub-título - ”Como fiquei sabendo” Texto - Diga como ficou sabendo deste curso Sub-título – Pontos positivos Lista não-ordenada dos pontos positivos da iniciativa da
UNG com estes cursos Sub-título – Pontos negativos Lista não-ordenada dos pontos negativos
![Page 29: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/29.jpg)
HTML – é... mais exercício
Faça uma página com um título ”Curso de férias da UNG” e uma lista não-ordenada contendo 3 links:
Como fiquei sabendo Pontos positivos Pontos negativos
Cada link deve levar para uma página com o mesmo título, um sub-título igual ao seu link, um texto sobre o assunto da página e um link para voltar ao menu.
![Page 30: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/30.jpg)
CSS
CSS – O que é e para que serve?
![Page 31: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/31.jpg)
CSS
CSS – O que é e para que serve?
Folha de estilos em cascata – É um documento de texto com a formatação visual de um HTML
![Page 32: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/32.jpg)
CSS
CSS – O que é e para que serve?
Folha de estilos em cascata – É um documento de texto com a formatação visual de um HTML
HTML é conteúdo, CSS é formatação visual
![Page 33: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/33.jpg)
CSS
CSS – O que é e para que serve?
Folha de estilos em cascata – É um documento de texto com a formatação visual de um HTML
HTML é conteúdo, CSS é formatação visual Facilita o trabalho
![Page 34: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/34.jpg)
CSS
CSS – O que é e para que serve?
Folha de estilos em cascata – É um documento de texto com a formatação visual de um HTML
HTML é conteúdo, CSS é formatação visual Facilita o trabalho
![Page 35: HTML e CSS – Básico, módulo 1 Davi da Rocha Phius, 24, desenvolvedor web phius@phius.net .](https://reader035.fdocuments.mx/reader035/viewer/2022062418/552fc0f8497959413d8b4f7b/html5/thumbnails/35.jpg)
Por hoje é só!
Estude
Não se esqueça de estudar.
Mande dúvidas por email, sem dó!
Acesse o MeuTutu.com.br! :D
Davi da Rocha ”Phius”
[email protected] (email e msn)
Hoje a noite esta apresentação e mais material estarão em www.phius.net/html-e-css-ung/