HTML - HyperText Markup Language - 2

index.html

• 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>

• 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>

• 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>

• Contém o título da página;

<title></title>

• É 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>

• 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">

<meta http-equiv="refresh"

content=“10;

url=http://google.com">

• 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>

• Principais atributos

<div class="titulo-maior"></div>

class: pode-se repetir no html

• Principais atributos

<div id="titulo-cabecalho"></div>

id: é único em todo html

• Atributos de tags

<body bgcolor="#73A57E" text="#52D648">

Corpo da página

</body>

https://coolors.co/

https://coolors.co/

• Direciona para outra página, link ou arquivo.

<a></a>

<a href="http://www.google.com.br">Google</a>

• 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>

• 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>

• 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>

• Utilizado quando é necessário que se faça uma quebra de linha em uma frase.

<br>

• Cria uma linha horizontal no documento, também utilizada para separar seções de

informação.

<hr>

• Cria uma lista não ordenada.

<ul></ul>

• Cria um item em uma lista não ordenada.

<li></li>

• Lista não ordenada completa

<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

• Mudando o indicador

<ul type="circle">

<li>Item 1</li>

<li>Item 2</li>

</ul>

• Cria uma lista ordenada.

<ol></ol>

• Lista ordenada completa

<ol>

<li>Ouro</li>

<li>Prata</li>

<li>Bronze</li>

</ol>

• Mudando indicador/Iniciando indicador

<ol start="5" type="A">

<li>Ouro</li>

<li>Prata</li>

<li>Bronze</li>

</ol>

<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>

• HTML Princípios Básicos - (http://pt.slideshare.net/mayzaoliveira/htmlprincipiosbasicos)

• Tutorial de HTML - Tabelas (http://www.clem.ufba.br/tuts/html/c09.htm)

Software

HTML - HyperText Markup Language - 2