html 1ª aula. o que é html? html -> hyper text markup language (linguagem de marcação de...
TRANSCRIPT
![Page 1: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/1.jpg)
HTML1ª aula
![Page 2: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/3.jpg)
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>
![Page 4: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/4.jpg)
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.
![Page 5: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/5.jpg)
Exemplo de Linguagem HTML<html>
<head><title>Olá Mundo</title>
</head><body>
Olá mundo!</body>
</html>
TagTag
Tag de Tag de fechamentofechamento
![Page 6: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/7.jpg)
Programas que podem ser usados• Bloco de Notas • Dreamweaver
• Word • Publisher
![Page 8: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/8.jpg)
Nossa primeira página!
<html><head>
<title>Olá Mundo</title></head><body>
Olá mundo!</body>
</html>
![Page 9: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/11.jpg)
Tente!
• Altere a cor de fundo do exercício anterior para amarelo e a cor da fonte para vermelho.
![Page 12: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/12.jpg)
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
![Page 13: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/13.jpg)
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>
![Page 14: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/14.jpg)
Quebra de linha
<html><head>
<title>Testando Quebra</title></head><body>
Temos este texto.Há quebra de linha automaticamente?
</body></html>
![Page 15: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/15.jpg)
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!
![Page 16: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/16.jpg)
Quebra de linha
<html><head>
<title>Testando Quebra</title></head><body>
Temos este texto.<br>Há quebra de linha automaticamente?
</body></html>
![Page 17: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/17.jpg)
Quebra de Linha
• Pelo fato do código não ser influenciado pela tecla Enter, as quebras podem ser feitas de várias formas:
![Page 18: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/18.jpg)
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>
![Page 19: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/19.jpg)
Parágrafos
<html><head>
<title>Parágrafos</title></head><body>
<p>Primeiro parágrafo</p>Segundo parágrafo.
</body></html>
![Page 20: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/20.jpg)
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>
![Page 21: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/21.jpg)
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
![Page 22: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/22.jpg)
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>
![Page 23: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/23.jpg)
![Page 24: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/25.jpg)
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 “ ”
![Page 26: 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](https://reader033.vdocuments.site/reader033/viewer/2022051014/552fc15e497959413d8e5e55/html5/thumbnails/26.jpg)
Exemplo<html>
<head>
<title>Espaçamento</title>
</head>
<body>
Farinha 1,99<p>
Farinha 1,99
</body>
</html>