Índice

1. Introdução...............................................................................................................................3

2. Conceitos básicos (HTML e Hipertexto)................................................................................4

2.1. HTML..................................................................................................................................4

2.1.1. As principais partes de um elemento são:.........................................................................4

2.1.2. Atributos...........................................................................................................................4

2.1.3. Anatomia de um documento HTML.................................................................................5

2.2. Hipertexto............................................................................................................................6

2.2.1. Exemplos de Hipertexto....................................................................................................6

2.3. Conceito de ergonomia e amigabilidade de uma página.....................................................7

2.3.2. Critério de ergonomia para um website............................................................................7

3. Conclusão................................................................................................................................9

Bibliografia...............................................................................................................................10

II
1. Introdução
O trabalho tem como tema em abordagem Conceitos básicos do HTML, tem o objectivo de
fornecer aos iniciantes e estudantes da área de desenvolvimento web conceitos básicos e
fundamentos da marcação HTML e estilização CSS, para a criação de sites, interfaces gráficas
e aplicações para a web.

HTML não é uma linguagem de programação, mas tem em comum com estas a presença de
directivas, isto é trechos especiais de texto, geralmente destacados por algum carácter
delimitador. São tais directivas que controlam ou alteram a maneira em que as diversas partes
de um documento são apresentadas tipograficamente. Assim, as directivas não são
normalmente tipografadas literalmente, mas o efeito destas é que pode ser observado.

3
2. Conceitos básicos (HTML e Hipertexto)

2.1. HTML
(Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define
o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente
são usadas para descrever a aparência/apresentação (CSS) ou a
funcionalidade/comportamento (JavaScript) de uma página da web.

É uma linguagem de marcação, usada para definir a estrutura do seu conteúdo. HTML
consiste de uma série de elementos, que você usa para delimitar ou agrupar diferentes partes
do conteúdo para que ele apareça ou actue de determinada maneira. As tags anexas podem
transformar uma palavra ou imagem num hiperlink, pode colocar palavras em itálico, pode
aumentar ou diminuir a fonte e assim por diante. Por exemplo, veja a seguinte linha de
conteúdo:

Meu gatinho é muito mal-humorado

Se quiséssemos que a linha permanecesse por si só, poderíamos especificar que é um

parágrafo colocando-a em uma tag de parágrafo:

HTML

<p>Meu gatinho é muito mal humorado</p>

2.1.1. As principais partes de um elemento são:

 A tag de abertura: Consiste no nome do elemento (no caso, p), envolvido em
parênteses angulares de abertura e fechamento. Isso demonstra onde o elemento
começa, ou onde seu efeito se inicia — nesse caso, onde é o começo do parágrafo.
 A tag de fechamento: Isso é a mesma coisa que a tag de abertura, exceto que inclui
uma barra antes do nome do elemento. Isso demonstra onde o elemento acaba — nesse
caso, onde é o fim do parágrafo. Esquecer de incluir uma tag de fechamento é um dos
erros mais comuns de iniciantes e pode levar a resultados estranhos.
 O conteúdo: Esse é o conteúdo do elemento, que nesse caso é apenas texto.
 O elemento: A tag de abertura, a de fechamento, e o conteúdo formam o elemento.

2.1.2. Atributos
Elementos também podem ter atributos, que parecem assim:
4
Atributos contêm informação extra sobre o elemento que você não quer que apareça no
conteúdo real. Aqui, class é o nome do atributo e editor-note é o valor do atributo. O atributo
class permite que você forneça ao elemento um identificador que possa ser usado
posteriormente para aplicar ao elemento informações de estilo e outras coisas.

Um atributo sempre deve ter:

1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já

tiver um).
2. O nome do atributo, seguido por um sinal de igual.
3. Aspas de abertura e fechamento, envolvendo todo o valor do atributo.

2.1.3. Anatomia de um documento HTML

Isso resume o básico dos elementos HTML individuais, mas eles não são úteis por si só.
Agora vamos ver como elementos individuais são combinados para formar uma página
HTML inteira. Vamos visitar novamente os códigos que colocamos no exemplo de [Link]
(que vimos no artigo Lidando com arquivos):

HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Minha página de teste</title>
</head>
<body>
<img src="images/[Link]" alt="minha página de teste" />
</body>
</html>
>Mozilla Manifesto</a
>

5
2.2. Hipertexto
O Hipertexto é um conceito associado às tecnologias da informação e que faz referência à
escrita electrónica.

Desde sua origem, o hipertexto vem mudando a noção tradicional de autoria, uma vez que ele
contempla diversos textos. Trata-se, portanto, de uma espécie de obra colectiva, ou seja,
apresenta textos dentro de outros, formando assim, uma grande rede de informações
interactivas. Nesse sentido, sua maior diferença é justamente a forma de escrita e leitura.
Assim, num texto tradicional a leitura segue uma linearidade, enquanto no hipertexto ela é
não-linear.

Essa nova forma de leitura e escrita contempla as diversas transformações da sociedade

moderna. Ou seja, a partir da proliferação de computadores, os textos adquirem uma nova
dinâmica interactiva. Isso tudo de acordo com a rapidez das informações que actualmente
recebemos.

O conceito de hipertexto foi criado na década de 60 pelo filósofo e sociólogo estadunidense

Theodor Holm Nelson. A ideia era determinar a nova leitura não-linear e interactiva que
surgiu com a informática e o advento da internet.

2.2.1. Exemplos de Hipertexto

Um forte exemplo de hipertexto são os artigos na internet. No corpo do texto eles apresentam
diversos links ("ligação" em inglês) ou hiperlinks nas palavras ou nos assuntos que estejam

6
relacionados. Isso permite que o próprio leitor tenha uma posição mais ativa, escolhendo as
informações que prefere acessar. Além dos artigos da internet, um livro de contos, dicionários
e enciclopédias são considerados exemplos de hipertextos.

A informação contida neles proporciona um carácter não-linear onde o leitor pode também
seleccionar as informações e os caminhos de leitura que preferir. Sendo assim, a leitura de
hipertexto é realizada por associações. Ela não apresenta uma sequência fixa, tal qual ocorre
nos livros didácticos, romances, crónicas, dentre outros.

2.3. Conceito de ergonomia e amigabilidade de uma página

Aplicada à web, a ergonomia de um website pode ser definida pela sua capacidade de
responder eficazmente às expectativas dos usuários e fornecer-lhes uma navegação
confortável. A principal dificuldade da ergonomia é a diversidade dos perfis de visitantes.
Alguns critérios listados abaixo são determinantes para um website:

 Expectativas do usuário: nem todos os visitantes do site procuram a mesma

informação nem têm as mesmas exigências em termos de interface;
 Hábitos do usuário: correspondem a comportamentos adquiridos;
 Idade do usuário: em geral, caracteriza a capacidade de adaptação do usuário e a sua
rapidez de navegação;
 Equipamentos: uma das dificuldades essenciais. A apresentação do site poderá variar
de um hardware para outro, especialmente de acordo com navegador e resolução da
tela;
 Nível de conhecimento: nem todos os visitantes do site são experts em informática. A
ergonomia do site deve ser pensada para o usuário menos experiente.

2.3.2. Critério de ergonomia para um website

Os principais critérios de ergonomia de um website são os seguintes:

 Sobriedade: um site bem organizado reforçará a credibilidade. As imagens animadas

não são recomendadas. Elas devem ser reservadas para as mensagens mais
importantes, já que chamam a atenção do usuário.
 Clareza: informação escrita é mais difícil de ler em uma tela do que no papel. Assim,
o texto deve ser suficientemente espaçado.
7
 Estrutura: o texto deverá ser estruturado em parágrafos e títulos de diferentes níveis
para facilitar a leitura.
 Organização: a informação deve ser organizada de acordo com o nível de
importância. Os elementos mais importantes devem ficar na parte superior da página.

 Facilidade: a 'regra dos três cliques', amplamente seguida, estipula que qualquer
informação deve poder ser acessada em até três cliques.
 Localização: o visitante deve conseguir situar-se no site a qualquer momento. O
logótipo deve estar presente em todas as páginas, no mesmo lugar, e é preciso aplicar
uma lógica gráfica que oriente todo o conjunto para que o usuário saiba que está no
mesmo site.
 Liberdade de navegação: possibilitar ao usuário voltar para a página inicial com um
simples clique em que página estiver. Na medida do possível, o usuário deve poder
navegar em todo o conteúdo sem ter que voltar à página inicial.
 Materialização: informações presentes em um site devem ser qualificadas, ou seja,
alguns dados como a data da última actualização e o nome do autor devem estar
presentes.

 Homogeneidade estrutural : dentro do possível, os elementos utilizados para a

navegação devem estar situados no mesmo lugar em todas as páginas e devem ter a
mesma apresentação de uma página para outra.
 Tempo de carregamento: deve ser o mais curto possível, porque a maioria dos
internautas perde a paciência em poucos segundos. Esse factor depende da conexão do
usuário, do tamanho da página e das imagens, assim como da capacidade do servidor.
 Imagens optimizadas: optimizar ao máximo o tamanho das imagens, escolhendo um
formato adaptado e o menor número de cores. É recomendável ter, no máximo, 30 a
40 KB por imagem, excepto para publicações em alta definição. Pela mesma razão, as
imagens devem figurar na sua dimensão real.
 Links: oferecem muitas possibilidades de interação e abrem ao visitante rotas
variadas, de acordo com sua vontade. É aconselhável criar vários links entre as
diferentes páginas. Porém, links demais podem dificultar a leitura.

 Segmentação: pode ser realizada através da identificação bibliográfica, do copyright

da contribuição e um link que conduza ao resto do artigo.

8
9
3. Conclusão
A preocupação principal dos desenvolvedores do HTML era transportar a estrutura lógica e o
conteúdo de documentos através de diferentes plataformas de computadores. Desta forma, os
documentos tornam aceitáveis ao máximo número de indivíduos quanto possível.
Todas as directivas HTML (que não são sensíveis ao tipo de caixa, isto é, maiusculas e
minúsculas são idênticas) são delimitados pelos caracteres menor < e maior > e, é interpretada
pelo programa navegador a fim de produzir algum efeito visual ou de estrutura lógica do
documento hipertexto. Qualquer outra informação que não seja um directivo, deve ser um
texto. Alguns exemplos de directivas são: <TITLE>, <HEAD>, <P>, etc.

10
Bibliografia
SILVA, Maurício Samy. A minha biblioteca Fundamentos de HTML5 e CSS3. Datado em
10/06/2015.
HTML básico. Recuperado em:
[Link]
DIANA, Daniela. Hipertexto & Conceito de Ergonomia a Amigabilidade de uma págin.

11