html básico - códigos html.pdf
TRANSCRIPT
-
8/18/2019 HTML básico - códigos HTML.pdf
1/19
devmedia.com.br
HTML básico - códigos HTML
https://www.facebook.com/DevmediaWeb03
Publicidade
Neste artigo serão mostrados os principais códigos HTML
necessários para você criar sua página web básica.
Serão apresentadas as tags (marcadores de código responsáveis
por uma função específica) para incluir objetos como imagens, links,
títulos, tabelas. Veremos ainda como formatar textos, definir o plano
de fundo da página, além de uma tabela contendo as principais cores
utilizadas.
Atualmente existem vários editores com interface gráfica que
permitem criar páginas web facilmente, arrastando e soltando
componentes na tela. Porém, conhecendo os códigos que estão por
trás da interface (que os editores geram quando montamos a
interface manualmente), é possível criar páginas usando um simpleseditor de texto como o Bloco de Notas do Windows. Basta salvar o
arquivo com extensão “.html” e manter a sintaxe correta da
linguagem. Por exemplo, o conteúdo da página deve estar entre as
-
8/18/2019 HTML básico - códigos HTML.pdf
2/19
tags e .
Observação importante: toda tag aberta deve ser fechada em algum
ponto. Para isso se usa a barra “/” dentro de uma tag semelhante a
de abertura. Por exemplo, a tag deve ser fechada com a tag
. Existem ainda as tags que são abertas e fechadas em umúnico marcador, por exemplo, a tag
que representa umaquebra de linha, não precisa de outra de fechamento, pois ela fecha
a si própria com a barra posta no final.
Estrutura básica de uma página HTML
Uma página HTML deve manter sempre uma estrutura básica, apartir da qual são inseridos outros elementos com formatações
avançadas. A Listagem 1 mostra a estrutura base de toda página
HMTL.
Listagem 1: Estrutura básica da página HTML
Título da página
Corpo do documento. Texto, imagens,
tabelas, etc.
O conteúdo da tag , ou seja, o título da página, será exibido no
topo da janela/aba do browser. Quando a página for adicionada aos
favoritos, esse título também será sugerido como atalho.
Atributos da tag
-
8/18/2019 HTML básico - códigos HTML.pdf
3/19
Através da tag (corpo) podemos definir propriedades gerais
para toda a página. Por exemplo, é possível determinar a cor do
plano de fundo da página, ou usar uma imagem para essa função, e
a cor dos links em várias situações (visitados, não visitados,
clicados).
Os atributos dessa tag são os seguintes:
bgcolor: cor do plano de fundo. Deve ser usado o código
hexadecimal ou o nome da cor (conforme tabela vista mais
adiante), assim como em todos os atributos de cores.
background: URL de uma imagem para ser usada como plano de
fundo.
link: cor natural dos links, ou seja, enquanto eles ainda não foram
clicados (o padrão é azul).
alink: cor dos links quando são clicados (o padrão é vermelho).
vlink: cor dos links após serem visitados (o padrão é roxo).
text: cor do texto da página.
A listagem a seguir mostra um exemplo de definição de algunsdesses atributos.
Listagem 2: Definindo atributos da tag body
Cores
Ao atribuir valores aos atributos de cores da página (plano de fundo,
-
8/18/2019 HTML básico - códigos HTML.pdf
4/19
cor do texto, etc), é possível usar o nome das cores em inglês
(apenas algumas cores) ou o código hexadecimal destas. Usando o
código hexadecimal é possível aplicar várias cores além das que
possuem nome padrão, que são listadas abaixo.
Cor Nome (no html) Código hexadecimalPreto black #000000
Branco white #ffffff
Azul blue #0000ff
Amarelo yellow #ffff00
Verde green #009000Lima lime #00ff00
Marrom maroon #800000
Oliva olive #00ffff
Azul celeste aqua #ff00ff
Lilás fuchsia #808080
Cinza gray #000080
Azul escuro navy #000080
Roxo purple #800080
Verde escuro teal #008080
Cinza claro silver #c0c0c0
Vermelho red #ff0000
Tabela 1: Nomes e códigos hexadecimais das principais cores
Cabeçalhos HTML
A linguagem HTML permite adicionar cabeçalhos (ou títulos) no corpo
da página, diferenciando-os do restante do texto pelo tamanho dafonte. Para isso existem as tags “h”, que possuem seis níveis, de 1 a
6. A seguir tem-se um exemplo de utilização dos seis níveis de
-
8/18/2019 HTML básico - códigos HTML.pdf
5/19
cabeçalho, seguido do resultado do código na Figura 1.
Listagem 3: Utilizando cabeçalhos
Título de nível 1
Título de nível 2Título de nível 3
Título de nível 4
Título de nível 5
Título de nível 6
Figura 1: Cabeçalhos visualizados no browser
É possível alterar o alinhamento dos títulos definindo seu atributo
“align” com um dos seguintes valores: center, left e right, conforme
se vê na Listagem 4.
Listagem 4: Alinhando os cabeçalho
Título de nível 1 -
centralizado
Título de nível 2 - esquerda
-
8/18/2019 HTML básico - códigos HTML.pdf
6/19
Título de nível 3 - direita
Figura 2: Cabeçalhos alinhados
A tag - definindo o tamanho e cor do texto
Usando a tag é possível alterar algumas das características
primordiais do texto como o tipo da fonte (Arial, Times New Roman,
etc), a cor e o tamanho. Essas propriedades são alteradas com a
definição dos atributos face, color e size, respectivamente, da tagfont.
O código seguinte é um exemplo de uso desses atributos, logo após
são apresentados os resultados.
Listagem 5: Uso da tag
Arial 3
Azul
Times 4
Verde
Courrier 5 Vermelho
-
8/18/2019 HTML básico - códigos HTML.pdf
7/19
Figura 3: Características da fonte alteradas
Formatação adicional do texto
Existem algumas tags bastante úteis que permitem aplicar uma
formatação a um trecho do texto, apenas adicionando as tags de
abertura e fechamento antes e depois do texto a ser formatado,
assim como foi visto para a tag .
: marca o texto como em negrito (bold).
: marca o texto como em itálico (italics).
*: marca um texto como sublinhado (underlined).
* ou : marca um texto como riscado.
: marca um texto como subscrito.
: marca o texto como sobrescrito.
*: centraliza o texto.
Observação: as tagas marcadas com asterisco (*) foram
descontinuadas na versão 5 da HTML, ou seja, seu uso não é mais
indicado.
É possível ainda usar essas tags em conjunto, devendo-se apenas
-
8/18/2019 HTML básico - códigos HTML.pdf
8/19
manter a ordem de abertura e fechamento, como será mostrado na
Listagem 6.
Listagem 6: Usando tags de formatação de texto
negrito itálicosubscrito sobrescrito
negrito e itálico
O que gera o seguinte resultado, quando aberto no browser:
Figura 4: Aplicação de formatações no texto
Parágrafos e quebras de linha
Geralmente, quando escrevemos textos mais extensos, é preciso
dividi-los em parágrafos, de forma a separar e organizar melhor as
informações. Durante a codificação (“escrita” do código) de uma
página HTML, podemos usar a tecla Enter para organizar o texto noeditor, mas essas quebras de linha não serão interpretadas pelo
navegador. Para isso é preciso utilizar as devidas tags
paraquebrar a linha e passar para a linha de baixou, ou
para
definir um parágrafo.
Por questão de organização do código, é indicado usar a definição
correta de parágrafos no lugar das quebras de linha.
Por exemplo, a listagem a seguir mostra um texto extenso com
-
8/18/2019 HTML básico - códigos HTML.pdf
9/19
várias quebras de linha onde deveriam haver divisões de parágrafos.
Em seguida é mostrada a forma correta de estruturar o código para
o mesmo texto.
Listagem 7: Texto com várias quebras de linha
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin gravida sagittis porta. In
feugiat porta erat. Quisque tempor dictum mauris.
Donec vestibulum lacus eget odio fermentum
viverra. Pellentesque hendrerit pulvinar
venenatis. Donec ut odio vel velit iaculis
hendrerit. Sed pharetra augue eget ipsum faucibus
lobortis.
Fusce quis magna ante, sed tempus lorem. Sed
lacus ipsum, tempus ac aliquet a, dignissim in
neque. Praesent sed lorem id augue dignissim
lacinia.
O resultado é o seguinte:
Figura 5: Texto com quebras de linha no browser
-
8/18/2019 HTML básico - códigos HTML.pdf
10/19
Agora o mesmo texto definido em parágrafos.
Listagem 8: Texto com vários parágrafos
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin gravida sagittis porta. Infeugiat porta erat. Quisque tempor dictum mauris.
Donec vestibulum lacus eget odio fermentum
viverra. Pellentesque hendrerit pulvinar
venenatis. Donec ut odio vel velit iaculis
hendrerit. Sed pharetra augue eget ipsum faucibus
lobortis.
Fusce quis magna ante, sed tempus lorem. Sed
lacus ipsum, tempus ac aliquet a, dignissim in
neque. Praesent sed lorem id augue dignissim
lacinia.
Agora, vemos que o resultado é inclusive visualmente mais
organizado (Figura 6), como deve ser o texto realmente.
Figura 6: Texto dividido em parágrafos
Sabendo como dividir o texto corretamente em parágrafos, podemos
ainda alterar seu alinhamento para atender às diversas situações
-
8/18/2019 HTML básico - códigos HTML.pdf
11/19
que surgem no dia-a-dia. Isso pode ser feito com a definição do
atributo “align” da tag
, com um dos seguintes valores: left
(alinhado à esquerda), right (alinhado à direita), Center (centralizado)
e justify (justificado).
O valor padrão para essa propriedade é “left”, então todo texto ficanaturalmente alinhado à esquerda.
Imagens
Inserir imagens na página é uma das necessidades mais comuns e,
por esse motivo, também é consideravelmente simples de ser feito.
Para esse fim existe a tag , cujos atributos são mostrados aseguir:
src: caminho completo do arquivo de imagem (incluindo a
extensão do arquivo).
alt: texto alternativo para a imagem, geralmente uma descriçãoda mesma.
width: largura da imagem em pixels.
height: altura da imagem em pixels.
Observação: os atributos src e alt são obrigatórios para a tag .
Além disso, a tag deve ser fechada nela mesma, ou seja, a sintaxe
mínima é .
A seguir temos um exemplo de código para a inserção de imagens
seguido do resultado visualizado no browser.
Listagem 9: Inserindo imagens
-
8/18/2019 HTML básico - códigos HTML.pdf
12/19
Figura 7: Exemplos de imagens com a tag img
É importante fazer algumas observações:
Caso não sejam definidas a largura e/ou a altura, a imagem será
adicionada à página em seu tamanho original.
Ao alterar apenas uma das dimensões, a outra é redefinida
proporcionalmente. Caso se deseje alterar tanto a largura quanto
a altura com valores específicos, os dois atributos devem ser
definidos.
Criando links
Como em toda página web, podemos precisar inserir links para
outras páginas, para downloads, e-mails, etc. A HTML possui uma
-
8/18/2019 HTML básico - códigos HTML.pdf
13/19
tag chamada âncora (anchor, em inglês) representada por que
nos permite criar links facilmente, apenas definindo seu atributo
“href” com o endereço para o qual o usuário deve ser redirecionado.
A sintaxe básica da tag é apresentada na listagem a seguir,
onde criamos um link para o endereço “http://www.meusite.com.br”com o texto “Meu Link”, onde o usuário pode clicar para ser
redirecionado.
Listagem 10: Sintaxe de criação de links
Meu Link
No lugar do texto “Meu Link” podem ser inseridos outros elementos
como, por exemplo, imagens, títulos, etc. Basta manter a ordem de
abertura e fechamento correta das tags.
No atributo “href” informamos o caminho para o qual o link deve levar
o usuário, o que não necessariamente precisa ser outro site.Podemos também criar links para download de arquivos ou para
envio de emails. Para downloads, basta indicar o caminho do arquivo
a ser baixado e para enviar emails, é preciso usar
mailto:email_desejado. A seguir veremos vários exemplos de links
para sites e arquivos, usando imagens e textos comuns.
Listagem 11: Exemplos de links
Meu Link
Baixar arquivo
Titulo como
link
-
8/18/2019 HTML básico - códigos HTML.pdf
14/19
O que gera o seguinte resultado:
Figura 8: Links na página
Conhecendo a sintaxe da tag , basta utilizar as demais tags
corretamente e criar os arranjos desejados com imagens, títulos,
formatando a fonte, entre outras modificações.
Listas
Outra estrutura bastante comum de ser utilizada em páginas web é a
lista, que serve pra organizar um conjunto de itens, sequencialmenteou não. As listas podem ser ordenadas ou não, ou seja, cada item
podem ou não ter um número/letra/símbolo que o identifique
sequencialmente.
As tags para listas ordenadas e não ordenadas são,
respectivamente, e . Entre essas marcaçõesdevem ser inseridos os itens, que levam a tag , conforme os
exemplos abaixo.
Listagem 12: Usando listas
Primeiro item
Segundo item
Terceiro item
-
8/18/2019 HTML básico - códigos HTML.pdf
15/19
Primeiro item
Segundo item
Terceiro item
Nesse código temos duas listas, uma ordenada e uma não
ordenada, que no browser têm a seguinte aparência.
Figura 9: Lista numerada e não numerada
Existe ainda um terceiro tipo de lista: a lista de definição, que como o
nome sugere, é usada para apresentar itens com um título seguido
de sua definição. A tag principal desse tipo de lista é a ,
enquanto os itens são compostos por duas tags: para o
título e para a definição. O exemplo na seguir torna mais
fácil a compreensão desse elemento.
Listagem 12: Exemplo de lista de definição
Item 1
Definicao do item 1
-
8/18/2019 HTML básico - códigos HTML.pdf
16/19
Item 2
Definicao do item 2
Item 3
Definicao do item 3
Figura 10: Lista de definição vista no browser
Tabelas
As tabelas, por muito tempo foram usadas incorretamente para
montar toda a estrutura do site. Ou seja, a página era uma grande
tabela e todo seu conteúdo era organizado dentro das células. Isso
era usado pela facilidade de se montar o layout usando essa
estrutura, afinal, as tabelas tinham suas células bem definidas e
fáceis de manipular.
Porém, forma não era correta e isso foi sendo visto ao longo dos
anos e passou-se a utilizar o conceito de “tableless” (sem tabelas).
Começou-se a incentivar o uso das tags corretas para estruturação
do layout e das tabelas para seu objetivo real: apresentação de
dados “tabulares”.
As tabelas são criadas sobre a tag base e é dividida
em linhas e colunas . A ordem de hierarquia é
essa: table > tr > td, uma dentro da outra. Ou seja, a tabela é dividida
-
8/18/2019 HTML básico - códigos HTML.pdf
17/19
em linhas que, por sua vez, são divididas em colunas.
A tag table possui o atributo “border”, que define a borda das células
com um número inteiro representando a espessura. A Listagem 14
apresenta um exemplo básico de tabela.
Listagem 14: Exemplo de uso de tabela
Linha 1, Coluna 1
Linha 1, Coluna 2
Linha 1, Coluna 3
Linha 2, Coluna 1
Linha 2, Coluna 2
Linha 2, Coluna 3
Nessa tabela temos duas linhas (tr) com três colunas (td) cada,
como vemos na figura a seguir.
Figura 11: Tabela com duas linhas e três colunas
-
8/18/2019 HTML básico - códigos HTML.pdf
18/19
HTML 5
A versão mais recente da linguagem HTML, a HTML5 trouxe várias
novidades para o desenvolvimento web. Novas tags foram inseridas,
bem como outras foram descontinuadas. Com essa versão,
objetiva-se obter a maior compatibilidade entre browsers (cross
browser), que até então era um dos principais problemas dos
desenvolvedores web front-end (responsáveis pela página em si, o
lado cliente).
Com o auxílio das folhas de estilo e da Javascript (linguagem de
script responsável por dar mais dinamismo à página HTML), que não
são foco deste artigo, é possível montar páginas bastante
complexas, com efeitos diversos. Porém, muitas vezes o código que
funcionava em um browser, era incompatível com os demais, o que
fazia com que os designers precisassem escrever vários códigos
para obter a compatibilidade, quando conseguiam. Muitas vezes se
tornava impossível adicionar uma funcionalidade a uma página, pois
essa não poderia ser visualizada em todos os navegadores. Emalguns casos, porém, o usuário ficava “preso” a um navegador, se
quisesse utilizar um determinado recurso, precisaria usar o browser
sugerido.
Esse foi o principal objetivo do lançamento das mais recentes
versões das “Web Standards”, tecnologias base da web (HTML,CSS e Javascript). Com elas, espera-se obter total (ou maior)
compatibilidade entre os navegadores, inclusive aqueles de
dispositivos móveis, cuja quantidade de usuários vem crescendo
rapidamente.
Referências e sugestões de estudos complementares
HTML
-
8/18/2019 HTML básico - códigos HTML.pdf
19/19
CSS
Javascript