Html básico 1

HTML BÁSICO

Professor Luciano

Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano
LUCIANO.CRECENTE@ETEC.SP.GOV.BR 1

O que é HTML?
 HTML é a "língua mãe" do seu
navegador.
 HTML é a abreviatura de "HyperText
Mark-up Language"


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 "/".

Estrutura básica de uma
página web.
<html>

<head>
</head>

<body>
</body>

</html>

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>


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>


Tags de cabeçalhos
 <h1>Cabeçalho</h1>
 <h2>Subtítulo</h2>
 <h3>Sub-subtítulo1</h3>


Tags de negrito e itálico
 <b>Torna o texto negrito.</b>
 <i>Torna o texto itálico.</i>


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>


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.


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


Tag HR
 Esta tag <hr /> que serve para definir
uma linha horizontal ("hr" vem
"horizontal rule" - régua horizontal ):
 Exemplo:

<hr />


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:


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>

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>

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>


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>

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;">


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>


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>


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.


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.


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

Html básico 1

Mais conteúdo relacionado

Mais procurados (10)

Destaque (11)

Semelhante a Html básico 1 (20)

Último (20)

Html básico 1