Introdução ao HTML

1. Introdução

  • Formato texto ASCII.
  • Pode ser desenvolvido em qualquer editor de texto.
  • Baseado no conjunto de HyTime + DTD de SGML.
  • HyTime (Hypermedia/Time-based Document Structuring Language)
    • Padrão de representação de hipermídia e informação baseada em tempo.
    • Documento visto como um conjunto de eventos concorrentes dependentes de tempo (audio, video, etc.) conectados por webs ou hiperlinks.
  • SGML - (Standard Generalized Marckup Language)
    • Padrão de formatação de texto.
    • Conveniente para transformar documentos em hiper-objetos e descrever as ligações.

      • DTD - (Document Type Definition) - regras de formatação para uma dada classe de documentos.


2. Documento básico

  • Tags (etiquetas) e Tags vazias
  • Seções
    • HTML
    • HEAD
    • BODY
      • BGCOLOR - cor de fundo (padrão: cinza ou branco)
      • TEXT - cor dos textos da página (padrão: preto)
      • LINK - a cor dos links (padrão: azul)
      • ALINK - cor dos links, quando acionados (padrão: vermelho)
      • VLINK -cor dos links, depois de visitados (padrão: azul escuro ou roxo) 
  • Separadores
  • Caracteres especiais e acentuação

3. Formatação de textos

  • <b> - negrito
  • <i> - itálico
  • <u> - sublinhado
  • <hX> - titulos
  • <blink> - texto piscando
  • <blockquote> - tabulação do parágrafo
  • <center>
  • <pre> - Texto pré-formatado
  • <s> - riscado
  • <big> - um pouco maior
  • <small> - um pouco menor
  • <sub> - H2O
  • <sup> - Km2
  • <font>
    • cor <font color="#FFFFFF">
    • tipos <font face=Arial>
    • tamanho <font size=+2>
Exercício: Fazer um pequeno Curriculum Vitae seu no formato HTML.

4. Links (caminhos)

  • <a href="caminho"> </a>
  • links relativos
  • links absolutos
  • links para trechos do documento <a name="local"><a href="#local">
5. Imagens
  • <IMG SRC="URL_imagem">
  • Formatos: gif, jpg, png, xbm.
  • em <body> pode-se usar o atributo background="imagem.gif" para colocar um fundo na página.


6. Listas

  • Listas não numeradas <UL><LI></LI></UL>
  • Listas numeradas <OL><LI></LI></OL> 
  • Listas de Definições <DL><DD></DT><DD><DT></DL>
Exercício: Fazer uma página pessoal no formato HTML. Faça no mínimo 3 páginas e procure usar todos os elementos estudados acima.

7. Tabelas

  • O elemento TABLE 
  • Table Headings (Elemento TH) 
  • Table Data (Elemento TD) 
  • Table Row (Elemento TR) 
  • Atributos para a Tabela 
    • BORDER - quando não aparece, a tabela não tem bordas. Quando acrescenta-se um número (BORDER=3) aumenta o tamanho.
    • ALIGN=center/left/right
    • VALIG=top/middle/botton
    • <NOWRAP> - evita quebra de linha dentro de uma célula
    • <COLSPAN> - define quantas colunas uma célula conterá. O padão é COLSPAN=1.
    • <ROWSPAN> - define quantas linhas um célula pode abranger. O padrão também é 1.
    • CELLSPACING=<value> espaço entre cada célula na tabela.
    • WIDTH=<valor ou %> determina o quanto da tela uma tabela ou célula de tabela deverá ocupar.
Exercício: Faça um documento HTML para representar uma nota-fiscal. Use Tabelas.

8. Frames
 

  • Importante: Não usar <body>
  • Atributos do frameset:
    • ROWS - linhas (rows="30, 50") pixels ou (rows="20%, 10%, 40%) porcentagem
    • COLS - colunas. Mesma formatação que as linhas.

Exemplo:

<html><head><title></title></head>
    <frameset rows="20%, 60%, 20%">
        <frame src="pagina1.html">
        <frame src="pagina2.html">
        <frame src="pagina3.html">
    </frameset>
</html>

     

  • Atributos do Frame:
    • SRC="url"
    • NAME="nome_da_janela"
    • MARGINWIDTH="valor"
    • MARGINHEIGHT="valor"
    • SCROLLING="yes/no/auto"
    • NORESIZE


    Exemplo:

<frame src="principal.html" name="home" marginwidth="5" marginheight="5" scrolling=äuto" noresize>

     

  • noframes - O conteúdo entre <noframes> e </noframes> aparecerá se o navegador não possui suporte à frames, caso contrário, será ignorado.
  • target - Especifica em que frame a página será chamada. Usado para links entre frames.

9. Formulários

<FORM ACTION="URL_de_script" METHOD="método">...</FORM>

ACTION

URL do script ao qual serão enviados os dados do formulário.
METHOD
    Seleciona um método para acessar o URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do browser para o servidor, com a seguinte diferença básica: 
  • POST
    • - os dados entrados fazem parte do corpo da mensagem enviada para o servidor; 
    • - transfere grande quantidade de dados. 
  • GET 
    • - os dados entrados fazem parte do URL associado à consulta enviada para o servidor; 
    • - suporta até 128 caracteres. 
9.1. Campos de dados
  • Texto <INPUT TYPE=TEXT NAME="Nome">
  • Senha <INPUT TYPE=PASSWORD NAME="senha">
  • Atributos
    • VALUE="Texto a aparecer"
    • SIZE=Valor - Tamanho do Campo
    • MAXLENGHT=Valor - Máximo de caracteres aceitos para um campo
  • Múltipla escolha
    • <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="basquete">Basquete <br>
    • CHECKED marca uma escolha inicial
  • Escolha única
    • <INPUT TYPE=RADIO NAME="cidade" VALUE="cidade">Indaial <br>
    • CHECKED marca uma escolha inicial


9.2. Botões de ação

  • <INPUT TYPE="submit" NAME="botao" VALUE="Enviar"> - envia dados de entrada para o servidor.
  • <INPUT TYPE="reset" NAME="botao" VALUE="Apagar"> - restaura os valores iniciais das entradas de dados.


9.3. Select

<SELECT NAME="sabor"> 
    <OPTION>Abacaxi 
    <OPTION SELECTED>Creme 
    <OPTION>Morango 
    <OPTION>Chocolate 
</SELECT> 

TEXTAREA

<TEXTAREA COLS=40 ROWS=5 NAME="comentario">Deixe seu comentário</TEXTAREA>
 

[voltar]