Iniciação em HTML
26
Iniciação em HTML Gustavo Teodoro
-
Upload
gustavo-teodoro -
Category
Documents
-
view
1.265 -
download
0
Transcript of Iniciação em HTML
Iniciação em HTMLGustavo Teodoro
Preparação
É importante que os arquivos do site estejam em uma pasta única, isso facilita ao publicar o seu site. Outra regra básica também é sempre salvar a página inicial do seu site como index.html pois assim o navegador reconhece como homepage e ao digitar o endereço do seu site (www.meusite.com) ele abre a index.html por padrão. Lembre-se de salvar sempre .html
Algumas TAGs de HTML
<!DOCTYPE html><html><body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body></html>
Títulos
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
Parágrafos
<p>Este é um parágrafo.</p><p>Este é outro parágrafo.</p>
Links
<a href="http://www.fb.com">Isto é um link</a>
Imagens
<img src="w3schools.jpg" width="104" height="142">
Atributos e referências
Atributos Descrição
class Especificar uma ou mais classes para um elemento (refira a classe na folha de estilo)
id Especificar um único ID para um elemento.
Linhas
<p>Este é um parágrafo.</p><hr><p>Este é um parágrafo.</p><hr><p>Este é um parágrafo.</p>
Comentários
<!-- Este é um comentário -->
Quebra de linhas
<p>Este é<br>um pará<br>grafo com quebra de linhas</p>
Tag Descrição
<b> Define texto em negrito
<em> Define um texto com ênfase
<i> Define um texto em itálico
<small> Define um texto em pequeno
<strong> Define um texto importante
<sub> Define um texto subscrito
<sup> Define um texto superescrito
<ins> Define um texto sublinhado
<del> Define um texto deletado (riscado)
<mark> Define um texto marcado
FORMATAÇÃO DE TEXTO
Tag Descrição
<head> Define informação sobre o documento
<title> Define um título de documento
<link> Define a relação com um documento externo
<meta> Define metadata sobre um documento HTML
<script> Define um script
<style> Define informações de estilo em um documento
HEAD tags
Tipos de estilo - Direto no código
<!DOCTYPE html><html>
<body><h1 style="text-align:center;">Título alinhado ao centro</h1><p>Este é um parágrafo.</p></body>
</html>
Tipos de estilo - CSS interna
<head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style></head>
Tipos de estilo - CSS externa (recomendado)
<head><link rel="stylesheet" type="text/css" href="meuestilo.css"></head>
Tabela
<table border="1"><tr><td>linha 1, coluna 1</td><td>linha 1, coluna 2</td></tr><tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr></table>
TABELASTag Description
<table> Define uma tabela
<th> Define o cabeçalho de uma coluna (célula) na tabela
<tr> Define uma linha na tabela
<td> Define uma coluna na tabela (célula)
<caption>
Define uma legenda para a tabela
Lista não ordenada
<ul><li>Café</li><li>Leite</li></ul>
Lista ordenada
<ol><li>Café</li><li>Leite</li></ol>
Lista descritiva
<dl><dt>Café</dt><dd>- bebida quente preta.</dd><dt>Leite</dt><dd>- bebida gelada branca</dd></dl>
LISTAS
Tag Descrição
<ol> Define uma lista ordenada
<ul> Define uma lista não ordenada
<li> Define um item de lista
<dl> Defina uma lista de descrição
<dt> Define um termo ou o nome em uma lista de descrição
<dd> Define a descrição do termo ou do nome
Blocos
<DIV><SPAN>
DIV<!DOCTYPE html><html><body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>Menu</b><br>HTML<br>CSS<br>JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © W3Schools.com</div>
</div>
</body></html>
CoresCores Cor HEX Cor RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
