HTML Principios Básicos

•

UNIP

Eliseu Pires

06/04/2019

Prévia do material em texto

HTML – AULA 1 
Microlins - Web e Design – Capítulo 1 
Rondonópolis 07 de Maio de 2011 
 
Mayza de Oliveira 
@mayzaoliveira 
Mayza.deoliveira@gmail.com 
INTRODUÇÃO 
 HTML – Hypertext Markup Language; 
 É uma linguagem de marcação utilizadas para 
produzir páginas web; 
 Formada por sequência de comandos – tags – que 
são lidas e interpretadas pelo navegador – 
browser; 
 O HTML trabalha em conjunto com outras 
tecnologias, como o JavaScript e CSS 
proporcionando páginas mais dinâmicas e 
interativas. 
CONHECENDO AS TAGS 
 O que é uma tag? 
 
 <html></html> 
 
Essa TAG indica o começo e o final do 
documento HTML. 
- Instruções - códigos - que possuem 
funções especificas. 
- Códigos interpretados pelo navegador. 
 
ESTRUTURA BÁSICA DO DOCUMENTO HTML 
<html> 
 <head> 
 <title>Título da página</title> 
 </head> 
 <body> 
 Corpo da pagina 
 </body> 
</html> 
*página 3 da apostila 
 
- Escrevam a estrutura utilizando o bloco de notas e 
salvem com o nome de index.html 
 
ESTRUTURA BÁSICA DO DOCUMENTO HTML 
 <html></html> - indica o início e o fim da 
estrutura HTML; 
 <head></head> - indica onde começa e termina 
o cabeçalho do documento html, que contém 
informações específicas e que não são exibidas no 
navegador, apesar de existirem e possuírem 
enorme importância; 
 <title></title> - contém o título da página; 
 <body><body> - é o corpo do documento HTML, 
é onde são inseridos todos os elementos – textos, 
links, imagens - que queremos que apareçam na 
nossa página. 
 
 
 
ESTRUTURA BÁSICA DO DOCUMENTO HTML 
- O navegador interpretou o código HTML e exibiu o layout da página. 
ESTRUTURA BÁSICA DO DOCUMENTO HTML 
- Para visualizar o código da página: 
 Clique com o botão direito do mouse > exibir código fonte. 
AS TAGS HTML E SEUS ATRIBUTOS 
O HTML possui tags além das 
apresentadas na estrutura básica do 
documento; 
Com as tags, podemos formatar a nossa 
página, por exemplo, determinar fontes, 
especificar cores e aplicar imagens no 
fundo da página; 
Veremos a seguir algumas Tags e as 
suas funções. 
TAG <META> 
 Ordena informações no cabeçalho da página <head> 
e define o que ele contém; 
 Fornece informações que podem ser utilizadas pelos 
mecanismos de busca na web. 
 
<meta http-equiv=“content-type” 
content=“text/html; charset=utf-8”> 
*página 5 da apostila 
 
http-equiv: Faz uma correspondência com campos de 
cabeçalho do protocolo HTTP. Uma ação é desencadeada 
quando lidos pelo navegador; 
content: Especifica meta-informação para que seja 
associada com o valor especificado no http-equiv. 
MAS O QUE É PROTOCOLO HTTP? 
 
 • Hyper Text Transfer Protocol é o protocolo usado na 
World Wide Web para a distribuição e recuperação de 
informação. 
 A troca de informações entre um browser e um servidor 
Web é toda feita através desse protocolo, que foi criado 
especificamente para a World Wide Web – www. 
 
 Outro exemplo de <meta> 
 
<meta http-equiv=“refresh” content=“10; 
url=http://google.com”> 
*página 5 da apostila 
ATRIBUTOS DA TAGS <BODY> 
 <body></body> - Corpo da nossa página; 
 
<body bgcolor=“#000000” text=“#FFFFFF”> 
Corpo da página 
</body> 
 
- bgcolor: especifica a cor do fundo da página 
- – em hexadeciaml; 
 
- text: especifica a cor do texto da página; 
 
ATRIBUTOS DA TAGS <BODY> 
 link: especifica a cor do link do documento; 
 vlink: especifica a cor do link visitado; 
 alink: especifica a cor do link ativo; 
 background: indica a cor ou o endereço de uma 
imagem que será aplicada no fundo da página; 
 bottommargin: especifica o tamanho da margem 
inferior do documento; 
 topmargin: especifica o tamanho da margem superior 
do documento; 
 leftmargin: especifica o tamanho da margem esquerda 
do documento; 
 rightmargin: especifica o tamanho da margem direita 
do documento; 
 
 
 
ATRIBUTOS DA TAGS <BODY> 
<body bgcolor=“#000000” text=“#FFFFFF” 
link=“#3300cc” vlink=“#FF0000” 
alink=“#0066CC” leftmargin=“15” 
topmargin=“15” rightmargin=“12” 
bottommargin=“12”> 
Corpo da página 
</body> 
 
*página 5 da apostila 
IMPORTANTE: TOP, BOTTOM, LEFT E RIGHT 
TAG <H> - NÍVEIS DE TÍTULOS 
 <h> Utilizada para formatar um título ou tópico de 
uma seção. 
 Disponibiliza 6 níveis - <h1></h1> - <h6></h6> 
 
TAG <H> - NÍVEIS DE TÍTULOS 
<html> 
 <head> 
 <title>Título da página</title> 
 </head> 
 <body> 
 <h1>Nível 1</h1> 
 <h2>Nível 2</h2> 
 <h3>Nível 3</h3> 
 <h4>Nível 4</h4> 
 <h5>Nível 5</h5> 
 <h6>Nível 6</h6> 
 </body> 
</html> 
*página 6 da postila 
TAG <CENTER> - CENTRALIZAR 
 <center> Utilizada para centralizar blocos de 
texto, tabelas e etc. 
 
TAG <CENTER> - CENTRALIZAR 
<html> 
 <head> 
 <title> Título da página 
</title> 
 </head> 
 <body> 
 <center><h3>Frase centralizada 
na página</h3></center> 
 </body> 
</html> 
*página 6 da apostila 
TAG <P> - PARÁGRAFO 
 <p> Delimita parágrafos e insere o espaço de uma 
linha em branco entre eles. 
 
TAG <P> - PARÁGRAFO 
 
<html> 
 <head> 
 <title>Título da página</title> 
 </head> 
 <body> 
 <p>Primeiro parágrafo</p> 
 <p>Segundo parágrafo</p> 
 </body> 
</html> 
*página 6 da apostila 
 
TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS 
 align: define uma posição de alinhamento para o 
elemento que está sendo formatado pela tag. 
 Os valores podem ser: 
 left: esquerda; 
 center: centralizado; 
 right: direira; 
 justify: justificado; 
 
 style: os valores do estilo alteram as propriedades 
da apresentação do texto, como cor, tamanho, 
estilo do texto, etc. 
TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS 
TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS 
<html> 
 <head> 
 <title>Título da página</title> 
 </head> 
 <body> 
 <p align="center" 
style="color:#006; font-family:Arial, sans-
serif; font-size:14px;">Primeiro 
parágrafo</p> 
 <p>Segundo parágrafo</p> 
 </body> 
</html> 
 
TAG <BR> - QUEBRA DE LINHAS 
 <br> Utilizado quando é necessário que se faça 
uma quebra de linha em uma frase. 
 
TAG <BR> - QUEBRA DE LINHAS 
<html> 
 <head> 
 <title>Título da página</title> 
 </head> 
 <body> 
 <p>Casa da colina <br> Av. 21 de 
Junho, 66 <br> Bairro Centro <br>CEP: 
16560-000</p> 
 </body> 
</html> 
 
*página 7 da apostila 
TAG <HR> - LINHA HORIZONTAL 
 <hr> Cria uma linha horizontal no documento, 
também utilizada para separar seções de 
informação. 
 
 Atributos opcionais: 
 align: define o alinhamento da linha que pode ser: 
 left, center ou right; 
 width: determina a largura da linha em pixels; 
 noshade: especifica se a linha deve ser sólida. 
TAG <HR> - LINHA HORIZONTAL 
<html> 
 <head> 
 <title>Título da página</title> 
 </head> 
 <body> 
 <h1>HTML</h1> 
 <hr size="2" width="100%" noshade> 
 </body> 
</html> 
 
*página 7 da apostila 
 
TAG <UL> - LISTAS NÃO ORDENADAS 
<html> 
 <head> 
 <title>Título da página</title> 
 </head> 
 <body> 
 <ul> 
 <li>Um item da lista</li> 
 <li>Um outro item da lista</li> 
 <li>O último item da lista</li> 
 </ul> 
 </body> 
</html> 
*página 7 da apostila 
 
TAG <UL> - LISTA NÃO ORDENADA DE 
VÁRIOS NÍVEIS 
 O símbolo querotula o item é substituído a cada 
mudança de nível. 
 
TAG <UL> - LISTA NÃO ORDENADA DE 
VÁRIOS NÍVEIS 
<body> 
 <ul> 
 <li>Documentos avançados</li> 
 <li>Documentos básicos</li> 
 <ul> 
 <li>Formulários</li> 
 <ul> 
 <li>CGI</li> 
 </ul> 
 <li>Contadores</li> 
 <li>Relógios</li> 
 </ul> 
 <li>Outras informações</li> 
 </ul> 
</body> 
*página 8 da apostila 
 
TAG <UL> - TYPE 
 Utilizando TYPE é possível especificar o tipo de 
marcador a ser utilizado – square, circle e disc. 
 
 
<body> 
 <ul type="circle"> 
 <li>Documentos avançados</li> 
 <li>Documentos básicos</li> 
 <li>Outras informações</li> 
 </ul> 
</body> 
*página 8 da apostila 
TAG <OL> - LISTA ORDENADA 
<html> 
 <head> 
 <title>Título da página</title> 
 </head> 
 <body> 
 <ol> 
 <li>Primeiro item</li> 
 <li>Segundo item</li> 
 <li>Terceiro item</li> 
 </ol> 
 </body> 
</html> 
*página 8 da apostila 
TAG <OL> - LISTA ORDENADA DE VÁRIOS 
NÍVEIS 
 Este tipo de lista não apresenta uma numeração de 
níveis (ex: 1.1, 1.2, 1.1.1.) 
TAG <OL> - LISTA ORDENADA DE VÁRIOS 
NÍVEIS 
<body> 
 <ol> 
 <li>Documentos avançados</li> 
 <li>Documentos básicos</li> 
 <ol> 
 <li>Formolários</li> 
 <ol> 
 <li>CGI</li> 
 </ol> 
 <li>Contadores</li> 
 <li>Relógios</li> 
 </ol> 
 <li>Outras informações</li> 
 </ol> 
</body> 
*página 8 da apostila 
 
TAG <OL> - TYPE 
 Com o TYPE na lista ordenada é possível iniciar a 
numeração da lista. 
 
<body> 
 <ol start="5" type="A"> 
 <li>Mato Grosso</li> 
 <li>Espirito Santo</li> 
 <li>Paraná</li> 
 <li>São Paulo</li> 
 <li>Rio de Janeiro</li> 
 </ol> 
</body> 
*página 9 da apostila 
TAGS <DL> <DT> E <DD> - LISTA DE 
DEFINIÇÃO 
 O texto é formatado como uma lista de termos na 
esquerda para direita. 
 
TAGS <DL> <DT> E <DD> - LISTA DE 
DEFINIÇÃO 
<body> 
 <dl> 
 <dt>Internet 
 <dd>São milhões de 
computadores interligados pelo protocolo de 
internet TCP/IP que permitem o acesso a 
informações e transferência de dados. 
 <dt>HTML 
 <dd>HiperText Markup 
languagem 
 </dl> 
</body> 
 
*página 9 da apostila 
VALOR DAS CORES 
 As cores em html são especificadas em padrões 
alfanuméricos, no modo RGB, com base hexadecimal. 
 
R G B 
 Red – vermelho 
 Green – verde 
 Blue – azul 
 
 Branco = #FFFFFF 
 Preto é a ausência de cores = #000000 
 
*página 9 da apostila 
 
EXERCÍCIO 
 Para compreender a utilização simultânea das 
tags, vamos fazer uma página, utilizando todas as 
tags e formatações de cores que vimos durante a 
aula de hoje. 
 
 Para isso, vamos dividir por seções e criar a página 
por partes. 
 
 O Resultado deverá ser semelhante a este: 
EXERCÍCIO - RESULTADO 
EXERCÍCIO 
 Parte 1 – Bloco do H1: 
 
 <h1> - Primeira aula de HTML; 
 
 <p> - Conhecemos durante a aula de hoje a utilização 
das TAGS básicas do HTML; 
 
 <center> que envolverá e centralizará a tag <p> 
abaixo; 
 
 <p> com style="color:#c1e904; font-
size:14px;” - Mas vamos praticar para aprender; 
 
 <hr> com size="2" width="100%" noshade 
EXERCÍCIO 
 Parte 2 – Bloco do H2: 
 
 <h2> - Vimos como utilizar a tag BR para quebrar 
linhas; 
 
 <p> com style="color:#06F000;” - 
Microlins<br>Curso de Web e Design<br>Horario: 
<br>16:00 - 19:00 horas; 
 
 <hr> com size="4" width="100%" noshade 
 
EXERCÍCIO 
 Parte 3 - Bloco do H3 
 
 <h3> - Hoje é sabado; 
 
 <p> com style="color:#F93;“ - Conhecemos 
também como utilizar as listas não ordenadas; 
 
 <ul> com type="square“ que envolverá as tags 
<li> 
 
 <li> - Primeiro, segundo, terceiro, quarto, quinto; 
 
 <hr> com size="6" width="100%" noshade 
EXERCÍCIO 
 Parte 4 – Bloco do H4 
 
 <center> que envolverá a tag <h4>; 
 
 <h4> - E também aprendemos a utilizar as listas ordenadas; 
 
 <p> com style="color:#090000“ - Quais são os 
módulos do curso? 
 
 <ol> com start="1" type="I“ e que envolverá as tags 
<li> 
 
 <li> - Corel Draw, Photoshop, Flash, HTML, Dreamweaver; 
 
 <hr> com size="9" width="100%" noshade 
EXERCÍCIO 
 Parte 5 – Bloco do H5 
 
 <h5> - Vimos o que é uma lista de definição; 
 
 <dl> que envolverá as tags <dt> e <dd>; 
 
 <dt> - Nível 1 
 <dd> - Nível 2 
 <dt> - Nível 1 
 <dd> - Nível 2 
 
 <hr> com size="2" width="100%" noshade 
EXERCÍCIO 
 Parte 6 – Bloco do H6 
 
 <h6> - As cores são no padrão RGB; 
 
 <center> que envolverá as tags <p>; 
 
 <p> com style="color:#F00“ – RED; 
 
 <p> com style="color:#060“ – GREEN; 
 
 <p> com style="color:#00F“ – BLUE.