Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Aula04 - Seccionamento e HTML5

    Enviado por

    rickartur
    13 visualizações16 páginas
    O documento discute elementos em HTML5, distinguindo elementos de linha e de bloco. Elementos de linha marcam texto e imagens, enquanto elementos de bloco dividem o conteúdo em seções. O HTML5 introduz novas tags semânticas e recursos como canvas, vídeo e armazenamento local.

    Descrição original:

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    O documento discute elementos em HTML5, distinguindo elementos de linha e de bloco. Elementos de linha marcam texto e imagens, enquanto elementos de bloco dividem o conteúdo em seções. O HTML5 introduz novas tags semânticas e recursos como canvas, vídeo e armazenamento local.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    13 visualizações16 páginas

    Aula04 - Seccionamento e HTML5

    Enviado por

    rickartur
    O documento discute elementos em HTML5, distinguindo elementos de linha e de bloco. Elementos de linha marcam texto e imagens, enquanto elementos de bloco dividem o conteúdo em seções. O HTML5 introduz novas tags semânticas e recursos como canvas, vídeo e armazenamento local.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 16

    Aula 04

    Ricardo Artur P. Carvalho Webdesign

    Seccionamento e
    HTML5
    Ricardo Artur P. Carvalho Webdesign

    Modelos de conteúdo
    Dentre todas as categorias de modelos de
    conteúdo, existem dois tipos de elementos:
    elementos de linha e de bloco.
    Ricardo Artur P. Carvalho Webdesign

    Elementos em linha
    Os elementos de linha marcam, na sua
    maioria das vezes, texto. Alguns exemplos:
    <a> Define um link ou âncora
    <strong> Define um destaque (nêgrito)
    <em> Define uma ênfase (itálico)
    <img> Define uma imagem
    <input> Define um campo de entrada de dados (formulário)
    <abbr> Define uma abreviação (sigla)
    <span> Define um agrupamento de texto em linha
    Ricardo Artur P. Carvalho Webdesign

    Span
    Devemos utilizar a span quando queremos
    modificar um elemento no meio de uma linha
    de texto. Aplicar um estilo específico, por
    exemplo (negrito + cor a um elemento).
    O texto segue normal e, de repente, fica vermelho.
    <p> O texto segue normal e, de repente, fica
    <span style=“color:red”>vermelho.</span></p>
    Ricardo Artur P. Carvalho Webdesign

    Elementos em bloco
    Os elementos de blocos são como caixas, que
    dividem o conteúdo nas seções do layout.
    <h1> Define um título nível 1
    <p> Define um parágrafo
    <ol> Define uma lista ordenada
    <ul> Define uma lista não ordenada
    <li> Define um item de lista
    <table> Define uma tabela
    <div> Define uma divisão ou seção do documento
    Ricardo Artur P. Carvalho Webdesign

    Div
    Devemos utilizar a div quando queremos
    dividir e/ou modificar um grupo de elementos
    de bloco numa parte do documento.
    Exemplos:
    Fazer um texto “flutuar” à esquerda
    Agrupar elementos similares (links)
    <div>

    <div>
    Ricardo Artur P. Carvalho Webdesign

    Premissas: bloco e linha


    Abaixo segue algumas premissas para relembrar e conhecer:
    • Os elementos de linha podem conter outros elementos de linha,
    dependendo da categoria que ele se encontra. Por exemplo: o
    elemento a não pode conter o elemento label.
    • Os elementos de linha nunca podem conter elementos de bloco.
    • Elementos de bloco sempre podem conter elementos de linha.
    • Elementos de bloco podem conter elementos de bloco,
    dependendo da categoria que ele se encontra. Por exemplo, um
    parágrafo não pode conter um DIV. Mas o contrário é possível.
    Ricardo Artur P. Carvalho Webdesign

    O que é HTML5?
    O HTML 5 é um novo padrão para a web,
    ainda em desenvolvimento.
    Ricardo Artur P. Carvalho Webdesign

    O que mudou?
    O HTML5 apresenta algumas características (fonte W3Schools):
    • Novos recursos devem se basear em HTML, CSS, DOM e
    Javascript.
    • Reduz a necessidade de plug-ins externos (como o flash)
    • Melhor manipulação dos erros
    • Mais marcações para substituir scripts
    • HTML5 deve ser independente de dispositivos
    • O processo de desenvolvimento deve ser visível ao público
    Ricardo Artur P. Carvalho Webdesign

    <!Doctype>
    Diferentemente das versões anteriores, a declaração do tipo
    de documento é mais simplificada:

    <!DOCTYPE html>
    Ricardo Artur P. Carvalho Webdesign

    Novos recursos
    • Elemento <canvas> para desenho 2D
    • Elementos <vídeo> e <áudio> para reprodução de mídias.
    • Suporte a armazenamento local
    • Novos elementos voltados para conteúdos específicos
    como <article>, <footer> ,<header>, <nav>, <section>
    • Novos controles de formulários como calendário, data,
    horário, e-mail, url e pesquisa.
    Ricardo Artur P. Carvalho Webdesign

    Estrutura mínima:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Título do documento</title>
    </head>
    <body>
    Conteúdo do documento......
    </body>
    </html>
    Ricardo Artur P. Carvalho Webdesign

    Divs e semântica
    No lugar das genéricas <divs> do HTML4, o HTML5 favorece a
    web semântica por possuir tags de organização dos conteúdos
    mais descritivas.
    <header> para cabeçalhos da página
    <nav> para links de navegação (menu)
    <article> para artigos, textos e postagens
    <section> para seções do conteúdo
    <aside> para textos secundários
    <footer> para rodapés
    Ricardo Artur P. Carvalho Webdesign

    Mãos a obra

    Você também pode gostar