Linguagem html

1,505 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,505
On SlideShare
0
From Embeds
0
Number of Embeds
230
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Linguagem html

  1. 1. Instituto Superior de Entre Douro e Vouga Tecnologias da Informação e da Comunicação│2011/2012 Tecnologia de InternetTrabalho realizado por:Liliana João Monteiro da CostaSanta Maria da Feira, 19 Novembro de 2011
  2. 2. 3- Tecnologias de Internet HTML ÍNDICE1.Definição do HTML……………………………………………………………………. 22.A importância do HTML……………………………………………………………… 23.Elementos básicos da linguagem HTM…………………………………………… 2 3.1. O elemento HTML ………………………………………………………….. 3 3.2.O cabeçalho do documento…………………………………………………. 3 3.2.1.Meta – informação………………………………………. 4 3.3. O Corpo do Documento……………………………………………………. 5 4.Texto……………………………………………………………………………………. 7 4.1 Espaços em branco…………………………………………………………… 7 4.2 Linhas e parágrafos……………………………………………………………. 8 4.3 Os elementos h1, h2, h3, h4,h5, h6…………………………………………. 9 4.4 Elementos de estruturação de texto…………………………………………. 95.Listas …………………………………………………………………………………… 116.Links .................................................................................................................... 137.Imagens............................................................................................................... 148.Conclusão …………………………………………………………………………… 159.Bibliografia …………………………………………………………………………….. 16Liliana Costa 3722 ISVOUGA Página 1 de 12
  3. 3. 3- Tecnologias de Internet HTML1.DEFINIÇÃO DE HTMLÉ uma sigla inglesa da expressão Hypertext Markup Language e designa umalinguagem de descrição de documentos standard da World Wide Web. É uma aplicaçãoda SGML que utiliza (tags) para definir os diferentes elementos, tais como texto,elementos multimédia, formulários, hiperligações, etc2.2.A IMPORTÂNCIA DO HTMLExistem vários programas editores de HTML (DreamWeaver, Front Page, NVU, QuantaPlus, kumpozer, Hot Dog, Star Web...) que codificam as ações em cima de um textopara códigos HTML. Para que, então, aprender HTML? Os editores têm limitações,podendo apresentar resultados nem sempre esperados. Por não conter algunsrecursos vai querer aperfeiçoar cada vez mais a sua página e para que isso ocorra,precisará recorrer aos códigos HTML3.ELEMENTOS BÁSICOS DA LINGUAGEM HTMToda a página da internet tem que começar e terminar, obrigatoriamente, assim:<html> = Marca o início da página;<head> = início do cabeçalho;<title> =titulo da página </title> = Título da página;</head> = fecha cabeçalho;<body> = início do conteúdo da página;</body> = fecha o conteúdo da página;</html> = Marca o fim da página.Liliana Costa 3722 ISVOUGA Página 2 de 12
  4. 4. 3- Tecnologias de Internet HTML 3.1. O Elemento HTMLA seguir à definição do tipo de documento, todo o resto do documento é englobadopela etiqueta (tag) HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> ...o cabeçalho e o corpo do documento... </HTML> 3.2.O Cabeçalho Do Documento:O cabeçalho contém informação sobre o documento como o título, o autor, palavras-chave que serão utilizadas por motores de busca, etc. A informação contida nocabeçalho não é geralmente apresentada.  O título:  Todo o documento HTML tem que ter um título.  O título deve ser uma frase curta mas identificadora do documento.  O título só pode aparecer uma única vez em cada documento. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <TITLE>O título do documento/TITLE> ... outros elementos do cabeçalho... </HEAD> <BODY> ... o corpo do documento... </BODY> </HTML>Liliana Costa 3722 ISVOUGA Página 3 de 12
  5. 5. 3- Tecnologias de Internet HTML 3.2.1.Meta - Informação:  A linguagem HTML permite que os autores coloquem no documento informação sobre o próprio documento, denominada meta -informação. Por exemplo, é possível:  Indicar o autor do documento:<META name="Author" lang="pt" content="Ant&oacute;nio Costa">  Indicar palavras-chave: <-- Palavras chave --> <META name="keywords" lang="pt" content="html, estrutura, tutorial"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>O título do documento.</TITLE> <META name="Author" lang="pt" content="Ant&oacute;nio Pereira"> <-- Palavras chave --> <META name="keywords" lang="pt" content="html, estrutura, tutorial"> ... outros elementos do cabeçalho... </HEAD> <BODY>Liliana Costa 3722 ISVOUGA Página 4 de 12
  6. 6. 3- Tecnologias de Internet HTML 3.3. O Corpo do Documento:É no corpo do documento que se encontra o conteúdo (informação) propriamente dita.A forma como esse conteúdo é apresentado pode variar consoante os dispositivos e osoftware que o utilizador está a utilizar, para aceder aos documentos.Para os browsers gráficos mais comuns, o corpo do documento pode ser encaradocomo uma "tela" onde se posicionam elementos de texto, cores, figuras, gráficos, etc.No entanto, o mesmo documento, pode ser acedido por browsers de texto, em que ainformação relativa aos elementos gráficos deve estar presente de outra forma.Podemos pensar ainda, que esse conteúdo possa vir a ser processado por umsintetizador de voz, ou mostrado no reduzido visor de um telemóvel.As folhas de estilo devem ser utilizadas para tratar da apresentação da informação(aspectos visuais).O corpo do documento deve conter o mínimo possível de atributos visuais.Mostra-se em seguida um exemplo (a evitar) da utilização de atributos visuais no corpodo documento:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD> <TITLE>HTML básico</TITLE></HEAD><BODY bgcolor="white" text="black"link="red" alink="fuchsia"vlink="maroon"> ... corpo do documento...</BODY></HTML>Liliana Costa 3722 ISVOUGA Página 5 de 12
  7. 7. 3- Tecnologias de Internet HTML O mesmo efeito pode ser conseguido utilizando uma folha de estilo incorporada no documento: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>HTML básico</TITLE> <STYLE type="text/css"> BODY { background: white; color: black} A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia } </STYLE> </HEAD> <BODY> ... corpo do documento... </BODY> </HTML>De uma forma mais correcta, é possível ligar o documento a uma folha de estilo externa.Assim, podemos alterar o estilo do documento sem o editar e aplicar o mesmo estilo avários documentos: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>HTML básico</TITLE> <LINK rel="stylesheet" type="text/css" href="estilos.css"> </HEAD> <BODY Liliana Costa 3722 ISVOUGA Página 6 de 12
  8. 8. 3- Tecnologias de Internet HTML ... corpo do documento... </BODY> </HTML>Os elementos que aparecem no corpo do documento são classificados em:  Elementos de bloco (block level)- aqueles que podem conter outros elementos de bloco ou elementos em linha. Geralmente cada elemento de bloco tem início numa nova linha do ecrã.  Elementos em linha (inline) - aqueles que apenas podem conter outros elementos em linha e dados. Geralmente estes elementos não dão origem ao aparecimento de uma nova linha. Os elementos do corpo do documento podem ser agrupados com dois "contentores" géneros de elementos, que permitem, conjuntamente com as folhas de estilo estruturar o documento e aplicar o layout desejado à informação:  DIV - permite agrupar elementos de bloco e elementos em linha. É um elemento de bloco.  SPAN - permite agrupar elementos em linha. É um elemento em linha. 4.TEXTO 4.1 Espaços em Branco: Em qualquer documento HTML, sequências de espaços, tabulações e mudanças de linha são tratadas como um único espaço. Os espaços, mudanças de linha e tabulações servem para separar as palavras e os vários elementos do documento, não tenho assim qualquer influência na formatação do mesmo. O caracter &nbsp; (no breaking space) é muitas vezes utilizado para questões de formatação: essa utilização deve ser evitada! Liliana Costa 3722 ISVOUGA Página 7 de 12
  9. 9. 3- Tecnologias de Internet HTMLA função deste carácter (como o nome indica) é evitar que o browser separe duaspalavras. Exemplo: Windows&nbsp;2007 4.2 Linhas e Parágrafos:Para organizar o texto em parágrafos utiliza-se o elemento P. Exemplo: <P> Este é um parágrafo.</P> <P> Este é outro parágrafo.</P> <P> E mais um parágrafo.</P>Podemos verificar que um parágrafo não pode conter elementos de bloco nem outrosparágrafos.Para se forçar uma mudança de linha dentro de um parágrafo utiliza-se o elemento BR.Exemplo: <P>Esta é a primeira linha de texto.<BR> Esta é a segunda linha de texto<BR> Esta é a terceira linha de texto<BR></P> Note que o elemento BR não tem a etiqueta de fim.Liliana Costa 3722 ISVOUGA Página 8 de 12
  10. 10. 3- Tecnologias de Internet HTML 4.3 Os Elementos H1, H2, H3, H4,H5, H6Estes elementos permitem descrever o título de uma secção do documento, desde onível 1 (o mais importante) até ao nível 6 (que corresponde a uma sub-sub-sub-sub-sub-secção).Geralmente os browsers apresentam os cabeçalhos mais importantes com um tipo deletra maior que os menos importantes. O elemento DIV pode ser utilizado para associarum elemento Hi com cada secção do documento. Assim, é possível definir um estilodiferente para cada secção do documento: <DIV class="section" > <H1>Título da secção</H1> <P>Nesta secção discutimos .... ...esta secção continua... <DIV class="subsection"> <H2>Título da sub-secção</H2> <P>Nesta sub-secção ... ...esta sub-secção continua... </DIV> </DIV> 4.4 Elementos de estruturação de texto:O elemento PRE permite escrever texto pré-formatado. Neste caso os espaços embranco, tabulações e mudanças de linha são respeitados. Exemplo:Liliana Costa 3722 ISVOUGA Página 9 de 12
  11. 11. 3- Tecnologias de Internet HTML <PRE> program ola; var i:integer; begin for i:=1 to 100 do begin writeln(olá); writeln(E viva o mundo!); end end. </PRE>EM: Este elemento dá ênfase ao texto.STRONG: Este elemento dá uma ênfase maior ao texto que o elemento EM.CITE: Contém uma referência.Exemplos: <P>Nesta frase é dado ênfase na última <EM>palavra</EM><BR>Nesta frase a última palavra ainda tem mais <STRONG>ênfase</STRONG></P>O elemento BLOCKQUOTE utiliza-se para fazer citações longas de texto.O elemento Q serve para fazer pequenas citações numa linha.Exemplos:Liliana Costa 3722 ISVOUGA Página 10 de 12
  12. 12. 3- Tecnologias de Internet HTML <BLOCKQUOTE cite="http://www.twainquotes.com/Mathematics.html"> <P>We could use up two Eternities in learning all that is to be learned about our own world and the thousands of nations that have arisen and flourished and vanished from it.<>br> Mathematics alone would occupy me eight million years. </P> </BLOCKQUOTE> <P>A Maria diz, <Q>Vi a Joana ao jantar, ela disse <Q>Preciso de falar urgentemente com o Paulo.</Q> Acho que lhe vou telefonar.</Q> </P>NOTA: O elemento BLOCKQUOTE não deve ser utilizado para fazer identificação deblocos de texto.Índices (SUB) e Expoentes (SUP) - servem para levantar ou baixar o texto numa linha.Exemplos: <P>4<sup>2</sup> = 16<BR> x<sub>1</sub> + x<sub>2</sub> = 0</P>5.LISTASA linguagem HTML permite utilizar três tipos de listas:  Listas sem ordem  Listas numeradas  Listas de definiçõesPor exemplo, a lista anterior é uma lista sem ordem (UL) e foi criada da seguinte forma:Liliana Costa 3722 ISVOUGA Página 11 de 12
  13. 13. 3- Tecnologias de Internet HTML <UL> <LI>Listas sem ordem</LI> <LI>Listas numeradas</LI> <LI>Listas de definições</LI> </UL>Um exemplo da utilização de uma lista ordenada (OL) é o seguinte <OL> <LI>O primeiro item.</LI> <LI>O segundo item.</LI> <LI>O terceiro item.</LI> </OL>O resultado do exemplo anterior é:  O primeiro item.  O segundo item.  O terceiro itemQuanto às listas de definições (DL), estas são constituídas por sequências de pares daforma (termo, definição). Exemplo: <DL> <DT>Triângulo</DT><DD>Tem três lados.</DD> <DT>Quadrado</DT><DD>Tem quatro lados.</DD> <DT>Hexágono</DT><DD>Tem seis lados.</DD> </DL>Liliana Costa 3722 ISVOUGA Página 12 de 12
  14. 14. 3- Tecnologias de Internet HTMLEste exemplo produz o seguinte resultado: Triângulo Tem três lados. Quadrado Tem quatro lados. Hexágono Tem seis lados6. LINKSO que realmente diferencia a linguagem HTML de outras linguagens (como o TeX) é opoder de estabelecer ligações para outros documentos.Estas ligações (links) sãodefinidas com o elemento A. Por exemplo, para definir um link para o ficheiro"aveiro.htm", existente no mesmo directório do documento actual, basta escrever: Este é um link para <A href="aveiro.htm">a página de Aveiro</A>Para estabelecer um link para um documento num outro lugar da Web é necessárioescrever o endereço completo. Por exemplo: Este é um link para o site do <A href="http://www.w3.org/">World Wide Web Consortium</A>Para estabelecer um link para um outro ponto do mesmo documento, é necessárioprimeiro que tudo identificar esse ponto, com o atributo "name". Por exemplo, paraidentificar a secção "Introdução ao HTML" fazemos: <H1><A name="int_html">Introdução ao HTML<A></H2>Liliana Costa 3722 ISVOUGA Página 13 de 12
  15. 15. 3- Tecnologias de Internet HTMLO atributo "name" identifica unicamente a secção do documento e é possível criar umlink para ela em qualquer outra zona do documento (ou mesmo em outro documento).Por exemplo:Vamos seguir para a secção <A href="int_html">Introdução ao HTML</A>7.IMAGENSAs imagens podem ser usadas para suscitar o interesse por uma página.Nota-se no entanto que à máxima "uma imagem vale por mil palavras" se podecontrapor: “ mil imagens podem não valer uma única palavra”. Vamos sopor, que"foto_ferias.jpg" é uma imagem com 200×300 pixels existente no mesmo directório queo documento. Para inserir a imagem usa-se o elemento IMG: <IMG src="foto_ferias.jpg" width="200" height="300" alt="Foto das férias nos Açores">Notas:  Deve sempre especificar-se o tamanho das imagens.  O atributo "alt" é fundamental pela questão de acessibilidade. Nunca o devemos esquecer.Liliana Costa 3722 ISVOUGA Página 14 de 12
  16. 16. 3- Tecnologias de Internet HTML8.CONCLUSÃOCom a proliferação de editores de HTML simples e elegantes, como o FrontpageExpress ou o Netscape Composer, é pouco provável que se comece a preparar umapágina usando o código HTML directamente. Mas é útil conhecer algo sobre ele, já queo estamos a usar quase todos os dias! Podemos aprender HTML de muitas maneirassem estudar especificamente a linguagem como se fosse uma linguagem deprogramação. Mas apesar de tudo e depois da abordagem efectuada neste trabalho,conclui-se que é um método simples mas que necessita de algumas regras básicasque sem elas não se conseguirá atingir o objectivo de criar um página15.Liliana Costa 3722 ISVOUGA Página 15 de 12
  17. 17. 3- Tecnologias de Internet HTML9.BIBLIOGRAFIA  http://pt.wikipedia.org/wiki/HTML  http://aero-planos.planetaclix.pt/SOS/HTML/  http://ufpa.br/dicas/htm/htm-intr.htm  http://www.apostilando.com/sessao.php?cod=35  http://www.alfa.ind.br/luiz/html/basicos.htmLiliana Costa 3722 ISVOUGA Página 16 de 12

×