INTRODUÇÃO AO HTML
HTML
PEDRO SIMÃO
Introdução ao HTML
o Hyper Text Markup Language;
o Marcações = <tag> </tag>;
o Hipertexto -(texto, imagem, vídeo, áudio e etc);
o Universal e Multiplataforma;
o Interpretada por Browsers.
o Linguagem Base para outras Linguagens da web
o “HTML é uma linguagem para publicação de conteúdo na web”.
Sintaxe Básica
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Conteúdo da Página
</body>
</html>
Declaração DOCTYPE
• É a primeira coisa que deve ser acrescentada ao código de
seu documento, antes da tag <html>.
• Ela é responsável a dizer ao navegador qual é a
especificação do HTML que está sendo utilizado
<!DOCTYPE html> - Neste caso a versão 5!
Sintaxe Básica
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Conteúdo da Página
</body>
</html>
Codificação de Caracteres
Codificação de Caracteres
• Determina como os caracteres suportados pelo navegador serão
exibidos na tela.
• Nos navegadores em português a codificação padrão é ISO-8859-1.
• Uma alternativa é o UTF-8.
Sintaxe Básica
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
<meta charset=“UTF-8”>
</head>
<body>
Conteúdo da Página
</body>
</html>
Idioma da página
• Por padrão as páginas criadas assumem o inglês.
• É interessante mudar para português para ajudar os buscadores...
Sintaxe Básica
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<title>Título da Página</title>
<meta charset=“ISO-8859-1”>
</head>
<body>
Conteúdo da Página
</body>
</html>
Elementos
<h1>texto</h1> Níveis de Título da página (vai até o 6);
Básicos
o
o <b>texto</b> Aplica estilo negrito ao texto; ou <strong> texto </Strong> (mais semântico)
o <i>texto</i> Aplica estilo itálico ao texto; ou <em> texto </em> (mais semântico)
o <u>texto</u> Deixa o texto sublinhado; Coloca imagem como fundo de
o <p>texto</p> Inicia um novo parágrafo; página.
o <br/> Faz uma quebra de página (tagórfã);
o<bodybgcolor=“red”> Coloca cor no fundo de página;
o <bodybackground=“foto.jpg”> Adiciona uma imagem de fundo de página.
o <marquee>texto</marquee> O texto se movimenta pela página;
Formatação de Texto
Para fazer alterações no tamanho, tipo e cor de seu texto você
utilizará a tag<font></font>
Exemplo:
<fontsize=“2” face=“Arial” color=“black”> ONDE:
Size: Define o tamanho do texto.
Texto a ser formatado. Os valores vão de 1 a 7. O padrão é 3.
</font> Face:Especifica o tipo da fonte.
Ex: agaramond, arial, tahoma, etc...
Color:Configura a cor do texto.
Ex: black, red, green, #F49B61, etc...
Cores Hexadecimal
o É a combinação de vermelho, verde e azul (RGB).
o O menor valor que pode ser dada a uma das fontes é o 00(zero
zero).
O valor mais alto é FF.
o
Valores hexadecimais são escritos como 3 números de dois
o dígitos, começando com um sinal #.
Tabela de Cores Hexadecimal:
Aqua #70DB93 Blue #0000FF
Black #000000 Cyan#00FFFF
Fuchsia#FF00FF Gray #C0C0C0
Green #00FF00 Lime#32CD32
Brown #800000 Navy #23238E
Olive #808000 Red #FF0000
Silver #E6E8FA Teal #008080
White #FFFFFF Yellow#FFFF00 http://www.w3schools.com/tags/ref_colorpicker.asp
Sites Úteis
Adobe Color
https://color.adobe.com/create
Materia Pallete
https://www.materialpalette.com/
W3Schools
https://www.w3schools.com/colors/colors_picker.asp
SimplesmenteColor Picker no Google!
Alinhamento
o Para alinhar um texto você utilizará o atributo ALIGN com valores :
LEFT (esquerda), RIGHT (direita), CENTER (centralizado) e JUSTIFY
( justificado).
o Ou envolva entre as tagsCenter;
Ex:
o
o <center>Conteúdo</center>
o <p align=“left”></p>
o <h1 align=“right”></h1>
Comentários
o Todo o texto que colocar dentro está comentado, ou seja, não
aparecerá na página.Dentro de um comentário pode colocar o
texto ou código HTML.
O comentário começa por <!--e finaliza por -->
o
Tudo o que colocar entre essas tagsestá comentado.
o
Meta tags
o Além da tabela de caracteres – Charset,
o Descrevem o conteúdo do seu site para os buscadores.
o É nelas que você vai inserir as palavras-chave que facilitarão a vida
do usuário na hora de te encontrar, entre outros...
Meta tags
o Keywords -> deve-se incluir uma quantidade de palavras que se referem ao
conteúdo da página. Mantenha o limite de aproximadamente 150 caracteres,
todos em minúsculo.
Podemos incluir os termos no singular e no plural (site, sites).
o
Description
o Uma ou duas frases que o buscador apresentará como um resumo do
conteúdo do seu site. Procure manter um limite de aproximadamente 90
caracteres.
o É a dobradinha conteúdo bem apresentado + atualização constante que vai
fazer com que o usuário sempre volte.
o Um título coerente com o conteúdo e explicativo também ajuda.
<head>
Exemplo:
<meta name="author" content=”Fulano de Tal">
<meta name="description" content="Meta Tags-O que são e como utilizá-las">
<meta name="keywords" content="sites, web, desenvolvimento">
</head>
...
Imagens
o Para inserir uma imagem devemos indicar: caminho/nome.formato
o É possível alterar altura e largura de uma imagem, em pixels ou %
oPara questões de acessibilidade é importante adicionar um texto alternativo.
<imgsrc="img/logo-html5.png" width=“100" height=”200"
alt=”logo da linguagem HTML5" />
Links
o Para inserir um link basta indicar a página, arquivo ou pontodeancoragemdentro
do documento.
oÉ possível escolher como a página será carregada (outra guia, mesma página, etc.)
<ahref=”link/arquivo/id” target=“_blank”>Texto a ser clicado</a>
oPossui 3 estados: link, alinke vlink, que podem ser configurados .
<bodylink=”blue" alink="#0000FF" vlink="">
Listas
o No HTML as listas podem ser ordenadas (ol) ou não ordenadas (ul) e receber
vários itens (li):
<oltype=”A"> <ultype=”circle">
<li> Item da lista </li> <li> Item da lista </li>
<li> Item da lista </li> <li> Item da lista </li>
<li> Item da lista </li> <li> Item da lista </li>
<ol> <ul>
oOs tipos (type) de lista podem ser: 1, a A, ieI–para listas ordenadas e circle,
square, etc, para as listas não ordenadas.
Tabelas <table border="1">
As tabelas basicamente são <tr>
o <td> Item 1 </td>
<td> Item 2 </td>
combinações de linhas (tr) e colunas (tb)
</tr>
dentro de uma tagtable: <tr>
<td> Item 1 </td>
<td> Item 2 </td>
</tr>
<tr>
<td> Item 1 </td>
<td> Item 2 </td>
</tr>
</table>
Tabelas
o A tabela pode ser complementada
por linhas de Título, Conteúdo e
Rodapé:
Título <thead> e th
Corpo <tbody>
Rodapé <tfoot>
Tabelas
o É possível mesclar células por meio do colspan(colunas) e rowspan(linhas):
<table border="1">
<thead>
<tr>
<thcolspan="2">Lista de Compras</th>
</tr>
</thead>
...
</table>
