Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML - Web Dev - Felipe Kenzo Shiraishi

    Enviado por

    FelipeKenzoShiraishi
    14 visualizações6 páginas
    Este documento ensina sobre a estrutura básica de HTML, incluindo como adicionar elementos como cabeçalhos, parágrafos, imagens e links usando tags apropriadas. Ele explica como organizar os elementos em uma hierarquia usando tags como <html>, <head>, <body>, <nav>, <section> e <div> e fornece um exemplo completo de código HTML para construir uma página simples com barra de navegação, imagem e texto.

    Descrição original:

    Manual introdutório de HTML para 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
    Este documento ensina sobre a estrutura básica de HTML, incluindo como adicionar elementos como cabeçalhos, parágrafos, imagens e links usando tags apropriadas. Ele explica como organizar os elementos em uma hierarquia usando tags como <html>, <head>, <body>, <nav>, <section> e <div> e fornece um exemplo completo de código HTML para construir uma página simples com barra de navegação, imagem e texto.

    Direitos autorais:

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

    HTML - Web Dev - Felipe Kenzo Shiraishi

    Enviado por

    FelipeKenzoShiraishi
    Este documento ensina sobre a estrutura básica de HTML, incluindo como adicionar elementos como cabeçalhos, parágrafos, imagens e links usando tags apropriadas. Ele explica como organizar os elementos em uma hierarquia usando tags como <html>, <head>, <body>, <nav>, <section> e <div> e fornece um exemplo completo de código HTML para construir uma página simples com barra de navegação, imagem e texto.

    Direitos autorais:

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

     

    Penas do Arauto - Felipe Kenzo Shiraishi 

    Web-Dev - Front End 


    19 de Outubro, 2018 

    HTML 5 

    O Que Esperar Deste Documento 


    Este  documento  busca  ensinar  a  lógica  de  hierarquias  de  ​Linguagens  de  Marcação​​,  usos  de  tipos 
    distintos de ​Tags​​ para montar uma página web. 

    1 
     
     

    HTML 
     

    Estrutura de uma Página 


    Todo  elemento  disposto  em  uma  página  em  seu  navegador  está  descrito por uma marcação. 
    O  HTML  não  se  preocupa  com  a  aparência  dos  elementos  da  página.  Apenas  se  ocupa  de  inserir  a 
    existência destes elementos e indicar a ordem e a hierarquia em que eles aparecem. 

    Por  exemplo,  em  HTML  é  possível  declarar  a  existência  de  uma tabela, que por sua vez é uma 


    hierarquia  ampla  que  engloba  linhas,  que  por  sua  vez  é  uma  hierarquia  ampla  que  engloba  células, 
    que  por  sua  vez  é  uma  hierarquia  ampla  que  abriga  um  texto.  Esta  tabela  também  pode  ser descrita 
    para aparecer antes ou depois de um texto. Esta é a função do HTML. 

    A  seguir,  consta  uma  sintaxe  básica  para  descrevermos  os  elementos  presentes  em  uma 
    web-page. 

    Assim,  construímos  o  esqueleto  do  nosso  site.  Todas  as  referências  externas  que  quisermos 
    adicionar  serão  inseridas  entre  as  tags  do  cabeçalho  ​<head> </head>​​. Todo elemento que queremos 
    adicionar  em  HTML serão representadas por tags que possuem um início marcado por <identificador> 
    e um fim </identificador>. 

    Um  elemento  pode  ser  hierarquicamente  responsável  por  outros  elementos  a  partir  do 
    momento em que outros elementos são colocadas dentro de suas tags. 

    Dentro das tags de ​<html>​​ haverá toda a descrição de nossa Web-page. 

    Dentro das tags de ​<head>​​ haverá todas as referências necessárias para a nossa página. 

    Dentro das tags de ​<body>​​ haverá todo o conteúdo que representaremos na nossa página. 

    2 
     
     

    HTML 
     

    Adicionando Elementos para a Página 


    Imagine que queiramos fazer uma Web-Page padrão que contenha os seguintes elementos: 

    ● Barra de Navegação 
    ○ Logotipo 
    ○ Atalho para a Home 
    ○ Atalho para Produtos 
    ○ Atalho para Sobre 
    ○ Atalho para Contato 
    ● Conteúdo de imagem 
    ● Conteúdo de texto 
    ○ Título 
    ○ Subtítulo 
    ○ Texto 

    Para  isso,  já  sabemos  que  vamos  nos  utilizar  de  3  tags  para  representar  hierarquias maiores: 
    uma  para  a  barra  de  navegação,  outra  para  a  imagem  e  outra  para  o  texto.  Então  precisaremos 
    adicionar tags hierarquicamente dependentes destas tags maiores. 

    Podemos  começar  uma  tag  empacotadora  de  todo  o  conteúdo  de  nossa  página.  O  nome 
    desse  artifício  é  criação  de  um  ​Container​​.  Isto  é  útil para atribuir uniformidade para os elementos da 
    sua  página  e  conseguir  controlá-la  esteticamente  com  maior  facilidade.  Fazemos  isso  usando  a  tag 
    <div>​​.  Podemos  diferenciar diferentes tipos de container atribuindo uma ​classe para cada uma delas. 
    Isso  será  útil  futuramente  ao  utilizarmos  CSS  para  especificar  como  queremos  que  certos containers 
    se pareçam dependendo da classe que possuem atribuída. 

    3 
     
     

    HTML 
     

    Montando a Barra de Navegação 


    Agora,  para  implementarmos  a  nossa  barra  de  navegação,  usaremos  a  tag  ​<nav>.  ​Apesar  de 
    ser  um  container  específico  para  links  de  barra  de  navegação,  ele  poderia  muito  bem  ser 
    implementado  com  um  div.  No  entanto  ele  possui  algumas  funções  de  acessibilidade  para 
    navegadores que renderizam diferentemente a página implementada para o usuário. 

    Desta  forma,  utilizaremos  as  tags  de  ​<nav>  ​para  implementar  a  nossa  barra  de  navegação 
    mesmo. 

    Dentro  da  nossa  barra  de  navegação  foi  especificado  que  queremos  dois tipos de conteúdos: 
    links  e  o  logotipo.  Então  criemos  um  container  para  o  Logotipo  e  um  container  para  a  nossa  lista  de 
    links.  Para  isso,  usarei  um  container  de  ​<div>  apenas  para  o  logotipo  e  um  container  de  lista  não 
    ordenada  (bullet  list)  usando  a tag ​<ul>​​. Cada elemento de uma lista deste tipo será especificada pela 
    tag  ​<li>​​.  Como  é  uma  lista  de  links,  usarei  a  tag  <a>​​,  que  é  um  mnemônico  para  anchor  (link). Assim 
    poderemos especificar para qual página o link irá redirecionar. 

    4 
     
     

    HTML 
     

    Adicionando o Conteúdo do Site 


    Agora adicionaremos seções para apresentar o conteúdo do nosso site. 

    Teremos  uma  seção  dedicada  a  apresentar  uma imagem e outra seção dedicada a apresentar 


    o  texto.  A  tag  que  usaremos  é  a  ​<section>​​.  Ela  é  geralmente  utilizado  para  dividir  o  documento  em 
    capítulos,  títulos,  seções,  parágrafos  e  etc.  Sempre  que  quisermos  especificar  se  queremos  escrever 
    um parágrafo utilizamos a tag ​<p>​​, um título < ​ h1>​​, ​<h2>​​, etc. 

    E,  para  apenas  podermos  visualizar  isso  ocorrendo,  utilizaremos  um  texto  pronto  em  latim 
    apenas  para  visualizar  como  fica.  Se  chama  Lorem  Ipsum  e  pode  ser  encontrado  neste  site: 
    https://www.lipsum.com 

    A seção de imagem não preencheremos com imagem, pois a adicionaremos na etapa de CSS. 

    Agora  já  poderemos  ver  como  o  nosso  site  está  apenas  com  os  elementos  de  marcação  de 
    linguagem.  Acontece  que  ele  não  estará  nem  um  pouco  bonito,  pois  não  é  para  isso  que  utilizamos 
    HTML.  Aqui  apenas  precisamos  organizar  os  elementos  da  nossa  página  e  dizer  o  que  queremos que 
    exista. 

    Para estilizá-lo, deveremos usar CSS, assunto do próximo artigo. 

    5 
     
     

    HTML 
     

    Resultado Final 

    6 
     

    Você também pode gostar