Introdução HTML

Módulo 2
Linguagem de Programação I
Aspectos gerais sobre criação de páginas Web

Como funciona o acesso às páginas da
web através de um browser
O cliente (através do browser) envia um pedido de
documento HTML a um servidor, através do envio para a
rede de um endereço URL.
O pedido é canalizado pela Internet até ao servidor indicado

no endereço.
O servidor ao receber o pedido procura a página indicada.
A página correspondente à resposta é enviada para a

Internet e depois conduzida até ao cliente.
Por fim, o browser abre a página recebida.

Como funciona o acesso às páginas da
web através de um browser
As páginas enviadas pelos servidores web são documentos
HTML (ficheiros de texto simples).
Noções básicas de
HTML
Estrutura básica de um documento
Um documento HTML começa com a tag de abertura
<HTML> e termina com a tag de fecho </HTML>.
De seguida, temos a considerar as duas partes principais

que constituem um documento HTML:
– o cabeçalho – que fica compreendido entre as tags
<HEAD> e </HEAD>;
– o corpo – que fica compreendido entre <BODY> e
</BODY>.
Nota: a escrita do código HTML pode ser feita indiferentemente em

maiúsculas e minúsculas.
Estrutura básica de um documento
Na parte do cabeçalho (entre as tags <HEAD> e </HEAD>),
o principal elemento que é habitual incluir-se é o título da
página – que surge entre as tags <TITLE> e </TITLE>. Este
título não aparece na página propriamente dita, mas na
barra de título do browser em que ela for aberta.
Toda a informação a apresentar na página – texto, imagens

e outros grafismos, etc. – deverá ser incluída na secção
delimitada entre as tags <BODY> e </BODY>.
Escrever e testar código HTML
Um método muito simples para praticar a
escrita de páginas HTML com a sua
visualização imediata num browser pode
ser o seguinte:
1. Abrir o Bloco de Notas do Windows

2. Escrever o código HTML para a página que
se tem em vista e guardar o ficheiro com a
extensão .htm;
3. Abrir o ficheiro acabado de criar, o que faz
abrir o browser (Internet Explorer, no caso).
Escrever e testar código HTML
Sempre que se efectuar alguma alteração no documento HTML e se

quiser visualizá-la no browser, deve-se:
1. Guardar o ficheiro no Bloco de Notas, mantendo o seu local de

gravação;
2. Passar ao Browser e clicar no botão Actualizar ou teclar F5.
Títulos e texto em documentos
Neste exemplo pode ver-se uma página HTML simples, apenas com texto
e duas linhas horizontais.
Na secção cabeçalho <HEAD> … </HEAD>, incluiu-se, para além de um
título, um exemplo de um comentário. Os comentários, em HTML, são
incluídos dentro de sinais especiais: . A sua finalidade é
simplesmente dar alguma informação útil ao leitor do código e não têm
qualquer interferência na página.
Na secção do corpo da página <BODY> … </BODY>, começou-se por

incluir um título de nível máximo <H1> … </H1> e um outro de segundo
nível.
São possíveis seis níveis de títulos – de tamanho decrescente de <H1>
até <H6>.
Cada tag <P> define um novo parágrafo e não necessita de tag de fecho
</P>. Aliás, se esta tag for incluída, o efeito será um novo parágrafo.
A tag <HR> define uma linha horizontal e não tem tag de fecho.
Um aspecto muito importante da linguagem HTML são os atributos. Estes
são incluídos dentro das tags e permitem definir certas características do
elemento a que a tag se refere.
Por exemplo, na tag <HR Width=50%>:

- o elemento HR define uma linha linha horizontal;
- o atributo Width permite definir a extensão da linha na página; neste
caso, 50% indica que a linha terá apenas 50% da largura da página.
Cada atributo é seguido do sinal de igual e de um valor. Este valor pode ser
um valor numérico ou de outro tipo.
Geralmente os valores dos atributos são incluídos dentro de aspas.
Ex.: <P Align=“center”>
O atributo Align define o tipo de alinhamento do parágrafo. No caso do

exemplo é center, ou seja, centrado.
Os outros valores possíveis são: left e right (à esquerda e à direita,
respectivamente).
Formatações de texto
É usual que o texto de uma página comece com um título e,

por vezes, também se utilizam subtítulos.
Como já se viu, em HTML definem-se títulos com tags que

vão desde <H1>…</H1> até <H6>…</H6>.
Ex.: <H1> Este é o título maior </H1>

<H6> Este é o subtítulo menor </H6>
Esses títulos podem, também, ser alinhados, através do

atributo Align.
Os parágrafos de texto que não são títulos costumam ser

sinalizados pela tag de parágrafo <P>. E podem, também,
ser alinhados com o atributo Align.
Os browsers apresentam o texto dos parágrafos com uma

fonte tipográfica e um tamanho predefinidos; porém, é
possível alterar essas definições com a tag
<FONT>…</FONT>.
A tag <FONT>…</FONT> é definida através dos seguintes

atributos:
- face – define a fonte tipográfica;
- size – define um tamanho entre 1 e 7;
- color – define a cor do texto.
Nota: No Internet Explorer, as predefinições do texto normal são: fonte

Times New Roman com tamanho 3 e cor preta.
Exemplo 1:
<FONT Face = “Futura”>
Neste caso, será alterada a fonte normal para Futura. No

caso da fonte não estar instalada será usada a predefinida
do browser.
Exemplo 2:
a) <FONT Size = 4>
b) <FONT Size =+1>
Em princípio terão ambos o mesmo efeito, uma vez que,

sendo 3 o tamanho predefinido, passar para 4 equivale a
adicionar 1 (+1) ao anterior.
Quanto às cores, é possível utilizar palavras reconhecidas

pelo browser, como: Red; Green ou Blue.
Pode-se também usar uma representação codificada, por

exemplo:
<FONT Color=“FF0000”> - equivale a Red
<FONT Color=“00FF00”> - equivale a Green
<FONT Color=“0000FF”> - equivale a Blue
Este método é conhecido como RGB (Red, Green, Blue).

Nele são atribuídos dois dígitos hexadecimais a cada uma
das três cores básicas – assim: “RRGGBB” – ou seja, para
cada uma das três cores (RGB), dois dígitos que podem ir
de 00 a FF. Desta forma podem obter-se todas as
combinações possíveis das cores.
Tabela de códigos de cores
Em HTML existem tags para aplicar os estilos tipográficos
mais habituais, como sejam: bold ou negrito; itálico;
sublinhado, etc.
Estes estilos podem aplicar-se a parágrafos inteiros ou

apenas a partes de texto, palavras ou caracteres. Exemplos:
<B> Este texto vai aparecer em Bold </B>
<P>Parágrafo com um termo em <I> Itálico </I>
<P> Frase com um termo <U> sublinhado </U>
Nota: neste caso as tags de fecho são muito importantes, uma vez que,
enquanto não surgir a tag de fecho correspondente a uma tag aplicada, o
efeito desta prolonga-se por todo o texto que se seguir.
Exemplo 3:
Uma página HTML com exemplificação de algumas formatações de texto: títulos,

alinhamentos e fontes tipográficas.
Exemplo 4:
Uma página HTML com exemplificação de algumas formatações de texto: estilos

tipográficos: bold, itálico, sublinhado, etc.
As listas de itens em HTML podem ser criadas com duas
opções possíveis:
- <OL>…</OL> - listas ordenadas, ou seja, em que os itens
surgem numerados (1,2,3…);
- <UL>…</UL> - listas não ordenadas.
Em qualquer dos casos, cada elemento a incluir dentro de

uma lista é inserido dentro das tags: <LI>…</LI>.
Exemplo 5:
Uma página HTML com exemplos de listas: código e resultados no browser.

Tutoriais de HTML
http://www.icmc.usp.br/ensino/material/html/
http://www.w3schools.com/html/html_intro.asp

Introdução HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Introdução HTML

Caricato da

Copyright:

Formati disponibili

Módulo 2

Aspectos gerais sobre criação de páginas Web

O pedido é canalizado pela Internet até ao servidor indicado

O servidor ao receber o pedido procura a página indicada.

A página correspondente à resposta é enviada para a

Por fim, o browser abre a página recebida.

De seguida, temos a considerar as duas partes principais

Nota: a escrita do código HTML pode ser feita indiferentemente em

Toda a informação a apresentar na página – texto, imagens

1. Abrir o Bloco de Notas do Windows

Sempre que se efectuar alguma alteração no documento HTML e se

1. Guardar o ficheiro no Bloco de Notas, mantendo o seu local de

Na secção do corpo da página <BODY> … </BODY>, começou-se por

Por exemplo, na tag <HR Width=50%>:

Ex.: <P Align=“center”>

O atributo Align define o tipo de alinhamento do parágrafo. No caso do

É usual que o texto de uma página comece com um título e,

Como já se viu, em HTML definem-se títulos com tags que

Ex.: <H1> Este é o título maior </H1>

Esses títulos podem, também, ser alinhados, através do

Os parágrafos de texto que não são títulos costumam ser

Os browsers apresentam o texto dos parágrafos com uma

A tag <FONT>…</FONT> é definida através dos seguintes

Nota: No Internet Explorer, as predefinições do texto normal são: fonte

Neste caso, será alterada a fonte normal para Futura. No

Em princípio terão ambos o mesmo efeito, uma vez que,

Quanto às cores, é possível utilizar palavras reconhecidas

Pode-se também usar uma representação codificada, por

Este método é conhecido como RGB (Red, Green, Blue).

Estes estilos podem aplicar-se a parágrafos inteiros ou

Uma página HTML com exemplificação de algumas formatações de texto: títulos,

Uma página HTML com exemplificação de algumas formatações de texto: estilos

Em qualquer dos casos, cada elemento a incluir dentro de

Uma página HTML com exemplos de listas: código e resultados no browser.

Potrebbero piacerti anche