Capítulo 5: Tags de Exibição 5.1 Sobre
5.2 Block & Inline
● São as formas mais comuns de exibição HTML ○ Podem ser modificadas através de CSS
● Define como o próximo conteúdo seguinte a “tag” será exibido ○ Na mesma linha e na sequência após o fechamento da “tag” ○ Próxima linha após o fechamento da “tag”
5.2.1 Block
● Ocupa toda a largura disponível, limitado ao seu "parent elment" ● Conteúdo seguinte à "tag" estará na próxima linha
5.2.2 Inline
● Ocupa somente o espaço necessário para sua exibição ● Conteúdo seguinte à "tag" estará na sequência
5.3 <body>
● "Corpo" do documento HTML
● Contêiner para quase todos os elementos HTML
● Pode conter elementos que serão renderizados na tela ou não
○ Principal uso são para elementos a serem exibidos pelo navegador
5.4 <h1>...<h6>
● Marca conteúdo que será exibido como cabeçalho (título) da página ● Não possui atributos (exceto globais)
● Navegadores podem renderizar o texto de forma diferente ● Em geral são textos em negrito
● Tamanho da fonte varia conforme a "tag" utilizada ○ Quanto menor o número da "tag" maior o texto ○ Ex: <h1> tem o tamanho da fonte maior que <h2> ● Exibição “block”
EP: <h1>...<h6>
1. Crie um novo arquivo de nome "h1.html"
2. Dentro da "tag" <body> adicione as seguintes "tags": <h1> My H1 text </h1>
<h2> My H2 text </h2> <h3> My H3 text </h3> <h4> My H4 text </h4> <h5> My H5 text </h5>
3. Salve e teste no navegador
5.5 <p>
● Define um parágrafo que será exibido na página
● Ênfase pode ser dada combinado outras "tags" com exibição “inline”: ○ <strong> → negrito
○ <em> → itálico
○ <small> → diminui o texto ● Exibição “block”
<p>
This is a
<strong><em>bold and italic</em></strong> text </p>
EP: <p>
1. No arquivo de nome "paragraph.html" e adicione o seguinte código <p>My first paragraph.</p>
2. Salve e teste no navegador
3. Adicione ênfase no texto "first" adicionando as "tags": <p>My <strong>first</strong> paragraph.</p> 4. Salve e teste
5. Adicione as demais "tags" de ênfase no texto "first", testando uma por vez: a. <em>
5.6 <span>
● Marca algum conteúdo
○ Não aplica qualquer mudança visual no elemento ○ Ideal para marcar um conteúdo que receberá um estilo
● Pode substituir as “tags” de ênfase, por permitir estilo com maior flexibilidade ○ Não faz sentido marcar com <strong> e remover o negrito !
● Exibição “inline”
5.7 <s>
● Marca o elemento que será tachado ● Exibição “inline”
<s>This text are going to be striked</s>
5.8 <sub>
● Marca o elemento que será subscrito ● Exibição “inline”
<p>This paragraph has <sub>subscripted</sub> text</p>
5.9 <sup>
● Marca o elemento que será elevado ○ Ex: exibição de raíz quadrada ● Exibição “inline”
<p>
This paragraph has
5.10 <pre>
● Marca o elemento que será pré formatado ● Preserva espaços e quebra de linha ● Utiliza a fonte “Courier”
● Exibição “inline” <pre> This
text is pre formated
</pre> EP: Textos
1. Crie um arquivo de nome “texts.html”
2. Adicione o seguinte conteúdo, salve e teste: <p>Paragraph is block display</p>
<span>but span is inline display and the</span>
<span>next content will be placed high after the last one</span>
3. Logo abaixo do último código adicione:
<s>This text are going to be striked</s>
<p>This paragraph has <sub>subscripted</sub> text</p> <p>
This paragraph has
<sup>superscripted</sup> text </p>
4. Salve e teste
<pre> This text is pre formated </pre> 5.11 <img>
● Usada para carregar imagens no documento HTML ○ Podem ser recursos locais ou externos
○ Não são tecnicamente inseridas no documento, um "link" e um espaço para exibição são criados
● Não possui "tag" de fechamento ● Exibição “inline”
● Pode receber os atributos de largura e altura
○ Podem distorcer, serrilhar ou perder qualidade visual da imagem
○ Se utilizado apenas um dos atributos de tamanho, a imagem manterá a proporção visual
<img src="myImage.jpg" alt="My Image" height="42" width="42">
Atributo Valor Descrição
alt My text Texto alternativo para a imagem exibido antes do carregamento
height 10 Define em "pixels" a altura da imagem
src URL Endereço URL para a imagem
usemap #myMapTagId Define as coordenadas das áreas clicáveis de uma imagem
width 10 Define em "pixels" a largura da imagem
EP: <img>
1. Crie o arquivo "img.html" com a estrutura básica 2. Adicione em <body> a "tag" <img> conforme abaixo:
<img
src="http://lorempixel.com/900/900/food" alt="Random Food Image">
3. Salve e teste
a. Atualize a página e perceba a imagem mudando randomicamente 4. Adicione o atributo de largura e altura com um valor para distorcer a imagem:
<img
src="http://lorempixel.com/900/900/food" alt="Random Food Image"
width="500" height="50"> 5. Remova o atributo "height", salve e teste
a. Repita o teste removendo "width" e mantendo apenas "height" 6. (Opcional) Adicione em <head> a "tag" <meta> para que a página seja
atualizada automaticamente a cada 3 segundos <meta http-equiv="refresh" content="3">
5.12 <button>
● Marca o conteúdo de que receberá a formatação visual e a funcionalidade de um botão
○ Não é recomendado seu uso dentro de um formulário, devido ao problema de "cross-browser"
○ Existem botões específicos para formulário ● Exibição “inline”
● Pode receber texto e imagem
○ Principal diferença para os botões de formulário
○ Apesar de existir o atributo "align", alinhamento deve ser feito via CSS ○ Apesar de poder utilizar <img> com o botão, é mais eficiente aplicar a
imagem como fundo do botão através de CSS <button>Save</button>
<button>
<img src="delete_icon.png"> Delete
EP: <button>
1. Crie um arquivo de nome "button.html" 2. Adicione em <body> o seguinte código:
<button>Save</button> 3. Salve e teste
4. Baixe o ícone do endereço abaixo na mesma pasta do arquivo "button.html": http://iconfindr.com/1eWqAml
5. Renomeie o arquivo para "icon_save_48x48.png" 6. No arquivo HTML adicione o ícone:
<button>
<img src="icon_save_48x48.png">Save </button>
7. Salve e teste
8. Utilize o atributo "width" da imagem e reduza o tamanho do ícone para 16 pixels: <button>
<img src="icon_save_48x48.png" width="16"> Save
</button> 9. Salve e teste
10. Utilize o atributo "autofocus" do botão: a. Mantenha o código anterior do botão <button autofocus>
11. Salve e teste
a. Perceba que o botão recebe foco quando a página é carregada b. Pressione a barra de espaços do seu teclado
12. Repita o teste com o atributo "disabled" do botão
5.13 Listas
● Elementos de lista são bastante úteis para criar desde lista simples até menus ○ Quando estilizados, podem perder os marcadores e ficar na horizontal
para simular um menu
● Podem receber qualquer elemento HTML
○ Podem ter outras "tags" aninhadas para criar uma lista de produtos com imagens e descrição, tanto na horizontal como vertical, conforme o código de estilo
● HTML possui duas "tags" para estilos ○ <ol> → "ordered list"
○ <ul> → "unordered list"
● Cada "tag" define um tipo de marcador diferente
○ O tipo do marcador por sua vez pode ser definido por estilo ○ Ex: letras, números, números romanos, etc
5.13.1 <ol> ● "Ordered List"
● Cria uma lista do tipo ordenada
● Estilo pode ser numérico, alfabético ou número romano ○ Decimais - 1,2,3…(padrão)
○ Alfabético - a,b,c…(minúsculo e maiúsculo) ○ Romanos - i, ii, iii...(minúsculo e maiúsculo)
● Possui ainda o atributo "reversed" que reverte a numeração
○ Numeração será em ordem descendente ao invés de ascendente ○ Não altera a ordem dos itens
5.13.2 <ul> ● "Unordered List"
● Cria uma lista do tipo desordenada ● Estilo podem ser "bullets"
○ Disco (padrão) ○ Quadrados ○ Círculo
5.13.3 <li>
● "Tag" responsável por criar o "list item"
○ Tanto <ol> quanto <ul> devem possuir <li> como "child element" ● O tipo do marcador (números, "bullets") é definido pelo "parent element"
EP: Listas
1. Crie um novo arquivo de nome "list.html" 2. Adicione o seguinte código HTML:
<ol>
<li>Ordered Item 1</li> <li>Ordered Item 2</li> </ol>
3. Salve e teste
4. Adicione o atributo "reversed" em <ol> <ol reversed>
<li>Ordered Item 1</li> <li>Ordered Item 2</li> </ol>
5. Salve e teste
a. Perceba que os itens permaneceram na mesma posição 6. Adicione o código abaixo do anterior:
<ul>
<li>Unordered Item 1</li> <li>Unordered Item 2</li> </ul>
5.14 <div>
● Contêiner para seu conteúdo
● Não possui qualquer alteração visual ○ Exceto quando estilizado
● Estilos podem ser usados para aplicação de cores, imagens de fundo, posicionamento e layout
○ Todo o conteúdo do elemento acompanhará o posicionamento da <div> "pai"
● Deve-se ter o cuidado de utilizar somente a quantidade necessária
○ Por não implicar em qualquer mudança visual, é comum existirem mais "divs" do que as necessárias
○ Eleva o consumo de processamento e memória, principalmente quando a tela for redimensionada (navegador tem de calcular o posicionamento de cada elemento)
● Geralmente recebem o atributo "id" com os valores "container", "main", "header", "content", "footer"
○ Por serem bastante utilizadas para posicionamento e layout ● Exibição “block”
EP: <div>
1. Abra o arquivo "list.html" 2. Envolva <ul> com <div>:
a. Mantenha todo o código anterior de <ul> <div>
<ul> … </ul> </div>
5.15 <a>
● Faz a marcação de âncora
○ Tanto dentro da própria página, como para uma página externa
● Seu atributo "target" configura se uma nova página (ou aba do navegador) será aberta ou não
○ "_self" → na própria página (padrão) ○ "_blank" →nova página
● As cores padrão de um "link" são: ○ Azul → não visitado
○ Violeta → visitado
○ Vermelho → ativo (clique ou "tab") ● Exibição “inline”
Atributo Valor Descrição
href #elementId URL Endereço externo no qual o "hyperlink" está direcionando ou "id" de um elemento interno HTML
target _self _blank
Especifica onde abrir o documento no qual o "link" direciona
5.15.1 Navegação
● O Atributo "href" pode receber o valor de um endereço
○ Pode ser uma página do seu projeto ou uma página na Internet <a href="index.html">Home</a>
<a href="http://www.google.com">Google</a> 5.15.2 Âncora
● O atributo "href" também pode receber o "id" de um elemento HTML na própria página criando uma âncora
○ Faz a rolagem (“scroll”) da página até o ponto em que o elemento estiver, desde que a barra de rolagem esteja presente
○ Deve ser acompanhado do caractere # com o "id" ○ Ex: href="#elementId"
<a href="#moreInfo">More Info</a> ...
<p id="moreInfo">More info is here...</p>
5.15.3 target
● Especifica onde abrir o documento no qual o "link" direciona ○ _self → no próprio documento
○ _blank → em uma nova página (ou aba do navegador) ○ _parent → "parent frame"
○ _top → todo o corpo da janela ○ "nome do iframe"
EP: <a>
1. Crie o arquivo de nome "anchor.html" insira o seguinte código <a href="http://www.google.com">Google</a> 2. Salve e teste
3. Adicione o atributo "target" com o valor "_self" <a href="http://www.google.com" target="_self">Google</a>
4. Nenhuma mudança ocorreu pois usamos o padrão 5. Mude o valor de "target" para "_blank":
target="_blank" 6. Salve e teste
7. Insira “lorem ipsum”, após o código atual, o suficiente para que as barras de rolagem apareçam
8. Adicione como última “tag” de <body> (antes do fechamento) a “tag” <p>: <p id="moreInfo">More info is here...</p>
9. Como primeira “tag” de <body> (após abertura) adicione: <a href="#moreInfo">More Info</a>
10. Salve e teste, clicando em “More info”
a. Se necessário, redimensione a janela para gerar barras de rolagem 11. (Opcional) Faça a âncora reversa