|
1 - introdução
HTML5 (Hypertext MarkupLanguage, versão 5) é uma linguagem para estruturação e apresentação de conteúdo para a World Wide Web e é uma tecnologia chave da Internet originalmente proposto por Opera Software. É a quinta versão da linguagem HTML.
2 - cronograma da tecnologia web
3
3 - requisitosUm editor de textos qualquer: bloco de notas, notepad++, dreamweaver, etc.
E um browser (navegador) qualquer: Internet Explorer, Mozilla Firefox, googleChrome, Opera, etc.
4 - sintaxe do html
• Nos comandos são utilizadas duas marcas ou tags que são: (< menor e > maior)
<> - Marca de abertura
</> - Marca de fechamento
5 - estrutura de um documento html
<!DOCTYPE html>
<htmllang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Estrutura do HTML5</title>
</head>
<body>
</body>
</html>
O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
<!DOCTYPE html!>
O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar.
O código HTML é uma série de elementos, de tag. O elemento principal é sempre a tag HTML.
<htmllang=”pt-br”>
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.
No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.
MetatagCharset
No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a página está utilizando.
<meta charset=”utf-8”>
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
6 - elementos da estrutura
<header> - cabeçalho da página ou de uma seção (não confundir com a tag <head>);
O elemento header é utilizado para definir um conteúdo de introdução ou de navegação. Normalmente encontramos elementos de cabeçalho (h1 ˜h6), em seu conteúdo. É importante lembrar que, apesar de geralmente ser empregado no começo da página, seu uso pode ser feito também em diferentes seções do mesmo documento.
<section> - cada seção do conteúdo;
Representa uma seção genérica de um documento. Neste contexto, uma seção é o agrupamento de um conteúdo dentro de umtema que, normalmente, possui um cabeçalho.
<article> - um item do conteúdo dentro da página ou da seção;
Representa uma composição independente em um documento, página ou aplicação e que é, a princípio, independentemente distribuível ou reutilizável. Pode ser um post de um fórum, artigo de uma revista ou jornal, post de um blog, comentário enviado por um usuário, widget interativo ou qualquer item independente de conteúdo.
Quando encontramos elementos article aninhados, os elementos article internos representam um conteúdo que esteja relacionado ao conteúdo do ancestral article mais próximo. Por exemplo, elementos article internos podem representar os comentários de um post de um blog Neste caso o post do blog seria o elemento article ancestral mais próximo.
<footer> - o rodapé da página ou de uma seção;
Representa o rodapé do ancestral de seccionamento mais próximo. É muito comum encontrarmos em seu conteúdo informações sobre a seção a qual ele pertence como quem a escreveu, links relacionados ao conteúdo da seção e informações legais, por exemplo.
<nav> - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;
A tag nav representa uma seção da página que contém links para outras páginas ou para outras partes do documento, ou seja, uma seção comlinks de navegação.
<aside> - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).
O elemento aside representa uma seção que consiste em um conteúdo que esteja tangencialmente relacionado ao conteúdo que está à sua volta. Essa seção é frequentemente representada como uma coluna lateral em relação ao conteúdo principal de uma página.
index.html
<!DOCTYPE html!>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link href="default.css" rel="stylesheet" type="text/css" media="all">
<title>Elementos da Estrutura</title>
</head>
<body>
<div id="container">
<header id="cabecalho">Header</header>
<div id="corpo">
<nav id="menu">nav</nav>
<section id="artigo">
<header class="cabecalho_artigo">header</header>
<article class="artigo">article
</article>
<footer class="rodape_artigo">footer</footer>
</section>
<aside id="propaganda">aside</aside>
</div>
<footer id="rodape">footer</footer>
</div>
</body>
</html>
default.css
* { margin : 0; padding : 0; }
#container {
margin: 0px auto 0px auto;
width: 960px;
background:#ccddbb;
}
#cabecalho {
margin:0px auto 0px auto;
width:960px;
height:82px;
position:relative;
background:#c0c0c0;
}
#corpo {
margin: 1px;
padding-top: 10px;
padding-bottom: 20px;
min-height: 500px;
}
#menu {
margin:0px auto 0px auto;
width:160px;
height:500px;
float:left;
background:#c0c0ff;
}
#artigo {
margin:0px auto 0px auto;
width:618px;
height:500px;
float:left;
background:#c0c088;
margin-left:10px;
}
.cabecalho_artigo {
margin:0px auto 0px auto;
width:598px;
height:50px;
float:left;
background:#c0c0c0;
margin:10px;
}
.artigo {
margin:0px auto 0px auto;
width:598px;
height:330px;
float:left;
background:#c0c0c0;
margin:10px;
}
.rodape_artigo {
margin:0px auto 0px auto;
width:598px;
height:50px;
float:left;
background:#c0c0c0;
margin:10px;
}
#propaganda {
margin:0px auto 0px auto;
width:160px;
height:500px;
float:left;
background:#c0c000;
margin-left:10px;
}
#rodape {
margin: 0px auto;
padding-bottom: 20px;
width: 960px;
position: relative;
background:#c0c0c0;
}
Veja
Mais:
- Elemento canvas em HTML5- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5
0 comentários:
Postar um comentário