Aprendendo HTML e CSS: HTML

Mostrando postagens com marcador HTML. Mostrar todas as postagens

Principais TAGS do HTML

Confira abaixo as principais tags do html

Tags estruturais

<!– –>

Cria um comentário

<html> </html>

Envolve todo um documento html

<head> </head>

Envolve o cabeçalho de um documento html

<meta >

Fornece informações gerais sobre o documento

<style> </style>

Informações de estilo

<script> </script>

Linguagem script

<noscript> </noscript>

Conteúdo alternativo para quando a linguagem script não for suportada

<title> </title>

O título do documento

<body> </body>

Envolve o corpo (texto e tags) do documento html

bgcolor – Cor de fundo #RRGGBB
background – Imagem como plano de fundo
text – Cor do texto principal
link – Cor dos links existentes na página
vlink – Cor do link já visitado
alink – Cor do link que foi ativado
marginheight – Elimina a margem esquerda apenas no Netscape
marginwidth – Elimina a margem no topo da página apenas no Netscape
topmargin – Elimina a margem no topo da página apenas no Internet Explorer
leftmargin – Elimina a margem esquerda apenas no Internet Explorer

Cabeçalhos

<hn> </hn>

Cabeçalho nível n para n de 1 a 6

Parágrafos

<p> </p>

Um simples páragrafo

align – Alinhamento do parágrafo: left, right, center e justify

Listas

<ol> </ol>

Uma lista ordenada

start – Define a partir de qual número a listagem começa
type – Tipos de caracteres ordenados: A, a, I, i, 1

<ul> </ul>

Uma lista não ordenada

type – Tipos de caracteres não ordenados: disk, square, circle

<li> </li>

Um item da lista

value – Numeração individual do item da lista
type – Tipos de caracteres ordenados: A, a, I, i e 1 para listagem ordenada e disk, square e circle para não ordenada

<menu> </menu>

Um menu com uma lista de itens

<dir> </dir>

Uma listagem de diretórios

<dl> </dl>

Uma lista de definições ou glossário

<dt> </dt>

Marca o texto especificado como um termo de definição de um glossário

<dd> </dd>

Especifica o texto referente a um termo criado pela tag <dt> dentro de uma lista de definição

Formatação de caracteres

<em> </em>

Maior ênfase em itálico

<strong> </strong>

Maior ênfase em negrito

<code> </code>

Amostra de código

<kbd> </kbd>

Texto a ser digitado

<var> </var>

Uma variável ou espaço reservado para um outro valor

<samp> </samp>

Texto de amostra

<dfn> </dfn>

Aplica um formatação no texto definido como termo de um glossário

<cite> </cite>

Uma citação

<b> </b>

Texto em negrito

<i> </i>

Texto em itálico

<u> </u>

Texto sublinhado

<tt> </tt>

Fonte monoespaçada (texto semelhante à maquina de escrever)

<pre> </pre>

Texto pré-formatado

<strike> </strike>

Texto riscado

<s> </s>

Texto tachado

<sub> </sub>

Texto subscrito

<sup> </sup>

Texto sobrescrito

<big> </big>

Texto em fonte maior do que o padrão

<small> </small>

Texto em fonte menor do que o padrão

<blink> </blink>

Texto piscando somente no Nestcape

<marquee> </marquee>

Texto animado no Internet Explorer

Outros elementos

<hr>

Uma régua horizontal

size – Espessura da linha em pixels
width – Largura da linha em pixels ou porcentagem
align – Alinhamento da linha em center, left, right
color – Cor da linha em #RRGGBB
noshade – Linha sólida

<br>

Uma quebra de linha

<center> </center>

Centralizar

<div> </div>

Conteúdo

align – Alinhamento: left, center e right

<blockquote> </blockquote>

Texto com mais margem

<address> </address>

Assinaturas ou informações gerais sobre o autor de um documento

<font> </font>

Alterna tamanho , cor e tipo de fonte exibida

size – O tamanho da fonte varia de 1 a 7
color – A cor da fonte #RRGGBB
face – O tipo da fonte

<basefonte>

Define o tamanho padrão para a fonte na página atual

size – O tamanho da fonte varia de 1 a 7

Imagens

<img>

Insere uma imagem in-line no documento e inclui atributos comuns

usemap – Um mapa de imagens do lado cliente
src – O URL da imagem
alt – Uma string de texto que será exibida em navegadores que não possam suportar imagens
align – Determina o alinhamento de uma determinada imagem: top, middle, bottom, left e right
height – É a altura sugerida em pixels
width – É a extensão sugerida em pixels
vspace – O espaço entre a imagem e o texto acima e abaixo dela
hspace – O espaço entre a imagem e o texto à esquerda e à direita dela
border – Largura da borda

Frames

<frameset> </frameset>

Define um frameset

rows – Número de linhas no frame
cols – Número de colunas no frame
frameborder – Borda do frame
framespacing – Espaçamento
onload – É um evento intrínseco
onunload – É um evento intrínseco

<frame> </frame>

Define um frameset

name – É o nome do frame-alvo
src – Chama a fonte de conteúdo do frame
frameborder – Determina a borda do frame
marginheight – Determina a largura das margens
noresize – Determina a capacidade de redimensionar frames
scrolling – Determina a capacidade de rolagem dentro dos frames: auto, yes e no

<iframe> </iframe>

Define um frame in-line

<noframes> </noframes>

Alterna o conteúdo quando os frames não são suportados

Tabelas

<table> </table>

Cria uma tabela

background – Imagem de plano de fundo
bgcolor – Cor de plano de fundo
border – Largura da borda em pixels
cols – Número de colunas
cellpadding – Espaçamento nas células
cellspacing – Espaçamento entre as células
width – Largura da tabela
align – Alinhamento da tabela: left, center, right
bordercolor – Cor na borda da tabela

<caption> </caption>

A legenda para a tabela

<tr> </tr>

Uma linha na tabela

align – O alinhamento horizontal do conteúdo das células dentro dessa linha com os valores possíveis left, right, center, justify e char
bgcolor – Cor de fundo
valign – o alinhamento vertical do conteúdo das células dentro dessa linha com os valores possíveis top, middle, bottom e baseline
background – Figura como plano de fundo

<th> </th>

Um cabeçalho de célula da tabela

align – Alinhamento horizontal
valign – Alinhamento vertical
bgcolor – Cor de plano de fundo
rowspan – O número de linhas pelo qual essa célula se expandirá
colspan – O número de colunas pelo qual essa célula se expandirá
nowrap – Desliga o enquadramento de texto em uma célula

<td> </td>

Define uma célula de dados da tabela

align – Alinhamento horizontal
valign – Alinhamento vertical
bgcolor – Cor de plano de fundo
rowspan – O número de linhas pelo qual essa célula se expandirá
colspan – O número de colunas pelo qual essa célula se expandirá
nowrap – Desliga o enquadramento de texto em uma célula
width – Largura da célula
height – Altura da célula

Formulários

<form> </form>

Define um formulário

action – Responsável por determinar o exato local para onde as informações coletadas no formulário deverão ser enviadas
method – Método de empacotamento dos dados do formulário: get, post e enctype="multipart/form-data"
name – Nome do objeto

<input>

Caixa de texto

type – Tipo de dado: text, file, radio, checkbox, hidden, password, submit, reset, button, image
name – Identificação do campo
size – Largura
maxlength – Número máximo de caracteres permitidos
value – Texto que aparece dentro da caixa ou nome do botão
checked value – Valor assumido quando este campo for selecionado

<textarea> </textarea>

Permite criar elementos de entrada com características de texto

rows – Tamanho da linha da caixa de texto
cols – Tamanho da coluna da caixa de texto
name – Identificação do campo
wrap – Quebra de linha da caixa de texto: off, virtual, physical

<select> </select>

Seleção

name – Identificador

<option> </option>

Opção

value – Valor do campo

Novos campos input type HTML 5

Conheça agora os novos tipos de campos que o html5 trouxe para nós.

Como já sabemos o html5 veio cheio de novidades, como novas tags, um melhor tratamento na hora de validar formularios diminuindo a execução de plugins externos, assim como novos formatos de conteúdos multimídia e novas funcionalidades de semânticas e acessibilidade.

Hoje vamos falar de alguns types novos que surgirão com a vinda do html5:

Type	Descrição

tel	A entrada é um número de telefone.
search	A entrada é um campo de busca.
url	A entrada é uma URL.
email	A entrada é um ou mais endereço de email.
datetime	A entrada é uma data e/ou hora.
date	A entrada é uma data
month	A entrada é um mês.
week	A entrada é um dia da semana.
time	A entrada é uma hora.
datetime-local	A entrada é uma data e hora local.
number	A entrada é um número.
range	A entrada é uma faixa de valores.
color	A entrada é uma cor em haxadecimal como #FF00FF.
placeholder	Especifica uma dica rápida que descreve o valor esperado em um campo de entrada.

Validando formulário em HTML 5.

Veja um formulario simples usando alguns recursos do html 5

<form action="#" method="post" id="form" name="form">

<input type="text" id="nome" name="nome" autofocus="autofocus" maxlength="255" size="60" required="required" placeholder="Nome" value="" /><br>

<input type="email" id="email" name="email" maxlength="100" size="60" required="required" placeholder="E-mail" value="" /><br>

<input type="text" id="assunto" name="assunto" maxlength="100" size="60" required="required" placeholder="Assunto" value="" /><br>

<input name="CEP" id="CEP" required pattern="\d{5}-?\d{3}" />

<textarea id="msg" name="msg" cols="30" rows="10" maxlength="1000" required="required" placeholder="Descrição"></textarea><br>

                <button class="botaolaranja botao2" type="submit" id="enviar" name="enviar">Enviar</button>

</form>

O formulario ficara assim:

Alguns atributos HTML 5 foram usados nesse formulario, abaixo vamos explicar quais e sua funcionalidade.

placeholder

Esse atributo exibirá o texto dentro do campo input como vemos no exemplo acima, isso torna nosso formulário muito mais elegante.

autofocus

Ao ser carregada a página, o focu do mouse será automaticamente direcionado ao campo respectivo. Isso economiza tempo comparada as outra soluções em javascript e tudo mais.

maxlength

Esse atributo já existia anteriormente porém a novidade e que esse atributo foi corrigido alguns problemas, agora podemos aplicar também em uma textarea podendo assim limitar a quantidade de caracteres.

required

Required é uma função muito importante para a validação de um formulario, essa função não permite que o formulario seja postado com o campo vazio. O campo em que este atributo estiver se tornara obrigatório.

pattern

O atributo pattern nos permiti validar o campo de forma mais objetiva, por exemplo o campo cep usamos uma expressão regular e só permite o usuário preencher com 5 numeros, traço e 3 numeros no final.

type

O type é um atributo que define o tipo de campo que esta sendo criado, o html 5 trouxe muitas novidades como email, number, month, range, datetime por ai vai. Para saber mais sobre o atributo type e seus valores veja o post Novos campos input type html 5

Tabela com nomes de cores e valores RGB

Para a galera ir treinando e conhecendo um pouco as cores.

Tabela de Cores

White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919
Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F
Dark Green Copper
rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
Dark Turquoise rgb=#7093DB
Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323

Forest Green rgb=#238E23
Gold rgb=#CD7F32
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F

Linhas horizontais

Linhas horizontais

Usamos a TAG <HR> para fazermos uma linha horizontal na pagina, essa tag não necessita de fechamento </HR> sendo uma tag única.

Vamos ao exemplo.

Significados dos atributos.

Width – Define o comprimento da linha, porcentagem relativo ao documento ou em numero pixel.

Color – Define a cor da linha, pode ser nome da com (red, black, etc) ou em hexadecimal (#fff, #000).

Align – Define a posição da linha pode ser LEFT, RIGHT ou CENTER.

Noshade – Tira a sombra da linha que é sempre exibida por padrão.

<HTML>

<HEAD>

<TITLE>Curso HTML</TITLE>

<HEAD>

<BODY>

<font size='5'>Primeira linha horizontal</font>

<font size='5'>Segunda linha horizontal</font>

<font size='5'>Terceira linha horizontal</font>

</BODY>

</HTML>

Veja o exemplo:

Trabalhando com Listas Ordenadas em HTML

No HTML temos as Tags <li> e <lu>, elas são muito importantes pois permite criarmos tópicos para textos e também são muito usadas para criar menus. Existem três tipos de lista

Ordenada

Não ordenada

De definição – usada para fazer comentários sobre os itens expostos

Listas não ordenadas

A lista não ordenada e usada apenas para listar itens, chamada lista de marcadores. As tags usadas para criar uma lista são <lu> e <li>, <lu> usada para definir a lista e <li> usada para listar os itens.

<HTML>

<HEAD>
<TITLE>Curso HTML</TITLE>
<HEAD>

<BODY>

<lu>

      <li>Computador</li>
      <li>Notebook</li>
      <li>Tablet</li>

</lu>

</BODY>

</HTML>

Listas ordenadas ou numeradas

As lista numeradas são usadas para sequenciar os itens da lista. As tags usadas para criar uma lista não ordenada são <ol> e <li>. A tag <ol> é usada para definir a lista e a tag <li> é usada para cada item da lista.

<HTML>

<HEAD>
<TITLE>Curso HTML</TITLE>
<HEAD>

<BODY>

<ol>
      <li>Computador</li>
      <li>Notebook</li>
      <li>Tablet</li>
      <li>Teclado</li>
      <li>Mouse</li>

</ol>

</BODY>

</HTML>

Lista de Definição

Lista de Definição e usada em assuntos como por exemplo perguntas e respostas.

As tags usadas são <dl>, <dt> e <dd>.

<dl> definition list - cria a lista de definição
<dt> difinition term - onde o termo é proposto
<dd> definition definition - onde o termo é definido

Por exemplo:

<HTML>

<HEAD>
<TITLE>Curso HTML</TITLE>
<HEAD>

<BODY>

<dl>

<dd>Linguagem de marcação de texto</dd>

<dd>Usado para formatação de documentos</dd>

</dl>

</BODY>

</HTML>

Fontes em HTML

Vamos ver como se insere fontes e cores diferentes. Veja abaixo os comandos que usaremos:

<FONT size=’5’ face=’nome’ color=’cor’>

Conteúdo do nosso texto

</FONT>

Size= É o tamanho da letra, que vai do 1 ao 7, se não definirmos o navegador por padrão formata o texto com 3.
Face= É o nome da fonte a ser aplicada.
Color= Cor que será inserida no texto.

Copie o código abaixo com todos as variações de fontes e estilos:

<HTML>

<HEAD>

<TITLE>Curso de HTML</TITLE>

<HEAD>

<BODY>

<FONT size="1" face="Arial" color="red">Texto tamanho 1, fonte arial e cor vermelho</FONT><BR>

<FONT size="2" face="Verdana" color="blue">Texto tamanho 2, fonte Verdana e cor vermelho</FONT><BR>

<FONT size="3" face="Tahoma" color="yellow">Texto tamanho 3, fonte arial e cor vermelho</FONT><BR>

<FONT size="4" face="Verdana" color="green">Texto tamanho 4, fonte arial e cor vermelho</FONT><BR>

<FONT size="5" face="Arial" color="pink">Texto tamanho 5, fonte arial e cor vermelho</FONT><BR>

<FONT size="6" face="Tahoma" color="orange">Texto tamanho 6, fonte arial e cor vermelho</FONT><BR>

<FONT size="7" face="Verdana" color="#9D9D9D">Texto tamanho 7, fonte arial e cor em hexadecimal</FONT>

</BODY>

</HTML>

Texto com estilos

Vamos agora acrescentar outras TAGs para estilizar nosso texto, Vamos ao exemplo:

<HTML>

<HEAD>

<TITLE>Curso HTML</TITLE>
<HEAD>

<BODY>

<CENTER> Texto alinhado ao CENTRO</CENTER><br>

<B>Texto com estilo em Negrito</B><br>

<I>Texto com estilo em Itálico</I><br>

<U>Texto com estilo sublinhado</U><br>

<SUP>Faz o texto ficar sobrescrito<SUP/><br>

<SUB> Faz o texto ficar subscrito </SUB><br>

<PRE>Deixa o texto da maneira que foi escrito</PRE>

</BODY>

</HTML>

Copie e cole no código no bloco de notas para ver como fica.

Trabalhando com Títulos e subtítulos

Para demarcar Títulos e Subtítulos usamos a TAG HEADER, definimos o tamanho e a hierarquia do (H1 a H6). Porque hierarquia? Porque é como os buscadores como o (google) ordenam os HEADERs, primeiro ele pega o H1 da pagina que é a maior fonte e define como um título principal, H2 como subtítulo e por ai vai. É sempre bom começar um código de site bem organizado respeitando as ordens. Nesse exemplo vamos acrescentar a TAG <br> que significa quebra de linha, ou seja assim que inserida a TAG ela manda o texto para linha de baixo. Para escrever o código você pode continuar na mesma linha ou escrever na linha de baixo, o HTML só interpreta os espaços dado se estiverem dentro de uma tag, veja o exemplo:

<HTML>

<BODY>

<H1>Frase com H1: Primeiro Título</H1><br><H2> Frase com H2: Segundo Título ou Subtítulo</H2><br>

<H3> Frase com H3: Terceiro Título ou Subtítulo</H3><br>

<H4> Frase com H4: Quarto Título ou Subtítulo</H4>

</BODY>

</HTML>

Criando documento HTML

Criando documento HTML

Abaixo estão as principais marcações do HTML para se começar um documento.

<HTML>

<HEAD>

</HEAD>

</HTML>

HTML utiliza marcações específicas e distintas para dizer ao Web browser como exibir o Documento, ele não faz diferença entre maiúsculas e minúsculas (não é "case sensitive"). Então a notação <title> é equivalente a <TITLE> ou <TiTlE>. Para começar podemos criar em um simples editor de texto como o bloco de notas.

A marcação <HTML>vai definir o que é um documento HTML, tudo o que está dentro dela o navegador entende como um documento,, <HEAD></HEAD> essa tag determina o conteúdo que vai no cabeçalho da pagina

Por exemplo <HEAD>Meu primeiro documento em HTML</HEAD>. note que a segunda tag HTML esta com uma / barra antes, porque esta determinando o fechamento da mesma.

Em seguida vem o corpo do nosso site <BODY>Conteúdo do nosso site</BODY> dentro dessa tag que será inserido todo o conteúdo visual para os usuários do site. Depois encerraremos com o fechamento daquela primeira tag que começou o documento </HTML>

Para podemos visualizar o que já fizemos, basta salvar o bloco de notas com o nome EXEMPLO: nomedoarquivo.html
Não podemos esquecer de acrescentar a extensão .html , salve seu documento na área de trabalho e depois para visualizar basta dar dois cliques para abrir no navegador.

Páginas

Tags estruturais

<!– –>

<html> </html>

<head> </head>

<meta >

<style> </style>

<script> </script>

<noscript> </noscript>

<title> </title>

<body> </body>

Cabeçalhos

<hn> </hn>

Parágrafos

<p> </p>

Links

<a> </a>

Listas

<ol> </ol>

<ul> </ul>

<li> </li>

<menu> </menu>

<dir> </dir>

<dl> </dl>

<dt> </dt>

<dd> </dd>

Formatação de caracteres

<em> </em>

<strong> </strong>

<code> </code>

<kbd> </kbd>

<var> </var>

<samp> </samp>

<dfn> </dfn>

<cite> </cite>

<b> </b>

<i> </i>

<u> </u>

<tt> </tt>

<pre> </pre>

<strike> </strike>

<s> </s>

<sub> </sub>

<sup> </sup>

<big> </big>

<small> </small>

<blink> </blink>

<marquee> </marquee>

Outros elementos

<hr>

<br>

<center> </center>

<div> </div>

<blockquote> </blockquote>

<address> </address>

<font> </font>

<basefonte>

Imagens

<img>

Frames

<frameset> </frameset>

<frame> </frame>

<iframe> </iframe>

<noframes> </noframes>

Tabelas

<table> </table>

<caption> </caption>

<tr> </tr>

<th> </th>

<td> </td>

Formulários

<form> </form>

<input>

<textarea> </textarea>

<select> </select>

<option> </option>

Listas não ordenadas

Listas ordenadas ou numeradas

Lista de Definição