1 - Apostila HTML Básico

Desenvolvimento e Design e
Websites
HTML BÁSICO
Profº. Ricardo Ribeiro Seco
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>

Tag de cabeçalhos
• <h1>Cabeçalho</h1>
• <h2>Subtítulo</h2>
• <h3>Sub-subtítulo1</h3>
Tag 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
alinhamento 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

Tags 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="backgroundcolor:#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.
Exercícios para fixação
Crie um arquivo chamado “Empresa.html” e desenvolve essa página com a formatação e

informações descrito abaixo:
Titulo: RRSECCO Informática - Soluções inteligentes para boas ideias
• Conteúdo:
Empresa
Fundada no município de Teodoro Sampaio-SP, a empresa iniciou suas atividades com uma
grande experiência em desenvolvimento de software na área educacional.
A RRSECCO Informática é uma empresa apta na prestação de serviços de manutenção

de computadores, redes e desenvolvimento de softwares específicos para você e o seu
negócio, independente da área de atuação.
Contamos com um grupo de desenvolvedores com qualificações em Sistemas de
Informação com destaque em Ciências da Computação, especializações em
Desenvolvimento de Aplicações Multiplataformas, experiências na área de TI em órgão
governamental e professor em instituição técnica de ensino com ênfase na área de
tecnologia da informação.

1 - Apostila HTML Básico

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

1 - Apostila HTML Básico

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento e Design e

• HTML é a "língua mãe" do seu navegador.

• HTML é a abreviatura de "HyperText Mark-up

• Tags são rótulos usados para informar ao navegador

• Todas as tags têm o mesmo formato: começam com um

• Genericamente falando, existem dois tipos de tags - tags

• Para dar um título ao documento, título este que

• <title>Minha primeira página web</title>

• A letra p na tag <p> é a abreviatura para "paragraph"

• <p>Esta é a minha primeira página web.</p>

• <b>Torna o texto negrito.</b>

• Para deixar o texto com letras menores, utilize a tag

• <small>Este texto deve ser com letras em tamanho

• Para escrever um texto em negrito e itálico faça como

• Observe que no primeiro exemplo a primeira tag de abertura

• Exemplo: Um texto<br /> e mais texto em nova linha

• Caso queira fazer comentários ou apenas anular parte

•

• A Tag <ul>, com a tag auxiliar <li>, são usadas para

• É semelhante a anterior não numerada, exceto porque

• Em algumas tags você pode ser mais específico,

• Existem vários atributos. O primeiro que você aprenderá

• Cada cor é representada por um número hexadecimal. A seguir alguns

• Um código hexadecimal para cores é formado por um sinal # seguido de seis

• Exemplo: <body style="background-color: red;">

Posso também aplicar o atributo style em outras tags como

<p style="color:blue;">primeiro site html</p>

• Os atributos BGCOLOR e TEXT também são usados na

• Exemplo: <body bgcolor=black text=blue>

• Criar algumas páginas que compõem o site usando as

• Utilizar as tags aprendidas nesta aula, tags de

Crie um arquivo chamado “Empresa.html” e desenvolve essa página com a formatação e

Titulo: RRSECCO Informática - Soluções inteligentes para boas ideias

A RRSECCO Informática é uma empresa apta na prestação de serviços de manutenção

Você também pode gostar