TUTORIAL - AUTORIA EM
WORLD WIDE WEB
-
HYPERTEXT MARKUP
LANGUAGE
(HTML)
( V E R S Ã O P R E L I M I N A R )
R E D E N A C I O N A L D E P E S Q U I S A
D e z e m b r o d e 1 9 9 5
D o c u m e n t o N q R N P / R E F / 0 1 4 6
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guias e Dicas
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Encontrar documentos
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Encontra documentos específicos para os exames da tua universidade
Videoaulas
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Quiz
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Html, Notas de estudo de Informática
Tutorial de HTML
Tipologia: Notas de estudo
Antes de 2010
1 / 83
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Pré-visualização parcial do texto
Baixe Html e outras Notas de estudo em PDF para Informática, somente na Docsity!
TUTORIAL - AUTORIA EM
WORLD WIDE WEB -
HYPERTEXT MARKUP
LANGUAGE (HTML)
( V E R S Ã O P R E L I M I N A R )
R E D E N A C I O N A L D E P E S Q U I S A
D e z e m b r o d e 1 9 9 5
D o c u m e n t o N q R N P / R E F / 0 1 4 6
© Copyright 1995 Rede Nacional de Pesquisa - RNP
É PERMITIDA A REPRODUÇÃO DO PRESENTE MATERIAL, DESDE QUE PARA FINS EDUCACIONAIS OU DE PESQUISA, DEVENDO, NO ENTANTO, SER MENCIONADOS EXPRESSAMENTE OS DIREITOS AUTORAIS RESERVADOS À RNP. É VEDADA A REPRODUÇÃO PARA QUAISQUER OUTROS FINS, A MENOS QUE CONCEDIDA EXPRESSA AUTORIZAÇÃO PELA RNP.
- PARTE I - BÁSICO
- Características Gerais do HTML
- Criando Documentos em HTML..............................................................................
- 2.1. HTML "Mínimo"
- 2.2. Marcações Básicas
- 2.2.1. Títulos
- 2.2.2. Cabeçalhos
- 2.2.3. Parágrafos
- 2.2.4. Quebras de linha
- 2.3. Interligando Documentos......................................................................................
- 2.3.1. Para começar...............................................................................................
- 2.3.2. Interligando documentos em outros diretórios
- 2.3.3. Ligando URL's
- 2.3.4. Ligando sessões específicas em outro documento......................................
- 2.4. Interligando Sessões em uma Página
- 2.5. Listas
- 2.5.1. Listas não numeradas..................................................................................
- 2.5.2. Listas numeradas.........................................................................................
- 2.5.3. Listas de definições.....................................................................................
- 2.5.4. Listas intercaladas.......................................................................................
- 2.6. Texto Pré-Formatado
- 2.7. Caracteres Especiais..............................................................................................
- 2.8. Endereços
- 2.9. Inserir Imagens......................................................................................................
- 2.10. Controle de Cores e Gráficos de Fundo
- 2.10.1. Cores e elementos gráficos de fundo
- 2.10.2. Cores das letras e links
- 2.11. Barras horizontais
- Tabela de Comandos................................................................................................
- Tabela de Acentuação/ Caracteres Especiais
- Tabela de Cores
- PARTE II - TABELAS
- Tabelas em HTML
- 1.1. Principais Marcações
- 1.2. Atributos de Tabelas
- 1.3. Outros Elementos de Controle
- Tabela de Comandos................................................................................................
- PARTE III - FORMULÁRIOS
- Sobre este Tutorial
- 2 Codificação Básica do Formulário
- Texto
- 3.1. Entrada de Texto Comum - TEXT
- 3.2. Entrada de Texto Protegido, Senha - PASSWORD
- 3.3. Entrada Oculta - HIDDEN
- 3.4. Entrada de Várias Linhas de Texto - TEXTAREA
- Menus
- 4.4. Menus com Opções - SELECT
- 4.5. Listas Pagináveis - SELECT com SIZE
- Botões..........................................................................................................................
- 5.1. Botões Sim-ou-Não - CHECKBOX
- 5.2. Botões com Opções - RADIO
- 5.3. Botões de Submissão e Limpeza - SUBMIT e RESET
- PARTE IV - EXTENSÕES DO NETSCAPE
- PARTE V -FRAMES
- Sobre este Tutorial
- 2 Estrutura Básica -Frame Document
- Sintaxe.........................................................................................................................
- 3.1. Frameset
- 3.2. Frame
- 3.3. Noframes
- IntercalandoFrameset - Exemplos.........................................................................
- 5.Links entre Frames....................................................................................................
- Cartela de Comandos
PARTE I
1. Características Gerais do HTML
x Documentos HTML são arquivos escritos em ASCII - texto. x Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad ) x Existem editores específicos para várias plataformas x Existem conversores de vários formatos, por exemplo, doc para html x A unidade mínima de informação é a “página”
Há diferenças entre os diversos clientes Web , de forma que nem todas as marcações e seus correspondentes recursos são suportadas por todos eles. Quando um cliente não entende uma determinada marcação, ele simplesmente a ignora. Ao criar um documento, é importante testá-lo com vários clientes.
Você pode visualizar um documento que esteja criando com NCSA Mosaic (ou qualquer outro cliente Web ). Basta abrí-lo com o comando Open Local File disponível na opção File do menu_._
HTML utiliza marcações específicas e distintas para dizer ao Web browser como exibir o documento.
Importante: HTML não faz diferença entre maiúsculas e minúsculas (não é " case sensitive "). Então a notação **** é equivalente a <TITLE> ou <TiTlE>.
Como são as Marcações HTML?
As marcações do HTML - tags - consistem do sinal ( < ), (o símbolo de "menor que"), seguida pelo nome da marcação e fechada por ( > ) ("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O símbolo que termina uma determinada marcação é igual aquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente. No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível de cabeçalho e </H1> avisa que o cabeçalho acabou.
Há excessões a esse funcionamento em pares das marcações. Por exemplo, a que indica um final de parágrafo: <P>. Não necessita de uma correspondente: </P>. A marcação que indica quebra de linha - <br> - também não precisa de uma correspondente, e outras tais como <hr> e <li>.
Exemplos de Marcações x A notação: <TITLE> (e a correspondente **** ), especificam o título de um documento. x A notação: **** (e a correspondente **** ), indica a aparência de um cabeçalho. x A notação: é a marcação para final de parágrafo.
**2.2. Marcações Básicas**2.2.1. Títulos
Todo documento em HTML deve possuir um título. De um modo geral o título aparece em lugar separado da página (por exemplo, alto da tela no Netscape ), e é utilizado para identificar o documento em outros contextos ( por exemplo, buscas Wais ). É interessante que o título possa sugerir claramente o conteúdo do documento.
Atenção porque o conceito de título é diferente de cabeçalho. O título está mais para o nome do arquivo. Não é um elemento relevante na visualização do documento como acontece com o cabeçalho.
A marcação utilizada para títulos é **** e seu par ****.
Escrito desta forma:
Este é o título
E este o cabeçalho de nível 2 Aqui entra o texto do documento ...
Apresenta-se assim:
2.2.2. Cabeçalhos
"Cabeçalhos" normalmente são usados para títulos e sub-títulos de uma página.
HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior destaque. Cabeçalhos são exibidos em letras maiores e em negrito. O primeiro cabeçalho em cada documento deve estar marcado como ****.
ATENÇÃO : ao definir o tamanho de um cabeçalho, você não está definindo o tamanho da letra (fonte 10, fonte 14). Você apenas define que ele aparecerá com maior tamanho e destaque que o resto do texto. O tamanho exato com que ele será visualizado é definido pelo programa visualizador de html ( browser ) de cada pessoa que acessar a informação.
As notações relativas a cabeçalhos são:
**** Texto do cabeçalho ****
onde y é um número entre 1 e 6 especificando o nível do cabeçalho.
O conjunto de notações possíveis é o que segue:
Headings Headings Headings Headings Headings Headings
2.2.3. Parágrafos
A marcação é utilizada para definir o início de um novo parágrafo, deixando uma linha em branco entre cada parágrafo. HTML não reconhece o caracter de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o início de um novo parágrafo mediante a marcação apropriada.
Existem algumas exceções. Por exemplo, inserindo uma marcação de parágrafo depois de
, **** , **** e outras, esta será ignorada.
2.2.4. Quebras de linha
A marcação
faz uma quebra de linha sem acrescentar espaço extra entre as linhas.Veja a diferença do uso de e
,nos exemplos a seguir:
2.3.1. Para começar
O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e também imagens) a outros documentos. Os clientes exibem em destaque estas áreas ou pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se trata de um link , ou interligação, no hipertexto.
A marcação **** , que define o ponto de partida para os links , é denominada de âncora. Para incluir uma âncora em seu documento:
x Inicie a âncora com **** x Insira o texto que vai funcionar como link no documento corrente x Anote a marcação de final da âncora: ****.
Um exemplo de referência a um hipertexto: Praias
A palavra “Praias'' é definida como o marcador do link para se chegar ao documento ListaPraias.html, que está no mesmo diretório do documento corrente. Ou seja, "Praias" aparece em negrito e se eu clicar nessa palavra será exibido o documento apontado - ListaPraias.html
2.3.2. Interligando Documentos em Outros Diretórios
É possível interligar documentos em outro diretório especificando-se o caminho relativo a partir do documento corrente, em relação ao que está sendo interligado.
Por exemplo, um link para o arquivo Sergipe.html localizado no subdiretório Estados seria assim:
Sergipe
Estes são dos denominados links relativos. É também possível usar o caminho completo ( pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padrão do sistema UNIX.
Importante: se você quiser referenciar um diretório a partir do “raiz” do seu servidor WWW, inicie a notação com /. Isto é, se você tiver uma notação desta forma: **** , significa que o arquivo incon1.gif deverá ser buscado no diretório imagens que está imediatamente acima do diretório raiz do seu servidor WWW.
2.3.3. Ligando URL’s
O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar a localização de arquivos em servidores. Uma URL inclui o tipo de recurso acessado (p.e, Gopher , WAIS ), o endereço do servidor, e a localização do arquivo.
Se escreve de acordo com o esquema abaixo:
protocolo://servidor[:port]/path/filename
Onde protocolo é uma das seguintes definições
file um arquivo no seu sistema local, ou servidor de ftp http um arquivo em um servidor World Wide Web gopher um arquivo em um servidor Gopher WAIS um arquivo em um servidor WAIS news um Usenet newsgroup telnet uma conexão Telnet
Por exemplo, para incluir um link para o HTML Beginner’s Guide , em um documento, deve ser usado:
** NCSA's Beginner's Guide to HTML**
O que torna a sentença ”NCSA's Beginner's Guide to HTML'' um link para tal documento.
Para mais informações sobre URLs, veja em
x WWW Names and Addresses, URIs, URLs, URNs , escrito por pessoas do CERN, disponível em http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html. x A Beginner's Guide to URLs , localizado no menu de Help do NCSA Mosaic , e disponível em http://www.ncsa.uiuc.edu/demoweb/URL-primer.html
Abaixo o exemplo de uma lista com dois itens:
maçãs bananas
Vai aparecer assim:
Cada marcação pode conter vários parágrafos.
2.5.2 Listas Numeradas
Uma lista numerada - ou ordenada - é semelhante a uma lista não numerada, exceto porque utiliza marcação **** ao invés de ****. Os itens são identificados utilizando-se a mesma notação ****.
Uma lista criada assim:
laranjas peras uvas
Resulta neste formato:
2.5.3. Listas de Definições
Uma lista de definições normalmente consiste em alternar um termo (abreviado como DT ) e uma definição (abreviado como DD ). Clientes Web browser s geralmente mostram a definição em nova linha com outro alinhamento.
Exemplo de uma lista de definição:
NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.
É exibida com este formato:
2.6. Texto Pré-formatado
A marcação (derivada de ”preformatted”) delimita uma área de texto em que espaços, novas linhas e tabulações são mantidas. Ou seja, o texto será apresentado exatamente da forma como foi digitado, mesmo que não hajam marcações do html. É uma forma de se preservar o formato de um texto
Este recurso é utilizado por exemplo para listas de programas.Vejamos um exemplo:
#!/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 *
Apresenta-se assim:
Podem ser definidos links dentro de textos pré-formatados. No entanto, deve-se evitar utilizar outros caracteres das marcações em áreas . Isto porque caracteres como <, >, and & possuem um significado específico no HTML.
O ideal é utilizar as sequências especiais, (<, >, and &, respectivamente) sempre que precisar representar esses caracteres. Veremos mais sobre no próximo item.
2.8. Endereços
A marcação **** é habitualmente utilizada para especificar o autor do documento e a forma de contato com ele (por exemplo, o endereço eletrônico). Geralmente é o último item de uma página.
Por exemplo, a última linha do Beginer's Guide em que foi baseado este tutorial é assim:
A Beginner's Guide to HTML / NCSA / [email protected]
E o resultado é
Existe ainda um recurso para criar um item na página que, ao ser selecionado, abre uma janela, e permite que se envie uma mensagem eletrônica para um endereço específico. Para isso utiliza-se a variável "mailto:"
Veja o exemplo abaixo, para enviar mensagens de dúvidas para o endereço eletrônico [email protected]
Qualquer dúvida ou comentário, você pode enviar um email ao pessoal de apoio a usuários do CR-DF.
Fica assim:
E ao se clicar em “pessoal de apoio”, se abrirá uma janela para envio de mensagem eletrônica, como abaixo: