Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • 03 - HTML Introdução - Parte II

    Enviado por

    Professor MAU
    10 visualizações22 páginas
    Conceitos básicos para o desenvolvimento WEB.

    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
    Conceitos básicos para o desenvolvimento WEB.

    Direitos autorais:

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

    03 - HTML Introdução - Parte II

    Enviado por

    Professor MAU
    Conceitos básicos para o desenvolvimento WEB.

    Direitos autorais:

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

    HTML - Introdução

    HTML - Hypertext Markup Language


    Linguagem de Marcação
    de Hipertexto.

    Composta por TAGs e


    ATRIBUTOS que, por sua vez,
    formam ELEMENTOS.
    Sintaxe de uma tag

    <h1 align=”center”> ... </h1>

    Definição:
    É um trecho de código que permite gerar um elemento visual no navegador.
    Sintaxe de uma tag

    tag de abertura tag de fechamento

    <h1 align=”center”> ... </h1>


    Sintaxe de uma tag

    atributo

    <h1 align=”center”> ... </h1>

    Definição:
    Característica que queremos modificar de uma tag. Costuma ter vários
    valores.
    Sintaxe de uma tag

    valor

    <h1 align=”center”> ... </h1>

    Definição:
    Definição da característica que vamos modificar.
    Sintaxe de uma tag

    elemento

    <h1 align=”center”> ... </h1>

    Definição:
    É o conjunto formado pela tag (com ou sem atributos) e o
    que está contido nela.
    Estrutura básica de um
    documento HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title> Meu site </title>
    </head>
    <body>
    Olá, Mundo!
    </body>
    </html>
    Estrutura básica de um
    documento HTML
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=”utf-8”>
    <title> Meu site </title>
    </head>
    <body>
    Olá, Mundo!
    </body>
    </html>
    Vamos Definir!

    <meta charset=”utf-8”>

    O atributo charset permite definir a codificação de caracteres a ser usada.


    Embora não seja obrigatório, ele deve ser incluído em qualquer documento
    HTML por dois motivos principais:

    1. Para evitar a exibição incorreta em alguns navegadores.

    2. Para seguir as convenções e padrões da W3C.


    Tags HTML
    heading/cabeçalho

    <h1> Título principal </h1>


    <h2> Subtítulo </h2>
    <h3> Outro subtítulo </h3>
    <h4> Mais um </h4>
    <h5> Outro, por que não? </h5>
    <h6> Agora sim, o último </h6>

    Definição: tag semântica que permite gerar títulos e subtítulos. São muito
    importantes para o posicionamento em buscadores.
    ATENÇÃO:
    a tag <h1>, por recomendação da W3C,
    só deve ser usada uma vez por documento HTML.

    <h1> Título principal </h1>


    Tags HTML
    parágrafos

    <p> Lorem ipsum dolor sit amet, consectetur


    adipiscing elit, et dolore magna aliqua. </p>

    <p> Ut enim ad minim veniam, quis nostrud


    exercitation ullamco laboris nisi ut aliquip.</p>

    Definição: tag que permite gerar blocos de texto em forma de


    parágrafos. Podemos usar quantas forem necessárias.
    Tags HTML
    link

    <a href=nomedoarquivo.html> Objeto clicável </a>

    Definição: tag que permite gerar um texto ou imagem que quando


    recebe o clique, localiza, requisita e abre um recurso disponível no
    serviço de hospedagem.
    Tags HTML
    listas ordenadas

    <ol>
    <li>Item da lista</li>
    <li>Item da lista</li>
    <li>Item da lista</li>
    </ol>

    Definição: tag usada para listar itens de maneira consecutiva. Por padrão, usa
    marcadores numéricos, começando pelo 1. É possível alterar o marcador.
    Tags HTML
    listas não ordenadas

    <ul>
    <li>Item da lista</li>
    <li>Item da lista</li>
    <li>Item da lista</li>
    </ul>

    Definição: tag usada para listar itens. Por padrão, usa marcadores do
    tipo “bolinha” (bullet). É possível alterar o marcador.
    .
    Tags HTML
    listas - atributos

    <ol type=”1”>...</ol> <ul type=”disc”>...</ul>


    <ol type=”A”>...</ol> <ul type=”circle”>...</ul>
    <ul type=”square”>...</ul>
    <ol type=”I”>...</ol>
    <ol start=”20”>...</ol>

    Atributos:
    type: permite alterar o tipo de marcador de cada lista.
    start: permite definir por qual número queremos que a lista comece.
    Tags HTML
    listas aninhadas

    Permitem criar vários níveis de hierarquia e organização.


    Podemos aninhá-las como preferirmos e gerar os níveis que quisermos.
    Tags HTML
    listas aninhadas
    <ul>
    <li>
    Item da lista com lista aninhada
    <ol>
    <li>Item da lista aninhada</li>
    <li>Item da lista aninhada</li>
    </ol>
    </li>
    <li>Item da lista</li>
    <li>Item da lista</li>
    </ul>
    Tags HTML
    Inserindo imagens
    <img src=pasta/nome.extensão>

    img = TAG para imagem


    src = atributo com o endereço, nome e extensão do arquivo

    Extensão – jpg – png – gif

    <img src=imagem/banana.png>
    Hora da prática
    Seu primeiro site
    Edite suas páginas criada até o momento para
    criar uma boa navegabilidade entre elas.
    Cada página deve conter links para acesso a
    todas as outras.
    Escolha um tema.
    Cada página deve tratar de um assunto
    relacionado ao tema escolhido.

    Realize o upload dos arquivos para sua


    hospedagem

    Você também pode gostar