[Tuturial] Tags HTML
3 participantes
J&B :: Tecnologia :: Programação :: HTML
Página 1 de 1
![[Tuturial] Tags HTML Empty](https://2img.net/i/empty.gif)
[Tuturial] Tags HTML
por muka Seg Ago 10, 2009 5:29 pm
Fica aqui um " tutorial " sobre tags...antes de mais tags são comandos onde e encirido toda a base html..basicamente tudo que e feito em html e uzando as tags..queresmo fazer uma cabeçalho da um corpo a pagina e encerindo tags na pagina....
TAGS BÁSICAS
<html></html> <!-- Abrir e fechar HTML -->
<head></head> <!-- Cabeçalho -->
<title></title> <!-- Título -->
<body></body> <!-- Corpo da página -->
<h1></h1> <!-- Heading 1 -->
<h2></h2> <!-- Heading 2 -->
<h3></h3> <!-- Heading 3 -->
<h4></h4> <!-- Heading 4 -->
<h5></h5> <!-- Heading 5 -->
<h6></h6> <!-- Heading 6 -->
<p></p> <!-- Parágrafo -->
<br /> <!-- Quebra de linha -->
<hr /> <!-- Linha horizontal -->
<table></table> <!-- Tabela -->
<tr></tr> <!-- Linha de uma tabela -->
<td></td> <!-- Coluna de uma tabela -->
<a href="pagina.html" > <!-- Hiperligação -->
<form></form> <!-- Formulário -->
<input /> <!-- Input -->
<textarea></textarea> <!-- Área de texto -->
<label></label> <!-- " Legenda " -->
<fieldset></fieldset> <!-- " Legenda " -->
<legend></legend> <!-- Legenda -->
<select></select> <!-- Conjunto de opções -->
<optgroup></optgroup> <!-- Grupos de opções -->
<option></option> <!-- Opção -->
EXEMPLOS DE ATRIBUTOS
<p align="center"> <!-- Alinhar parágrafo ao centro -->
<p align="justify"> <!-- Alinhar parágrafo justificado -->
<p align="left"> <!-- Alinhar parágrafo à esquerda -->
<p align="right"> <!-- Alinhar parágrafo à direita -->
<table style=""> <!-- Usar para colocar Tag's CSS -->
<table class=""> <!-- Classe de um CSS -->
<table background="url_da_imagem.extensão"> <!-- Definir uma imagem de fundo -->
<table bgcolor=""> <!-- Definir uma cor de fundo -->
<table border=""> <!-- Definir a borda -->
<table bordercolor=""> <!-- Definir a cor da borda -->
<table cellpadding=""> <!-- Definir o espaço entre o texto e as bordas das <td>'s -->
<table cellspacing=""> <!-- Definir o espaçamento entre células -->
<table width=""> <!-- Definir a largura -->
<table height=""> <!-- Definir a altura -->
<td colspan=""> <!-- Unir colunas -->
<td rowspan=""> <!-- Unir linhas -->
<form enctype="application/x-www-form-urlencoded"> <!-- Método padrão -->
<form enctype="multipart/form-data"> <!-- Usado para upload -->
<form enctype="text/plain"> <!-- -->
<form method="get"> <!-- Envia os valores dos inputs pelo url -->
<form method="post"> <!-- Envia os valores ao servidor em um bloco de dados -->
<form name=""> <!-- Nome do formulário -->
<input type="button" /> <!-- Botão -->
<input type="checkbox" /> <!-- Escolher várias opções -->
<input type="file" /> <!-- Procurar um arquivo (usado normalmente para uploads) -->
<input type="hidden" /> <!-- Input escondido -->
<input type="password" /> <!-- Mostrar símbolos ao escrever, ao invés das letras/números/outros -->
<input type="radio" /> <!-- Várias opções das quais só podemos escolher uma -->
<input type="reset" /> <!-- Limpar o formulário -->
<input type="submit" /> <!-- Enviar o formulário -->
<input type="text" /> <!-- Input de texto -->
<label for=""> <!-- " Legenda " para 'nome_do_input' -->
<option value=""> <!-- Valor da opção -->
<img /> <!-- Imagem -->
FORMATAÇÃO DE TEXTOS
<strong></strong> <!-- Negrito -->
<em></em> <!-- Itálico -->
<small></small> <!-- Pequeno -->
<big></big> <!-- Grande -->
ATRIBUTOS DAS HIPERLIGAÇÕES
<a href="pagina.html" target="_blank"> <!-- Abre a página.html num novo separador -->
<a href="pagina.html" target="_parent"> <!-- Abre a página.html na frame "Pai" -->
<a href="pagina.html" target="_self"> <!-- Abre a página na mesma frame onde está a Hiperligação -->
<a href="pagina.html" target="_top"> <!-- -->
<a href="pagina.html" target="nome"> <!-- Abrir a página.html na frame "nome" -->
<a name="nome"> <!-- -->
<a title=""> <!-- Com o rato em cima da Hiperligação, msotra o que estiver entre aspas -->
<a accesskey=""> <!-- Atalho para Hiperligação -->
<a href="mailto:mail@mail.com?subject=ASSUNTO%20DO%20MAIL"> <!-- Abrir Out -->
CHAVES DE ACESSO
Mozilla Firefox 2.0 (e superior): Alt + Shift + Chave
Internet Explorer: Alt + Chave -> Enter
Opera: Shift + Esc + Chave
Amaya: Ctrl/Alt + Chave
Konqueror (Linux): Ctrl -> Chave
Outros browsers (PC): Alt + Chave
Outros browsers (Mac): Ctrl + Chave
LISTAS (Algumas usadas para menus)
<ol> <!-- Define uma lista ordenada -->
<ul> <!-- Define uma lista não ordenada -->
<li> <!-- Define um item da lista -->
<dl> <!-- Define uma lista -->
<dt> <!-- Define um termo -->
<dd> <!-- Define uma descrição -->
ATRIBUTOS E CARACTERÍSTICAS DOS INPUTS/BOTÕES
<input accesskey="" /> <!-- Atalho para input -->
<input class="" /> <!-- Classe de um CSS -->
<input maxlength="" /> <!-- Máximo número de caracteres -->
<input height="" /> <!-- Altura -->
<input id="" /> <!-- Id -->
<input name="" /> <!-- Nome -->
<input readonly="readonly" /> <!-- Apenas ler, isto é, o utilizador não pode mudar o seu valor -->
<input size="" /> <!-- Tamanho -->
<input value="" /> <!-- Valor por defeito -->
<input type="text" disabled="disabled" /> <!-- Desabilitado. Semelhante ao " readonly ", mas não dá para ler -->
<input type="radio" checked="checked" /> <!-- Valor selecionado pro defeito -->
<input type="checkbox" checked="checked" /> <!-- Valor selecionado pro defeito -->
<textarea cols=""> <!-- Largura -->
<textarea rows=""> <!-- Altura -->
ATRIBUTOS DAS IMAGENS
<img alt="" /> <!-- Descrição -->
<img height="" /> <!-- Altura -->
<img width="" /> <!-- Largura -->
<img title="" /> <!-- Título -->
EXEMPLOS
Documento Básico HTML
<html>
<head>
<title>Título da página</title>
</head>
<body>
Texto
</body>
</html>
Elementos Heading
<h1>A a a - Grande</h1>
<h2>A a a</h2>
<h3>A a a</h3>
<h4>A a a</h4>
<h5>A a a</h5>
<h6>A a a - Pequeno</h6>
Elemento de Texto
<p>Parágrafo</p>
<br>Quebra de linha
<hr>Linha horizontal
Estilos Lógicos
<em>Ênfatiz</em>
<strong>Forte</strong>
Estilos Físicos
<b>Negrito</b>
<i>Itálico</i>
Hiperligações
<a href="http://www.exemplo.com/">Hiperligação</a>
<a href="http://www.exemplo.com/"><img src="URL_DA_IMAGEM" alt="Texto alternativo"></a>
<a href="mailto:mail@mail.com">Enviar e-mail</a>
Hiperligações na mesma página
<a name="nome">Clica</a>
<a href="#nome">Vieste para aqui por teres clicado em "Clica"</a>
Lista Não Ordenada
<ul>
<li>Um</li>
<li>Dois</li>
</ul>
Lista Ordenada
<ol>
<li>Um</li>
<li>Dois</li>
</ol>
Lista de Definições
<dl>
<dt>Termo um</dt>
<dd>Definição</dd>
<dt>Termo dois</dt>
<dd>Definiçãp</dd>
</dl>
Tabelas
<table border="1">
<tr>
<td colspan="2">Junção de duas colunas</td>
</tr>
<tr>
<td>Coluna um</td>
<td>Coluna dois</td>
</tr>
</table>
Base de criação deste tuturial:portugal-a-pogramar
TAGS BÁSICAS
<html></html> <!-- Abrir e fechar HTML -->
<head></head> <!-- Cabeçalho -->
<title></title> <!-- Título -->
<body></body> <!-- Corpo da página -->
<h1></h1> <!-- Heading 1 -->
<h2></h2> <!-- Heading 2 -->
<h3></h3> <!-- Heading 3 -->
<h4></h4> <!-- Heading 4 -->
<h5></h5> <!-- Heading 5 -->
<h6></h6> <!-- Heading 6 -->
<p></p> <!-- Parágrafo -->
<br /> <!-- Quebra de linha -->
<hr /> <!-- Linha horizontal -->
<table></table> <!-- Tabela -->
<tr></tr> <!-- Linha de uma tabela -->
<td></td> <!-- Coluna de uma tabela -->
<a href="pagina.html" > <!-- Hiperligação -->
<form></form> <!-- Formulário -->
<input /> <!-- Input -->
<textarea></textarea> <!-- Área de texto -->
<label></label> <!-- " Legenda " -->
<fieldset></fieldset> <!-- " Legenda " -->
<legend></legend> <!-- Legenda -->
<select></select> <!-- Conjunto de opções -->
<optgroup></optgroup> <!-- Grupos de opções -->
<option></option> <!-- Opção -->
EXEMPLOS DE ATRIBUTOS
<p align="center"> <!-- Alinhar parágrafo ao centro -->
<p align="justify"> <!-- Alinhar parágrafo justificado -->
<p align="left"> <!-- Alinhar parágrafo à esquerda -->
<p align="right"> <!-- Alinhar parágrafo à direita -->
<table style=""> <!-- Usar para colocar Tag's CSS -->
<table class=""> <!-- Classe de um CSS -->
<table background="url_da_imagem.extensão"> <!-- Definir uma imagem de fundo -->
<table bgcolor=""> <!-- Definir uma cor de fundo -->
<table border=""> <!-- Definir a borda -->
<table bordercolor=""> <!-- Definir a cor da borda -->
<table cellpadding=""> <!-- Definir o espaço entre o texto e as bordas das <td>'s -->
<table cellspacing=""> <!-- Definir o espaçamento entre células -->
<table width=""> <!-- Definir a largura -->
<table height=""> <!-- Definir a altura -->
<td colspan=""> <!-- Unir colunas -->
<td rowspan=""> <!-- Unir linhas -->
<form enctype="application/x-www-form-urlencoded"> <!-- Método padrão -->
<form enctype="multipart/form-data"> <!-- Usado para upload -->
<form enctype="text/plain"> <!-- -->
<form method="get"> <!-- Envia os valores dos inputs pelo url -->
<form method="post"> <!-- Envia os valores ao servidor em um bloco de dados -->
<form name=""> <!-- Nome do formulário -->
<input type="button" /> <!-- Botão -->
<input type="checkbox" /> <!-- Escolher várias opções -->
<input type="file" /> <!-- Procurar um arquivo (usado normalmente para uploads) -->
<input type="hidden" /> <!-- Input escondido -->
<input type="password" /> <!-- Mostrar símbolos ao escrever, ao invés das letras/números/outros -->
<input type="radio" /> <!-- Várias opções das quais só podemos escolher uma -->
<input type="reset" /> <!-- Limpar o formulário -->
<input type="submit" /> <!-- Enviar o formulário -->
<input type="text" /> <!-- Input de texto -->
<label for=""> <!-- " Legenda " para 'nome_do_input' -->
<option value=""> <!-- Valor da opção -->
<img /> <!-- Imagem -->
FORMATAÇÃO DE TEXTOS
<strong></strong> <!-- Negrito -->
<em></em> <!-- Itálico -->
<small></small> <!-- Pequeno -->
<big></big> <!-- Grande -->
ATRIBUTOS DAS HIPERLIGAÇÕES
<a href="pagina.html" target="_blank"> <!-- Abre a página.html num novo separador -->
<a href="pagina.html" target="_parent"> <!-- Abre a página.html na frame "Pai" -->
<a href="pagina.html" target="_self"> <!-- Abre a página na mesma frame onde está a Hiperligação -->
<a href="pagina.html" target="_top"> <!-- -->
<a href="pagina.html" target="nome"> <!-- Abrir a página.html na frame "nome" -->
<a name="nome"> <!-- -->
<a title=""> <!-- Com o rato em cima da Hiperligação, msotra o que estiver entre aspas -->
<a accesskey=""> <!-- Atalho para Hiperligação -->
<a href="mailto:mail@mail.com?subject=ASSUNTO%20DO%20MAIL"> <!-- Abrir Out -->
CHAVES DE ACESSO
Mozilla Firefox 2.0 (e superior): Alt + Shift + Chave
Internet Explorer: Alt + Chave -> Enter
Opera: Shift + Esc + Chave
Amaya: Ctrl/Alt + Chave
Konqueror (Linux): Ctrl -> Chave
Outros browsers (PC): Alt + Chave
Outros browsers (Mac): Ctrl + Chave
LISTAS (Algumas usadas para menus)
<ol> <!-- Define uma lista ordenada -->
<ul> <!-- Define uma lista não ordenada -->
<li> <!-- Define um item da lista -->
<dl> <!-- Define uma lista -->
<dt> <!-- Define um termo -->
<dd> <!-- Define uma descrição -->
ATRIBUTOS E CARACTERÍSTICAS DOS INPUTS/BOTÕES
<input accesskey="" /> <!-- Atalho para input -->
<input class="" /> <!-- Classe de um CSS -->
<input maxlength="" /> <!-- Máximo número de caracteres -->
<input height="" /> <!-- Altura -->
<input id="" /> <!-- Id -->
<input name="" /> <!-- Nome -->
<input readonly="readonly" /> <!-- Apenas ler, isto é, o utilizador não pode mudar o seu valor -->
<input size="" /> <!-- Tamanho -->
<input value="" /> <!-- Valor por defeito -->
<input type="text" disabled="disabled" /> <!-- Desabilitado. Semelhante ao " readonly ", mas não dá para ler -->
<input type="radio" checked="checked" /> <!-- Valor selecionado pro defeito -->
<input type="checkbox" checked="checked" /> <!-- Valor selecionado pro defeito -->
<textarea cols=""> <!-- Largura -->
<textarea rows=""> <!-- Altura -->
ATRIBUTOS DAS IMAGENS
<img alt="" /> <!-- Descrição -->
<img height="" /> <!-- Altura -->
<img width="" /> <!-- Largura -->
<img title="" /> <!-- Título -->
EXEMPLOS
Documento Básico HTML
<html>
<head>
<title>Título da página</title>
</head>
<body>
Texto
</body>
</html>
Elementos Heading
<h1>A a a - Grande</h1>
<h2>A a a</h2>
<h3>A a a</h3>
<h4>A a a</h4>
<h5>A a a</h5>
<h6>A a a - Pequeno</h6>
Elemento de Texto
<p>Parágrafo</p>
<br>Quebra de linha
<hr>Linha horizontal
Estilos Lógicos
<em>Ênfatiz</em>
<strong>Forte</strong>
Estilos Físicos
<b>Negrito</b>
<i>Itálico</i>
Hiperligações
<a href="http://www.exemplo.com/">Hiperligação</a>
<a href="http://www.exemplo.com/"><img src="URL_DA_IMAGEM" alt="Texto alternativo"></a>
<a href="mailto:mail@mail.com">Enviar e-mail</a>
Hiperligações na mesma página
<a name="nome">Clica</a>
<a href="#nome">Vieste para aqui por teres clicado em "Clica"</a>
Lista Não Ordenada
<ul>
<li>Um</li>
<li>Dois</li>
</ul>
Lista Ordenada
<ol>
<li>Um</li>
<li>Dois</li>
</ol>
Lista de Definições
<dl>
<dt>Termo um</dt>
<dd>Definição</dd>
<dt>Termo dois</dt>
<dd>Definiçãp</dd>
</dl>
Tabelas
<table border="1">
<tr>
<td colspan="2">Junção de duas colunas</td>
</tr>
<tr>
<td>Coluna um</td>
<td>Coluna dois</td>
</tr>
</table>
Base de criação deste tuturial:portugal-a-pogramar
muka- Admin
- Mensagens : 353
Data de inscrição : 26/06/2009
Idade : 33
Localização : Famalicão -
ACluis- J&B
- Mensagens : 144
Data de inscrição : 26/06/2009
Idade : 31
Localização : calendas
Susanne- J&B Espetacular
- Mensagens : 998
Data de inscrição : 10/06/2009
Idade : 30
Localização : Terra :o
Tópicos semelhantes» [Tuturial] O que é o HTML?
» [Tutorial] linck html
» [tuturial] PC numa mala!
» [tuturial] Meter fundo em pasta/pen usb
» [duvida] html e CSS
» [Tutorial] linck html
» [tuturial] PC numa mala!
» [tuturial] Meter fundo em pasta/pen usb
» [duvida] html e CSS
J&B :: Tecnologia :: Programação :: HTML
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|