HTML 1ª aula
O que é HTML? HTML -> Hyper Text Markup Language (Linguagem de Marcação de Hiper Textos); É a linguagem usada para a criação e publicação de sites e páginas na internet; Um programa HTML nada mais é do que um arquivo de texto simples, contendo códigos (comandos) denominados tags, que indicam cada elemento da página.
O que é uma tag? São os códigos de marcação de texto usados para a criação do site. As tags são “etiquetas”, usadas para que o navegador exiba a página de acordo com a formatação definida pelos comandos HTML. É sempre precedida de um caractere “<” (menor que) e seguido de um caractere “>” (maior que) Exemplo de tag: <html>
O que é uma tag? Uma tag deve ter um correspondente, chamada de tag de fechamento (esta tag contém uma barra – “/”); Uma tag indica onde começa sua área de inflência, enquanto seu correspondente (tag de fechamento) indica onde termina a área de influência.
Exemplo de Linguagem HTML <head> <title>Olá Mundo</title> </head> <body> Olá mundo! </body> </html> Tag Tag de fechamento
Estrutura básica <html> Início do documento <head> Início do cabeçalho do documento <title> Início do título do documento </title> fim do título do documento </head> fim do cabeçalho do documento <body> início do conteúdo (corpo) do documento </body> fim do conteúdo (corpo) do documento </html> fim do documento
Programas que podem ser usados Bloco de Notas Dreamweaver Word Publisher
Nossa primeira página! <html> <head> <title>Olá Mundo</title> </head> <body> Olá mundo! </body> </html>
SEMPRE SALVE TEU ARQUIVO COM O NOME MAIS A EXTENSÃO ESCOLHIDA! IMPORTANTE! Os arquivos de Internet recebem extensão .html ou .htm Ou seja... SEMPRE SALVE TEU ARQUIVO COM O NOME MAIS A EXTENSÃO ESCOLHIDA! Exemplo: pagina007.html
Atributos da Tag Body <html> <head> Cor de fundo da página BG = background <html> <head> <title>Olá Mundo</title> </head> <body bgcolor=red text=white> Olá mundo! </body> </html> Cor do texto
Tente! Altere a cor de fundo do exercício anterior para amarelo e a cor da fonte para vermelho.
Cores RGB Esquema de cores baseado na combinação de Vermelho (Red), Verde (Green) e Azul (Blue). São combinadas as cores, no padrão hexadecimal (que varia de 0 até F), para obter a cor desejada: Ex.: 000000 preto
Alguns exemplos de cores RGB Nome Código Exemplo White (branco) #FFFFFF Yellow (amarelo) #FFFF00 Red (vermelho) #FF0000 Black (preto) #000000 Blue (azul) #0000FF Cyan (ciano) #00FFFF Green (verde) #00FF00 Você pode tanto usar o código hexadecimal, como também escrever o nome da fonte em inglês. Ex: <body bgcolor=#0000FF> ou <body bgcolor=blue>
Quebra de linha <html> <head> <title>Testando Quebra</title> </head> <body> Temos este texto. Há quebra de linha automaticamente? </body> </html>
<br> Quebra de Linha A quebra de linha não acontece porque, para o HTML, não há quebra quando você pressiona Enter! A quebra ocorre usando uma tag específica! <br>
Quebra de linha <html> <head> <title>Testando Quebra</title> </head> <body> Temos este texto.<br> Há quebra de linha automaticamente? </body> </html>
Quebra de Linha Pelo fato do código não ser influenciado pela tecla Enter, as quebras podem ser feitas de várias formas:
Exemplos de Quebras <body> Temos este texto.<br> Há quebra de linha automaticamente? </body> <body> Temos este texto. <br> Há quebra de linha automaticamente? </body> <body> Temos este texto.<br>Há quebra de linha automaticamente? </body>
Parágrafos <html> <head> <title>Parágrafos</title> </head> <body> <p>Primeiro parágrafo</p> Segundo parágrafo. </body> </html>
Parágrafos Outra forma de inserir um parágrafo é colocando apenas uma tag de início no meio de uma frase. Exemplo: <body> Primeiro parágrafo.<p>Segundo parágrafo. </body>
Títulos Ao usar títulos, consigo configurar o parágrafo em níveis, dependendo do tamanho especificado. Header (cabeçalho) <hn> Numeração do cabeçalho
Usando Títulos <html> <head> <title>Títulos</title> </head> <body> <h1>Cabeçalho nivel 1</h1> <h2>Cabeçalho nivel 1</h2> <h3>Cabeçalho nivel 1</h3> <h4>Cabeçalho nivel 1</h4> <h5>Cabeçalho nivel 1</h5> <h6>Cabeçalho nivel 1</h6> </body> </html>
Níveis de cabeçalho equivalentes aos tamanhos da fonte 24 pt H2 18 pt H3 14 pt H4 12 pt H5 10 pt H6 08 pt
Espaçamento No código HTML, ao redigir um texto, só é aceito 1 espaço entre frases e palavras. Para exibir mais de 1 espaço, há a necessidade de usar o código “ ”
Exemplo <html> <head> <title>Espaçamento</title> </head> <body> Farinha 1,99<p> Farinha 1,99 </body> </html>