html 1ª aula. o que é html? html -> hyper text markup language (linguagem de marcação de...
TRANSCRIPT
HTML1ª 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><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<html>
<head><title>Olá Mundo</title>
</head><body>
Olá mundo!</body>
</html>
TagTag
Tag de Tag de fechamentofechamento
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>
IMPORTANTE!
Os arquivos de Internet recebem extensão .html ou .htm
Ou seja...
SEMPRE SALVE TEU ARQUIVO COM O SEMPRE SALVE TEU ARQUIVO COM O NOME NOME MAISMAIS A EXTENSÃO ESCOLHIDA! A EXTENSÃO ESCOLHIDA!
Exemplo: pagina007.html
Atributos da Tag Body
<html><head>
<title>Olá Mundo</title></head><body bgcolor=red text=white>
Olá mundo!</body>
</html>
Cor de fundo da páginaBG = background
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 RGBNome 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>
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!
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.
<hn>
Header (cabeçalho)
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
H1 24 ptH2 18 pt
H3 14 pt
H4 12 pt
H5 10 pt
H608 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>