Instituto Superior entre Douro e Vouga

Trabalho: Linguagem HTML

Docente: Dr. Nuno Peixoto

ISVOUGA

Discente: Cristiana Rosa Soares Carvalho

Índice

Introdução…………………………………………………………………………………... 3

Definição HTML…………………………………………………………………………….. 4

História………………………………………………………………………………………. 5

Etiquetas…………………………………………………………………………………….. 7

Estrutura básica de um documento…………………………………………………….... 8

Hiperligações………………………………………………………………………………... 10

Caracteres especiais e

símbolos………………………………………………………….

11

Caracteres especiais e

símbolos………………………………………………………….

11

Formatação de Textos……………………………………………………………………... 11

Imagens……………………………………………………………………………………… 11

Tabela com 99 códigos de cores…………………………………………………………. 14

Conclusão…………………………………………………………………………………… 16

Bibliografia…………………………………………………………………………………. 17

2

Introdução

No âmbito da disciplina de Tecnologias da Internet, leccionada pelo Dr. Nuno Peixoto,

foi-me solicitado a elaboração de um trabalho, alusivo ao tema “ HTML”.

HTML é a linguagem de programação mais utilizada na criação de páginas web do

mundo. Pois mesmo que utilizem outra linguagem de programação web (PHP, ASP,

JAVASCRIPT) é necessário o uso do HTML. Portanto é fundamental aprender html

para termos noções de estruturas de páginas na internet. Alguns dizem que o código

HTML já está ultrapassado, devido aos atuais programas no mercado, mas a verdade é

que ninguém constrói uma pagina web sem que o código HTML esteja junto.

Portanto, o HTML, é a linguagem mãe usada para construir os sites.

3

Definição HTML

HTML, ou seja, HyperText Markup Language (significa Linguagem de Marcação de

Hipertexto) é uma linguagem de marcação usada para produzir páginas na Web. Os

documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do

"casamento" dos padrões em que consiste o HyTime e SGML.

O HyTime é um padrão em que serve para a representação estruturada de hipermídia

e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos

concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por

hiperligações. O padrão é independente de outros padrões de processamento de texto

em geral.

O SGML é um padrão de formatação de textos. Este, não foi desenvolvido para

hipertexto, mas tornou-se proveitoso para transformar e modificar documentos em

hiper-objetos e também para descrever as ligações.

Trecho de código HTML

4

História

O que é HTML?

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

Resumindo uma longa história, HTML foi inventado em 1990 por um cientista chamado

Tim Berners-Lee. A objetivo inicial era tornar possível o acesso e a troca de

informações e de documentação de pesquisas, entre cientistas de diferentes

universidades.

O projeto inicial tornou-se um sucesso que Tim Berners-Lee nunca imaginou.

Tim Berners-Lee ao inventar o HTML, lançou as fundações da Internet tal como a

conhecemos atualmente. HTML é uma linguagem que possibilita apresentar

informações (documentação de pesquisas científicas) na Internet. O que nós vemos

quando abrimos uma página na Internet é a interpretação que o navegador faz do

HTML. Para visualizarmos o código HTML de uma página usamos o menu "View" (Ver)

no topo do navegador e escolhemos a opção "Source" (Código fonte).

O HTML foi ficando obsoleto, por ser uma linguagem limitada não podendo trabalhar

com gráficos e animações por exemplo, apenas texto e imagens estáticas ou GIFs

animados sem muita complexidade. Hoje é usado o HTML, junto com alguma outra

linguagem, ou com outras linguagens. Sim, porque vamos supor que queriamos colocar

animações num site ou até mesmo fazer pequenas alterações no ponteiro do mouse,

5

mensagem na barra de título, mensagens de aviso. Isso não seria possível somente

com o HTML. Portanto, são utilizadas linguagens como o Java Script ou

DHTML(Dynamic HTML) juntamente com o HTML.

O que são TAGs HTML? – As Tags HTML é a estrutura onde será montada as nossas

páginas html. As Tags são responsáveis pelo navegador interpretar o que estão entre

elas (tags). Sem as Tags seria impossível interpretarmos um site.

Para quem não conhece, o código HTML, achamos tudo muito complicado e as

questões não param de surgir, como por exemplo: Para que devo usar o HTML?

Para construirmos websites, temos que conhecer HTML. Mesmo que use um programa

para criar o seu website, como por exemplo o Dreamweaver, será sempre necessário

algum conhecimento em HTMLde forma a tornar as coisas mais simples e para criar

um website com qualidade.

Contudo, podemos concluir que HTML é usado para construir websites. É simples!

Agora voltamos a questionar: mas o que significa H-T-M-L?

HTML é a abreviatura de "HyperText Mark-up Language"

►Hyper é o oposto de linear. Nos tempos antigos - quando mouse era apenas um

rato caçado por gatos - os programas de computadores rodavam linearmente: quando

o programa executava uma ação tinha que esperar a próxima linha de comando para

executar a próxima ação e assim por diante de linha em linha. Com HTML as coisas

são diferentes – Podemos ir de onde estivermos para onde quisermos.

►Text é texto e não há mais nada a acresentar. ~

►Mark-up significa marcação e é o texto que escrevemos. Criamos a marcação da

mesma forma que escrevemos num editor os seus cabeçalhos, marcadores, negrito,

etc.

►Language significa linguagem e é exatamente o que HTML é; uma linguagem! A

linguagem HTML usa muitas palavras em inglês.

HTML nasceu em 1991 no CERN (European Council for Nuclear Research), na suíça.

Como já referimos, o criador foi, Tim Berners-Lee, 44 anos. Este, concebeu unicamente

como uma linguagem que serviria para interligar computadores do laboratório e outras

instituições de pesquisa e exibir documentos científicos de forma simples e fácil de

acessar.

Um desenvolvimento fundamental aconteceu em Julho de 1992 com a liberação da

biblioteca de desenvolvimento para WWW - World Wide Web (Rede de Alcance

Mundial). Foi essa biblioteca que deu origem à construção de vários browsers WWW e

6

servidores que tornaram a WEB viável. Um desses foi o Mosaic, o primeiro browser

multiplataforma que explorava completamente a capacidade de hipermídia da WEB.

Desenvolvido por Marc Andreeson, então do NCSA, o MOSAIC foi o que iniciou o

crescimento explosivo da WEB. No Outono em 1993 tornou-se disponível a milhões de

usuários, com a liberação das versões para Mac e Windows. Se por um lado novos

browsers têm superado os recursos do MOSAIC, por outro, foi esse programa que

tornou-se o sinónimo da WEB.

Muitas pessoas concordam que os documentos HTML deveriam trabalhar bem através

de diferentes browsers e sistemas operativos. Alcançando interoperabilidade baixa os

custos para as pessoas que desenvolvem páginas porque assim apenas se desenvolve

uma versão do documento. Se um esforço não for efetuado, existe um enorme risco

que a web se desenvolva para um sem número de formatos incompatíveis, reduzindo,

sem quaisquer dúvidas, todo o potencial comercial da web para todos os participantes.

Cada versão de HTML tem tentado refletir todo o consenso entre a indústria de

software para que o investimento feito pelos autores de páginas não seja desperdiçado

e que os seus documentos não deixem de se poder ler num curto período de tempo.

O HTML tem sido desenvolvido com a visão que todos os equipamentos fossem

capazes de usar a informação da Web, computadores com monitores de diversas

resoluções e vários números de cores, equipamentos para input e output de voz,

computadores com alta e baixa largura de freqüência e muito mais.

O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting, frames

(janelas), embedding objects, melhor suporte para texto com direção variável

(esquerda, direita, e ambos), tabelas mais visualizáveis, melhorias nos forms, melhor

acessibilidade para pessoas com incapacidades. São mais de 1 bilhão de páginas

sobre os assuntos mais variados. Tudo o que a nossa imaginação pudesse conceber

foi parar na rede, que se tornou uma grande arena de conhecimento e diversão.

Etiquetas

O documento HTML apresenta etiquetas, ou seja, elementos entre parênteses

angulares (chevron) (< e >);

Esses elementos são os comandos de formatação da linguagem. A maioria das

etiquetas tem a sua correspondente de fechamento:

<etiqueta>...</etiqueta>

7

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção

do documento, e assim marcamos onde começa e termina o texto com a formatação

especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma

região de texto, apenas inserem algum elemento no documento: <etiqueta>

Uma etiqueta é formada por comandos, atributos e valores. Os atributos modificam os

resultados padrões dos comandos e os valores caracterizam essa mudança. Exemplo:

<HR color="red">

No qual:

HR = comando que desenha uma barra horizontal

color = atributo que especifica a cor da barra

red = valor do atributo color, que é a cor da barra que será desenhada

Cada comando tem os seus atributos possíveis assim como os seus valores. Um

exemplo, é o atributo size que pode ser usado com o comando FONT, com o HR mas

que não pode ser usado com o comando BODY. Isto significa que devemos saber

exatamente quais os atributos e valores possíveis para cada respetivo comando.

De uma maneira geral o HTML é um poderoso recurso, sendo uma linguagem de

marcação muito simples e acessível voltada para a produção e compartilhamento de

documentos e imagens.

Estrutura básica de um documento

A estrutura de um documento HTML apresenta os seguintes componentes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="pt">

<head>

<title>Título do Documento</title>

</head>

<body>

aqui fica a página,

texto (geralmente <p></p>, <div></div> ou <span></span>),

imagem (<img></img>),

links (<a></a>),

8

...

</body>

</html>

As etiquetas HTML não são sensíveis à caixa, portanto tanto faz escrever <HTML>,

<Html>, <html> ou <HtMl>.

As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas

são:

<html>: define o início de um documento HTML e indica ao navegador que todo

conteúdo posterior deve ser tratado como uma série de códigos HTML

<head>: define o cabeçalho de um documento HTML, que traz informações

sobre o documento que está sendo aberto

<body>: define o conteúdo principal, o corpo do documento. Esta é a parte do

documento HTML que é exibida no navegador. No corpo podem-se definir

propriedades comuns a toda a página, como cor de fundo, margens, e outras

formatações

Cabeçalho

Dentro do cabeçalho podemos encontrar os seguintes comandos:

<title>: define o título da página, que é exibido na barra de título dos

navegadores

<style>: define formatação em CSS

<script>: define programação de certas funções em página com scripts, podendo

adicionar funções de JavaScript

<link>: define ligações da página com outros arquivos como feeds, CSS, scripts,

etc

<meta>: define propriedades da página, como codificação de caracteres,

descrição da página, autor, etc. São meta informações sobre documento. Tais campos

são muitos usados por mecanismos de busca(como o Google) para obterem mais

informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se

adicionar o código <meta name="description" content="descrição da sua página" /> no

documento HTML para indicar ao motor de busca que texto de descrição apresentar

junto com a ligação para o documento. Para o sistema Google, comandos meta como

keywords por exemplo não são utilizadas para indexar páginas. Apenas <title> e a

meta <description> são usadas para descrever a página indexada.

9

É de salientar que, as etiquetas <style> e <script> servem tanto para delimitar os

espaços usados pelos códigos na página quanto para invocar códigos existentes em

outros arquivos externos.

Corpo

Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página,

por exemplo:

<h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos.

(quanto menor for o número, maior será o tamanho da letra)

<p>: novo parágrafo

<br>: quebra de linha

<table>: cria uma tabela (linhas são criadas com <TR> e novas células com

<TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>)

<div>: determina uma divisão na página a qual pode possuir variadas

formatações

<font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto

<b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente

<img>: imagem

<a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro

serviço

<textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são

muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a

serem distribuídos

<acronym>: acrônimo (sigla)

<cite>: citação

<address>: endereço

Hiperligações

Uma propriedade importante dos documentos HTML é a possibilidade de fazer

hiperligações, usando a etiqueta <a> (do inglês, anchor). Esta tem os atributos: href

que define o alvo da hiperligação (que pode ser uma página de Internet, uma parte da

mesma página ou um endereço de email) ou name que define um alvo nessa página (a

onde se pode fazer uma hiperligação usando a etiqueta a com o atributo href).

Exemplos:

10

<a href="http://pt.wikipedia.org/">Clique aqui para aceder à página principal da

Wikipédia em português.</a>

<a name="nome">texto</a>

Em que nome e texto podem ser substituídos por o que se desejar. Depois usa-se <a

href="#nome"> </a> para hiperligar a este "anchor".

Caracteres especiais e símbolos

Os caracteres especiais definem-se usando comandos que começam com & e

terminam com um ;. Alguns exemplos incluem &aacute; (á), &agrave; (à), &atilde; (ã),

&acirc; (â), &auml; (ä) e &ccedil; (ç). Qualquer outra vogal pode ser substituída pelo a

destes exemplos, incluindo maiúsculas.

Formatação de Textos

Numa página HTML podem existir textos, imagens, itens multimídia e hipertexto. Para

isso o documento HTML apresenta a seguinte estrutura:

<HTML>

<HEAD>

<TITLE>Titulo do documento</TITLE>

</HEAD>

<BODY>

texto, imagem, links, etc...

</BODY>

</HTML>

Como o HTML não é uma linguagem de programação, nos nunca somos avisados de

qualquer erro cometido na edição do documento. Um simples esquecimento de uma

barra pode mudar toda a página.

Imagens

Com relação de uso de imagens na Web temos que estas se dividem em duas

categorias gerais que são as imagens in-line e as externas. As imagens in-line são

apresentadas na página junto com os vínculos e com o texto e são carregadas

11

automaticamente. Já as imagens externas são carregadas somente por demanda

(download), através de vínculos.

Independente de sua categoria, as imagens podem se apresentar em dois

formatos: .gif e .jpg.

GIF - Este padrão é mais conhecido e mais compatível com os navegadores existentes.

Recomendado para ícones com menos de 256 cores, cores lisas, puras, preto e

branco. A qualidade é bem superior ao formato JPG, pois o tamanho do arquivo é

maior.As imagens podem ser transparentizadas.

JPG ou JPEG - Foi o padrão proposto pelo comitê ISO e é geralmente usado para

imagens mais complexas (fotográficas). Permite alta taxa de compressão, por isso gera

um arquivo menor, o que implica numa perda de informação e qualidade.

O elemento IMG, ou seja, a tag <IMG>, insere as imagens que serão apresentadas

junto ao texto. Um atributo SRC, que é o mais importante dessa tag, deve estar

presente da seguinte forma:

Se a imagem estiver na mesma pasta que a sua página então a tag seria assim:

<IMG SRC="nome_imagem.extenção">

Se a imagem estiver numa pasta diferente da que sua página está, então temos que

colocar o endereço desta pasta e depois o arquivo que contém a sua imagem. Digamos

que nossa página esta na pasta "pagina" e a imagem (img.gif) que vamos colocar está

na pasta "imagens" que esta dentro da pasta "página", ou seja, essa imagem está

dentro da pasta "\imagens\img.gif". Então a tag seria: <IMG SRC="imagens\img.gif">

Se quisermos colocar uma imagem que está noutra página, basta clicar com o botão

direito do mouse em cima da imagem e selecionar a opção propriedades e de seguida

copiar o endereço URL e colocar no atributo SRC.

Juntamente com a tag <IMG> podemos usar alguns parâmetros como:

BORDER - para determinar a moldura da imagem;

WIDTH - para determinar a largura da imagem;

HEIGHT - para determinar a altura da imagem;

ALIGN - para alinhar as imagens de várias formas:

12

1.

LEFT - alinha a imagem a esquerda do texto;

RIGHT - alinha a imagem a direita do texto;

TOP - alinha o texto com o topo da imagem;

MIDDLE - alinha o texto com o meio da imagem;

BOTTOM - alinha o texto com a parte inferior da imagem.

ALT - quando deixarmos o mouse sobre a imagem aparecerá o que escrevemos.

Por exemplo:

<IMG ALT="explicação da imagem" BORDER=4 WIDTH=50 HEIGHT=20 ALIGN=Left>

Uma imagem pode funcionar como vínculo, incluindo-se a tag <IMG> entre as partes

de abertura e fechamento de uma tag de vínculo <A>. Assim temos:

<A HREF="arq.html"><IMG SCR="img.gif"></A>

Para construir uma página deve-se procurar equilíbrio com a relação da quantidade de

imagens e cores assim como, a necessidade de transmissão de informações. O uso

excessivo de imagens, imagens grandes, painéis de fundo etc, tornará a página mais

lenta ao ser carregada. Em muitos casos, levará os usuários que tiverem uma conexão

lenta de rede a desistirem de carregar esta página! Para que isso não aconteça,

verifique a necessidade do uso dessa ou daquela imagem, mantenha as imagens

pequenas reutilize-as sempre que possível.

13

Tabela com 99 códigos de cores

Black #000000

90% Black #191919

80% Black #333333

70% Black #4C4C4C

60% Black #666666

50% Black #7F7F7F

40% Black #999999

30% Black #B2B2B2

20% Black #CCCCCC

10% Black #E5E5E5

White #FFFFFF

Blue #0000FF

Cyan #00FFFF

Green #00FF00

Yellow #FFFF00

Red #FF0000

Magenta #FF00FF

Purple #9900CC

Orange #FF6600

Pink #FF9900

Dark Brown #663333

Moss Green #336666

Dark Green #003333

Forest Green #006633

Grass Green #009933

Kentucky Green #339966

Light Green #33CC66

Spring Green #33CC33

Turquoise #66FFCC

Sea Green #33CC99

Faded Green #99CC99

Ghost Green #CCFFCC

Mint Green #99FF99

Army Green #669966

Avocado Green #669933

Martian Green #99CC33

Dull Green #99CC66

Chartreuse #99FF00

Moon Green #CCFF66

Murky Green #333300

Olive Drab #666633

Khaki #999966

Sand #FFCC99

Walnut #663300

Ruby Red #990000

Brick Red #CC3300

Tropical Pink #FF6666

Soft Pink #FF9999

Faded Pink #FFCCCC

Crimson #993366

Regal Red #CC3366

Deep Rose #CC3399

Neon Red #FF0099

Deep Pink #FF6699

Hot Pink #FF3399

Dusty Rose #CC6600

Plum #660066

Deep Violet #990099

Light Violet #FF99FF

Violet #CC66CC

Dusty Plum #996699

Pale Purple #CC99CC

Majestic Purple #9933CC

14

Powder Blue #CCCCFF

Navy Blue #003399

Deep Navy Blue #000066

Twilight Blue #6666CC

Pastel Blue #9999FF

Baby Blue #6699FF

Electric Blue #6666FF

Desert Blue #336699

Sky Blue #00CCFF

Ice Blue #99FFFF

Light BlueGreen #99CCCC

Ocean Green #669999

Olive #999933

Banana Yellow #CCCC33

Light Yellow #FFFF66

Chalk #FFFF99

Pale Yellow #FFFFCC

Brown #996633

Red Brown #CC6633

Gold #CC9933

Autumn Orange #FF6633

Light Orange #FF9933

Peach #FF9966

Deep Yellow #FFCC00

Neon Purple #CC33FF

Light Purple #CC66FF

Twilight Violet #9966CC

Easter Purple #CC99FF

Deep Purple #330066

Grape #663399

Blue Violet #9966FF

Blue Purple #9900FF

Deep River #6600CC

Deep Azure #6633FF

Storm Blue #330099

Deep Blue #3300CC

15

Conclusão

HTML é uma linguagem para descrever as páginas Web e significa Hyper Text Markup

Language. Esta, não é uma linguagem de programação, mas sim uma linguagem de

marcação. A linguagem de marcação é um conjunto de tags de marcação.

HTML usa etiquetas de marcação para descrever as páginas da Web. Tags de

marcação HTML são normalmente chamados tags HTML.

HTML tags são palavras-chave cercado por colchetes como <html>, tags HTML

normalmente vêm em pares como <b> e </ b>. A primeira tag num par é a tag de início,

a marca é a segunda marca de fim.

HTML é uma linguagem com a qual se definem as páginas web. Basicamente trata-se

de um conjunto de etiquetas (tags) que servem para definir a forma na qual se

apresentará o texto e outros elementos da página.

O HTML é uma linguagem de programação muito fácil de aprender desde que se

pratique, o que permite que qualquer pessoa, mesmo que nunca tenha programado

possa enfrentar a tarefa de criar um website. O HTML é fácil e em pouco tempo

poderemos dominar esta linguagem.

16

Bibliografia

http://pt.wikipedia.org/wiki/HTML

http://scriptbrasil.com.br/forum/index.php?showtopic=99281

http://www.comocriarsite.com.br/tudo-sobre-html/

http://sites.google.com/site/sitesrecord/o-que-e-html

http://www.criarweb.com/artigos/7.php

http://www.pypbr.com/html/pbl_form.asp

http://www.emblema.art.br/html4blog/laranja_estrutura.html

http://www.slideshare.net/bradock1964/htmlparainiciantes

http://jcmaxwell1.vilabol.uol.com.br/Html/texto.html

17