Scribd Logo
Carica

Benvenuto in Scribd!

  • 02 HTMLBasics

    Caricato da

    marcelo
    10 visualizzazioni59 pagine
    O básico sobre HTML para iniciantes.

    Titolo originale

    02-HTMLBasics

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    O básico sobre HTML para iniciantes.

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    10 visualizzazioni59 pagine

    02 HTMLBasics

    Caricato da

    marcelo
    O básico sobre HTML para iniciantes.

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 59

    Responsive Web Development

    HTML Basics
    Prof. Andrey A. Masiero – profandrey.masiero@fiap.com.br
    Sumário

    š História da Internet
    š Estrutura
    š Textos
    š Listas
    š Links
    š Imagens
    š Tabelas
    História de Internet
    World Wide Web

    1989 ~ 1990
    Propósito da Web
    Conseil Européen pour la
    Recherche Nucléaire (CERN)

    Troca de Informação
    Conteúdo estático

    Figuras para impressão


    Estrutura do Site
    Conteúdo de livro,
    sequencial.
    Sem preocupação
    com conteúdo
    CRIADA PELO CERN
    UOL em 1996
    Haven Works.
    Site de Notícias.
    Web Agora!
    Mas não tão agora...
    § Conteúdo dinâmico
    § Interação do Usuário
    § Programas que geram as páginas.
    Estrutura

    Como iniciar uma página web


    HTML - Estrutura

    š Descreve como é composta a página. Qual é a sua estrutura.


    š Ela funciona como uma página no MS Word. Possui título, subtítulo, parágrafo e tudo
    mais.
    š Vamos comparar uma página do Word com um documento em HTML.
    HTML - Estrutura

    š O código HTML está em magenta, envolvido por colchetes angulares.


    š São conhecidos como elementos.
    š O elementos, geralmente, são compostos por duas tags: uma de abertura e outra de
    fechamento.
    š Perceba que a tag de fechamento possui uma barra extra em sua composição.
    š Cada elemento HTML, conta para o navegador, como ele deve exibir o conteúdo. O
    conteúdo está armazenado entre as tags.
    Entendo as tags

    š <html></html> - Diz para o navegador que tudo entre elas é um código html
    š <body></body> - Diz para o navegador que tudo entre elas deve ser exibido na tela
    para o usuário
    š <h1></h1> - Determina o primeiro nível de cabeçalho
    š <h2></h2> - Determina o segundo nível de cabeçalho
    š <h3></h3> - Determina o terceiro nível de cabeçalho
    š <p></p> - Determina um parágrafo
    Zoom na Tag de Abertura

    <p>
    Colchete angular
    a esquerda
    Colchete angular
    a direita

    Elemento
    Zoom na Tag de Fechamento

    a esquerda
    </p>
    Colchete angular
    Barra
    Colchete angular
    a direita

    Elemento
    Atributos das Tags

    š Eles auxiliam a determinar mais informações sobre elementos


    š Colocam informações extras nos elementos
    š São opcionais, na maioria das vezes.
    š São compostos por nome e valor.
    š Exemplo:

    <p lang=“en-us”> Text in english</p>

    <p lang=“pt-br”> Texto em português</p>


    A Cabeça

    š Geralmente, antes da tag Body, existe a tag Head


    š Ela contém informações sobre a página (arquivo) HTML
    š Não é visível ao usuário (na maior parte das vezes)
    š Sempre vem acompanhada com a tag Title.
    Titulo da página aparece na aba do
    navegador
    Elementos de Texto
    Cabeçalhos

    š São 6 níveis de cabeçalhos


    š O navegador cria diferentes tamanhos de visualização para cada um dos níveis
    š O elemento é o h, composto pelo número do nível que vai de 1 a 6
    Parágrafo

    š Como em uma redação define o conteúdo descritivo da informação na página


    š O elemento é o p
    š Por padrão o navegador exibe cada parágrafo em uma nova linha.
    Formatações

    š Negrito o elemento é o b
    š Itálico o elemento é o i
    š Superescrito o elemento é o sup
    š Subescrito o elemento é o sub
    Quebra de Linha e Linha Horizontal

    š São tags especiais, que abrem e fecham sem nenhum conteúdo


    š O elemento da quebra de linha é o br - <br />
    š O elemento da linha horizontal é o hr - <hr />
    Quebra de Linha - br

    Linha Horizontal - hr
    Listas
    Listas Ordenadas

    š São listas que possuem uma determinada ordem em seus itens, seja através de números
    ou letras.
    š Por padrão a ordem é dada por números.
    š O elemento é o ol
    š Esse elemento é composto por itens através do elemento li
    Listas Não Ordenadas

    š São as listas que aparecem apenas com os bullets (bolinhas) ao lado.


    š O elemento é o ul
    š O elemento é composto por itens através do elemento li
    Listas Aninhadas

    š É possível compor sub listas.


    š Para isso é só inserir uma lista dentro da outra.
    Links
    Links

    š São criados através do elemento a


    š Qualquer conteúdo entre as tags <a></a> podem ser clicado pelo usuário
    š O atributo href é utilizado para informar o destino que deseja ir ao clicar no link
    š É um elemento de navegação entre conteúdos.
    Links

    š Direcionados a outro site


    š Direcionados para outra página do mesmo site
    š Especificamente para um conteúdo na mesma página
    š Nesse caso é necessário utilizar o atributo id do elemento ao qual deseja vincular o link
    š O elemento a também possui um atributo target que é utilizado para forçar a abertura
    de uma nova janela.
    Imagens
    Imagens

    š É possível adicionar imagens à sua página HTML


    š Uma das maneiras é utilizando o elemento img
    š Ele possui os seguintes atributos:
    š src – informa o caminho ao qual se encontra a imagem. Pode ser externo ou interno
    š alt – descrição da imagem. Não é apresentada no visual do site, mas é utilizado como
    ferramenta de acessibilidade
    š title – informações adicionais sobre a imagem. É apresentada ao posicionar o cursor do mouse
    sobre a imagem.
    š height – controla a altura da imagem
    š width – controla a largura da imagem
    Regras para Imagens

    š 1 – Use o formato certo. Normalmente os formatos são jpeg, gif ou png.


    š 2 – Salve imagens no tamanho certo. Isso evita distorções.
    š 3 – A medida de uma imagem para web é em pixel. Não use centímetros ou polegadas.
    Figuras

    š A partir do HTML 5 temos o elemento figure


    š Com ele é possível colocar legenda na imagem através do elemenot figcaption
    Tabelas
    Tabelas

    š São informações formatadas como grades. Por exemplo, uma planilha do Excel.
    š Cada bloco com uma informação é chamada de célula da tabela.
    š No HTML existem alguns elementos para trabalhar com tabelas.
    š Qual elemento utilizar dependerá do tamanho da sua tabela e as informações que
    deseja utilizar.
    š Nos próximos slides iremos discutir pouco a pouco esses elementos.
    <table> - É o elemento principal para a criação da tabela
    <tr> - Indica uma linha da tabela, sempre acompanhado por
    um ou mais td’s
    <td> - Representa a célula da tabela. Td significa table data.
    <th> - Parecido com o td, porém tem o objetivo de ser o
    cabeçalho de linhas e colunas
    Atributo colspan é utilizado para mesclar colunas
    Atributo rowspan é utilizado para mesclar linhas
    <thead> - Seção de cabeçalho para tabelas longas
    <tbody> - Seção do corpo da tabela
    <tfoot> - Seção de rodapé para tabelas longas
    Atributos:
    cellpadding – espaçamento dentro da célula
    cellspacing – espaçamento entre célula
    Atributos:
    border – define o tamanho da borda
    bgcolor – define a cor do fundo
    Copyright © 2019 Prof. Andrey Araujo Masiero

    Todos direitos reservados. Reprodução ou divulgação total ou parcial deste documento é


    expressamente proibido sem o consentimento formal, por escrito, do Professor (autor).

    Potrebbero piacerti anche