Download - Web Design > HTML (aula 1)
![Page 1: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/1.jpg)
Web DesignQuando sonhos se tornam realidade...
![Page 2: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/2.jpg)
Após as etapas de briefing, wireframe e layout, chegou a hora de transformar tudo em elementos interativos e interpretados via browser. Para isso, usamos as linguagens de marcação (HTML), de estilização (CSS) e para recursos avançados de lógica (Javascript, CGI e outras).
Web Design
![Page 3: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/3.jpg)
Estrutura básica de arquivo HTML: <!DOCTYPE html><html><head>...</head>
<body>...</body>
</html>
Web Design
![Page 4: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/4.jpg)
DOCTYPE É a definição de como o browser (navegador) irá interpretar o documento HTML. A definição de varia de acordo com a versão do HTML. Veja a seguir alguns exemplos...
Web Design
![Page 5: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/5.jpg)
Web Design
Exemplos: Versão 4.0 - HTML Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
![Page 6: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/6.jpg)
Web Design
Exemplos: Versão 4.0 - HTML Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Versão 5.0 - HTML5<!DOCTYPE html>
![Page 7: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/7.jpg)
Web Design
Exemplos: Versão 4.0 - HTML Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Versão 5.0 - HTML5<!DOCTYPE html> É o que iremos utilizar ;)
![Page 8: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/8.jpg)
As tags: <html>, <head> e <body> são conhecidas como tags estruturais.
Web Design
![Page 9: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/9.jpg)
Onde, <html> - define que o arquivo é um documento HTML; <head> - é responsável por descrições, definições e pré-carregamentos (é invisível ao usuário);
Web Design
![Page 10: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/10.jpg)
e, <body> - é a parte visível a usuário. Leva consigo o conteúdo e todas as demais estruturas do website, além dos recursos interativos.
Web Design
![Page 11: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/11.jpg)
Mas... Chega e papinho e vamos ao que interessa!
Web Design
![Page 12: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/12.jpg)
Mas... Chega e papinho e vamos ao que interessa!
Web Design
![Page 13: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/13.jpg)
Let's code it!
Web Design
![Page 14: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/14.jpg)
Web DesignMissão #1Website pessoal
![Page 15: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/15.jpg)
Web Design: Website pessoal
![Page 16: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/16.jpg)
Web Design: Website pessoal
"O" Wireframe
![Page 17: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/17.jpg)
Web Design: Website pessoal
Deixando mais simples...
![Page 18: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/18.jpg)
Web Design: Website pessoal
Uma pequena PAUSApara algumas coisas importantes!
![Page 19: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/19.jpg)
Web Design: Website pessoal
Mais nunca se esqueça!
● Indentação no código;
● Nomes dos arquivos e pastas: sempre minúsculos, sem espaços e/ou acentos;
![Page 20: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/20.jpg)
Web Design: Website pessoal
E algumas tags... Titulos: <h1> ... <h6> Links: <a>Parágrafos: <p>Imagens: <img />Quebra de linha: <br />Listas: <ul>,<li>(não ordenada), <ol>(ordenada)
![Page 21: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/21.jpg)
Web Design: Website pessoal
Mais algumas tags... Negritos: <strong>Itálicos: <i>Linha horizontal: <hr />
![Page 22: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/22.jpg)
Web Design: Website pessoal
E mais algumas tags... Definição de blocos: <div>Definição de conteúdo: <span> Comentários: <!-- comentário -->
![Page 23: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/23.jpg)
Web Design: Website pessoal
Atributos Essenciais Identificador único e exclusivo: idClasse ou classes do elemento: class Atributos de estilo Definição de estilo do elemento: style
![Page 24: Web Design > HTML (aula 1)](https://reader034.vdocuments.net/reader034/viewer/2022042602/558aff10d8b42a40268b45c3/html5/thumbnails/24.jpg)
Web Design: Website pessoal
Colocando em prática...