1. HTML BÁSICO
Professor Luciano
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 1
2. O que é HTML?
HTML é a "língua mãe" do seu
navegador.
HTML é a abreviatura de "HyperText
Mark-up Language"
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 2
3. O que são Tags HTML?
Tags são rótulos usados para informar ao
navegador como deve ser apresentado o
website.
Todas as tags têm o mesmo formato:
começam com um sinal de menor "<" e
acabam com um sinal de maior ">".
Genericamente falando, existem dois tipos de
tags - tags de abertura: <comando> e tags
de fechamento: </comando>. A diferença
entre elas é que na tag de fechamento existe
um barra "/".
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 3
4. Estrutura básica de uma
página web.
<html>
<head>
</head>
<body>
</body>
</html>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 4
5. Título da página do site.
Para dar um título ao documento, título
este que apareça no topo da barra do
navegador você deverá usar a
seção"head". A tag para acrescentar um
título é <title>:
<title>Minha primeira página
web</title>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 5
6. Tag de parágrafo
A letra p na tag <p> é a abreviatura
para "paragraph" (parágrafo) que é
exatamente o que o texto é - um texto
parágrafo.
<p>Esta é a minha primeira página
web.</p>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 6
7. Tags de cabeçalhos
<h1>Cabeçalho</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo1</h3>
<h4>Sub-subtítulo2</h4>
<h5>Sub-subtítulo3</h5>
<h6>Sub-subtítulo4</h6>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 7
8. Tags de negrito e itálico
<b>Torna o texto negrito.</b>
<i>Torna o texto itálico.</i>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 8
9. Tag SMALL
Para deixar o texto com letras menores,
utilize a tag small, desta forma:
<small>Este texto deve ser com letras
em tamanho small.</small>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 9
10. Posso usar várias tags
simultaneamente?
Sim você pode usar quantas tags queira desde de
que as aninhe convenientemente. Veja como
fazer isto no exemplo abaixo:
Para escrever um texto em negrito e itálico faça
como mostrado a seguir: <b><i>Texto em negrito e
itálico.</i></b>
Observe que no primeiro exemplo a primeira tag de
abertura <b> corresponde a última tag de
fechamento </b>, e o aninhamento está certo. Isto
evita confusão para quem escreve o código e para o
navegador que lê o código.
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 10
11. Tags que são abertas e
fechadas em única tag
Estas tags são comandos isolados, ou
seja, não contém nenhum texto dentro
delas para poder funcionar. Um
exemplo é a tag <br /> que serve para
criar uma quebra de linha:
Exemplo: Um texto<br /> e mais texto
em nova linha
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 11
12. Tag HR
Esta tag <hr /> que serve para definir
uma linha horizontal ("hr" vem
"horizontal rule" - régua horizontal ):
Exemplo:
<hr />
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 12
13. Tag para fazer “comentários”
no código
Caso queira fazer comentários ou
apenas anular parte do código sem
apagá-lo, usa-se as seguintes tags:
<!-- Tag para comentar algo no código
-->
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 13
14. Lista não numerada
A Tag <ul>, com a tag auxiliar <li>,
são usadas para criar uma lista de itens
não numerada.
Veja:
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 14
15. Lista numerada ou ordenada
É semelhante a anterior não numerada,
exceto porque utiliza a marcação <ol>
ao invés de <ul>
Veja:
<ol>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ol>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 15
16. Atributos
Em algumas tags você pode ser mais
específico, acrescentando na tag,
informações adicionais de comando.
Isto é feito através dos atributos.
Exemplo:
<h2 style="background-
color:#ff0000;">Eu adoro HTML</h2>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 16
17. Como é isto?
Existem vários atributos. O primeiro que você
aprenderá é o atributo style. Com o atributo style
você pode adicionar estilização e layout ao seu
website. Por exemplo, uma cor de fundo e cor da
letra:
Exemplo:
<html>
<head>
</head>
<body style="background-color:black; color:white;">
</body>
</html>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 17
18. Como funciona as cores no
código?
Cada cor é representada por um número hexadecimal. A seguir
alguns exemplos:
Branco: #FFFFFF
Preto: #000000 (zeros)
Vermelho: #FF0000
Azul: #0000FF
Verde: #00FF00
Amarelo: #FFFF00
Um código hexadecimal para cores é formado por um sinal # seguido
de seis dígitos e/ou letras.
Para algumas cores, você pode usar o nome das cores em inglês
(white, black, red, blue, green e yellow - branco, preto, vermelho, azul,
verde, amarelo).
Exemplo:
<body style="background-color: red;">
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 18
19. Atributo style em outras tags
Posso também aplicar o atributo style
em outras tags como parágrafo e
cabeçalhos. Veja:
<h1 style="background-color:white;
color:blue;">CABEÇALHO 1</h1>
<p style="color:blue;">primeiro site
html</p>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 19
20. Sub-comandos da tag BODY
Os atributos BGCOLOR e TEXT também
são usados na tag <body> para alterar
a cor do fundo e a cor da letra,
respectivamente. Veja:
Exemplo:
<body bgcolor=black text=blue>
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 20
21. Exercícios para fixação
Criar algumas páginas que compõem o
site usando as seguintes formatações.
Utilizar as tags aprendidas nesta aula,
tags de cabeçalhos, parágrafos, negrito,
itálico, etc.
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 21
22. Empresa.html
Titulo: Luciano Enxovais
Conteúdo:
A Luciano Enxovais nasceu em 1999 em Ibitinga, capital
nacional do bordado, mas nossa experiência em produzir
bordado de alta qualidade existe a mais de 20 anos.
Durante todo esse tempo aprendemos que um produto de
qualidade é aquele feito sob medida para você. Por isso cada
peça produzida na Luciano Enxovais é minuciosamente
preparada para tornar o seu lar ainda mais belo.
A Luciano Enxovais se preocupa com a qualidade e delicadeza
na produção de cada peça do começo ao fim.
Este é o compromisso da Luciano Enxovais. Deixando sua
casa ainda mais bela, do jeito que você gosta.
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 22
23. Departamentos.html
Titulo: departamentos da empresa
Criar uma lista usando as tags específicas da
seguinte forma:
Comercial
André
Junior
Financeiro
1. Adriana
2. Juliana
Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 23