Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do...
Transcript of Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do...
![Page 1: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/1.jpg)
Disciplina:
http://edmilsoncampos.net
Edmilson Campos, Prof. MsC.
Estrutura básica do HTML, tags de cabeçalhos, linha, center, parágrafo, estilo de texto, cor de fundo e imagem de fundo.
AULA 02
Autoria Web
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 2: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/2.jpg)
▪
▪ <> </>
▪ <tag> conteúdo </tag>
▪
Para a construção das nossas páginas (X)HTML, usaremos umsoftware gratuito chamado Notepad++, o qual se encontradisponível para download em https://notepad-plus-plus.org/
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 3: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/3.jpg)
▪ <html></html>
▪ <head></head>
▪ <title> </title> <head>
▪ <body> </body>
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 4: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/4.jpg)
<html>
</html>
<head>
</head>
<title> </title>
<body>
</body>
Página Inicial
Aqui são colocados os comandos HTML, textos e imagens.
Indica ao browser que o conteúdo do arquivo é html
Fecha a tag html
Informações sobre a página web
Fecha a tag head
Delimita o corpo da página
Fecha a tag body
Mostra o título da página no
topo do browser
Exercício:Usando o Bloco de notas, digite odocumento HTML acima, salve-ocom o nome de “pagina1.html” eabra-o em um browser.
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 5: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/5.jpg)
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 6: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/6.jpg)
▪ <h> </h>
<h1> Cabeçalho Grande </h1>
<h6> Cabeçalho Pequeno </h6>
▪ <center>
<center> </center>
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 7: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/7.jpg)
<center><h1> </h1><h2> </h2><h3> </h3><h4 > </h4><h5 > </h5>
</center><h6 > </h6>
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 8: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/8.jpg)
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 9: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/9.jpg)
• Crie uma página HTML semelhante à estrutura abaixo:
IFRN, Natal-Zona Norte
Áreas
1. Informática e ManutençãoModalidades: Integrado Regular, Licenciatura e Subsequente
2. Comércio e MarketingModalidades: Integrado Regular, Integrado EJA, Tecnólogo
3. EletrônicaModalidade: Integrado Regular
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 10: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/10.jpg)
Quem dera, eu ser ator<br />Fazer parte desta cena de amor<br />Numa tela de cinema, pra o mundo ver<br />Só você, só você, só você é o meu amor
▪
<p>
▪<br />
<p align = “center”>Me perco, nos teu lábios de mel </p><p align=“left”>E vejo a força da paixão </p><p align = “right”>É fogo com pétalas de flor </p><p>Provei do teu beijo e deu um sacolejo no meu coração</p>
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 11: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/11.jpg)
▪ <hr>
hr size width▪
» width
» size
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 12: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/12.jpg)
hr size=8 /<p> </p><p> </p><p> </p>
<br /><br />
<br />
hr width=70% />
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 13: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/13.jpg)
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 14: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/14.jpg)
Estilo Sintaxe Função
Negrito <b> Texto </b> Deixa o texto em negrito
Itálico <i> Texto </i> Deixa o texto em Itálico
Sublinhado <u> Texto </u> Deixa o texto sublinhado
Sobrescrito <sup> Texto </sup> Deixa o texto sobrescrito
Subscrito <sub> Texto </sub> Deixa o texto subscrito
Letreiro <marquee>Texto</marquee> Cria o efeito da proteção de tela "Marquee"
do Windows.
Pulsante <blink> Texto </blink> Cria um efeito "pisca-pisca" no texto
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 15: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/15.jpg)
<i> </i>hr size=8
<p><b> </b></p><p> </p><p><b> </b></p>
<br /><br />
<b> </b><br />
hr width=70%
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 16: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/16.jpg)
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 17: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/17.jpg)
Texto pulsante (blink)
▪
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 18: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/18.jpg)
COR HEXADECIMAL
Black ( Preto ) #000000
White ( Branco ) #FFFFFF
Yellow ( Amarelo ) #FFFF00
Blue ( Azul ) #0000FF
Green ( Verde ) #00FF00
Dark Green (Verde escuro) #2F4F2F
Red ( Vermelho ) #FF0000
Magenta ( Rosa ) #FF00FF
Cyan ( Ciano ) #00FFFF
▪ <body> BGCOLOR»
<body bgcolor="BLUE">
<body bgcolor="#0000FF">
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 19: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/19.jpg)
body bgcolor
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 20: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/20.jpg)
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 21: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/21.jpg)
▪
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 22: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/22.jpg)
▪ background
background
background
▪ bgcolor text
bgcolor text
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 23: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/23.jpg)
background
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRNAdaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 24: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/24.jpg)
![Page 25: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/25.jpg)
▪
Adaptado dos professores Alicsson Vale e Fábio Procópio, IFRN
![Page 26: Estrutura básica do HTML, tags de cabeçalhos, linha ... · Indica ao browser que o conteúdo do arquivo é html Fecha a tag html Informações sobre a página web Fecha a tag head](https://reader036.fdocumentos.com/reader036/viewer/2022062920/5f02643e7e708231d4040baf/html5/thumbnails/26.jpg)
▪
▪
▪
▪