HTML - HyperText Markup Language - 2
-
Upload
israel-messias -
Category
Software
-
view
221 -
download
0
Transcript of HTML - HyperText Markup Language - 2
![Page 1: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/1.jpg)
![Page 2: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/2.jpg)
![Page 3: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/3.jpg)
index.html
![Page 4: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/4.jpg)
• Esta declaração deve ser a primeira coisa em seu documento HTML, antes da tag <html>.
• O <! DOCTYPE> declaração não é uma tag HTML; é uma instrução para o navegador da
web sobre qual versão do HTML da página é escrito.
<!DOCTYPE HTML>
![Page 5: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/5.jpg)
• Essa TAG indica o começo e o final do documento HTML.
• Instruções - códigos - que possuem funções especificas.
• Códigos interpretados pelo navegador
<html></html>
![Page 6: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/6.jpg)
![Page 7: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/7.jpg)
• Indica onde começa e termina o cabeçalho do documento html, que contém informações
específicas e que não são exibidas no navegador, apesar de existirem e possuírem
enorme importância;
<head></head>
![Page 8: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/8.jpg)
• Contém o título da página;
<title></title>
![Page 9: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/9.jpg)
• É o corpo do documento HTML, é onde são inseridos todos os elementos – textos, links,
imagens - o que queremos que apareçam na nossa página.;
<body></body>
![Page 10: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/10.jpg)
• Mais uma tag "invisível"
• Ordena informações no cabeçalho da página <head> e define o que ele contém;
• Fornece informações que podem ser utilizadas pelos mecanismos de busca na web.
• http-equiv: Faz uma correspondência com campos de cabeçalho do protocolo HTTP. Uma ação é
desencadeada quando lidos pelo navegador;
• content: Especifica meta-informação para que seja associada com o valor especificado no http-equiv.
<meta http-equiv="content-type"
content=“text/html; charset=utf-8">
![Page 11: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/11.jpg)
<meta http-equiv="refresh"
content=“10;
url=http://google.com">
![Page 12: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/12.jpg)
• As tags possuem atributos, que são informações que passamos para que ela se comporte
de determinada maneira.
• Atributos globais: class, id, acesskey, draggable, hidden, lang, style, tabindex, title.
<button class="btn-red">Cancelar</button>
![Page 13: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/13.jpg)
• Principais atributos
<div class="titulo-maior"></div>
class: pode-se repetir no html
![Page 14: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/14.jpg)
• Principais atributos
<div id="titulo-cabecalho"></div>
id: é único em todo html
![Page 15: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/15.jpg)
• Atributos de tags
<body bgcolor="#73A57E" text="#52D648">
Corpo da página
</body>
![Page 16: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/16.jpg)
![Page 17: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/17.jpg)
• Direciona para outra página, link ou arquivo.
<a></a>
<a href="http://www.google.com.br">Google</a>
![Page 18: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/18.jpg)
• Utilizada para formatar um título ou tópico de uma seção.
• Disponibiliza 6 níveis
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
![Page 19: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/19.jpg)
• Delimita parágrafos e insere o espaço de uma linha em branco entre eles.
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
![Page 20: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/20.jpg)
• Atributos:
• align: define uma posição de alinhamento para o elemento que está sendo
formatado pela tag.
• Os valores podem ser: left: esquerda; center: centralizado; right: direita; justify:
justificado;
<p align="left">Primeiro parágrafo</p>
<p align="center">Segundo parágrafo</p>
![Page 21: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/21.jpg)
• Utilizado quando é necessário que se faça uma quebra de linha em uma frase.
<br>
![Page 22: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/22.jpg)
• Cria uma linha horizontal no documento, também utilizada para separar seções de
informação.
<hr>
![Page 23: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/23.jpg)
• Cria uma lista não ordenada.
<ul></ul>
![Page 24: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/24.jpg)
• Cria um item em uma lista não ordenada.
<li></li>
![Page 25: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/25.jpg)
• Lista não ordenada completa
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
![Page 26: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/26.jpg)
• Mudando o indicador
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
</ul>
![Page 27: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/27.jpg)
• Cria uma lista ordenada.
<ol></ol>
![Page 28: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/28.jpg)
• Lista ordenada completa
<ol>
<li>Ouro</li>
<li>Prata</li>
<li>Bronze</li>
</ol>
![Page 29: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/29.jpg)
• Mudando indicador/Iniciando indicador
<ol start="5" type="A">
<li>Ouro</li>
<li>Prata</li>
<li>Bronze</li>
</ol>
![Page 30: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/30.jpg)
<a></a>
<html></html>
<head></head>
<title></title>
<body></body>
<meta>
<h1></h1> - <h6></h6>
<p></p>
<br>
<hr>
<ul></ul>
<li></li>
<ol></ol>
![Page 31: HTML - HyperText Markup Language - 2](https://reader036.fdocument.pub/reader036/viewer/2022081723/589be7ad1a28aba5108b6caf/html5/thumbnails/31.jpg)
• HTML Princípios Básicos - (http://pt.slideshare.net/mayzaoliveira/htmlprincipiosbasicos)
• Tutorial de HTML - Tabelas (http://www.clem.ufba.br/tuts/html/c09.htm)