Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • CPW-04-Introdução HTML

    Enviado por

    Zoro Sola
    8 visualizações23 páginas

    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
    8 visualizações23 páginas

    CPW-04-Introdução HTML

    Enviado por

    Zoro Sola

    Direitos autorais:

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

    Construção de Páginas Web

    Felipe Thomas
    felipethomas@ifsul.edu.br
    Introdução HTML

    Instituto Federal Sul-rio-grandense | câmpus Charqueadas 2


    Padrão HTML

    <html>
    • Tem alguns marcadores (tags) obrigatórios
    <head>
    • html </head>
    • head <body>
    Aula CPW
    • body
    </body>
    • São esperados pelo navegador </html>

    Instituto Federal Sul-rio-grandense | câmpus


    3
    Charqueadas
    Cuidem ao editar os seus arquivos

    - Sempre verifiquem se o arquivo que vocês estão editando é o


    mesmo que está aberto em seu navegador;

    - As vezes abrimos mais de um arquivo e modificamos o errado.

    Instituto Federal Sul-rio-grandense | câmpus


    4
    Charqueadas
    Exemplo

    • Copiem o código abaixo e olhem no navegador vocês

    5
    DOCTYPE

    <!DOCTYPE html>
    • Indica o tipo do documento <html>
    • DOC = Documento <head>
    <meta charset="UTF-8">
    • TYPE = Tipo
    <title>Título da Página</title>
    • Define que o documento é HTML5 </head>
    • Substituiu um doctype longo das versões <body>
    anteriores do html <h1>Meu primeiro título</h1>
    • Só precisa colocar html como tipo <p>Meu primeiro parágrafo</p>
    • É uma informação para o navegador e </body>
    </html>
    não uma declaração

    Instituto Federal Sul-rio-grandense | câmpus


    6
    Charqueadas
    <html>

    <!DOCTYPE html>
    • é o marcador raiz do <html>
    documento <head>
    • tudo que tem dentro dele <meta charset="UTF-8">
    será lido e interpretado pelo <title>Título da Página</title>
    navegador </head>
    <body>
    <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    </body>
    </html>
    7
    <head>

    <!DOCTYPE html>
    • É onde definimos meta <html>
    informação sobre o <head>
    documento <meta charset="UTF-8">
    • Codificação
    • Arquivos externos <title>Título da Página</title>
    • Título </head>
    • ... <body>
    <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    </body>
    </html>
    8
    <meta>

    <!DOCTYPE html>
    • Indica uma meta informação <html>
    • No caso é a codificação
    • charset = character set <head>
    • Conjunto de caracteres <meta charset="UTF-8">
    • UTF-8 é o padrão de caracteres <title>Título da Página</title>
    mais usado </head>
    • Faz com que apareça certo o “í” e
    o “á” <body>
    <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    </body>
    </html>
    9
    <title>

    <!DOCTYPE html>
    • É o título da página <html>
    • que aparece lá em cima na aba
    • é um marcador separado <head>
    • e “único” <meta charset="UTF-8">
    • o navegador sempre lê o primeiro <title>Título da Página</title>
    marcador desse tipo para
    considerar o que ele deve fazer </head>
    • Testem colocar embaixo do <body>
    <title> <h1>Meu primeiro título</h1>
    • <title>Outro Título da <p>Meu primeiro parágrafo</p>
    Página</title> </body>
    </html>
    10
    <body>

    <!DOCTYPE html>
    • corpo <html>
    • é onde o conteúdo do <head>
    documento de fato é colocado <meta charset="UTF-8">
    • tudo que vai ser renderizado na
    página está dentro do marcador <title>Título da Página</title>
    <body> </head>
    • Dentro do body temos vários <body>
    marcadores que formatam o <h1>Meu primeiro título</h1>
    conteúdo da página <p>Meu primeiro parágrafo</p>
    </body>
    </html>
    11
    <h1> = Heading1

    <!DOCTYPE html>
    • h1 é um marcador de título <html>
    de texto ou cabeçalho de <head>
    texto <meta charset="UTF-8">
    • vem por padrão maior do que o
    texto regular <title>Título da Página</title>
    • usado para dar destaque ao </head>
    texto <body>
    • Tentem trocar por h2, h3, h4 <h1>Meu primeiro título</h1>
    ... <p>Meu primeiro parágrafo</p>
    </body>
    </html>
    12
    <p> = paragraph

    <!DOCTYPE html>
    • p é um marcador de <html>
    parágrafo <head>
    • separa a linha com
    espaçamento e da uma quebra <meta charset="UTF-8">
    de linha <title>Título da Página</title>
    • Como fazer caso queira mais </head>
    um parágrafo? <body>
    • coloquem mais uma tag p no
    corpo da sua página <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    </body>
    </html>
    13
    <p> = paragraph

    <!DOCTYPE html>
    • Qual o resultado se dermos <html>
    um enter entre os dois <head>
    parágrafos? <meta charset="UTF-8">
    • Será que vai criar uma linha <title>Título da Página</title>
    </head>
    em branco na nossa página?
    <body>
    <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>

    <p>Meu segundo parágrafo</p>


    </body>
    </html> 14
    <br> = break

    <!DOCTYPE html>
    • quebra de linha <html>
    • coloca uma linha em branco no <head>
    conteúdo <meta charset="UTF-8">
    • o que tem de diferente nesse
    <title>Título da Página</title>
    marcador?
    </head>
    <body>
    <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    <br>
    <p>Meu segundo parágrafo</p>
    </body>
    </html> 15
    hr = horizontal rule

    <!DOCTYPE html>
    • linha horizontal <html>
    • coloca uma linha horizontal que <head>
    corta a tela <meta charset="UTF-8">
    • separador de conteúdo
    <title>Título da Página</title>
    • também não é fechado
    • a linha não tem conteúdo também </head>
    • mesma ideia do br <body>
    <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    <hr>
    <p>Meu segundo parágrafo</p>
    </body>
    </html> 16
    <!DOCTYPE html>
    <html>
    b = bold <head>
    <meta charset="UTF-8">
    <title>Título da Página</title>
    </head>
    - bold = Negrito <body>
    - Deixa o texto em <h1>Meu primeiro título</h1>
    negrito <p>Meu primeiro parágrafo</p>
    <hr>
    - Como vimos na aula
    <p>Meu segundo parágrafo</p>
    passada <p><b>Meu parágrafo
    - Tudo que fica dentro negrito</b></p>
    do marcador de </body>
    </html>
    negrito fica formato 17
    <!DOCTYPE html>
    <html>
    b = bold <head>
    <meta charset="UTF-8">
    <title>Título da Página</title>
    </head>
    - Qual a diferença?
    <body>
    <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    <hr>
    <p>Meu segundo parágrafo</p>
    <p><b>Meu parágrafo negrito</b></p>
    <b><p>Meu negrito parágrafo</p></b>
    </body>
    </html> 18
    <!DOCTYPE html>
    <html>
    b = bold <head>
    <meta charset="UTF-8">
    <title>Título da Página</title>
    </head>
    - Qual a diferença?
    <body>
    - Nenhuma
    <h1>Meu primeiro título</h1>
    - Na visualização
    <p>Meu primeiro parágrafo</p>
    <hr>
    <p>Meu segundo parágrafo</p>
    <p><b>Meu parágrafo negrito</b></p>
    <b><p>Meu negrito parágrafo</p></b>
    </body>
    </html> 19
    <!DOCTYPE html>
    <html>
    b = bold <head>
    <meta charset="UTF-8">
    <title>Título da Página</title>
    </head>
    - Qual a diferença?
    <body>
    - Nenhuma
    <h1>Meu primeiro título</h1>
    - Na visualização
    <p>Meu primeiro parágrafo</p>
    - Na organização <hr>
    - é diferente… <p>Meu segundo parágrafo</p>
    - marcadores pais <p><b>Meu parágrafo negrito</b></p>
    e filhos... <b><p>Meu negrito parágrafo</p></b>
    </body>
    </html> 20
    Marcadores Irmãos

    <!DOCTYPE html>
    - O que vocês acham que é? <html>
    <head>
    - Exemplos...
    <meta charset="UTF-8">
    <title>Título da Página</title>
    </head>
    <body>
    <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    </body>
    </html>
    21
    Marcadores Irmãos

    <!DOCTYPE html>
    - head e body <html>
    <head>
    - meta e title
    <meta charset="UTF-8">
    - h1 e p <title>Título da Página</title>
    </head>
    - para o html eles são irmãos <body>
    quando estão no mesmo <h1>Meu primeiro título</h1>
    <p>Meu primeiro parágrafo</p>
    nível </body>
    - body e h1 não são irmãos </html>
    22
    Obrigado

    Instituto Federal Sul-rio-grandense | câmpus Charqueadas 23

    Você também pode gostar