Início
phpBB3 
PunBB
Invision
Forumeiros (Avançado)
Mão na Massa
Ou melhor no bloco de notas. (se prefirir, aconselho o Adobe Dreamweaver, Caso não consiga tente no notepad++)
Vamos la, Clique em iniciar > Todos os Programas > Acessórios > Bloco de Notas
Agora com o Bloco de Notas aberto, Vamos inserir as Tags necessárias(básicas)
Essa é a estrutura básica de um documento HTML, que é composta por três tags (html, head , body), Obrigatoriamente deve ter nos documentos html, se não, não irá funcionar.
a explicação das Tags estão com o fundo branco
Os Atributos no Body
bgcolor = cor de fundo para a página.
Default: depende do navegador. Alguns definem a cor branca, outros, a cinza.
background = define arquivo de imagem para o fundo da tela
leftmargin = a margem esquerda (em pixels)
topmargin = margem superior (pixels)
marginwidth = margem pela largura (pixels)
marginheight = margem pela altura (pixels)
text = cor do texto para toda a página
link = cor dos links para toda a página
vlink = cor dos links já visitados
alink = cor do link, quando selecionado
----------------------------------------------------------------
HTML5
a nova versão do HTML, são poucos os browsers que suportam a nova semântica do HTML. HTML5 oferece uma experiência web totalmente diferente para usuários.
Explorer 8 -
como o Opera, Google
Chrome, Safari 4
e o Firefox 3.5
já implementaram grandes partes da linguagem, incluindo tags de
vídeo e suporte à tecnologia Canvas.
A estrutura do HTML5 é assim:
No
HTML atual, não há um padrão para a leitura das máquinas do que é
um cabeçalho, uma seção, menu ou rodapé. O que geralmente
diferencia são as IDs das DIVs. No
HTML5 esta padronização existe.
Vejam
HTML 4.01
HTML5
Veja que a estrutura já tem um padrão.
A tag <header>
define uma introdução ao documento.
A tag <nav>
define uma seção de navegação. Se você possuir botões Anterior
e Próximo no seu documento, deve ser inserido dentro da tag <nav>.
A tag <article>
define conteúdo externo. Pode ser uma notícia, artigo, texto
qualquer ou qualquer outro conteúdo.
A tag <footer>
define um rodapé do documento. Geralmente contém nome do autor,
data que foi escrito o documento etc.
Agora que nós vimos as
tags básicas, vamos dar uma olhadinha em outras super legais:
A tag <áudio>
possui alguns atributos importantes:
Creditos:
60% Michel Martins
Ou melhor no bloco de notas. (se prefirir, aconselho o Adobe Dreamweaver, Caso não consiga tente no notepad++)
Vamos la, Clique em iniciar > Todos os Programas > Acessórios > Bloco de Notas
Agora com o Bloco de Notas aberto, Vamos inserir as Tags necessárias(básicas)
- Código:
<!-- Sempre que for fazer um comentario use isso não é exibido no navegador, so ajuda a organizar melhor -->
- Código:
<html> !--devem estar todas as outras tags, as informações e todo o conteúdo entre elas.-->
<head> <!--Entre elas Coloque as Tags que não vai ser exibido na tela.-->
<Title>Seu Titulo</title> <!--o titulo da pagina-->
</head> <!--está fecha o <HEAD> -->
<body> <!--está o que vai, ser exibido na tela do navegador.-->
</body> <!--está fecha o <body> -->
</html> <!--Essa fecha nossa tag de html e a estrutura basica dela.-->
Essa é a estrutura básica de um documento HTML, que é composta por três tags (html, head , body), Obrigatoriamente deve ter nos documentos html, se não, não irá funcionar.
a explicação das Tags estão com o fundo branco
Os Atributos no Body
bgcolor = cor de fundo para a página.
Default: depende do navegador. Alguns definem a cor branca, outros, a cinza.
background = define arquivo de imagem para o fundo da tela
leftmargin = a margem esquerda (em pixels)
topmargin = margem superior (pixels)
marginwidth = margem pela largura (pixels)
marginheight = margem pela altura (pixels)
text = cor do texto para toda a página
link = cor dos links para toda a página
vlink = cor dos links já visitados
alink = cor do link, quando selecionado
----------------------------------------------------------------
HTML5
a nova versão do HTML, são poucos os browsers que suportam a nova semântica do HTML. HTML5 oferece uma experiência web totalmente diferente para usuários.
Explorer 8 -
como o Opera, Google
Chrome, Safari 4
e o Firefox 3.5
já implementaram grandes partes da linguagem, incluindo tags de
vídeo e suporte à tecnologia Canvas.
A estrutura do HTML5 é assim:
- Código:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Título do documento</title>
</head>
<body>
Conteúdo
</body>
</html>
No
HTML atual, não há um padrão para a leitura das máquinas do que é
um cabeçalho, uma seção, menu ou rodapé. O que geralmente
diferencia são as IDs das DIVs. No
HTML5 esta padronização existe.
Vejam
HTML 4.01
- Código:
<div id="topo"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id="rodape"></div>
HTML5
- Código:
<header></header>
<nav></nav>
<article></article>
<footer></footer>
Veja que a estrutura já tem um padrão.
A tag <header>
define uma introdução ao documento.
A tag <nav>
define uma seção de navegação. Se você possuir botões Anterior
e Próximo no seu documento, deve ser inserido dentro da tag <nav>.
A tag <article>
define conteúdo externo. Pode ser uma notícia, artigo, texto
qualquer ou qualquer outro conteúdo.
A tag <footer>
define um rodapé do documento. Geralmente contém nome do autor,
data que foi escrito o documento etc.
Agora que nós vimos as
tags básicas, vamos dar uma olhadinha em outras super legais:
- <aside> é
utilizado para representar conteúdo que está relacionado com outro
conteúdo dentro de um contexto (<article>). Um exemplo fácil
para assimilação são as citações. Se há uma citação em um
texto que deve ser destacado, pode-se utilizar o <aside> para
destacar certa frase ou citação. Fora do contexto ele é
interpretado como conteúdo secundário, não relacionado com o
conteúdo em questão.
- A tag <áudio>
define um som. Pode ser música, som, podcast, etc. Qualquer conteúdo
dentro da tag de áudio será um texto alternativo caso o navegador
utilizado não suporte a tag.
- Código:
<audio src="musica.mp3">
Seu navegador não suporta o elemento de áudio.
</audio>
A tag <áudio>
possui alguns atributos importantes:
- src: especifica a
localização do ficheiro de áudio. - autoplay:
especificação de execução automática do arquivo após
carregamento. Exemplo:
- Código:
<audio src="musica.mp3" autoplay="autoplay">
Seu navegador não suporta o elemento de áudio.
</audio>
- controls: especifica
se deve ou não exibir os controles de áudio (play, stop, pause,
etc).
- Código:
<audio src="musica.mp3" controls="controls">
Seu navegador não suporta o elemento de áudio.
</audio>
- A tag <dialog> define
um diálogo ou conversa, como o próprio nome já diz
- Código:
<dialog>
<dt>luluzinha</dt>
<dd>Oi lula como vai você?</dd>
<dt>Lula</dt>
<dd>Vou bem e você?</dd>
<dt>luluzinha</dt>
<dd>Tudo ótimo!</dd>
</dialog>
- a tag <figure>.
Ela é utilizada pra inserir uma legenda relacionada a uma imagem,
vídeo, áudio, objeto, etc.
- Código:
<figure>
<img src="imagem.jpg" alt="imagem" title="imagem" />
<legend>Figura 1. Este texto tem relação com a imagem acima.</legend>
</figure>
existem outras tags e atributos.
O HTML5 vem sendo usado muito com o css3, que se torna MUITO UTIL.
Creditos:
60% Michel Martins
