Upload
cristiana-carvalho
View
604
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
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 á (á), à (à), ã (ã),
â (â), ä (ä) e ç (ç). 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