Introdução às tags HTML

Introdução ao HTML
https://www.facebook.com/alvarofpinheiroaulas/
br.linkedin.com/in/alvarofpinheiro/
http://www.alvarofpinheiro.eti.br

World Wide Web (WWW)
A World Wide Web (WWW) é mais frequentemente chamada de
a Web (Teia) e é a denominação dada a uma rede de
computadores ao redor do mundo. Todos os computadores na
Web podem comunicar-se uns com os outros. Todos os
computadores usam um padrão de comunicação chamado HTTP.
A informação na Web é armazenada em documentos chamados
páginas Web. As páginas Web são arquivos armazenados em
computadores chamados servidores Web. Os computadores que
interpretam as páginas Web são chamados clientes Web. Os
Clientes Web carregam as páginas com um programa chamado
navegador Web.

Hyper Text Markup Language (HTML)
HTML significa Linguagem de Marcação de Hipertexto. Um
arquivo HTML é um arquivo de texto contendo pequenas
etiquetas de marcação (markup tags). As marcações dizem para
o navegador Web como mostrar a página. Um arquivo HTML
deve ter uma extensão de arquivo htm ou html. Um arquivo
HTML pode ser criado usando um simples editor de textos.

Document Type Definition (DTD)
Um documento HTML é validado em relação a uma DTD, isto é,
Definição de Tipo de Documento. Antes que um arquivo HTML
possa ser apropriadamente validado, uma DTD correto deve ser
adicionado como primeira linha do arquivo.
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EM " "http://www.w3.org/TR/html4/strict.dtd">

Tags - Cabeçalho
<!DOCTYPE> Define o tipo do documento
<html> Tag de início
<head> Define informação sobre o documento
<title> Define o título do documento
<base> Define o URL base para todos os vínculos numa página
<link> Define a referência do recurso
<meta> Define meta informação
<html>
<head>
<title>Título da página</title>
</head>
<body>
Esta é minha primeira página. <b>Este texto está em negrito</b>
</body>
</html>

Tags - Página
<html> Define um documento HTML
<body> Define o corpo do documento
<h1> a <h6> Define título 1 a título 6
<p> Define um parágrafo
<br> Insere uma única quebra de linha
<hr> Define uma linha horizontal
<!--> Define um comentário

Tags - Tabela
<table> Define uma tabela
<th> Define um cabeçalho de tabela
<tr> Define uma linha de tabela
<td> Define uma célula de tabela
<caption> Define um título de tabela
<colgroup> Define um grupo de colunas de tabela
<col> Define os valores de atributo para colunas em uma tabela
<thead> Define um cabeçalho de tabela
<tbody> Define o corpo de uma tabela
<tfoot> Defines o rodapé (footer) de uma tabela

Tags - Tabela
<table>
<tr>
<td>
linha 1, célula 1
</td>
<td>
linha 1, célula 2
</td>
</tr>
<tr>
<td>
linha 2, célula 1
</td>
<td>
linha 2, célula 2
</td>
</tr>
</table>

Tags - Estilo
<style> Define uma definição de estilo
<div> Define uma seção num documento
<span> Define uma seção num documento

Tags - Vínculo
<a href> Víncula um arquivo
File Acessa um arquivo no seu PC local
ftp Acessa um arquivo num servidor FTP
http Acessa um arquivo num Servidor Web
news Acessa um grupo de notícias Usenet
telnet Acessa uma conexão Telnet
mailto Acessa um e-mail
<a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a>
<a href="mailto:someone@w3schools.com">someone@w3schools.com</a>
<a href="news:alt.html">Grupo de Notícias de HTML</a>

Tags -Âncora
<a href="http://www.w3schools.com/">Visite as W3Schools!</a>
<a href="http://www.w3schools.com/" target="_blank">Visite as W3Schools!</a>
<a href="http://www.w3schools.com/html_links.asp">Dicas Úteis</a>

Tags - Script
<script> Define a script
<noscript> Texto alternativo se o script não for executado
<object> Define um objeto (embedded)
<param> Define configurações run-time para um objeto
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Oi Mundo!")
</script>
</body>
</html>

Tags - Texto
<h1>Este é um título</h1>
<p>Este é um parágrafo</p>
<p>Este é outro parágrafo</p>
<p>Este <br> é um pará<br>grafo com quebras de linha</p>

Tags - Formatação
<b> Define texto em negrito
<big> Define texto grande
<em> Define texto enfatizado;
<i> Define texto em itálico
<small> Define texto pequeno
<strong> Define texto forte
<sub> Define texto subescrito
<sup> Define texto superescrito

Tags - Entrada
<form>
Primeiro nome:
<input type="text" name="firstname">
<br>
Último nome:
<input type="text" name="lastname">
</form>

Tags - Saída
<code> Define texto de código de computador
<kbd> Define texto de teclado
<samp> Define amostra de código de computador
<tt> Define texto de teletipo
<var> Define uma variável
<pre> Define texto pré-formatado

Tags - Controle
<form> Define um formulário para entradas do usuário
<input> Define um campo de entrada
<textarea> Define controle de entrada de texto multi-linhas
<label> Define um rótulo para um controle
<fieldset> Define um conjunto de campos
<legend> Define um título para um conjunto de campos
<select> Define uma lista selecionável (uma caixa drop-down)
<optgroup> Define um grupo de opção
<option> Define uma opção em uma caixa drop-down
<button> Define um botão para pressionar

Tags - Botões
Botões Radiais:
<form>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name="sex" value="female"> Feminino
</form>
Caixas de Seleção:
<form>
<input type="checkbox" name="bike"> Eu tenho uma bicicleta
<br>
<input type="checkbox" name="car"> Eu tenho um carro
</form>

Tags - Listas
Listas Não Ordenadas: Uma lista não ordenada é uma lista de
itens. As listas de itens são marcadas com bullets.
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
Listas ordenadas: Uma lista ordenada é também uma lista de
itens. As listas de itens são marcadas com números.
<ol>
<li>Café</li>
<li>Leite</li>
</ol> http://www.alvarofpinheiro.eti.br

Tags - Imagem
<img> Define uma imagem
<map> Define um mapa de imagem
<area> Define uma área dentro de um mapa de imagem
<img src="url">
O atributo alt é usado para definir um "texto alternativo" para
uma imagem. O valor do atributo alt é um texto definido pelo
autor:
<img src="boat.gif" alt="Big Boat">

Tags - Background
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Tags – Estilo
Folha de Estilo Externa
<head>
<link rel="stylesheet" type="text/css" href="meuestilo.css">
</head>
Folha de Estilo Interna
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Estilos Local (inline)
<p style="color: red; margin-left: 20px">
Este é um parágrafo
</p> http://www.alvarofpinheiro.eti.br

Tags – HTML5
<embed> inserir conteúdo externo
<video> inserir vídeos
<audio> inserir audio stream
<source> inserir vídeo ou audio

Introdução às tags HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Semelhante a Introdução às tags HTML

Semelhante a Introdução às tags HTML (20)

Mais de Álvaro Farias Pinheiro

Mais de Álvaro Farias Pinheiro (18)

Introdução às tags HTML