Scribd Logo
Upload

Welcome to Scribd!

  • HTML - Parte1

    Uploaded by

    Giorgia Barreto Lima Parrião
    29 views19 pages
    Profa. Msc. Giorgia Barreto Lima Parrião

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Profa. Msc. Giorgia Barreto Lima Parrião

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    29 views19 pages

    HTML - Parte1

    Uploaded by

    Giorgia Barreto Lima Parrião
    Profa. Msc. Giorgia Barreto Lima Parrião

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 19

    DESIGN WEB

    HTML - INTRODUO
    Prof.. Giorgia Barreto L. Parrio [2017]
    DEFINIO
    HTML a sigla de HyperText Markup Language, expresso inglesa que
    significa "Linguagem de Marcao de Hipertexto".
    Consiste em uma linguagem de marcao utilizada para produo de
    pginas na web, que permite a criao de documentos que podem ser lidos
    em praticamente qualquer tipo de computador e transmitidos pela internet.
    HTML - HYPERTEXT MARKUP LANGUAGE
    Inventada por Tim Berners-Lee no fim da dcada
    de 80
    Nasceu junto com a Web
    Linguagem de Marcao Baseada em Hipertexto
    Diversas verses: 4 (atual) e 5 (futura)
    4

    QUEM CUIDA DO HTML?


    W3C: World Wide Web Consortium;
    WHATWG: Web Hypertext Application Technology Working Group.
    SEPARAO EM CAMADAS
    HTML:
    Contedo;
    Dados e estrutura;

    CSS:
    Apresentao;
    Formatao, layout, cores, fontes, posicionamento.

    JavaScript:
    Comportamentos;
    Programao.
    ESTRUTURA BSICA DE UMA PGINA HTML
    Doctype: indica a verso do HTML, veremos futuramente!
    <html>, <head>, <title>, <body>, <p>: Tags;
    <html> e </html>, indicam que se trata de um documento em HTML;
    <head> e </head>, delimitam o cabealho da pgina;
    <title> e </title>, definem o ttulo da pgina; e
    <body> e </body>, delimitam o contedo a mostrar ao utilizador;
    <p> e </p>, delimitam um pargrafo.
    TIPOS DE TAGS
    Estrutura: <html>, <head>, <body>...

    Metainformaes: <meta>, <title>...

    Texto: <p>, <code>, <br>, <strong>...

    Links: <a>, <base>...

    Imagens: <img>, <area>....

    Objetos: <object>, <param>...


    Listas: <ol>, <ul>, <li>...

    Tabelas: <table>, <tr>, <td>...

    Formulrios: <input>...

    Scripting / Programao: <script>, <noscript> ...

    Apresentao / Formatao: <b>, <i>, <sup>

    Desenho: <canvas>
    TAGS DE TEXTO
    Paragrafo:<p> ... </p>

    Listas:
    Ordenadas: <ul> <li> ... </li> </ul>
    Numeradas: <ol> <li> ... </li> </ol>

    Quebra de Linha: <br> ... <br/>

    Cabealhos: h1 a h6
    <h1> Ttulo </h1>
    <h6> Subttulo 6 </h6>

    Prof Giorgia Barreto Lima Parrio 10


    TAGS DE LINKS (NCORA / HYPERLINK)
    Elemento: a

    Atributos:
    href: especifica a URL de destino do link.
    name: define o nome e serve para marcar o lugar em que a ncora se encontra e a
    identifica.
    target: define a janela de destino.
    _black: abre em nova janela do browser
    _self: abre na mesma janela do browser
    _top: a pagina aberta e toda janela do browser

    Prof Giorgia Barreto Lima Parrio 11


    hreflang: informa a linguagem da pgina destino
    type: define o tipo de contedo.
    mailto: especifica o e-mail de destino do link.

    Sintaxe Bsica

    Hyperlink:
    <a href=URL> Nome do Site </a>
    Ex: <a href="http://www.projecao.br">Uniprojeo</a>

    Prof Giorgia Barreto Lima Parrio 12


    E-mail:
    <a href=mailto:nome@dominio> e-mail </a>
    Ex: <a href=mailto:giorgia.parriao@projecao.br>
    Envie um e-mail profa. Giorgia
    </a>

    ncora: So utilizados para indexar documentos.


    ncora: < a href =#chave > ... </A>
    Destino: < a name =chave> ... </A>

    13
    TAG DE IMAGEM
    Elemento: img

    Atributos:
    src: localizao (valor: URL) da imagem
    alt: descrio da imagem (cursor)
    width: determina largura da imagem
    height: determina altura da imagem
    title: nome da imagem (acessibilidade)

    Prof Giorgia Barreto Lima Parrio 14


    Sintaxe:

    <img src=imagem.png" alt=imagem" title=imagem" width="150" height="150" />

    Extenses:
    .png: Formato de dados utilizado para imagens, criado para substituir o GIF, livre e
    recomendado pela W3C. Suporta uma maior gama de profundidade de cores, alta
    compresso e regulvel. O que permite comprimir imagens sem perda de qualidade
    e mantendo sua leveza.

    .jpg: indicado para imagens com gradao de pixel complexa(variao de cores,


    luz e sombras), mas no para cores chapadas (para este caso melhor GIF ou BMP).

    Prof Giorgia Barreto Lima Parrio 15


    .gif: Suporta apenas imagens indexadas e transparncia em lugar de canal alfa, ou
    seja, um pixel desta imagem pode ser ou totalmente opaco ou totalmente
    transparente. Esse formato possibilita pequenas animaes de forma simples ,
    formadas por vrias imagens GIF compactadas numa s. utilizado para compactar
    objetos em jogos eletrnicos, para usar como emoticon em mensageiros instantneos e
    para enfeitar sites na Internet.

    Prof Giorgia Barreto Lima Parrio 16


    EXERCCIO DE FIXAO
    Crie um site, utilizando as tags de estrutura e as tags aprendidas nesta aula:
    Paragrafo
    Listas ordenadas e numeradas
    Hyperlink externo e e-mail
    ncora
    imagem

    Prof Giorgia Barreto Lima Parrio 17


    BIBLIOGRAFIA
    Silva, Mauricio S. Fundamentos de HTML 5 e CSS3. So Paulo:
    Novatec, 2015.

    Prof Giorgia Barreto Lima Parrio 18


    Obrigada!
    Obrigada!!!
    Prof.. Giorgia Barreto

    Prof. Giorgia Barreto Lima Parrio 19

    You might also like