HTML (HyperText Markup Language):
É responsável pela criação de documentos para a web, comumente conhecido como páginas;
Não é uma linguagem de programação. É classificada como uma linguagem de formatação de textos.
Características da HTML:
1. Independência de plataforma;
2. Não é monopolizada por uma empresa;
3. Os arquivos são pequenos, vinculados por hiperlinks.
Não necessita de editor específico, já que podemos usar um bloco de notas (ambiente Windows). Contudo é recomendável utilizar um ambiente específico de codificação que facilita a visualização das chamadas tags (palavras reservadas da HTML para criação das páginas web) e também realizam o autocomplemento. Como exemplos destes ambientes, temos: Notepad++, NetBeans, Eclipse e Sublime.
Estrutura básica da HTML
1.
Início do documento HTML;
2.
Cabeçalho;
3.
Título;
4.
Corpo do documento;
5.
Fim do documento HTML.
1
2 3
4
Construção da nossa primeira página
Com a estrutura básica da HTML, podemos codificar uma página simples usando o ambiente de desenvolvimento Notepad++. Segue a codificação (Figura 1) e o resultado em um navegador de Internet (Figura 3).
Figura 1. Primeira página construída.
O arquivo que construímos com base na codificação exibida na Figura 1 deve ser salvo com a
extensão de arquivo “html”. Veja a escolha da extensão do arquivo na Figura 2.
Figura 2. Escolha da extensão do arquivo como do tipo html.
Figura 3. Resultado da primeira página construída rodando no navegador.
Aula 2
Detalhando os elementos básicos do documento HTML e
apresentação das tags de título <h1> até <h6>
Todo o documento HTML fica contido entre os TAGS: <html> e </html>.
Temos duas seções básicas:
HEAD - Contém parâmetros de configuração do documento.
BODY - Contém o documento em si.
A estrutura de um documento HTML é:
<HTML>
<HEAD><TITLE>Título da página </TITLE></HEAD> <BODY>
*** Conteúdo da pagina ***
</BODY> </HTML>
Tags do documento HTML
<HTML>...</HTML> - Envolvem todas as seções de um documento (HEAD e BODY).
<HEAD>...</HEAD> - Envolvem a seção de cabeçalho do documento.
<TITLE>...</TITLE> - Indica o título do documento para o Browser (navegador de Internet).
<BODY>...</BODY> - Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page.
Títulos e Subtítulos
Exemplo:
<html>
<head> <title>Estudo HTML</title> <meta charset= “utf-8”></head> <body>
A seguir temos os seis níveis de títulos/cabeçalhos <br /> <h1> Título Formatado com nível 1 </h1>
<h2> Título Formatado com nível 2 </h2> <h3> Título Formatado com nível 3 </h3> <h4> Título Formatado com nível 4 </h4> <h5> Título Formatado com nível 5 </h5> <h6> Título Formatado com nível 6 </h6> </body>
</html>
O resultado da codificação é exibido na Figura 4.
Figura 4. Resultado do uso das tags de <h1> até <h6>.
Tags de bloco e separadores
<div></div> - gerencia blocos de parágrafos, entre outros elementos, no documento;
<p></p> - formata um parágrafo do documento;
<br> - quebra de linha;
<hr> - linha horizontal.
O exemplo codificado na Figura 5, trás o uso da tag “div” para codificar um bloco que pode ser
Figura 5. Tags de aplicação em bloco.
O resultado da codificação do exemplo anterior está na Figura 6.
Figura 6. Resultado do exemplo de Tags com aplicação em blocos.
Aula 3
Listas e imagens
Lista não ordenada
São iniciadas com a tag <ul> e são respectivamente terminadas com </ul>. E seus elementos são delimitados por <li>.
Figura 7. Codificação de lista não ordenada.
O resultado da codificação está na Figura 8.
Figura 8. Lista não ordenada.
É possível trocar o símbolo da lista por um dos três tipos: circle, square, disc.
Exemplo:
<ul type="square">
<li> matemática</li> <li> fisica</li> <li> biologia</li> </ul>
Lista ordenada
É denominada uma lista numerada. A Lista ordenada inicia-se pela TAG <ol> Cada item utiliza a TAG
<li> e Fecha </ol>.
Figura 9. Codificação de lista ordenada.
Resultado da codificação do exemplo de lista ordenada:
Figura 10. Resultado da lista ordenada.
Tipo de numeração para lista
Temos 5 tipos de numeração: A – maiúsculo; a – minúsculo;
I– romano maiúsculo; i – romano minúsculo; 1 – arábico.
Exemplo: <ol type="A">
Lista de definição
Esta lista define um título para um tópico. A tag <dt></dt> define o item e a tag <dd></dd> define o texto do item.
Exemplo (linhas de 9 até 14):
Figura 11. Codificação de lista de definição.
Resultado do uso de lista de definição:
Figura 12. Resultado da lista de definição.
Imagens tag <img>
Os formatos de imagens mais usados são: GIF, JPG, ou PNG com compactação de pixels.
Para inserir uma imagem, use a TAG: <img>.
1 <!DOCTYPE html> 2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>
7 </title> Naruto
8 <style>
9 body{
10 text-align:center;
11 background-color: #f4dc42;
12 }
13 h1,h2{color: red;
14 }
15 </style>
16
17 </head> 18
19 <body>
20 <h1 style="text-align:center">Página do Naruto</h1> 21 <p>kakashi naruto sasuske sakura</p>
22
23 <img src="img/Naruto.jpg" alt="Imagem do Naruto"> 24
25 <div style="text-align:left;">
26 <h2 style="text-align:left;">Temas</h1> 27
28 <ol type="I"> 29 <li>vilas</li>
30 <li>Aventura</li>
31 <li>Inimigos</li>
32 <li>Hokages</li>
33 </ol>
34 </div> 35 </body> 36 </html>
com as tags <style> e </style>, no interior desta marcação é realizada a codificação CSS. Essa codificação separa a marcação do conteúdo da página, que é feito com HTML, da apresentação, que é realizada com CSS.
O resultado da tag <img> usado no exemplo está na Figura 13.
Figura 13. Uso de imagem na página.
Aula 4
Links e Exercícios
Links
Um link serve para criar palavras, ou outros elementos,que permitem a interligação entre documentos.
Sintaxe:
Link para outro documento - <a href=”destino”> Texto </a>
Figura 14. Codificação de hiperlink.
Na linha 12 da Figura 14 está indicado como destino de ligação para o hiperlink “Portal do IFRJ” o destino http://portal.ifrj.edu.br. É necessário colocar o caminho para encontrar este endereço na Internet, por isso a URL deve estar com o endereço completo.
Resultado da codificação:
Figura 15. Links em páginas Web.
