View
232
Download
0
Category
Preview:
Citation preview
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>
• 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)
Recommended