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.

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:

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,

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:

Atributos de formulários

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

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.

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.

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:

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:

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:

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:

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:

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

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.

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

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.

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:

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

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.

Links de Download

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.

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  (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 ( ) 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

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.