Aula De Html

HIPERTEXT MARKUP LANGUAGE

LINGUAGEM DE MARCAÇÃO DE HIPERTEXTO

World - mundo Wide - amplo, largo - Worldwide - mundial, universal Web - teia (de aranha) ou rede (de computadores)

Texto Mensagens, trabalhos, material didático, corporativo ou pessoal. Características: tamanho, cor, fonte, estilos, eventos, ... Imagem Desenhos, efeitos visuais, animações, símbolos, fotos, filmes, ... Características: tamanho, formato, eventos, qualidade, ... Áudio Músicas, sons, fundo, efeitos, voz, ... Características: loop, tamanho, formato, ...

Página principal Página inicial Home

HP Ir para lá

Página X

Página Y Agora ir o final

Agora ir para lá Final Ir para HP

O navegador WEB, ou o Browser, é um programa de computador que consegue ler a página HTML, interpretar seus comandos e apresentar na tela em uma forma compreensível para o usuário. O Browser é um interpretador, interpretador ou seja, após ler, ele “decifra” os comandos escritos em HTML, verifica sua sintaxe e então executa-os. Portanto, a linguagem HTML “acontece” no computador do usuário. Se houver qualquer alteração na página, é necessário carregar novamente para mostrar as atualizações.

Servidor é todo computador que possui uma função específica em uma rede. Geralmente são máquinas mais potentes tanto em processamento (velocidade) como em armazenamento (capacidade). O programa que é executado no servidor para disponibilizar as páginas é chamado de servidor WEB (Apache, IIS, ...) Quando digitamos www.feevale.br, por exemplo, é apresentada na tela a página inicial (HP) HP que está armazenada em um computador (servidor) servidor na WEB (internet). internet A partir da HP “navegamos” pelas outras telas por meio de seus links.

Usuário digita um endereço WEB no Browser

www.feevale.br Computador do usuário recebe, interpreta e mostra página HTML

Página Inicial

Servidor WEB envia código HTML da página inicial (HP)

Uma página HTML pode ser criada/editada em um editor de texto comum, Bloco de Notas, por exemplo, pois seu conteúdo é texto, sem formatação. Também pode ser utilizado programas específicos para isso: Dreamweaver da Macromedia, Front Page da Microsoft, ... Programas freeware também podem ser encontrados na WEB. A vantagem dos programas editores de página HTML é que eles adotam as facilidades e recursos do Windows para criar páginas, sem necessariamente ter um conhecimento maior de programação e de HTML.

As páginas html possuem extensão htm ou html. html Os comandos são chamados de TAGS, que são marcas padrão usadas para indicar ao Browser os comandos a serem executados. As tags são digitadas entre “<“ e “>”. Geralmente são utilizadas em pares “< >” e < / >”.

Curso de HTML.

- e representam o início e o final da página e englobam todos os comandos (head e body). - e contém os parâmetros de configuração da página, o título, keywords, identificação, ... - e é o próprio conteúdo da página.

Curso de HTML.

: negrito : itálico : sublinhado : formatação da fonte face = “nome da fonte” (p.e. arial, ...) size = tamanho (1, 2, 3, ...) color = "#000080” (hexa)

Curso de HTML.

Observar as tags fechando cada formato.

e

: quebra de página align = alinhamento (center, left ou right)

Curso de HTML.

Turma 2004/2

Disciplina: Didática
Professor Paulo

: listas não numeradas

: tópicos da lista

Tópicos •Tópico 1 •Tópico 2

Tópicos

• Tópico 1

• Tópico 2

: listas numeradas

: tópicos da lista

Tópicos 1. Tópico 1 2. Tópico 2

Tópicos

1. Tópico 1

2. Tópico 2

---

: insere uma barra horizontal na página

Barras

---

Texto da página

Páginas do mesmo servidor, mesma pasta

Ir para página 2

Outros servidores



Email

Página da Feevale

Enviar um mail

Background Arquivo de som da página (c/s loop) Imagem de fundo Cor do fundo Cor do texto Cores dos links

Esta página contém uma figura de fundo

Tabela Linhas Colunas

Esta página contém uma tabela

Nome	Endereço
Paulo	[email protected]

Border: espessura da borda Cellspacing = espaço entre as células Cellpading = distância do texto até a borda da célula Align = alinhamento horizontal do texto na célula (center, left ou right) Valign = alinhamento vertical na célula (top, middle ou botton)

*Nowrap: evita quebra de linha COLSPAN: Mesclar colunas em uma única célula

Esta página contém uma tabela

Nome e e-mail
Paulo	[email protected]

Esta página contém uma tabela

Nome	Cidade
Paulo	Porto Alegre
Mario Quintana
Elis Regina

ROWSPAN: Mesclar linhas em uma única célula

Bordas

Alinhamento

Identificação

Tamanho

Cores

Espaçamento

Rowspan Colspan

Interatividade

• • • • •

Divisão do documento em blocos Identificação, posição, eventos e estilos Contém outros elementos de um documento * SPAN são usadas para criar blocos em uma linha

Ao publicar uma página você passa a ser autor e seu trabalho fica disponível para quem navegar pela WEB. Enquanto educadores, somos responsáveis pela qualidade e exatidão dos nossos trabalhos. A qualidade está no conteúdo do nosso trabalho e também no seu formato. Cores, banners, textos e figuras devem considerar facilidades/dificuldades do usuário para acessar a internet. Observar tamanho das figuras, cores de fundo e do texto, disposição e quantidade de material na página.