HTML - Sistemas de Informação e Sistemas para Internet
Propaganda
HTML Nice Pereira, Tuani Zanatta. Faculdade de Informática de Taquara – Curso de Sistemas de Informação Fundação Educacional Encosta Inferior do Nordeste Av. Oscar Martins Rangel, 4500 – Taquara – RS – Brasil [email protected], [email protected] Resumo. Este artigo refere-se à evolução, características e funcionalidades da linguagem HTML (HyperText Markup Language -Linguagem de Formatação de Hipertexto. A linguagem HTML é usada para criar as páginas divulgadas na World Wide Web, o serviço mais popular da Internet. Abstract. This article mentions the evolution, characteristics and functionalities to it of language HTML (Hypertext Markup Language - Language of Formatting of Hipertexto. Language HTML is used to create the pages divulged in the World Wide Web, the service most popular of the InterNet. 1. Introdução Mesmo com inúmeras linguagens novas para desenvolvimento de Internet, o Hyper Text Markup Language, continua sendo a base para a produção de páginas Web.HTML é um recurso muito simples e acessível para a produção de documentos.A linguagem HTML permite criação dos hyperlinks que permitem navegar pela Web. Para isso, utiliza marcações, chamadas tags, no ponto da página em que é feito um hyperlink com outra página.O HTML não é uma linguagem de programação, mas de formatação. 2. Evolução do HTML Essa linguagem foi desenvolvida em 1992 por Tim Berners Lee e Robert Caillau no CERN, que é o Centro Europeu de Pesquisas de Física de Partículas. O html é um exemplo do SGML (Standard Generalized Markup Language). Originalmente o html definia estritamente a estrutura lógica de um documento, e não a sua aparência física. Mas, com a pressão dos usuários (principalmente da indústria), as versões posteriores do html foram forçadas a prover cada vez mais e mais controle da aparência do documento. Algumas datas importantes: 1992: html foi definido; 1993: algumas definições físicas da aparência, tabelas, formulários e equações matemáticas (HTML+); 1994: HTML 2.0 (padrão para as características principais) e 3.0 (uma extensão do HTML+, entendido como um rascunho de padrão); 1995 e 1996: Netscape e Internet Explorer definem seus próprios padrões e surge o HTML 3.2 baseado nas implementações correntes; 1997: O HTML 4.0 é desenvolvido separando a apresentação da estrutura com style sheets (folhas de estilo); 1999: Definição do HTML 4.01 (suaves modificações da versão anterior); 2000: O XHTML 1.0 é criado, o qual consiste de uma versão XML do HTML; 3. Paradigma Linguagens de programação imperativa permitem descrever a resolução de um problema através de uma série de tarefas elementares(comandos) que o computador pode compreender e executar.A seqüência de comandos define o processo (ou procedimento) a seguir e permite a mudança de estado de variáveis de atribuição.Implementada com base na máquina de Von Neumann. As variáveis do programa(e o número da instrução em execução) descrevem o estado da computação a qualquer instante.Então concluímos que Html se encaixa no paradigma imperativo. 4. Características Na internet atualmente quase todas as páginas se resumem em HTML (HyperText Markup Language). O termo hypertext é definido por textos que têm links para outros textos. Já o termo markup language define anotações para a estrutura de um texto. O design de documentos html tem duas características importantes: 1. Documentos html são feitos para prover estrutura lógica da informação destinada à apresentação de páginas da rede mundial de computadores. 2. A linguagem html contém um conjunto de tags com um número fixo para definir a estrutura do documento, e cada tag tem a sua semântica já definida. O CSS (Cascading Style Sheets) permite a separação da estrutura lógica da aparência da página. Mas, embora o layout possa ser separadamente definido no CSS, o html é destinado especificamente para hipertexto. Quando uma determinada palavra ou frase é marcada como hyperlink, é exibida no browser de forma destacada - sublinhada e com uma cor diferente. Essa é a indicação de que tal palavra ou frase está associada ao endereço o URL - de uma outra página. No linguajar da Web, dizemos que aquele hyperlink aponta para outra página. Clicando sobre aquela palavra ou frase, essa outra página será aberta. Ela pode estar no mesmo computador que a página original ou em qualquer lugar do mundo. Além de palavras e frases, imagens também podem ser usadas como hyperlinks.Além das tags para criação de hyperlinks, existem tags que permitem inserir imagens, formatar texto, criar páragrafos, enfim, definir a aparência e a funcionalidade geral de uma página, e até executar programas. Existem dois tipos de tags. Alguns são formados aos pares, indicando o início e o fim do trecho afetado, como exemplo: <H1> e </H1>. Outros podem ser colocados individualmente, como o <P> , que simplesmente insere um espaço para dividir parágrafos. Abaixo seguem as tags: <!--texto de comentário--> - identifica comentários dentro da página e servem apenas para documentação, sendo ignorado pelo browser. <A HREF> e seu correspondente </A> - estabelece um link. <B> e seu correspondente </B> - exibe o texto em negrito <BIG> e seu correspondente </BIG> - exibe o texto em um tamanho de fonte maior do que o padrão. <BLINK> e seu correspondente </BLINK> - exibe o texto piscando. <BLOCKQUOTE> e seu correspondente </BLOCKQUOTE> - destaca um bloco de texto citado de outra fonte, através de uma endentação à direita. <BODY> e seu correspondente </BODY> - delimita o corpo da página, que é a parte da página que o leitor visualiza na sua tela. <BR> e seu correspondente </BR> - insere uma quebra de linha de texto. <CAPTION> e seu correspondente </CAPTION> - especifica uma legenda (título) para a tabela. A legenda é sempre centralizada em relação à tabela. <CENTER> e seu correspondente </CENTER> - centraliza na página tudo o que estiver entre os comandos. <CITE> e seu correspondente </CITE> - exibe o texto em itálico e é utilizado para citações de livros, filmes, obras, etc. <CODE> e seu correspondente </CODE> -exibe o texto em fonte de tamanho fixo e é utilizado pra indicar trechos de códigos de programas. <DL> e seu correspondente </DL> - define uma lista de definição. <DT> e seu correspondente </DT> - identifica o termo a ser definido. <EM> e seu correspondente </EM> - exibe o texto em itálico e é utilizado paa enfatizar um texto. <EMBED> e seu correspondente </EMBED> - insere um objeto na página (somente no ambiente Windows). <FRAME> e seu correspondente </FRAME> -este recurso permite dividir uma simples janela do browser em diversas áreas, chamadas frames. Em cada frame pode ser carregada e visualizada um página diferente. <FONT> e seu correspondente </FONT> - onde é definido o tamanho, cor e tipo de fonte.. <FORM> e seu correspondente </FORM> - define o formulário para o leitor entrar com dados dentro do documento html. <HEAD> e seu correspondente </HEAD> - identifica o termo a ser definido. <HN> e seu correspondente </HN> - identifica títulos, usados para dividir seções do texto. Existem 6 níveis de títulos, numerados de H1 a H6, que são exibidos em fonte maior que a do texto normal. <I> e seu correspondente </I> - exibe o texto em itálico <HTML> e seu corresponde </HTML> - deve englobar todo o conteúdo da página (estar presente no início no fim do texto) para indicar ao navegador que se trata de um documento HTML. <IMG SRC> - insere uma imagem in-line (foramtos GIF ou JPG) na posição corrente da página. <LI> e seu correspondente </LI> - define o item de uma lista não-ordenada. <OL> e seu correspondente </OL> - define uma lista ordenada, numerada sequencialmente pelo browser, na ordem em que os itens da lista forem encontrados.. <P> - identifica o início de um parágrafo e insere uma quebra de parágrafo. <PRE> e seu correspondente </PRE> - exibe o texto em fonte com caracteres de tamanho fixo. <TABLE> e seu correspondente </TABLE> - delimita a tabela dentro da página. <TR> e seu correspondente </TR> - define uma linha da tabela. <TD> e seu correspondente </TD> - define uma célula da linha da tabela. <TITLE> e seu correspondente </TITLE> - entre essas tags deve-se colocar o título da sua página. <UL> e seu correspondente </UL> - define uma lista não-ordenada de itens, precedidos com um bullet. 4.1. Edição de documentos HTML Os documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi, emacs, textedit, notepad, ou qualquer editor simples. Para facilitar a produção de documentos, existem editores HTML específicos: Editores de texto fonte facilitam a inserção das etiquetas, orientando o uso de atributos e marcações. Ex.: W3e, HotDog, Crimson Editor. Tela do Crimson Editor Editores WYSIWYG oferecem ambiente de edição com “um” resultado final das marcações (pois o resultado final depende do browser usado para visitar a página). Ex.: FrontPage, Namo Editor, Dreamweaver. Tela do Namo Editor Além dos editores específicos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportação dos documentos próprios para o formato HTML.O documento HTML produzido, normalmente terá extensão .html ou .htm 5. Exemplos 5.1 Exemplo básico <HTML> <HEAD><TITLE>Titulo do Documento</TITLE></HEAD> <BODY> texto, imagem, links, ... </BODY> </HTML> Obs:As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ... 5.2 Exemplo com Frames <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="indice1.html"> <FRAME SRC="apresenta.html" NAME=principal> <NOFRAME> <BODY> <H2>Bem-vindo à página do assunto X!</h2> <P> Blá blá blá blá blá blá blá blá blá blá </BODY> </NOFRAME> </FRAMESET> </HTML> 5.3 Exemplo listas de definição <DL> <DT>termo a ser definido <DD>definição <DT>termo a ser definido <DD>definição </DL> Que produz: termo a ser definido definição termo a ser definido definição Implementando: <DL> <DT>Imperadores do Brasil: <DD>D. Pedro I <DL> <DD>Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon </DL> <DD>D. Pedro II <DL> <DD>Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga </DL> </DL> 6. Referencias bibliográfica http://www.arquivoceaprendehtml.hpg.ig.com.br http://www.icmc.usp.br/ensino/material/html http://www.gta.ufrj.br/grad/00-1/migue/link2.html http://www.univ-ab.pt/disciplinas/dcet/lp2616/CadernoApoio.pdf http://www.linhadecodigo.com.br/tutoriais.asp?arq=html_comp.zip&id_tutorial=145&sub=53
