Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Introduo Ao HTML

    Enviado por

    Isabela Pretto
    6 visualizações38 páginas

    Título original

    Introduo_ao_HTML (3)

    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

    Direitos autorais:

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

    Introduo Ao HTML

    Enviado por

    Isabela Pretto

    Direitos autorais:

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

    Introdução ao

    HTML
    Prof. Cleitom Richter
    cleitom.richter@iffarroupilha.edu.br
    Introdução
    Exemplo Básico
    Ferramentas de desenvolvimento
    Elementos HTML

    Tópicos Atributos HTML


    HTML style
    Formatação de texto
    Cores HTML
    Introdução O que é HTML?
    O Hypertext Markup Language (HTML) é uma linguagem de formatação e
    não de programação.

    O que o HTML é capaz de fazer?


    Essa linguagem tem a função de enviar para o navegador(Internet
    Explorer, Firefox, Chrome, etc.) as informações de como deve exibir
    determinado conteúdo – isso é feito através de marcações;

    Como são essas tais 'marcações'?


    Essas marcações são chamadas tags (etiquetas) e estão inseridas nos
    documentos originais (documento-fonte) que criaram as páginas.
    Tags sempre aparecem entre < > e o fechamento de uma tag está entre
    </>;
    História
    1989 Tim Barnes-Lee define
    o conceito de www;
    Em 1991, Tim Barnes-Lee
    inventa o HTML o qual
    evoluiu em oito versões
    até os dias atuais.
    História 2008
    HTML5 - Publicação do primeiro esboço

    2012
    1993 HTML5 - Todos os esforços na construção
    do padrão.
    HTML+
    1991 1995 1997 1999 2000 2014 2016/17 2017
    HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML1.0 HTML5 HTML 5.1 HTML 5.2

    Tecnicamente a W3C considera oficialmente somente as versões HTML 2.0, HTML 3.2, HTML
    4.0, HTML 4.01 e HTML 5. As versões HTML e HTML+ são anteriores à criação da W3C e a
    versão 3.0 não chegou a ser lançada oficialmente, transformando-se na versão 3.2
    (SILVA,2015).
    Documento Simples HTML

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>My First Heading</h1>


    <p>My first paragraph.</p>

    </body>
    </html>
    Explicando A <!DOCTYPE html> declaração define que este documento é
    um documento HTML5
    exemplo... O <html> elemento é o elemento raiz de uma página HTML
    O <head> elemento contém metainformações sobre a
    página HTML
    O <title> elemento especifica um título para a página HTML
    (que é mostrado na barra de título do navegador ou na guia
    da página)
    O <body> elemento define o corpo do documento e é um
    recipiente para todos os conteúdos visíveis, como
    cabeçalhos, parágrafos, imagens, hiperlinks, tabelas, listas,
    etc.
    O <h1> elemento define um título grande
    O <p> elemento define um parágrafo
    Explicando
    exemplo...
    Explicando
    exemplo...

    Dica: Você pode adicionar comentários à sua


    fonte HTML usando a seguinte sintaxe:

    <!-- Write your comments here -->


    Ferramentas de
    desenvolvimento
    Elementos A <!DOCTYPE html> declaração representa o tipo

    HTML de documento e ajuda os navegadores a exibir


    páginas da Web corretamente. Ele deve aparecer
    apenas uma vez, no topo da página (antes de
    qualquer tag HTML).
    Os cabeçalhos HTML são definidos com as tags
    <h1>to <h6>.
    Os parágrafos HTML são definidos com a <p>.
    Elementos Links
    HTML Os links HTML são definidos com a <a>:

    <a href="https://www.w3schools.com">This is a
    link</a>

    O destino do link é especificado no atributo href.


    Os atributos são usados ​para fornecer informações
    adicionais sobre os elementos HTML.
    Elementos Imagens
    HTML As imagens HTML são definidos com a <img>:

    O arquivo de origem (src), texto alternativo (alt),


    width e height são fornecidos como atributos (largura
    e altura, respectivamente):

    <img src="w3schools.jpg" alt="W3Schools.com"


    width="104" height="142">
    Elementos HTML

    O elemento HTML é tudo, desde a tag inicial até


    a tag final:

    < tagname > O conteúdo vai aqui... < /tagname >

    Exemplos de alguns elementos HTML:

    < h1 > Meu primeiro cabeçalho < /h1 >


    < p > Meu primeiro parágrafo. < /p >
    Elementos HTML

    Start tag Element content End tag

    <h1> My First Heading </h1>

    <p> My first paragraph. </p>

    <br> none none


    Atributos Atributos
    HTML Os atributos HTML fornecem informações adicionais
    sobre os elementos HTML:
    Todos os elementos HTML podem ter atributos
    Os atributos fornecem informações adicionais
    sobre os elementos
    Os atributos são sempre especificados na tag de
    início
    Os atributos geralmente vêm em pares de
    nome/valor como: name="value"
    Atributos O atributo href
    HTML A tag <a> define um hiperlink. O atributo href
    especifica a URL da página para a qual o link vai:

    <a href="https://www.w3schools.com">Visit
    W3Schools</a>

    href -> H(ypertext) Ref(erence)] (Referência para


    Hipertexto).
    Atributos O atributo src
    HTML A tag <img> é usada para incorporar uma imagem em
    uma página HTML. O atributo src especifica o
    caminho para a imagem a ser exibida:

    <img src="img_girl.jpg">

    src -> recurso | fonte (localização)


    Normalmente o atributo src aponta para uma URL
    (Uniform Resource Locator - Localizador Uniforme de
    Recursos)
    Atributos O atributo src
    Há duas maneiras de especificar a URL no src atributo:

    HTML 1. URL absoluta - Links para uma imagem externa que está hospedada em
    outro site. Exemplo: src="https://www.w3schools.com/images/img_girl.jpg" .
    Observações: As imagens externas podem estar sob direitos autorais. Se
    você não obtiver permissão para usá-lo, poderá estar violando as leis de
    direitos autorais. Além disso, você não pode controlar as imagens externas;
    ele pode ser removido ou alterado repentinamente.

    2. URL relativo - Links para uma imagem hospedada no site. Aqui, a URL não
    inclui o nome de domínio. Se a URL começar sem uma barra, ela será
    relativa à página atual. Exemplo: src="img_girl.jpg". Se a URL começar com
    uma barra, ela será relativa ao domínio. Exemplo:
    src="/images/img_girl.jpg".

    Dica: quase sempre é melhor usar URLs relativos. Eles não vão
    quebrar se você mudar de domínio.
    Atributos Os atributos width e height

    HTML A tag <img>também deve conter os atributos width e


    height, que especificam a largura e a altura da
    imagem (em pixels):

    <img src="img_girl.jpg" width="500" height="600">

    Saiba mais sobre unidades de medida aqui!


    Atributos O atributo alt

    HTML O atributo obrigatório alt para a tag <img> especifica


    um texto alternativo para uma imagem, se a imagem
    por algum motivo não puder ser exibida. Isso pode
    ocorrer devido a uma conexão lenta ou a um erro no
    atributo src ou se o usuário usar um leitor de tela.

    <img src="img_girl.jpg" alt="Girl with a jacket" >


    Atributos O atributo style

    HTML O atributo style é usado para adicionar estilos a um


    elemento, como cor, fonte, tamanho e muito mais.

    <p style="color:red;">This is a red paragraph.</p>


    Atributos O atributo lang

    HTML Você deve sempre incluir o atributo lang dentro da


    tag <html>, para declarar o idioma da página da Web.
    Isso se destina a ajudar os motores de busca e
    navegadores.
    O exemplo a seguir especifica o português-Brasil
    como o idioma:
    <!DOCTYPE html>
    <html lang="pt-br">
    <body>
    ...
    </body>
    </html>
    Atributos Sugestão: Sempre use aspas para os
    valores dos atributos
    HTML O padrão HTML não requer aspas em torno dos
    valores de atributo.

    No entanto, o W3C recomenda aspas em HTML e exige


    aspas para tipos de documentos mais rígidos, como
    XHTML.
    HTML style
    O atributo style é usado para
    adicionar estilos a um elemento,
    como cor, fonte, tamanho e muito
    mais.
    HTML style
    A definição do estilo de um elemento
    HTML pode ser feita com o atributo
    style .
    O atributo HTML style tem a seguinte
    sintaxe:

    <tagname style="property:value;">
    HTML style
    Algumas propriedades mais utilizadas:

    Use background-color para cor de fundo


    Use color para cores de texto
    Use font-family para fontes de texto
    Use font-size para tamanhos de texto
    Use text-align para alinhamento de texto
    Formatação de texto HTML
    Algumas tags mais utilizadas:

    <b>- Texto em negrito


    <strong>- Texto importante
    <i>- Texto em itálico
    <em>- Texto enfatizado
    <mark>- Texto marcado
    <small>- Texto menor
    <del>- Texto deletado
    <ins>- Texto inserido
    <sub>- texto subscrito
    <sup>- Texto sobrescrito
    Cores HTML
    As cores HTML são
    especificadas com nomes
    de cores predefinidos ou
    com valores RGB, HEX, HSL,
    RGBA ou HSLA.

    Voltar ao slide de tópicos


    Cores HTML

    Nomes de cores
    Em HTML, uma cor pode ser
    especificada usando um nome de
    cor:

    Veja aqui 140 nomes de cores


    suportadas pelo HTML!
    Cores HTML
    Formato RGB e RGBA

    Um valor de cor RGB representa as


    fontes de luz VERMELHA, VERDE e AZUL.

    Um valor de cor RGBA é uma extensão


    de RGB com um canal Alfa (opacidade).
    Cores HTML
    Formato RGB e RGBA

    Em HTML, uma cor pode ser especificada


    como um valor RGB, usando esta fórmula:

    rgb ( vermelho, verde , azul )

    Cada parâmetro (vermelho, verde e azul)


    define a intensidade da cor com um valor
    entre 0 e 255.

    Saiba mais aqui!


    Cores HTML
    Formato RGB e RGBA

    Os valores de cores RGBA são uma extensão dos


    valores de cores RGB com um canal Alfa - que
    especifica a opacidade de uma cor.
    Um valor de cor RGBA é especificado com:

    rgba( vermelho, verde , azul, alfa )

    O parâmetro alfa é um número entre 0,0


    (totalmente transparente) e 1,0 (nada transparente):

    Saiba mais aqui!


    Cores HTML
    Formato HEX

    Uma cor hexadecimal é especificada com: #RRGGBB,


    onde os inteiros hexadecimais RR (vermelho), GG
    (verde) e BB (azul) especificam os componentes da
    cor.
    Onde rr (vermelho), gg (verde) e bb (azul) são valores
    hexadecimais entre 00 e ff (o mesmo que decimal 0-
    255).

    #rrggbb

    Saiba mais aqui!


    Cores HTML
    Formato HSL e HSLA

    HSL significa matiz, saturação e luminosidade.


    Os valores de cores HSLA são uma extensão do HSL com um canal Alfa
    (opacidade).
    Valores de cores HSL
    Em HTML, uma cor pode ser especificada usando matiz, saturação e
    luminosidade (HSL) na forma:

    hsl( matiz , saturação , luminosidade )

    Matiz é um grau na roda de cores de 0 a 360. 0 é vermelho, 120 é verde


    e 240 é azul.
    A saturação é um valor percentual. 0% significa um tom de cinza e
    100% é a cor total.
    A luminosidade também é um valor percentual. 0% é preto e 100% é
    branco.
    Cores HTML

    Saiba mais aqui!


    Ferramenta de
    cores da Adobe
    Bibliografia

    ADOBE INC. Adobe Color. Disponível em:


    https://color.adobe.com/pt/create/color-wheel. Acesso em: 21 fev 2023.

    SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec


    Editora Ltda, 2015.

    W3SCHOOLS. Tutorial HTML. Disponível em:


    https://www.w3schools.com/html/default.asp. Acesso em: 21 fev 2023.

    Você também pode gostar