Introdução ao HTML5

HTML B√°sico – Iframes

Essa é a parte 14 de 16 na série HTML

Iframes ou frames (quadros) embutidos s√£o usados para exibir p√°ginas e recursos externos dentro de uma determinada p√°gina web.

Podemos dizer que são um dos elementos mais poderosos do HTML, e um item obrigatório para o arsenal de qualquer web designer.

Você pode imaginar um Iframe como um mininavegador dentro de uma janela do navegador web que mostra uma página.

Portanto, a função dos também chamados Inline frames é simples, exibir uma segunda página dentro de uma página web principal.

Usamos a tag <iframe> para criar esses quadros embutidos em nossas p√°ginas web.

A sintaxe b√°sica para adicionar um Iframe em uma p√°gina seria assim:

<iframe scr="_URL_"></iframe>

Desse modo, o atributo src será responsável por informar a localização do objeto externo ou página da web.

Essa URL pode ser um caminho absoluto ou relativo, ou seja, ser uma p√°gina totalmente externa ou algum objeto ou p√°gina interna.

Para ficar mais claro, aqui est√° um exemplo para um recurso externo:

<iframe scr="example.com"></iframe>

Resultado:

Aqui está um iframe que vai carregar uma página HTML localizada no mesmo diretório da principal:

<iframe scr="contato.html"></iframe>

Se voc√™ abrir um v√≠deo do YouTube e clicar em compartilhar, vai notar que existe um bot√£o para a op√ß√£o “Incorporar”, que vai gerar para voc√™ justamente um iframe – veja um exemplo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KyeXPX0Z0w0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Assim, você tem uma outra página da web com um player de vídeo sendo mostrado dentro da sua página principal, parecendo que esta faz parte do seu site.

De onde vieram os Iframes?

Bem lá no início do HTML, criávamos sites utilizando Iframes e cada parte do site Рcabeçalho, menu, corpo e rodapé Рera uma outra página.

The Magical <iframe> Tag: An Introduction - DWUser.com Education Center

Perceba na imagem acima que cada parte ali tem uma barra de rolagem, ou seja, eram uma outra p√°gina web sendo exibida dentro de uma p√°gina principal com um iframe.

Isso foi muito utilizado no final dos anos 90 e aqui no Brasil até no início dos anos 2000.

Reconheço que esses sites não eram bonitos e que talvez fossem até meio confusos, especialmente quando os web designers não codificavam perfeitamente.

Contudo, um dos motivos pelos quais eram t√£o populares, √© que voc√™ poderia carregar o conte√ļdo em um √ļnico frame, separado da navega√ß√£o, cabe√ßalho, rodap√©, etc.

A grande diferen√ßa hoje, √© que todo conte√ļdo agora est√° no mesmo lugar, na mesma p√°gina, e isso ajudou tamb√©m a otimizar o desempenho dos sites.

Hoje em dia temos conex√Ķes de internet √≥timas para carregar tudo de uma vez, mas quando us√°vamos modens dial-up com 28k, os iframes ajudavam.

Ent√£o, como n√£o precisamos mais nos preocupar com kilobytes como antes, os Framesets (nome oficial para layouts baseados em frames) se tornaram desnecess√°rios.

Um pequeno exemplo de como os Framesets eram usados:

<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
    <frame src="title.html" noresize scrolling="no">
    <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
        <frame src="menu.html" scrolling="auto" noresize>
        <frame src="conteudo.html" scrolling="yes" noresize>
    </frameset>
</frameset>

Como eu disse, os Framesets se tornaram obsoletos no HTML, e ganharam seu irm√£o mais novo chamado Inline Frame (Iframe) em 1997, que foram rapidamente superando seu irm√£o mais velho.

H√° muita coisa a saber incorpora√ß√£o de conte√ļdo de terceiros, isolamento de conte√ļdo e gerenciamento do carregamento dos frames, mas vamos avan√ßar.

Definindo as dimens√Ķes de um iframe

Você pode querer definir width e height, respectivamente, largura e altura de um iframe, e isso é usado como atributo do elemento <iframe>.

Portanto, faríamos da seguinte forma:

<iframe src="contato.html" width="400" height="200"></iframe>

No exemplo acima, estamos atribuindo uma largura de 400 pixels e uma altura de 200 (px), que também poderiam ser definidas usando CSS.

Nora: O padr√£o dos atributos width e hegiht s√£o especificados em pixels por padr√£o, mas voc√™ tamb√©m pode usar porcentagens (50%, 30%…). A largura padr√£o renderizada costuma ser de 300×150 pixels.

Removendo Fremeborder Padr√£o

Normalmente o iframe é renderizado pelo navegador com uma borda padrão, que pode ser modificada ou removida usando o atributo frameborder.

contudo, o mais recomendável é que você entenda isso como uma forma de trabalhar o estilo e utilize a propriedade border do CSS para configurar a borda.

Aproveitando para explicar outros atributos do elemento <iframe>, aqui est√° um exemplo:

<iframe src="http://www.mit.edu/" width="600" height="300" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

Outros atributos de iframes

Entendendo melhor os atributos dos frames embutidos, temos:

AtributoDescrição
nameConforme descrito acima, este atributo pode ser usado em conjunto com o atributo target de um link para alterar o src do iframe.
scrollingPode ser¬†scrolling="yes"ou¬†scrolling="no".¬†Especifica se uma barra de rolagem deve ser mostrada para o conte√ļdo do frame.¬†Observe que o uso de CSS √©, na verdade, o m√©todo recomendado para controlar a rolagem, mas ainda usamos o atributo¬†scrollingpara garantir a compatibilidade com navegadores mais antigos.
frameborderIsso controla se h√° uma borda no quadro (¬†frameborder="1") ou n√£o (¬†frameborder="0").¬†Assim como acontece com¬†scrolling, essa propriedade realmente deve ser controlada via CSS, mas podemos usar o¬†frameborderpara compatibilidade de navegador.¬†Ao definir¬†frameborder="0", o iframe se torna muito menos percept√≠vel e o conte√ļdo parece fazer parte da p√°gina principal.
allowtransparencySe quiser que o plano de fundo de sua p√°gina principal fique vis√≠vel atr√°s do iframe, √© necess√°rio ativar a transpar√™ncia adicionando allowtransparency="true".

Explicando melhor o atributo name, é que podemos usar iframes como destino para hiperlinks.

Desse modo, quando um link com o atributo target contiver o nome do iframe, o recurso vinculado ser√° aberto dentro daquele iframe.

Aqui está um exemplo de código para explicar isso:

<iframe src="pagina-exemplo.html" name="meuFrame"></iframe>
<p>
    <a href="https://www.google.com" target="meuFrame">Abrir Google no iframe</a>
</p>

Portanto, o exemplo acima significa que, se você clicar no link, abrirá o destino desse link dentro do iframe vinculado a partir do namee target.

Conclus√£o

O HTML(5) é incrível, obrigatório para qualquer pessoa que pretende criar páginas web ou mesmo se tornar um web designer ou até um programador.

Essa aula encerra o módulo de HTML Básico, mas continuaremos avançando sobre a linguagem de marcação mais popular do mundo.

Se voc√™ tiver qualquer d√ļvida, deixe nos coment√°rios de cada aula e nos vemos nas pr√≥ximas.

Grande abraço,

Introdução ao HTML5

HTML B√°sico – Formul√°rios

Essa é a parte 13 de 16 na série HTML

Os formul√°rios s√£o excelentes formas de criar interatividade e coletar informa√ß√Ķes do usu√°rio.

Os formul√°rios HTML podem conter v√°rios tipos de campos como caixas de texto, caixas de sele√ß√£o, √°reas de texto, lista de op√ß√Ķes, bot√Ķes, etc.

Os usu√°rios dever√£o preencher com as informa√ß√Ķes solicitadas em cada campo e fazer o que chamamos de Submit, que √© o envio dessas informa√ß√Ķes para um servidor process√°-las.

Para criar esses formulários em uma página web, começamos com o elemento <form> e aqui está um exemplo de como seria:

<form>
    <label>Nome: <input type="text"></label>
    <label>Senha: <input type="password"></label>
    <input type="submit" value="Enviar">
</form>

Resultado:

Elementos de Entrada

Um dos elementos mais comuns em formulários HTML, quer permitem que você especifique o tipo de campo através do atributo type.

Esses elementos podem ser do tipo campo de texto, senha, caixa, rádio, botão de enviar, botão de reset e caixa de seleção.

Alguns elementos de entrada foram introduzidos no HTML5, mas veremos mais detalhes a seguir.

Para criar um elemento de entrada, vamos utilizar o elmento <input>.

Campos de Texto

Os campos de texto s√£o os elementos mais b√°sicos e comuns em formul√°rios, permitindo que o usu√°rio insira textos.

Para criar uma caixa de texto simples usaremos o <input> com o atributo type com o valor text, como podemos exemplificar a seguir:

<form>
    <label for="usuario">Usu√°rio:</label>
    <input type="text" name="usuario" id="usuario">
</form>

Resultado:

Observação: Note que o elemento <label> está definindo um rótulo para o elemento <input> através do atributo for que deve ter o mesmo valor do campo id do input.

Campo de Senha

Os campos de senha, na verdade, s√£o bem semelhantes aos campos de texto, mas os caracteres mostrados exibem asteriscos ou pontos.

Basicamente, esse tipo de campo vai impedir de se ler a senha na tela enquanto você digita, e para criar esse campo, usamos no <input> o valor password no atributo type.

Aqui est√° um exemplo de uso:

<form>
    <label for="senha">Senha:</label>
    <input type="password" name="senha" id="senha">
</form>

Resultado:

Bot√Ķes de R√°dio

Os Radio Buttons são usados geralmente para permitir que o usuário selecione apenas uma opção de um conjunto de valores.

Para criar bot√Ķes de r√°dio, usamos o valor radio para o atributo type do elemento <input>, da seguinte forma:

<form>
    <input type="radio" name="sexo" id="masculino">
    <label for="masculino">Masculino</label>
    <input type="radio" name="sexo" id="feminino">
    <label for="feminino">Feminino</label>
</form>

Resultado:

Nota: Repare no código acima que usamos o atributo name para definir o conjunto, ou seja, todos que tiverem o mesmo nome, fazem parte do conjunto.

Caixas de Seleção

Tamb√©m chamado de checkbox, diferentemente dos bot√Ķes de radio, s√£o usados para permitir que v√°rias op√ß√Ķes sejam selecionadas.

Para criar esse conjunto de op√ß√Ķes selecion√°veis, usamos o valor checkbox no atributo type do elemento <input> da seguinte forma:

<form>
    <input type="checkbox" name="esportes" id="futebol" checked>
    <label for="futebol">Futebol</label>
    <input type="checkbox" name="esportes" id="basquete">
    <label for="basquete">Basquete</label>
    <input type="checkbox" name="esportes" id="volei">
    <label for="volei">V√īlei</label>
</form>

Resultado:

Nota: Definimos o conjunto atrav√©s do atributo name, assim como nos bot√Ķes de r√°dio.

Dica: Para pré-selecionar uma opção por padrão, basta usar o atributo (vazio) checked, como pode ser visto acima.

Seleção de Arquivo

Se você precisar que o usuário envie um arquivo em anexo ao seu formulário HTML, basta usar o valor file para o atributo type de um elemento <input>.

Isso vai fazer com que o navegador renderize um bot√£o que permitir√° o usu√°rio localizar o arquivo localmente no dispositivo que esteja usando.

Aqui est√° um exemplo:

<form>
    <label for="documento">Documento:</label>
    <input type="file" name="upload" id="documento">
</form>

Resultado:

√Ārea de Texto

Também chamado de Textarea, é usado para criar uma caixa de texto com linhas e colunas para permitir que o usuário digite mais de uma linha de texto.

Para isso, usamos o elemento <textarea>, da seguinte forma:

<form>
    <label for="biografia">Biografia:</label>
    <textarea rows="3" cols="30" name="biografia" id="biografia">Sua biografia aqui...</textarea>
</form>

Resultado:

Listas Suspensas

Listas suspensas, menu dropdown ou selects, permitem que o usu√°rio selecione um ou mais op√ß√Ķes de uma lista suspensa de op√ß√Ķes.

Essa caixa com um lista √© criada usando o elemento <select> com a lista de op√ß√Ķes usando o elemento <option>, da seguinte forma:

<form>
    <label for="estados">Estados:</label>
    <select name="estados" id="estados">
        <option value="rj">Rio de Janeiro</option>
        <option value="sp">S√£o Paulo</option>
        <option value="mg">Minas Gerais</option>
        <option value="es">Espírito Santo</option>
    </select>
</form>

Resultado:

Bot√Ķes de Envio e Redefini√ß√£o

Para que nossos formul√°rios possam ser enviados, usamos um bot√£o de enviar usando o valor submit para o atributo type.

Agora, para oferecer a opção de limpar os dados preenchidos, usamos o valor reset para no atributo type.

Outra coisa importante é que, se precisamos enviar esse formulário para um servidor web, usamos o atributo action com uma URL (relativa ou absoluta).

Além do atributo action, usamos o atributo method que pode ter dois valores: GET ou POST.

Esses métodos, como o nome já diz, indicam o método de envio do formulário.

O m√©todo POST passa os valores de forma “oculta”, enquanto o GET acaba enviando tudo que foi inserido no formul√°rio como par√Ęmetro de URL.

Um exemplo, seria algo assim:

<form action="urldoarquivo/arquivo.php" method="post">
    <label for="sobrenome">Sobrenome:</label>
    <input type="text" name="sobrenome" id="sobrenome">
    <input type="submit" value="Enviar">
    <input type="reset" value="Limpar">
</form>

Resultado:

Nota: Voc√™ tamb√©m pode criar bot√Ķes usando o elemento <button> que oferece at√© mais recursos como a incorpora√ß√£o de outros elementos HTML.

Agrupamento de Campos

Podemos agrupar elementos de formulários usando o elemento <fieldset> e até podemos definir rótulos para esses agrupamentos usando o elemento <legend>.

A ideia do <fieldset> é tornar os campos mais associativos, identificáveis e, desse modo, tornar os formulários mais amigáveis, digamos assim.

Ficaria da seguinte forma:

<form>
    <fieldset>
        <legend>Detalhes de Contato</legend>
        <label>E-mail: <input type="email" name="email"></label>
        <label>Telefone: <input type="text" name="telefone"></label>
    </fieldset>
</form>

Resultado:

Detalhes de Contato

Atributos de formul√°rios

Aqui est√° uma lista de alguns dos atributos mais usados em formul√°rios HTML:

AtributoDescrição
nameEspecifica o nome do formul√°rio.
actionEspecifica a URL do programa ou script no servidor web que ser√° usado para processar as informa√ß√Ķes enviadas por meio do formul√°rio.
methodEspecifica o m√©todo HTTP usado para enviar os dados ao servidor da web pelo navegador. O valor pode ser get(o padr√£o) e post.
targetEspecifica onde exibir a resposta recebida ap√≥s o envio do formul√°rio. Os valores poss√≠veis s√£o _blank_self_parent_top.
enctypeEspecifica como os dados do formul√°rio devem ser codificados ao enviar o formul√°rio ao servidor. Aplic√°vel apenas quando o valor do methodatributo √© post.

Existem v√°rios outros atributos que veremos mais adiante.

Crie o h√°bito de usar o atributo name nos formul√°rios HTML, especialmente se haver√° mais de 1 formul√°rio na p√°gina web.

Introdução ao HTML5

HTML B√°sico – Listas

Essa é a parte 12 de 16 na série HTML

Nesta aula vamos falar sobre as Listas que permitem apresentar informa√ß√Ķes de forma bem formatada e sem√Ęntica.

As listas em HTML podem ser de 3 tipos diferentes para objetivos distintos:

  • Listas n√£o ordenadas: S√£o listas criadas sem especificar uma ordem;
  • Listas ordenadas: Cria uma lista de itens relacionados em uma ordem espec√≠fica;
  • Lista de descri√ß√£o: Serve para criar lista de termos e suas descri√ß√Ķes.

Nota: Os itens da lista podem conter os diversos elementos HTML, como imagens, links, etc. Além disso, vocÊ pode colocar um outra lista inteira dentro de um item para criar uma lista aninhada, como chamamos.

Listas n√£o ordenadas

Uma lista não ordenada é criada a partir do elemento <ul> (Unordered Lists) e cada item da lista é definido com o elemento <li> (List Item).

Aqui est√° um exemplo de como seria uma lista n√£o ordenada:

<ul>
 <li> Bolo de chocolate </li>
 <li> Bolo Floresta Negra </li>
 <li> Bolo de abacaxi </li> 
</ul>

Resultado:

  • Bolo de chocolate
  • Bolo Floresta Negra
  • Bolo de abacaxi

Dica: Você pode alterar o estilo padrão das listas usando CSS.

Listas ordenadas

As listas ordenadas s√£o criadas com o elemento <ol> (Ordered Lists) e, assim como as n√£o ordenadas, cada item usa um elemento <li>.

Aqui vai um exemplo de uma lista com uma sequ√™ncia/ordem de n√ļmeros:

<ol> 
    <li> Aperte o cinto de segurança </li> 
    <li> Ligue o motor do carro </li> 
    <li> Olhe em volta e v√° </li> 
</ol>

Resultado:

  1. Aperte o cinto de segurança
  2. Ligue o motor do carro
  3. Olhe em volta e v√°

Listas de descrição

Apesar de n√£o serem t√£o usais quanto as outras duas, oferece uma forma de listagem interessante.

A lista é criada usando o elemento <dl>(Description List) e para criar os itens, usamos o elemento <dt>que especifica o termo a ser descrito e o elemento <dd> para definir a descrição.

Nota: Geralmente os navegadores colocam termos e descri√ß√Ķes em linhas separadas e os ainda s√£o ligeiramente recuados.

Aqui est√° um exemplo de como seria uma lista dessas:

<dl> 
    <dt> P√£o </dt> 
    <dd> Um alimento assado feito de farinha. </dd> 
    <dt> Café </dt> 
    <dd> Uma bebida feita com grãos de café torrados. </dd> 
</dl>

Resultado:

P√£o
Um alimento assado feito de farinha.
Café
Uma bebida feita com grãos de café torrados.
Introdução ao HTML5

HTML B√°sico – Tabelas

Essa é a parte 11 de 16 na série HTML

Nessa aula vamos falar um pouco sobre as Tabelas que s√£o uma boa forma de organizar dados em linhas e colunas em uma p√°gina HTML.

Portanto, usamos para exibir dados que chamamos de tabulares como listas de produtos, ou detalhes de clientes, relatórios, entre outras dezenas de possibilidades.

Para criar uma tabela no HTML, usamos o elemento <table>, para definir linhas usamos elementos <tr>, em seguida, usamos o elemento <td>para definir as colunas.

Há também a possibilidade de definir, geralmente, a primeira linha como cabeçalho e, ao invés do <td> usamos o elemento <th>, sendo esse h de HEADER.

Aqui está o exemplo de uma tabela com um cabeçalho:

<table>
    <tr>
        <th>No.</th>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Jo√£o da Silva</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Pedro Paulo</td>
        <td>34</td>
    </tr>
</table>

Resultado:

No. Nome Idade
1 Jo√£o da Silva 16
2 Pedro Paulo 34

As tabelas serão bem simples, mas você pode usar o CSS para definir o tamanho, bordas, espaçamentos, cores.

Nota: Antes usávamos atributos do próprio elemento <table> para definir bordas, espaçamentos, alinhamos, etc, mas atualmente recomenda-se o CSS.

Mesclando linhas e colunas

Podemos mesclar linhas e colunas da tabela para expandí-las, já que normalmente elas não ultrapassam seus próprios espaços.

Portanto, podemos usar atributos rowspan para expandir linhas e colspan para expandir ou mesclar colunas.

Vejamos um exemplo de mesclagem de linha:

<table>
    <tr>
        <th>Nome:</th>
        <td>Fulano de Tal</td>
    </tr>
    <tr>
        <th rowspan="2">Telefone:</th>
        <td>5557-7854</td>
    </tr>
    <tr>
        <td>5557-7855</td>
    </tr>
</table>

Resultado:

Nome: Fulano de Tal
Telefone: 5557-7854
5557-7855

Aqui est√° um exemplo de uma tabela com colunas mescladas:

<table>
    <tr>
        <th>Nome</th>
        <th colspan="2">Telefone</th>
    </tr>
    <tr>
        <td>Beltrano da Silva</td>
        <td>4555-0192</td>
        <td>4555-0152</td>
    </tr>
</table>

Resultado:

Nome Telefone
Beltrano da Silva 4555-0192 4555-0152

Adicionando legendas

Você pode querer especificar uma legenda (ou título) para sua tabela, para isso, deve usar o elemento <caption>.

Esse elemento é colocado logo depois que abrimos nossa tabela com a tag <table>.

Aqui est√° um exemplo de como poderiamos usar o <caption>:

<table>
    <caption>Personagens Famosos</caption>
    <tr>
        <th>No.</th>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

Resultado:

Personagens Famosos
No. Nome Idade
1 Peter Parker 16
2 Clark Kent 34

Cabeçalho, corpo e rodapé da tabela

Vimos acima o <th>que é o elmento que usamos no lugar do <td> para criar cabeçalhos em nossas tabelas.

No entanto, para criar as partes cabeçalho, corpo e rodapé, usamos <thead>, <tbody> e <tfoot>, respectivamente.

Essa é a forma de estruturar de forma correta uma tabela e aqui está um exemplo:

<table>
    <thead>
        <tr>
            <th>Itens</th>
            <th>Quantidade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Computadores</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Celulares</td>
            <td>100</td>
        </tr>        
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>120</td>
        </tr>
    </tfoot>
</table>

Resultado:

Itens Quantidade
Computadores 20
Celulares 100
Total 120

Dica: Apesar de termos usado muito as tabelas no passado para criar layouts de páginas, você não deve fazer isso atualmente.

Introdução ao HTML5

HTML B√°sico – Imagens

Essa é a parte 10 de 16 na série HTML

Agora vamos falar sobre um dos elementos que fazem total diferença em documentos HTML ou páginas Web РAs imagens.

Um detalhe antes, as vezes, falo sobre documentos web, outras vezes chamo de p√°ginas web, mas vamos definir que s√£o p√°ginas, certo?

√Č cedo para explicar sobre isso, especialmente porque esse n√£o √© um curso de linguagem de programa√ß√£o e sim de linguagem de marca√ß√£o.

Contudo, só para você saber, você pode estar vendo uma página com diversos elementos HTML mas aquele não ser um documento HTML.

Isso porque boa parte das linguagens de programação geram um código HTML como resultado para um processamento que ocorre no servidor, chamado de server-side.

Mas, isso foi apenas para esclarecer, já que estamos já quase encerrando o módulo Básico para entrar no Avançado!

Voltando a falar sobre as imagens, elas é que tornam nossas páginas da web mais interessantes visualmente, mais coloridas, mais agradáveis.

Já vimos como inseri-las nas aulas anteriores, mas, a tag que usamos é a <img>, que é varia, ou seja, não precisa de uma tag de fechamento.

Aqui est√£o alguns exemplos:

<img src="imagens/nomedaimage.jpg" alt="Descrição da Imagem1">
<img src="https://urldaimagem.com.br/imagens/imagem.png alt="Imagem 2">

As tags imagens precisam necessariamente do atributo src (fonte) para informar a localização da imagem, que pode, como vimos, usar um URL absoluto ou relativo.

Outro atributo que não é obrigatório, mas é muito importante é o alt (texto alternativo), porque ele traz uma informação em texto sobre uma imagem e que é lido pelos motores de busca.

Outra coisa importante sobre o atributo alt é que ele será mostrado caso a imagem não estja disponível ou não puder ser exibida por alguma razão.

Definindo o tamanho de uma imagem

√Č poss√≠vel atribuir as dimens√Ķes da imagem a ser mostrada na p√°gina usando os atributos width(largura) e height(largura) que s√£o, por padr√£o, interpretados em pixels.

Aqui est√£o alguns exemplos:

<img src="imagens/gato.jpg" alt="Gato" width="300" height="300">
<img src="http://exemplo.com.br/img/cachorro.jpg" alt="Cachorro" width="250" height="150">

Contudo, √© poss√≠vel tamb√©m usar os atributos com o mesmo nome no CSS para definir as dimens√Ķes dessas imagens, ent√£o ficariam assim:

<img src="imagens/gato.jpg" alt="Gato" style="width:300px; height:300px;">
<img src="http://exemplo.com.br/img/cachorro.jpg" style="width:100%; height:auto;">

Vale dizer que se voc√™ fizer desse modo, deve lembrar que estilos embutidos t√™m prioridade mais alta, portanto, isso vai fazer com que estilos externos ou incorporados n√£o alterem as dimens√Ķes (em teoria).

Outra coisa, diferente de usar os atributos, se for usar estilo CSS embutido, você precisa especificar a unidade de medida do tamanho, geralmente em pixel (px).

Nota: √Č altamente recomend√°vel especificar as dimens√Ķes da imagem, mesmo que sejam em percentuais para que os navegadores possam alocar o espa√ßo mesmo antes de carregar as imagens.

Elementos de imagem no HTML5

Falei sobre definir as imagens com dimens√Ķes em percentuais – ou at√© autom√°ticas – porque essas dimens√Ķes poderiam, e deveriam, variar de acordo com o tamanho da tela.

Imagine que você definiu o tamanho de 500px de largura (width), mas a página será carregada em um celular que tem uma largura de uns 350px, o que acha que aconteceria?

Além disso, você precisa saber que a redução de dimensão da imagem usando width e height não reduz o tamanho original do arquivo.

Para resolver essas quest√Ķes, o HTML introduziu a tag <picture> que permite definir v√°rias vers√Ķes de uma imagem para diferentes tipos de dispositivos.

Portanto, podemos usar elementos <source>para especificar diferentes fontes para uma <img>final РIsso é bem legal!

Além disso, cada <source>pode especificar uma condição que é usada pelo navegador para determinar qual fonte deve ser usada.

Para ficar mais claro, aqui vai um exemplo:

<picture>
    <source media="(min-width: 1000px)" srcset="logo-grande.png">
    <source media="(max-width: 500px)" srcset="logo-pequena.png">
    <img src="logo-padrao.png" alt="Meu Logotipo">
</picture>

Nota: O navegador vai avaliar cada <source> e escolher√° a melhor correspond√™ncia ao tamanho da tela em quest√£o. A tag <img> deve ser especificada como √ļltimo elemento filho de <picture>

Mapas de Imagens

Aqui está um recurso que não é nada novo, mas que é extremamente interessante Рmapas de imagens.

Eles funcionam “mapeando” a imagem e criando hiperlinks para capa item especificado.

Dito de outra maneira, os mapas servem para linkar partes de uma mesma imagem, sem ter que dividí-la como arquivos de imagens diferentes.

Imagine por exemplo, o mapa do Brasil e em cada estado teria um mapa com um link para uma página ou seção específica.

Isso é um assunto para uma aula à parte, mas aqui está a representação em HTML:

<img src="mapa-do-brasil.png" usemap="#brasil" alt="Brasil">
<map name="brasil">
    <area shape="circle" coords="137,231,71" href="rj.html" alt="Rio de Janeiro">
    <area shape="poly" coords="363,146,273,302,452,300" href="sp.html" alt="S√£o Paulo">
    <area shape="rect" coords="520,160,641,302" href="bmg.html" alt="Minas Gerais">
</map>

Aqui vai uma breve explicação:

O atributo name da tag <map> é usado para fazer referência ao atributo usemap da tag <img>.

A tag <area> dentro da tag <map> define as √°reas clic√°veis passando o que chamamos de coordenadas da imagem.

Nota: Você pode usar diversas áreas clicáveis na imagem. Não use mapas de imagens como navegação principal porque os motores de busca não interpretam adequadamente.

Obs: Fazer isso manualmente é impossível, então, podemos usar ferramentas como o Adobe Dreamwever ou ferramentas online como esta (clique aqui), para criar mapas de imagens.

Introdução ao HTML5

HTML B√°sico – Estilos

Essa é a parte 9 de 16 na série HTML

Essa é uma aula que eu gosto bastante porque eu acho extremamente importante entender sobre estilos e a parte visual das nossas páginas web.

Preciso deixar claro que o HTML √© bastante limitado em rela√ß√£o a isso, tendo em vista que ele foi projetado para ser uma forma simples de exibir informa√ß√Ķes online.

Contudo, o CSS (Cascading Style Sheets) – ou folhas de estilo – foram introduzidas em 1996 pelo World Wide Web Consortium (W3C) para fornecer uma forma melhor de estilizar os elementos HTML.

Utilizando CSS você pode especificar muitos detalhes, como fonte, tamanhos, cores, fundos, alinhamento, espaçamento, bordas, entre diversas outras propriedades de estilo.

Como Adicionar Estilo ao HTML

Há três formas principais de trabalhar com estilos em nossos elementos HTML:

  • Estilos Embutidos: Usamos o atributo style na tag de abertura do elemento
  • Estilos Incorporados: Usamos a tag <style> – normalmente dentro da tag <head>
  • Folha de Estilo Externa: Usamos a tag <link> para apontar um arquivo CSS externo

Nota: Existe uma prioridade de renderização, digamos assim. Os estilos embutidos tem prioridade mais alta e as folhas de estilo externas têm menor prioridade. Quando há duplicação/conflito de estilos, segue-se essa prioridade.

Estilos embutidos

Como falei, os estilos embutidos são aqueles que vão diretamente no elemento HTML através do atributo style.

Portanto, s√£o totalmente exclusivos daquele elemento onde foi especificado e usamos as regras CSS diretamente na tag de abertura.

Para definir as propriedades e valores CSS como estilo de um elemento, usamos o conjunto propriedade:valor separados por ponto-e-vírgula (;).

Basicamente, é a mesma forma como você trabalharia nos estilos embutidos ou folhas de estilos externas, só que como valor do atributo style.

Por questão de boas práticas, tente colocar todas essas propriedades na mesma linha, ou seja, sem quebrar a linha após o ponto-e-virgula, como fazemos nos outros modos.

Aqui est√° um exemplo de uso:

<h3 style="font-size:40px; color:green;">Isso é um Cabeçalho</h3>
<p style="color: yellow; font-style:italic;">Isso é um parágrafo estilizado</p>
<div style="background: red; color: white; border: 1px solid yellow;">Isso é um container</div>

Resultado:

Isso é um Cabeçalho

Isso é um parágrafo estilizado

Isso é um container

Parece interessante, mas na verdade, usar estilos embutidos é considerada uma prática ruim Рeu mesmo quase nunca uso!

A raz√£o disso, √© porque for√ßa o estilo do elemento, visto que tem prioridade e, al√©m disso, faz com que se misture com o conte√ļdo do documento tornando a visualiza√ß√£o pior e dif√≠cil a manuten√ß√£o.

Imagine que você tenha estilizado de forma embutida cada parágrafo e decida mudar a cor, por exemplo.

Nesse caso, você teria que ir em cada elemento e fazer a substituição, enquanto faria de forma mais rápida se fosse incorporado ou externo.

Nota: A forma mais indicada de usar estilos CSS é usando folhas de estilos externas.

Folhas de estilo incorporadas

Ainda melhor que estilos embutidos, usar folhas de estilo incorporadas d√° maior controle sobre os estilos dentro do documento no qual est√£o incorporadas.

Como eu disse, geralmente esses estilos v√£o ser usados dentro da <style> que, por sua vez, deveria estar dentro da tag <head>.

Um exemplo de como vc deveria usar isso:

<head>
    <style>
        body {background: #333;}
        h1 {font-size: 50px;}
        p {
            color: #999, 
            font-size: 16px
        }
    </style>
</head>

Folhas de estilo externas

Se você está criando um site ou um conjunto de páginas e vai querer compartilhar alguns estilos com essas páginas, o mais recomendável é usar folhas de estilo externas.

Basicamente, uma folha de estilo CSS externa vai contem todos os estilos que você queira definir e vinculará cada um deles ao elementos respectivos do seu documento HTML, quando linkado.

A grande vantagem de us√°-las, √© que, se precisar fazer altera√ß√Ķes, basta editar um arquivo para aplicar as mudan√ßas em todas as p√°ginas que linkaram esse arquivo.

Outra informação importante, é que você pode anexar essas folhas de estilo externas de dois modos Рvinculando ou importando.

Vinculando folhas de estilo externas

Uma folha de estilo externa, nada mais é do que um arquivo .css contendo todos as regras CSS.

Para vincularmos esse arquivo, adicionamos a tag <link> dentro da seção <head> da página, da seguinte forma:

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

Importando filhas de estilo externas

Além da opção de linkar diretamente, você pode usar o recurso de importação usando @import que é um outro método de anexar um arquivo css.

Esse comando diz para o navegador carregar uma folha de estilo externa especificada.

Estamos falando sobre folhas de estilo externas carregando novas folhas de estilo também externas, mas isso poderia ser usado dentro da tag <style> de estilo incorporado.

Ficaria basicamente assim o código dentro do arquivo CSS externo:

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

Nota: A importa√ß√£o com @import n√£o √© t√£o recomendada porque pode comprometer o desempenho da p√°gina, portanto, deve ser evitada. Contudo, se for us√°-la, deve especificar as importa√ß√Ķes logo no in√≠cio do arquivo CSS externo.

Introdução ao HTML5

HTML Básico РFormatação de Texto

Essa é a parte 8 de 16 na série HTML

Certo, j√° conseguimos adicionar v√°rios elementos HTML √†s nossas p√°ginas, agora vamos ver como fazer mais formata√ß√Ķes nos nossos textos.

Há várias tags que podemos usar para que nossos textos tenham uma aparência diferente da normal.

Por exemplo, podemos usar a tag <b> para deixar o texto em negrito, ou a tag <i> para transformar em it√°lico.

Vamos ver essas tags em ação?

<p> Este é um <b>texto em negrito</b>.</p> 
<p> Este é um <strong>texto extremamente importante</strong>.</p> 
<p> Este é um <i>texto em itálico</i>.</p> 
<p> Este é um <em>texto enfatizado</em>.</p> 
<p> Este é o <mark> texto destacado </mark>.</p> 
<p> Este é um <code>código de computador </code>.</p> 
<p> Este é um <small> texto menor </small>. </p> 
<p> Este é um texto <sub>subscrito</sub> e <sup>sobrescrito</sup>.</p> 
<p> Este é um <del>texto riscado</del>.</p> 
<p> Este é o <ins>texto sublinhado</ins>.</p>

Resultado:

Este é um texto em negrito.

Este é um texto extremamente importante.

Este é um texto em itálico.

Este é um texto enfatizado.

Este é o texto destacado .

Este é um código de computador .

Este é um texto menor .

Este é um texto subscrito e sobrescrito.

Este é um texto riscado.

Este é o texto sublinhado.

Se você usar a tag <strong> e a tag <b>, vai notar que têm a mesma renderização pelos navegadores.

O mesmo acontece quando usamos a tag <em> e a tag <i>.

Contudo, há diferenças entre esses elementos.

Diferença entre <strong> e <b>

Ambas renderizam o texto destacado com negrito por padr√£o mas, em teoria, o <strong>√© usado para indicar import√Ęncia, enquanto o <b>serve apenas para chamar aten√ß√£o.

Isso seria um bom exemplo da melhor pr√°tica:

<p><strong>ATENÇÃO!</strong> Você deve ter cuidado com isso...</p>
<p>N√£o deixe seu site ser <b>punido pelo Google</b></p>

Resultado:

ATEN√á√ÉO! Voc√™ deve ter cuidado com isso…

N√£o deixe seu site ser punido pelo Google

Diferença entre <em> e <i>

Da mesma forma que vemos diferen√ßas nas tags acima mas o resultado na tela √© id√™ntico, temo fun√ß√Ķes diferentes para as tags <em> e <i>.

Por padr√£o, utilizamos o <em>para dar certa √™nfase ao conte√ļdo, enquanto o <i> √© usado para diferenciar do texto normal por raz√Ķes de legibilidade.

Al√©m disso, usamos o <i> para termos em outros idiomas, ou termos t√©cnicos, cita√ß√Ķes e frases, etc, como a seguir:

<p>Cachorros podem ser <em>ferozes</em> com estranhos</p>
<p><i>Carpe Diem!</i> Aproveite o dia...</p>

Resultado:

Cachorros podem ser ferozes com estranhos

Carpe Diem! Aproveite o dia…

Nota: Use o <strong> e <em> quando precisar dar uma √™nfase extra ao seu texto em n√≠vel de import√Ęncia. No HTML5 as tags <b> e <i> agora t√™m significado sem√Ęntico.

Cita√ß√Ķes

Outro recurso bacana que podemos usar para formatar nossos textos em rela√ß√£o √†s cita√ß√Ķes √© a tag <blockquote>.

Elas são renderizadas geralmente com espaçamentos nas laterais com alguma margem acima e abaixo também.

Aqui est√° um caso de uso:

<blockquote>
    <p>Aprendi HTML5 com o Asllan Maciel e agora consigo criar meus sites!</p>
    <cite>Fulano de Tal</cite>
</blockquote>

Resultado:

Aprendi HTML5 com o Asllan Maciel e agora consigo criar meus sites!

Fulano de Tal

Nota: Repare que usamos a tag <cite> que é usada para citar Рfazer referência Рa uma pessoa ou trabalho de alguém.

Agora, se voc√™ precisa fazer uma cita√ß√£o curta, dentro de uma mesma linha, por exemplo, pode usar a tag <q>, que vai fazer com que o navegador inclua o conte√ļdo entre aspas.

Veja como ficaria:

<p>De acordo com a Organiza√ß√£o Mundial da Sa√ļde (OMS): <q>Sa√ļde √© o estado de completo bem-estar f√≠sico, mental e social</q>.</p>

Resultado:

De acordo com a Organiza√ß√£o Mundial da Sa√ļde (OMS): Sa√ļde √© o estado de completo bem-estar f√≠sico, mental e social.

Abrevia√ß√Ķes

Voc√™ pode querer usar abrevia√ß√Ķes que s√£o uma forma encurtada de determinada palavra, frase ou nome.

Para usarmos no HTML, usamos a tag <abbr> preferencialmente junto com o atributo title para fazer com que o navegador marque a abreviação e, ao passar o mouse, possamos ver a informação contida no title.

Aqui vai um exemplo:

<p>No HTML procuramos seguir os padr√Ķes do <abbr title="World Wide Web Consortium">W3C</abbr></p>

Resultado:

No HTML procuramos seguir os padr√Ķes do W3C

Endereços de Contato

As páginas web geralmente acabam contendo endereços, que podem ser definidos usando-se a tag <address> como informação de contato.

A forma como o navegador interpreta essa tag é colocando certo destaque com espaçamentos e o texto em itálico.

Veja como seria:

<address>
Rua XPTO, 1000<br>
Rio de Janeiro, RJ<br>
Brasil
</address>

Resultado:

Rua XPTO, 1000
Rio de Janeiro, RJ
Brasil

Para mais tags de formatação, veja meu Guia de Referência de Tags.

Introdução ao HTML5

HTML B√°sico – Links

Essa é a parte 7 de 16 na série HTML

Nesse tutorial vamos falar sobre um dos recursos mais importantes para se construir uma estrutura de um site na internet: os Links.

Um hiperlink Рou simplesmente link Рé um vínculo criado entre elementos ou páginas da web.

Portanto, eles vão permitir que você chegue a outras páginas, em qualquer outro lugar da internet, depois de um clique.

Os links t√™m tamb√©m o que chamamos de √Ęncoras, com duas extremidades: de um lado tem a origem e do outro tem o destino para onde o link aponta.

O destino pode ser uma página ou qualquer outro recurso, como por exmplo, imagens, vídeos, áudio, documentos, ou até um elemento ou parte do próprio documento HTML.

Por padr√£o, os navegadores tentam estabelecer a cor de estilo desses links da seguinte forma:

  • Link azul n√£o visitado
  • Link roxo que foi visitado
  • Link ativo √© vermelho
  • Link quebrado aparece riscado

Novamente, essas cores podem ser trabalhadas no CSS.

Sintaxe de um Link

Lembra que falamos sobre sintaxe, certo? Ent√£o, vejamos como s√£o especificados os links usando a tag <a>.

Você pode linkar vários recursos como palavras, grupo de palavras ou até uma imagem.

Aqui est√° um trecho de exemplo:

<a href="URL">Texto do Link</a>

Qualquer coisa entre as tags <a>de abertura e </a> fechamento se torna parte do link, como no exemplo a seguir:

<a href="https://google.com">Google</a>
<a href="caminho/para/imagens/nome.jpg">
    <img src="images/nome.jpg" alt="Descrição">
</a>

O atributo href é usado para especificar o destino do link e seu valor pode ser o que chamamos de caminho ou URL absoluto ou relativo.

Calma, vou explicar melhor!

Um URL absoluto é um que contenha todas as partes da URL, como o protocolo, domínio/host, caminho do documento.

Por exemplo: https://google.com ou https://asllanmaciel.com.br/contato/indexhtml.

De forma diferente, um caminho relativo nunca contém os protocolos/prefixos http ou https, por exemplo, algo como contato/index.html ou imagens/nome.jpg.

O que isso geralmente quer dizer é que, se o recurso está fora do site, em outro domínio ou servidor, precisamos usar o caminho absoluto. Se for interno, no mesmo site, domínio ou servidor, basta usar o relativo.

Alvos para Links (Target)

Outra coisa que podemos definir nas tags de links, são os atributos de destino target que têm a função de informar ao navegador onde abrir o recurso vinculado.

Desse modo, podemos usar um dos quatro destinos disponíveis usando seu nomes que são precedidos de underline _nome.

Aqui est√£o eles:

  • . _blank – Para abrir o documento em uma nova janela ou guia;
  • . _parent – Para abrir o destino na janela pai;
  • . _self – Para abrir o recurso na mesma janela de origem. Este √© o valor padr√£o para os links, portanto, n√£o precisa ser especificado quando for o caso;
  • . _top – Abre o documento na janela inteira;

Aqui estão esses atributos em ação:

<a href="/contato.html" target="_top">Contato</a>
<a href="https://google.com" target="_blank">Google</a>
<a href="imagens/carro-novo.jpg" target="_parent">
    <img src="images/thumb/carro-novo.jpg" alt="Carro Novo">
</a>

Dica: Os destinos _top e _parent geralmente são usados juntos com o elmento <iframe> que vamos ver nas próximas aulas.

Links √āncoras de Marcadores

Voc√™ pode criar links do tipo √Ęncoras que permitem que pulemos para determinadas se√ß√Ķes ou partes de uma p√°gina web.

Isso √© muito √ļtil especialmente em p√°ginas muito longas, ou naqueles site do tipo One Page.

Para criar essas √Ęncoras √© muito simples:

Primeiro, você precisa criar um elemento ou seção que deve conter um atributo id que é o marcador, o identificador da seção.

O segundo passo é linkar usando a tag a mas que no valor do atributo href deverá conter o sinal de cerquilha (#) seguido do valor do atributo id, como a seguir:

<a href="#secaoX">Pular para a Seção X</a> 
<h1>Título Principal</h1>
...conte√ļdo
...conte√ļdo
<h2 id="secaoX">Seção X</h2>
<p>Aqui vai o conte√ļdo da se√ß√£o...</p>

Dica: Isso pode ser usado na mesma página ou pode também linkar para uma determinada parte de uma outra página de destino, desde que se use no link #IDdoElemento.

Dependendo do destino do link, pode ser feito um download de arquivo, por exemplo, para ZIP, DOC, XLS, etc.

Poderia ent√£o ser assim:

<a href="downloads/arquivo.zip">Baixar ZIP</a>
<a href="downloads/arquivo.doc">Baixar DOC</a>

Alguns arquivos como PDF, JPG e outros que podem ser renderizados pelo seu navegador, são exibidos na tela, mas você pode salvá-los no dispositivo também.

Introdução ao HTML5

HTML B√°sico – Par√°grafos

Essa é a parte 6 de 16 na série HTML

Bacana, estamos avançando com nossos elementos de hipertexto (HTML) e agora vamos falar sobre parágrafos.

Obviamente, os par√°grafos s√£o usados para publicar textos nas nossas p√°ginas HTML, mas, como vimos sobre aninhamento, podemos ter diversos outros elementos dentro de um par√°grafo.

Já vimos também que os parágrafos são definidos com a tag <p> Рuma das mais básicas para publicação de textos nas páginas da web.

Aqui est√° um exemplo:

<p>Isso é um parágrafo.</p>
<p>Isso é um outro parágrafo.</p>

Nota: Os navegadores tem o que chamamos de folhas de estilo integradas que aplica um CSS (nativo), que no caso dos par√°grafos, adicionar margens acima e abaixo.

Fechamento do Par√°grafo

Na vers√£o anterior (HTML4) a gente podia apenas usar a tag de abertura de um par√°grafo e a maioria dos navegadores exibiria-os corretamente.

Mas, atualmente, pode-se ter resultados inesperados ou até erros.

Veja como poderíamos fazer antes:

<p>Isso é um parágrafo.
<p>Aqui vai outro par√°grafo...

O c√≥digo que voc√™ est√° vendo acima deve at√© funcionar na maioria dos navegadores, mas por padr√Ķes e boas pr√°ticas de codifica√ß√£o, recomenda-se a abertura e fechamento.

Quebras de linhas

Sempre tem aquelas pessoas que querem quebrar/pular linhas no texto e usam os par√°grafos para fazer isso.

No entanto, lembre que eu falei que os navegadores, por padr√£o, inserem espa√ßos (margens) em cima e embaixo do conte√ļdo com os par√°grafos.

Portanto, se você quer apenas quebrar linha, sem espaços, deve usar a tag <br> Рque é um elemento vazio, da seguinte forma:

<p>Essa é a primeira linha, <br> essa é a segunda linha do mesmo parágrafo</p> 
<p>Esse é um outro parágrafo</p>

Nota: Não use parágrafos vazios <p></p> para adicionar espaços entre os elementos, mas use CSS para especificar espaçamentos entre os mesmos.

Criando Linhas Horizontais

Outro recurso que podem usar, s√£o as linhas horizontais definidas pela tag <hr>.

Voc√™ pode usar essas linhas para separar se√ß√Ķes, conte√ļdos, elementos em suas p√°ginas da web.

Assim como a tag <br>de quebra de linha, a tag <hr> é do tipo vazia, como podemos ver a seguir:

<p>Isso é um parágrafo</p>
<hr>
<p>Aqui vai outro par√°grafo</p>

Resultado:

Isso é um parágrafo


Aqui vai outro par√°grafo

Espaços em Branco

Geralmente os espa√ßos em branco s√£o ignorados pelo navegador ou quando no m√°ximo interpretados como espa√ßo √ļnico.

Portanto, quando voc√™ aperta a tecla de espa√ßo ou tab no teclado, mesmo que v√°rias vezes e que no c√≥digo voc√™ veja todo aquele espa√ßo, ser√° mostrado um espa√ßo √ļnico.

Para deixar mais claro, aqui v√£o dois exemplos de par√°grafos que mostrar√£o apenas uma √ļnica linha, sem espa√ßos extras:

<p>Isso é um parágrafo      aqui tem    espaços extras e você                  pode ver no código...<p>
<p>Mas n√£o ser√£o exibidos
       mesmo que você quebre as linhas
       diretamente no código-fonte</p>

Agora, se você precisa de espaços extras, deverá usar um breve comando &nbsp;(exatamente assim) e a tag <br> para quebrar linhas em seus documentos HTML.

Aqui est√° um exemplo disso:

<p>Esse é um parágrafo com multiplos &nbsp;&nbsp;&nbsp;&nbsp; espaços</p>
<p>Esse é um parágrafo com várias<br>quebras de<br>linhas</p>

Textos Pré-Formatados

Um recurso bem interessante do HTML √© usar a tag <pre> que exibe espa√ßos, tabula√ß√Ķes, quebras de linhas, etc, exatamente como definido no c√≥digo HTML.

Isso √© muito √ļtil em casos onde voc√™ teria v√°rios espa√ßos (&nbsp;) e v√°rias quebras de linhas (<br>), como, por exemplo, voc√™ teria em uma poema.

O código abaixo mostraria exatamente como está disposto no código:

<pre>
    Aqui estão três coisas que não consigo largar
    Minha cama, meu PC
    E meu celular!
</pre>

Resultado:

    Aqui estão três coisas que não consigo largar
    Minha cama, meu PC
    E meu celular!

Obs: O texto dentro de tags <pre>geralmente são renderizados pelos navegadores com fontes moespaçadas ou de largura fixa, como Courier, mas é personalizável com CSS

curso-html-basico

HTML Básico РCabeçalhos

Essa é a parte 5 de 16 na série HTML

Vamos ainda falar sobre formata√ß√£o de textos entre outras coisas, mas agora vamos ver os cabe√ßalhos que s√£o muito importantes para estruturarmos nosso conte√ļdo.

Basicamente, os titules (Headings) ajudam principalmente a definir a hierarquia e a estrutura do conte√ļdo de uma p√°gina HTML.

Existem seis n√≠veis de tags de t√≠tulo <h1> a <h6> e quanto mais baixo for o n√ļmero, maior sua import√Ęncia.

Desse modo, a tag <h1>vai ter maior import√Ęncia do que as demais tags de t√≠tulo.

Isso √© at√© not√°vel na maioria dos navegadores porque os t√≠tulos recebem fontes maiores e negrito para ficaram em destaque – isso segue a regra de import√Ęncia.

Aqui estão as tags de título:

<h1>Título Nível 1</h1>
<h2>Título Nível 2</h2>
<h3>Título Nível 3</h3>
<h4>Título Nível 4</h4>
<h5>Título Nível 5</h5>
<h6>Título Nível 6</h6>

Resultado:

Título Nível 1

Título Nível 2

Título Nível 3

Título Nível 4

Título Nível 5
Título Nível 6

Nota: Como eu disse, os tamanhos das fontes ser√£o diferentes de acordo com a import√Ęncia – quanto menor o n√ļmero maior a fonte – e, geralmente, o navegador colocar margem nos t√≠tulos, que podem ser substitu√≠das com CSS.

Para que fique um pouco mais clara import√Ęncia dos t√≠tulos…

Import√Ęncia dos t√≠tulos

  • Os t√≠tulos HTML fornecem informa√ß√Ķes valiosas, destacando t√≥picos importantes e definindo a estrutura do documento.
  • N√£o use tags de t√≠tulo para expor seu texto com fontes maiores ou negrito
  • Os motores de buscam usam as tags de t√≠tulo para entenderem melhor o contexto do seu conte√ļdo

Suas p√°ginas da web deveriam conter pelo menos a tag <h1>, que deveria ser a √ļnica tag <h1>da p√°gina, seguida das outras tags de t√≠tulo.