Vode pode ver de antemao um documento em desenvolvimento com Mosaic da NCSA (e alguns outros browsers do Web). Abre-se com o comando Open Local no menu File. Depois que voce editar o arquivo fonte HTML, grave as alteracoes. Retorne ao Mosaic de NCSA e rechame o documento. As mudancas sao vistas na tela.
<TITLE> Este e' um exemplo de um simples HTML</TITLE> <H1>Este e' um cabecalho de nivel-1</H1> Bem vindo ao mundo de HTML, este e' um paragrafo. <P> E este e' um outro paragrafo.
<TITLE> </TITLE> <H1> </H1> <P> Para visualisar o resultado da versão formatada, no exemplo acima.
As etiquetas HTML consistem dos sinais: menor que (<)
seguido de algum texto, e para fechar o sinal matematico - maior que (> ).
Sao chamados diretivas.
As etiquetas de marcacao, em geral, são pares: <H1> e
</H1> .
O delimitador final de etiqueta e' quase igual ao seu inicio, exceto pela presenca de uma barra / antes do seu simbolo.
Assim, no exemplo acima, a etiqueta <H1>
diz ao browser Web (Teia) para comecar a escrever um cabecalho de primeiro nivel, ou nivel-1
e, a etiqueta </H1>
diz ao browser que o cabecalho acabou.
No entanto, uma primeira excessao `a regra e' a
etiqueta<P> . Esta etiqueta dispensa o seu par
</P> , para fim de paragrafo.
Nota de Instrução - 1:
<title> e'
equivalente a <TITLE> ou <TiTLe> .
Nem todas etiquetas sao suportadas por todos browsers Web. Se um
determinado (browser) nao reconhece uma etiqueta, ele a desconsidera.
No Mosaic da NCSA, o campo Titulo de Documento esta' no topo da tela, logo abaixo da barra de menus.A diretiva para a etiqueta titulo e'
<TITLE>.
O titulo geralmente aparece na primeira linha do documento.
<H1> .
A sintaxe para etiqueta de cabecalho e':
<Hy> Texto do cabecalho</Hy>onde y e' um numero entre 1 e 6 que especifica o nivel do cabecalho. Por exemplo, a codificacao para o item "Cabecalhos" acima, e':
<H3>Cabecalhos</H3>
Titulo versus primeiro cabecalho:
Em muitos documentos (inclusive este) o primeiro cabecalho e' identico ao titulo. Para documentos multi-partes, o texto de primeiro cabecalho deve dar ao leitor a ideia de que a informacao 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.
<TITLE>.
Espacos que precedem uma etiqueta <P> ou
<Hy> sao ignorados. Note-se que no exemplo mais simples, anteriormente apresentado,
o primeiro paragrafo esta' codificado, da seguinte maneira:
Bem Vindo ao HTML.
Este e' o primeiro paragrafo.<P>
No arquivo fonte ha uma quebra de linha entre as frases. Um browser Web
ignora esta quebra de linha e inicia um novo paragrafo so' quando encontra
a etiqueta de marcacao de paragrafo. Importante:
Voce deve separar paragrafos com <P>
O browser ignora quaisquer identacoes ou linhas em branco no texto fonte.
O HTML se baseia somente nas etiquetas para instrucoes de codificacao de formato,
e sem as etiquetas <P> o documento se transforma num
grande paragrafo.
A excessao e' o texto etiquetado como preformatado (preformatted),
que sera explicado mais a frente.
No exemplo que segue, de texto preformatado, as etiquetas sao as mesmas
que no exemplo anterior, mas o resultado e' 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 e' um paragrafo.<P> E este e'um outro.<P>
Atencao: 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 apos a etiqueta do paragrafo anterior.
No Mosaic da NCSA, as ligacoes hypertexto estao em cores e sao assumidas por default. Mas e' possivel modifica-las no menu Opcoes.Uma etiqueta HTML relacionada a hypertexto e'
<A>,
representada no Mosaic da NCSA, por uma ancora.<A
(ha um espaco depois do A inicial de etiqueta.)
HREF="filename.html",
seguido pelo fechamento com
>
</A>
<A href="MaineStats.html">Maine</A>Esta entrada torna a palavra Maine uma ligacao hypertexto -hyperlink- ao documento MaineStats.html.
scheme://host.domain[:port] /path/filename
onde scheme e' um dos seguintes atributos:
file
http
gopher
WAIS
news
telnet
Observacao: Para exemplificar melhor um URL, caso se queira incluir uma ligacao desta cartilha versao em ingles 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), incluida aqui, torna a frase:
NCSA's HTML Primer
uma hiperligacao -hyperlink- deste manual, `a versao inglesa.
Isto vale para qualquer outro documento corrente, no
qual o texto preformatado, acima, esteja declarado.
Para mais informacoes sobre URLs, clique a palavra
AddressingA Beginner's Guide para URLs, localizado no Mosaic de NCSA, no menu Help.
<A NAME= "documentB">ChamandoDocB</A>Quando voce cria ligacoes para secoes no documento A, deve incluir o nome de arquivo (filename), precedido pelo sinal jogo da velha (#) e, a palavra de ligacao - ancora para o documento B. A sintaxe e':
Esta e' uma <A HREF="documentB.html#documentB">ligacao</A>
para o documento B.
Agora, se voce clicar sobre a palavra ligacao no documento A,
faz com que apareca no monitor o texto contido no documento B,
denominado "documentoB.html".
<ul>
< LI> Entre com a etiqueta de lista para um item individual:
<li>
Nao e' necessario fechar com :
</li>
< LI> Finalize a lista com a etiqueta de fechamento de lista nao numerada:
</ul>
<UL> <LI> macas <LI> bananas </UL>O resultado e': < p>
Note-se que diferentes viewers mostram uma lista nao-numerada de forma diferente. Uns usam ponteiros, pequenos circulos, asteriscos ou travessao para apontar os itens.
<ol>
para iniciar a sequencia 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> pessegos <LI> uvas </OL>O resultado e': < p>
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 e' uma das quatro instituicoes-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 e' outra instituicao-membro do Nacional Metacenter for Computational Science and Engineering. </DL>O resultado se parece com:
<DT> and <DD>
podem conter: * multiplos paragrafos (separados por etiquetas de paragrafo),
* listas, ou
*outra informacao da descricao.
E' bom lembrar que o display de uma lista nao-numerada, varia com o viewer. Certos browsers podem nao permitir niveis sucessivos de identacao, ou modificar as marcas usadas para cada nivel.
O Mosaic da NCSA faz identacao de segundo nivel 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>
<PRE>(iniciais de PREformatted) para gerar texto
com fontes de tamanho fixo, espacos em branco, nova linhas, e tabulacoes importantes.
E' muito util para listagens de programas predefinidos.
Por exemplo, as linhas seguintes estao 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 secoes
<pre>.
<blockquote> e </blockquote>
para incluir um bloco de notas, em destaque na tela. Por 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 e':
Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow.I still have a dream. It is a dream deeply rooted in the American dream.
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.
<ADDRESS> e usada geralmente dentro de um documento HTML para especificar o autor de um documento e, possibilitar contatos entre o autor e os consulentes do documento, por meio de seu "e-mail", por exemplo.
Em geral, vem no ltimo paragrafo do arquivo-documento, e numa nova linha
justificada `a esquerda Por exemplo, a ultima parte deste arquivo HTML, na sua versao ingles, e':
<ADDRESS> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS>O resultado e': < p> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
<CITE>
pode ser configurado como italico pelo viewer. Cada vez que se entrar com a etiqueta
<CITE>
o viewer automticamente mostra o texto em italico.
O estilo physical
e' aquele que voce 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 logicos, sempre que possivel.
<I>texto=HTML</i>
poe o texto em italico (HTML).
<em>texto=alguns</em>, tambem
poe texto italico, (somente alguns viewers).
<cite>texto</cite> e' usado para citacoes
de livros, manuais, nomes,secoes (Guia de Iniciacao ao HTML )
<var>texto</var>
indica uma variavel
(filename)
<b>texto=Importante</b>
poe texto em negrito
(Importante)
<strong>texto=Notas:</strong>
tambem destaca o texto
(Notas:)
<tt>texto</tt>
poe texto em um conjunto de caracteres de tamanho fixo.
(1 SU = 1 CPU hour)
<code>texto</code>
tambem poe texto em um conjunto de caracteres de tamanho fixo.
(1 SU = 1 CPU hour)
<samp>texto</samp>
e' um formato para mostras de textos,
(-la)
<kbd>texto</kbd>
mostra os nomes das teclas no teclado ( HELP)
<dfn>texto</dfn>
mostra uma definicao em italico