 |
 |
Significado das SiglasCriando Documentos HTMLOs documentos HTML estão em formato texto padrão (conhecido como ASCII) e podem ser criados usando-se qualquer editor de texto (e.x.: Emacs ou VI , em maquinas UNIX). Dois browsers do Web; (o tkWWW para maquinas do Sistema X Window e o browser Web do CERN para computadores Ne XT), que incluem editores HTML rudimentares em ambiente WYSIWYG. Você pode fazer uma primeira tentativa com estes editores antes de explorar os detalhes do HTML. Você pode ver de ante mão um documento em desenvolvimento com Netscape, Explorer (e alguns outros browsers da Web). Abre-se com o comando Open Local no menu File. Depois que você editar o arquivo fonte HTML, grave as alterações. Retorne ao e rechame o documento. As mudanças são vistas na tela. Documento HTML (Mínimo)<TITLE> Este é um exemplo de um simples HTML</TITLE> <H1>Este é um cabeçalho de nivel-1</H1> Bem vindo ao mundo de HTML, este é um parágrafo. <P> E este é um outro parágrafo.O HTML usa etiquetas de marcação para dizer ao browser Web, como deve mostrar o texto no vídeo (display). No exemplo acima: a etiqueta <TITLE> especifica o inicio de titulo de documento a etiqueta </TITLE> especifica o fim de titulo de documento a etiqueta <H1> especifica o inicio de cabeçalho nivel-1 a etiqueta </H1> especifica o fim de cabeçalho nivel-1 etiqueta <P> marca fim de parágrafo de documento Volta ao início desta página VisualizarAs etiquetas HTML consistem dos sinais: menor que (<) seguido de algum texto, e para fechar o sinal matemático - maior que (> ). São chamados diretivas. As etiquetas de marcação, em geral, são pares: <H1> e </H1> . O delimitador final de etiqueta é quase igual ao seu inicio, exceto pela presença de uma barra / antes do seu símbolo. Assim,
no exemplo acima, a etiqueta <H1>
No entanto, uma primeira exceção à regra é a etiqueta<P> . Esta etiqueta dispensa o seu par </P> , para fim de parágrafo. Nota de Instrução - 1:
Por exemplo, teste.html Em seguida, digite o comando: lynx teste.html Nem todas
etiquetas são suportadas pôr todos browsers Web. Se um determinado
(browser) não reconhece uma etiqueta, ele a desconsidera.
TítulosCada documento HTML deve ter um titulo. Um titulo é geralmente mostrado separadamente do documento e se usa principalmente para identificação do documento em outros contextos. Uma pesquisa WAIS , seleciona cerca de meia dezena de palavras que definem um certo documento. Nos browsers, o campo Titulo de Documento esta no topo da tela, logo abaixo da barra de menus.A diretiva para a etiqueta titulo é <TITLE>. O titulo geralmente aparece na primeira linha do documento. Volta ao início desta página Cabeçalhos<Hy> Texto do cabeçalho</Hy>onde y é um numero entre 1 e 6 que especifica o nível do cabeçalho. Pôr exemplo, a codificação para o item "Cabeçalhos" acima, é: <H3>Cabeçalhos</H3>Titulo versus primeiro cabeçalho: Em muitos
documentos (inclusive este) o primeiro cabeçalho é idêntico
ao titulo. Para documentos multi-partes, o texto de primeiro cabeçalho
deve dar ao leitor a idéia de que a informação esta
relacionada (e.x., um titulo de capitulo), contudo a etiqueta de titulo
deve identificar o documento em seu contexto mais amplo (e.x., incluindo
ambos; o titulo do livro e o nome do capitulo.
ParágrafosBem Vindo ao HTML. Este é o primeiro parágrafo.<P>No arquivo fonte ha uma quebra de linha entre as frases. Um browser Web ignora esta quebra de linha e inicia um novo parágrafo so' quando encontra a etiqueta de marcação de parágrafo. Importante: Você deve separar parágrafos com <P> O browser ignora quaisquer idênticos ou linhas em branco no texto fonte. O HTML se baseia somente nas etiquetas para instruções de codificação de formato, e sem as etiquetas <P> o documento se transforma num grande parágrafo. A exceção é o texto etiquetado como preformatado (preformatted), que será explicado mais a frente. No exemplo que segue, de texto preformatado, as etiquetas são as mesmas que no exemplo anterior, mas o resultado é outro. <TITLE>O mais simples exemplo de HTML</TITLE> <H1>Este e' o nivel-1 de cabecalho</H1>Bem Vindo ao mundo de HTML. Este é um paragrafo.<P> E este é um outro.<P>Atenção: Para se visualizar melhor a estrutura de um arquivo HTML, os cabecalhos devem estar separados e, em linhas diferentes, e os paragrafos devem vir no inicio de linhas em branco, e após a etiqueta do parágrafo anterior. Volta ao início desta página Ligações à Outros DocumentosNos browsers, as ligações hypertexto estão em cores e são assumidas pôr default. Mas é possível modifica-las no menu Opções.Uma etiqueta HTML relacionada a hypertexto é <A>, representada, pôr uma ancora. Para incluir uma ancora no seu documento:
<A href="MaineStats.html">Maine</A>Esta entrada torna a palavra Maine uma ligação hypertexto -hyperlink- ao documento MaineStats.html. Volta ao início desta página Recurso Uniforme para Localização (URL)O World Wide Web (Rede Mundial) usa o Recurso Uniforme para Localização (Uniform Resource Locators URL), para especificar o local de armazenamento físico de arquivos, em outros servidores. Um URL utiliza o mesmo tipo de recurso usado para se ter acesso ao endereço de um servidor (como o gopher WAIS, pôr exemplo), e também, para localizar um arquivo. A sintaxe e': scheme://host.domain[:port] /path/filenameonde scheme é um dos seguintes atributos:
Observação: Para exemplificar melhor um URL, caso se queira incluir uma ligação desta cartilha versão em inglês a um outro documento que esteja sendo montado, se usaria a sintaxe: <A HREF="http://www.ncsa.uiuc.edu/General/Internet/ WWW/HTMLPrimer.html"> NCSA's HTML Primer</A>Esta sintaxe de linguagem HTML (URL), incluída aqui, torna a frase: NCSA's HTML Primer uma hiperligação -hyperlink- deste manual, à versão inglesa. Isto vale para qualquer outro documento corrente, no qual o texto preformatado, acima, esteja declarado. Trata-se da seguinte referencia:
A
Beginner's Guide
para URLs,
localizado no Mosaic de NCSA, no menu Help.
Âncoras: Outros Documentos<A NAME= "documentB">ChamandoDocB</A>Quando você cria ligações para um documento A, deve incluir o nome de arquivo (filename), precedido pelo sinal jogo da velha (#) e, a palavra de ligação - ancora para o documento B. A sintaxe e': Esta e'uma <A HREF="documentB.html#documentB">ligação</A> para o documento B.Agora, se você clicar sobre a palavra ligação no documento A, faz com que apareça no monitor o texto contido no documento B, denominado "documentoB.html". Volta ao início desta página Âncora: Dentro do DocumentoEtiquetas de MarcaçãoO que
se viu ate aqui é suficiente para elaborar um documento HTML simples.
Para documentos HTML mais complexos, existem etiquetas para diferentes
tipos de listas, de seções preformatadas, quotas estendidas,
caracteres de formatação e outros recursos.
ListasHTML
suporta listas não - numeradas, numeradas e descritivas (ou de descrição).
Os itens da lista não requerem nenhuma etiqueta de separação
de parágrafo. As etiquetas para os itens de lista, finalizam cada
item da lista.
Listas não Numeradas
<UL> <LI> macas <LI> bananas </UL>O resultado é: < p>
Volta ao início desta página Listas OrdenadasAs listas podem ser aleatoriamente ordenadas. Um item da lista pode ele próprio conter listas. Pode ter também vários parágrafos, cada um deles conter listas ordenadas, em um único item da lista, e assim sucessivamente. É bom lembrar que o display de uma lista não - numerada, varia com o viewer. Certos browsers podem não permitir níveis sucessivos de indentação, ou modificar as marcas usadas para cada nível. O browser faz indentificação de segundo nível na lista seguinte e troca o ponteiro de uma marca para uma pequena janela. < P>Um exemplo de listas ordenadas: <UL> <LI>Alguns Estados de New England: <UL> <LI>Vermont <LI>New Hampshire </UL> <li>Um Estado de Midwestern: <UL> <LI> Michigan </UL> </UL>A lista ordenada se apresenta, assim: < P>
Lista NumeradasUma lista numerada (também chamada lista ordenada) utiliza a etiqueta <ol> para iniciar a seqüência de itens da lista. Utiliza igualmente a etiqueta: <li> para iniciar os itens da lista. Para finalizar utiliza a etiqueta: </ol> Por exemplo: <OL> <LI> laranjas <LI> pêssegos <LI> uvas </OL>O resultado é: < p>
Listas DescritivasUma lista de descrição usualmente consiste em alternar um descrição do titulo (abreviado como dt) e Um descrição descrição (abreviado como dd). A descrição geralmente inicia em uma nova linha, porque o viewer deixa toda linha para o conteúdo da descrição do titulo dt Segue um exemplo de linguagem HTML, de listas descritivas: <DL> <DT> National Center for Supercomputing Applications <DD> Se localiza no campus da Universidade de Illinois, em Urbana-Champaign. NCSA é uma das quatro instituições -membro, no Nacional Metacenter for Computational Science and Engineering. <DT> Cornell Theory Center <DD> O CTC se localiza no campus da Cornell University, in Ithaca, New York. CTC é outra instituição - membro do Nacional Metacenter for Computational Science and Engineering. </DL> O resultado se parece com:
* múltiplos parágrafos (separados pôr etiquetas de parágrafo), * listas, ou *outra informação da descrição. Usa-se a etiqueta <PRE>(iniciais de PREformatted) para gerar texto com fontes de tamanho fixo, espaços em branco, nova linhas, e tabulações importantes. É muito útil para listagens de programas predefinidos. Pôr exemplo, as linhas seguintes estão neste arquivo-fonte: <PRE> #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </PRE>Mostrado como: #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm *Referencias Hipertexto (e outras etiquetas HTML) podem ser usadas dentro de seções <pre>. Quotas ExtendidasUsa-se as etiquetas <blockquote> e </blockquote> para incluir um bloco de notas, em destaque na tela. Pôr exemplo: <blockquote> Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow. <P> I still have a dream. It is a dream deeply rooted in the American dream. <P> I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident thar all men are created equal. <P> </blockquote>O resultado é: Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow.Volta ao início desta página EndereçosA etiqueta <ADDRESS> e usada geralmente dentro de um documento HTML para especificar o autor de um documento e, possibilitar contatos entre o autor e os confluentes do documento, pôr meio de seu "e-mail", pôr exemplo. Em geral, vem no ultimo parágrafo do arquivo-documento, e numa nova linha justificada `a esquerda Pôr exemplo, a ultima parte deste arquivo HTML, na sua versão inglês, é: <ADDRESS> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS>O resultado é: < p> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu Caracter de FormataçãoPalavras sozinhas, ou frases podem ser codificadas com estilos especiais. Logical são estilos configurados pelo próprio viewer do consulente. Pôr exemplo, <CITE> pode ser configurado como itálico pelo viewer. Cada vez que se entrar com a etiqueta <CITE> o viewer automaticamente mostra o texto em itálico. O estilo physical é aquele que você determina , e o viewer mostra de acordo com o que foi codificado. Por exemplo, <I> diz ao viewer para mostrar o texto em italico. Para documentos HTML-codificados, deve-se usar estilos lógicos, sempre que possível.
|
Iniciação ao HTML 