Lingua Gem HTML

Linguagem HTML
HTML
HyperText MarkUp Language uma linguagem estruturada de descrio de pgina.- Todos os comandos so colocados entre chaves <comando> e devem ter o respectivo fechamento </comando>
Comandos Bsicos
<HTML> indica arquivos em html
<TITLE> Titulo da Pgina, o que aparece na barra do navegador</TITLE> <BODY> indica comeco do contedo < A HREF=" http://"> <IMG SRC="logo.gif"> </A> </BODY> </HTML>
Sobre Hyperlinks
Hyperlinks so ligaes dinmicas entre os documentos. Quando o usurio clica sobre um hyperlink, ele levado para uma outra parte ou para um outro documento dentro da rede.
Opes principais disponveis

Target
_blank _top abre nova janela/browser na mesma janela, sobrepondo todas as definies do frame nome indica destino na estrutura de frame #ancora indica ncora dentro da pgina.
Utilizao: <a href=http://www.dominio.com.br target=_blank>
ncora
uma referncia dentro da pgina. Quando criamos um link para uma ncora, como se crissemos um link interno ao prprio documento. Assim, na pigna HTML, quando clicamos no link o navegador nos leva at a ncora.
Para se definir a ncora, vamos at o local onde queremos coloc-la e indicamos <a name=nome_da_ancora></a> O comando semelhante criao de um hiperlink. Pode-se colocar uma imagem ou mesmo um texto entre os comandos <a></a>, mas no imprescindvel.
Imagens
A pgina em HTML aceita somente arquivos de imagem em formato .JPG e .GIF. De maneira geral, utilizamos o formato .JPG para fotos (grayscale ou tons de cinza ou ainda sistema de cores RGB, 200 dpi). Para grafismos e logotipos, utilizamos com mais freqncia o formato .GIF (at 256 cores). Ao incluir imagens, podemos criar algumas opes: Width="200" largura da imagem Height="250" altura da imagem Border="0" borda em volta da imagem Alt="texto" legenda texto que normalmente os navegadores mostram quando paramos o mouse sobre a imagem. Um exemplo de formatao: <img src=imagem.gif width=150 height=200 border=0>
Sobre textos
Uma importante considerao sobre fontes que ns, como designers, temos que considerar a possibilidade de outros usurios no possurem as mesmas fontes que ns temos em nosso computador. Isso pode acontecer porque acessam de outros tipos e computadores ou sistemas operacionais (PC, MacIntosh, Workstation, MainFrame e ainda Windows, MacOS, Linux, Unix etc.) Por isso, muito comum nos atermos aos principais tipos de letras disponveis no mercado, pois so os mais facilmente encontrveis. Para definir o fonte dos textos, utilizamos o comando <FONT>: <FONT="Verdana, Arial, Helvetica" SIZE="2" COLOR="#000000">
Estilos de Fontes
Outras opes relacionadas fontes, est relacionado ao estilo da letra. As variaes em negrito (bold), inclinado ou oblquo (italic) e ainda o sublinhado. Os seguintes comandos devem ser utilizados independentemente do comando FONT. <b>bold</b> <i>italic</i> <b><I>bold italic</b></I> <u>underline</u> Caso voc faa realmente questo que um texto aparea no tipo de letra (fonte) que voc escolheu, voc dever utilizar um arquivo de imagem com o texto e fonte desejado. Geralmente, utiliza-se arquivos em formato .GIF para isso.
MARCADORES
Marcadores esto presentes nas listas numeradas ou separadas por bolinhas (bullets). <UL> <LI>Item 1</LI> <LI>Item 2</LI> </UL> A outra opo de lista o comando <OL> (Ordered List, ou lista numerada): <OL> <LI>Item 1</LI> <LI>Item 2</LI> </OL>
Sobre quebras de Linhas

Quando trabalhamos textos em HTML, no adianta voc digitar um Enter ao final das linhas. As quebras vo acontecer somente mediante cdigos em HTML. Para separar pargrafos de texto, necessrio utilizar o comando <P>: <p align="left">contedo</p> Opes: Align=left Outras opes: left, center, right, justify
Sobre formatao da pgina

Caracterstica principal: adequa-se sempre ao tamanho do navegador. No h limite vertical. O horizontal definido pelo browser. Como, ento, fazer com que a pgina esteja formatada como NS queremos? Existem basicamente 2 recursos: Frames e Tabelas.
FRAMES
Frames ou quadros um recurso que permite a visualizao simultnea de vrios arquivos HTML. Um deles o controlador, ou seja, o que indica onde e como as informaes vo ser mostradas, ou, em outras palavras, define as reas/regies onde estaro situadas as demais pginas. tambm conhecido como frameset.htm. No cdigo abaixo, ns temos um exemplo de pgina frameset. Lembrando que um frameset nada mais do que um arquivo HTML que gerencia a visualizao de outros documentos, vamos supor que esta seja a Homepage de seu site. Ao acesslo, o usurio vai visualizar, simultaneamente, 2 outras pginas HTML: menu.htm e conteudo.htm:
EXEMPLO
Exemplo <html> <head> <title></title> <frameset cols=120,*" frameborder="no" border="0" framespacing="0"> <frame src="menu.html" name="menu scrolling="No" > <frame src="conteudo.html" name="principal"> </frameset> </head> <body> <noframes> </body></noframes> </html>
* O asterisco um caracter coringa. Ele indica ao navegador para utilizar todos os espaos restantes. Caso haja uma definio do tipo FRAMESET COLS=*,120,*, estaremos dizendo para o navegador: a coluna do meio tem 120 pixels. Divida igualmente os espaos restantes para formar a coluna 1 e a coluna 3.
Vantagens e Desvantagens
Voc pode fazer uma estrutura de navegao em que alguns documentos encontram-se fora de seu Site, mantendo a impresso, ao usurio, de continuar navegando no seu endereo, j que parte do contedo que ele estar vendo uma pgina que voc fez. uma forma fcil de se criar menus.
Quando o usurio for imprimir a pgina, na verdade sero impressos todos os documentos relacionados no frameset. Tecnicamente, um recurso mais pobre, devendo ser reservado para casos especficos.
Tabelas
O uso de tabelas muito importante tanto para organizar as informaes de modo mais fcil, a exemplo do que ocorre em uma planilha, quanto para formatar uma pgina. O conceito inicial de HTML permitir um ajuste automtico da distribuio de espaos ocupados por textos e imagens conforme o tamanho do navegador. No entanto, por questes de design, tem sido mais interessante deixar o documento com aparncia visual mais previsvel possvel. Para isso, os designers tm utilizado o conceito de tabela para literalmente desenhar a pgina, definindo espaamentos fixos para suas pginas.
Exemplo
<table width="200" border="1" cellspacing="4" cellpadding="10"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td rowspan="2"> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table>
Formulrios
Em HTML possvel apenas desenhar os formulrios. Em geral, para que eles tenham alguma funcionalidade, gerando interatividade com o usurio, necessrio o auxlio de um programa auxiliar: Para incluir as informaes em um banco de dados: necessrio que um programador especializado faa as configuraes de Banco de Dados no servidor Internet, alm de produzir um programa que leia as informaes do formulrio e as grave no Banco. Para enviar os dados do formulrio para um endereo de email necessrio a ajuda de um programa. Normalmente, ele escrito na linguagem PERL (programa CGI), ou ainda em PHP. Geralmente os provedores fornecem uma opo desses programas e voc dever instruir-se com o suporte tcnico deles sobre como configurar corretamente o formulrio.
Exemplo
<form action="form.php" method="post" name="form"> <p> Digite seus Dados:</p> <label>Nome:</label> <input type="text" id="nome" maxlength="40" /><br/> <label>Senha:</label> <input type="password" id="senha" maxlength="8" /><br/> <label>Ocupao:</label><br/> <input type="checkbox" id="ocup" value="1" />Estudante<br/> <input type="checkbox" id="ocup" value="2" />Professor<br/> <label>Sexo:</label><br/> <input type="radio" id="sexo" name="sexo" value="F" />Feminino <input type="radio" id="sexo" name="sexo" value="M" />Masculino<br /> <input type="submit" name="Entrar" /><br /> <input type="reset" name="Limpar" /> </form>

Lingua Gem HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lingua Gem HTML

Uploaded by

Copyright:

Available Formats

Linguagem HTML

Opes principais disponveis

Utilizao: <a href=http://www.dominio.com.br target=_blank>

Sobre quebras de Linhas

Sobre formatao da pgina

You might also like