DESENVOLVIMENTO DO PROJETO HTML Médio Integrado Ana Paula Alves de Lima Aplicativos Web e Webdesign FALANDO SOBRE A PROVA... CRIE A PASTA DO PROJETO DESSA FORMA: SITE-NOME-PROJETO - IMAGENS - CSS Relembrando algumas tags da prova HTML: Adicionando Links: Define um hyperlink; Adicionando Imagens: Define uma imagem; Address: Define um endereço. HiperLinks... <a> Define um hyperlink; • O hiperlink ou, simplesmente, link: toda vez que se clica em um link aparece outra informação na tela • Linkar” é uma palavra inglesa que quer dizer literalmente, elo, ligação. • Criar um link em um texto significa estabelecer uma ligação com outra página, outro texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem. Exemplos: <a href="http://www.starmedia.com">Clique aqui </a> <a href="pagina.html">Este é um link para uma página no seu site </a> Trabalhando com imagens ◊ Inserção • <img> insere uma figura. ◊ Principais atributos • • • • • align; DESCONTINUADO DO HTML5 src indica onde está a imagem; border define a espessura da borda; height define a altura; width define a largura. Exemplo... <img src='imagem/sol.jpg' border='2px'/> <img src='imagem/sol.jpg' height='100px' width='200px;'/> <img src='imagem/sol.jpg' height='150px'/> ADDRESS... • Address se trata de um elemento de bloco textual. Isto quer dizer que não é possível inserir outros elementos de nível bloco dentro de address. Uma lista por exemplo. • Exemplo: • <address> <strong>eMasters Corp.</strong> <span>Rua A, nº 0.</span> </address> Aplicativos web e webdesign 9 TAGS FUNDAMENTAIS • <!DOCTYPE> O DOCTYPE (abreviação de Document Type Definition – Definição de tipo de documento) serve para definir de que forma os navegadores vão se comportar ao ler seu código. • Essa declaração deve aparecer sempre no início de cada documento que você criar (antes mesmo da tag <html>). • Exemplo da declaração: – <!DOCTYPE html> Aplicativos web e webdesign 10 DIVS É usada para agrupar um bloco de HTML e aplicar alguma informação a esse bloco, na maioria das vezes usando os atributos class e id para associar o elemento com um seletor de classe ou id CSS. EXEMPLOS <DIV ID="CABEÇALHO"> <H1>ESTOU NO CABEÇALHO</H1> </DIV> <DIV> <DIV ID="CONTEUDO"> <H1> TODO MEU CONTEUDO DA PÁGINA</H1> </DIV> <DIV> <DIV ID="RODAPÉ"> TESTE </DIV> FAÇA ESSA DIVISÃO NO SEU PROJETO!! ABRA O DREAMWEAVER E FAÇA ISSO! Novos elementos de marcação Em versões anteriores o HTML não tinha uma classificação semântica (significado da informação) do conteúdo. Nos casos mais comuns tudo era DIV que semanticamente é um divisor de conteúdo. No HTML5 foram introduzidas novos elementos de marcação de conteúdo. Apresentando o Validador do W3C: http://validator.w3.org/ Checa se o código html está dentro dos padrões! Principais Elementos do HTML 5 section A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno. nav O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site. article O elemento article representa uma parte da página que poderá ser distribuído. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum. aside O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website. header O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos. footer O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção. video Elemento de link para arquivo de vídeo.
Download
