Desenvolvimento HTML

Prof. Dr. Max E. Vizcarra Melgar

1
Desenvolvimento Web para Interfaces

• HTML;
• CSS;
• JavaScript

https://www.youtube.com/watch?v=lwSLZ3e5Zn8

2
Editor de texto x IDE

3
Instalando o Editor de texto

4
Instalando o Editor de texto

5
Projeto com Sublime Text

• Baixe e abra o arquivo “Projeto.zip”;

• Abra o SublimeText;
• Crie uma pasta para nosso projeto
com nome “Projeto Aula 2”;

6
Projeto com Sublime Text
• Vincule o Projeto com a Pasta criada;

• Estrutura de arquivos e pastas:

7
Projeto com Sublime Text
• Crie um novo arquivo e salve-o como index.html;

• Crie uma pasta com qualquer nome.

8
Projeto com Sublime Text
• Delete todos os arquivos e pastas e importe a pasta
previamente baixada “Projeto”;

• Abra o arquivo “index.html” e observe o conteúdo dele.

9
HTML
• Linguagem de marcação de hipertexto;
• Interpretado pelos navegadores (Google Chrome,
Microsoft Edge, Firefox, etc);
• Link útil: https://www.w3schools.com/html/default.asp
• Tags

• Crie uma pasta chamada “Projeto1” no seu computador

e nela um arquivo chamado “projeto.html”

1
0
HTML
• Escreva o seguinte, salve e abra o arquivo:

• Exiba o código fonte da página no navegador:

11
HTML - Estrutura
• Escreva o seguinte, salve e abra o arquivo:

• Exiba o código fonte da página no navegador:

12
HTML - Estrutura
• Adicione o Título:

• Exiba a página no navegador:

• Utilize INDENTAÇÃO!
13
HTML - Estrutura
• Adicione meta e use acentuação no body:

• Exiba a página no navegador:

14
HTML – Cabeçalhos
• Cabeçalhos e quebra de linha:

15
HTML – Cabeçalhos
• Exiba a página no navegador:

16
HTML – Parágrafos e linhas
• Crie parágrafos <p> e linhas <hr>:

17
HTML – Parágrafos e linhas

• Exiba a página no navegador:

18
HTML – Formatação de textos
• Use negrito<strong>, itálico <em>, underline <u> e
marcar como errado <strike>:

19
HTML – Formatação de textos

• Exiba a página no navegador:

20
HTML – Listas não ordenadas
• Comece a lista <ul> e coloque os tópicos <li>. Veja o
resultado:

21
HTML – Listas ordenadas
• Comece a lista <ol> e coloque os tópicos <li>. Veja o
resultado:

22
HTML – Imagens!
• Baixe uma foto da internet e salve-a numa pasta
chamada “Imagens” com o nome “imagem1”;

23
HTML – Imagens!
• Exiba a página no navegador:

24
HTML – Links
• Mude o nome do arquivo “projeto.html” para
“index.html” e crie o arquivo “contato.html”. Use <a>
conforme mostrado:

25
HTML – Links
• Exiba as páginas no navegador:

26
HTML – Tabelas
• Crie o arquivo “tabela.html”. Use <td>, <tr>, align, valign, colspan e
rowspan:

27
HTML – Tabelas
• Exiba a página no navegador:

28
HTML – Formulários
• Crie o arquivo “formularios.html”. Use <form>, <input> e <textarea>:

29
HTML – Formulários
• Exiba a página no navegador:

30
HTML – Caracteres Especiais
• Crie o arquivo “caracteres_esp.html”. Use
https://www.w3schools.com/html/html_entities.asp

• Visualize o navegador

31
HTML – Caracteres Especiais
• Crie o arquivo “caracteres_esp.html”. Use
https://www.w3schools.com/html/html_entities.asp

• Visualize o navegador

32