COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 4 Técnico Prof. Cesar 2014
Conteúdo 1. ESTRUTURA DE UM DOCUMENTOHTML... 2 2. ELEMENTOS DA ESTRUTURA... 3 3. FORMULÁRIOS...Erro! Indicador não definido. 4. ELEMENTOS ÁUDIO E VÍDEO, E CODECS...Erro! Indicador não definido. 5. ELEMENTO CANVAS...Erro! Indicador não definido. 6. GEOLOCALIZAÇÃO...Erro! Indicador não definido. 7. WEB STORAGE...Erro! Indicador não definido. 8. DRAG AND DROP API...Erro! Indicador não definido. 9. SVG...Erro! Indicador não definido. 1. ESTRUTURA DE UM DOCUMENTOHTML <!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 > 2. 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.
Abaixo está o código da página acima. Necessário primeiro criar a página índex.html, e outra como default.css define o layout do site. 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> </html> </body> </div> default.css * { margin : 0; padding : 0; #container { margin: 0px auto 0px auto; width: 960px; background:#ccddbb; #cabecalho { width:960px; height:82px;
position:relative; #corpo { margin: 1px; padding-top: 10px; padding-bottom: 20px; min-height: 500px; #menu { width:160px; height:500px; background:#c0c0ff; #artigo { width:618px; height:500px; background:#c0c088; margin-left:10px;.cabecalho_artigo { width:598px;
height:50px; margin:10px;.artigo { width:598px; height:330px; margin:10px;.rodape_artigo { width:598px; height:50px; margin:10px; #propaganda { width:160px; height:500px; background:#c0c000;
margin-left:10px; #rodape { margin: 0px auto; padding-bottom: 20px; width: 960px; position: relative;