Apostila de Introdução à Linguagem HTML
Profa. Flávia Pereira de Carvalho
Outubro de 2004
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
Apostila de html, Notas de estudo de Engenharia Química
Apostila introdutória de html
Tipologia: Notas de estudo
Antes de 2010
1 / 33
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Documentos relacionados
Pré-visualização parcial do texto
Baixe Apostila de html e outras Notas de estudo em PDF para Engenharia Química, somente na Docsity!
Apostila de Introdução à Linguagem HTML
Profa. Flávia Pereira de Carvalho
Outubro de 2004
Sumário
- Introdução à Linguagem HTML Página
- Edição de Documentos HTML
- Publicação de Documentos na Internet
- Documento HTML Básico e seus Componentes
- Seção
- Seção
- Cores e Fontes.................................................................................................................................
- Cabeçalhos
- Separadores
- Linha Horizontal
- Listas em HTML...........................................................................................................................
- Formatação de Textos e Caracteres
- Formatação de Frases....................................................................................................................
- Caracteres Especiais......................................................................................................................
- Blink..............................................................................................................................................
- Marquee
- Ligações (uso de Links)
- Caminhos (uso de Links)
- Indicadores (uso de Links)............................................................................................................
- Inserção de Imagens......................................................................................................................
- Atributos Básicos de Imagem
- Molduras de Imagem
- Tabelas
- Extensões de Tabelas
- Frames...........................................................................................................................................
- Áudio e Vídeo
Edição de Documentos HTML
Existem Editores HTML chamados WYSIWYG ( what you see is what you get - o que você vê é o que você tem). Eles oferecem ambiente de edição com um resultado final das marcações (pois o resultado final depende do browser^1 usado para visitar a página). Alguns bastante conhecidos são por exemplo: FrontPage e Dreamweaver.
Figura 1 – Tela do FrontPage
Além dos editores específicos para HTML, Editores de Textos bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML (menu Arquivo, Salvar como, Salvar_como Tipo).
Um documento HTML, normalmente terá extensão .html ou .htm.
Publicação de Documentos na Internet (Sites)
Para que uma página esteja permanentemente disponível pela Web, ela precisa ter um endereço fixo, alojada em um servidor.
Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins lucrativos geralmente são hospedados em provedores de espaço pagos.
Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP^2 ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas no mundo todo.
(^1) Browser: Navegador Internet. Exemplos: Netscape, Internet Explorer, Mozilla, etc. (^2) FTP - File Transfer Protocol : Protocolo de Transferência de Arquivos.
Documento HTML Básico e seus Componentes
A estrutura de um documento HTML apresenta os seguintes componentes:
Titulo do Documento < / TITLE> < / HEAD> <BODY> texto, imagem, links, etc... < / BODY> < / HTML>
Figura 2 – Componentes Básicos de um Documento HTML
As etiquetas (tags) HTML não são sensíveis à caixa , ou seja, tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, etc. Não tem diferença entre maiúsculas e minúsculas.
Os documentos se dividem em duas seções principais, que veremos a seguir.
Seção <HEAD>
<HEAD> contém informações sobre o documento. O elemento <TITLE> , por exemplo, define um título, que é mostrado no alto da janela do browser. Exemplo:
<HEAD> <TITLE> Página do Fulano de Tal
Todo documento WWW deve ter um título ; esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como "Introdução" , por exemplo. O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos sites de busca da Internet.
Cores e Fontes
Cores - As cores são introduzidas através do elemento **** , usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos), como mostrado no exemplo a seguir:
Texto < / FONT>
Produzirá na página: a palavra Texto escrita na cor vermelha.
Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de ****.
Tamanho - Veja a formatação a seguir:
Texto < / FONT>
Produzirá na página: a palavra Texto como o tamaho 3.
Este comando permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar tamanhos relativos a esse, por exemplo:
Letra maior
Letra normal
Letra menor
Letra maior Letra normal Letra menor
Fontes - Uma evolução que permite a escolha da fonte para os textos, é o atributo FACE:
Texto
Produzirá: a palavra Texto com a fonte (tipo de letra) Arial.
Mais exemplos:
Fonte Verdana Azul
Fonte Verdana Azul
Fonte Arial Verde
Fonte Arial verde
Fonte Courier New Vermelha
Fonte Courier New Vermelha
Cabeçalhos
Há seis níveis de cabeçalhos em HTML, de **** a **** :
Este é um cabeçalho de nível 1 Este é um cabeçalho de nível 2
Este é um cabeçalho de nível 3 Este é um cabeçalho de nível 4
Este é um cabeçalho de nível 5 Este é um cabeçalho de nível 6
Esses cabeçalhos são mostrados no browser da seguinte forma:
Este é um cabeçalho de nível 1
Este é um cabeçalho de nível 2
Este é um cabeçalho de nível 3
Este é um cabeçalho de nível 4
Este é um cabeçalho de nível 5
Este é um cabeçalho de nível 6
Aninhamento de cabeçalhos - os cabeçalhos não podem ser aninhados, isto é, a formatação:
Este é um cabeçalho de nível 1 dentro de um cabeçalho de nível 2
pode produzir algum resultado próximo ao desejado:
Este é
um cabeçalho de nível 1
dentro de um cabeçalho de nível 2
Parágrafos
Para separar blocos de texto, usamos o elemento , por exemplo:
Parágrafo 1;
Parágrafo 2.
que produz o seguinte:
Parágrafo1;
Parágrafo2.
Combinando parágrafos e quebras de linha, temos por exemplo:
Parágrafo 1;< br > linha 1 do parágrafo 1, < br >linha 2 do parágrafo 1.< P >Parágrafo 2;< br > linha 1 do parágrafo 2, < br >linha 2 do parágrafo 2.
O resultado da marcação acima é:
Parágrafo 1; linha 1 do parágrafo 1, linha 2 do parágrafo 1.
Parágrafo 2; linha 1 do parágrafo 2, linha 2 do parágrafo 2.
tem atributo de alinhamento, semelhante aos cabeçalhos, como nos exemplos a seguir:
Assim como os trens, as boas idéias às vezes chegam com atraso.
(Giovani Guareschi)
Assim como os trens, as boas idéias às vezes chegam com atraso. (Giovani Guareschi)
Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.
Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.
Este é o alinhamento padrão _(default),_ e por isso não vou colocar nenhuma frase especial.
Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.
Linha Horizontal
< HR > insere uma linha horizontal, como a apresentada abaixo:
Essa linha tem diversos atributos, oferecendo resultados diversos.
insere uma linha de largura 7 (pixels):
insere uma linha que ocupa 50% do espaço horizontal disponível:
insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional:
insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de ):
Dica: Divisões - outros elementos usados para separar porções de texto são o **** e o ****. centraliza os elementos (textos, imagens, tabelas) que estiverem dentro de sua marcação. marca uma divisão lógica de um documento e é uma formatação bastante usada atualmente.
Listas não-numeradas
São equivalentes às listas com marcadores do MS-Word, por exemplo:
item de uma lista item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto item
- item de uma lista
- item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
- item
A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:
Documentos básicos Documentos avançados
formulários
CGI
contadores relógios
Detalhes sobre imagens
- Documentos básicos
- Documentos avançados o formulários § CGI o contadores o relógios
- Detalhes sobre imagens
Listas Numeradas
item de uma lista numerada item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto item de lista numerada
**1. item de uma lista numerada
- item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja** **necessário se preocupar com a formatação das margens de texto
- item de lista numerada**
Estas listas não apresentam numeração em formato 1.1, 1.2, etc., quando compostas apresentam-se da seguinte forma:
**1. Documentos básicos
- Documentos avançados** 1. formulários 1. CGI 2. contadores 3. relógios 2. Detalhes sobre imagens
Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:
Documentos básicos Documentos avançados
formulários
CGI
contadores relógios
Detalhes sobre imagens
I. Documentos básicos II. Documentos avançados a. formulários i. CGI b. contadores c. relógios III. Detalhes sobre imagens
Formatação de Textos e Caracteres
Blocos de texto
HTML oferece as seguintes formatações de blocos de texto:
Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações:
< pre > uma linha aqui, outra ali, etc. < /pre >
Resulta em:
uma linha aqui, outra ali, etc.
Uma vez que < PRE > mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos.
É usado para citações longas:
A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional. (Stephen W. Hawking, “Uma Breve História do Tempo”)
A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.
(Stephen W. Hawking, “Uma Breve História do Tempo”)
Usado para formatar endereços de E-Mail e referências a autores de documentos, como por exemplo:
Envie críticas e sugestões para [email protected]
Envie críticas e sugestões para
Formatação de Frases
Estilos Físicos
Quando disponível no browser , é mostrado em negrito (em alguns browsers , pode aparecer sublinhado).
Itálico
Sublinhado. Deve ser usado com cuidado, pois confunde-se com a apresentação de links.
**** ou **** Frase riscada.
Fonte um pouco maior.
Fonte um pouco menor.
Frase em estilo (^) índice, como em H 2 O, por exemplo.
Frase em estilo expoente, como em Km^2 , por exemplo.
Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, © , que é o símbolo © , ® para ® , e § para §.
Também pode-se usar seqüências com códigos ASCII, por exemplo:
¿ Qué pasa, señor?
¿Qué pasa, señor?
Dica: Por que usar essas formatações? Por causa de um problema técnico relativo à transmissão dos caracteres especiais de várias línguas. Chama-se conjunto de caracteres uma representação digital de texto. O conjunto de representação amplamente utilizado é o ASCII. O ASCII padrão tem 7 bits, porém são usadas versões particulares desse padrão - o ASCII americano, ASCII português, etc., que utilizam 8 bits. Se geramos um texto em ASCII de 8 bits e, na transmissão, esse texto é tratado por um sistema que “compreende” apenas o ASCII de 7 bits, os caracteres especiais serão transformados em caracteres diferentes, pela perda do oitavo bit. Os usuários da Internet já devem ter sofrido experiência semelhante com mensagens de e- mail, que chegam com caracteres estranhos, ou páginas da Web com textos em japonês ou russo.
Blink
A formatação ** Frase foi uma das primeiras inovações introduzidas pelo Netscape.
O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será um fator ainda mais chamativo, o que causa um efeito final cansativo e confuso.
Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript. Felizmente , são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que não consideram o BLINK.
Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande quantidade, muito menos em frases inteiras ou cabeçalhos.
Marquee
É possível obter o efeito de animação de texto, através da formatação .
Texto < / MARQUEE>
Atributos de largura e direção do efeito permitem diversas apresentações diferentes, por exemplo:
Texto < / MARQUEE>
Texto < / MARQUEE>
Texto < / MARQUEE>
Atenção: O efeito Marquee só é executado no Internet Explorer e em versões recentes do Netscape - e de maneiras diferentes.
Ligações (uso de Links)
Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links , onde normalmente, o mouse vira uma “mãozinha” e ao clicar “chamamos” (abrimos) um outro documento, página web ou figura por exemplo.
Para inserir um link em um documento, utilizamos a etiqueta **** , da seguinte forma:
< A HREF = " arquivo_destino "> âncora < /A >
Onde:
arquivo_destino : é o endereço do documento de destino, da página ou imagem a qual queremos abrir.
âncora : é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino.