AULA DE HTML - 1ª AULA - COMANDOS BÁSICOS

O que é HTML?

HTML é uma linguagem de marcação feita por TAGs (etiquetas) que informam ao browser (navegador) a ação que este deve tomar para exibir os elementos gráficos de um documento. A linguagem HTML é uma linguagem de "segunda categoria" e é considerada somente um código de marcação, não tendo, entre os programadores de sistemas, o "status" de linguagem. 

A primeira tag da página é sempre <HTML> e </HTML> fecha o documento.

O cabeçalho das páginas contém informações sobre as mesmas, que não são visualizadas na página. O cabeçalho é delimitado pelas tags:

<HEAD> </HEAD>

Tudo que estiver dentro dessas tags é informação que o browser lê, mas não exibe graficamente, executa. Páginas em CSS tem aqui colocados os seus comandos.

Dentro dos HEADs a tag necessária é <TITLE> e </TITLE>. Dentro dessas TAGs estará o título da página, ou seja, o que aparecerá na linha superior do browser e que será "bookmarcado" pelo browser junto com o endereço da página (URL) quando alguém a acrescentar nos favoritos ou bookmarks.

No exemplo:

<head>

<meta name="Author" content="Jurema Sampaio - Designer/Artista Plástica">

<title>Jurema Sampaio</title>

</head>

Abrimos o HEAD (cabeçalho) com uma TAG chamada META. As META TAGS, como são conhecidas, servem a muitos objetivos. Destrinchando esse cabeçalho simples:

<META NAME="Author" CONTENT="Jurema L. F. Sampaio - Designer/Artista Plástica">

Explica que quem "fez" essa página foi "Jurema Sampaio - Designer/Artista Plástica" 

Há ainda a TAG <TITLE>Jurema Sampaio</TITLE> que já foi explicada.

As META TAGS são um "universo" à parte no HTML e estudá-las a fundo depende da vontade de cada webdesigner, mas são funções de webmasteres conhecer todas as suas utilidades. 


 
 
 
HEAD .
Vamos experimentar somente uma metatag no exercício, no head:  Página auto-carregável a cada 1 segundo.

<META HTTP-EQUIV="Refresh"CONTENT=1>

<TITLE> Exemplo de uso de META </TITLE>

<BODY> Qualquer texto. </BODY>

<TITLE> texto do título</TITLE>  Identifica o título da página, que é exibido no topo da janela do browser. Deve ser bem claro e explicativo, para que o usuário tenha uma idéia do conteúdo, porque é ele que ficará marcado em bookmarks e hotlists. Se não for fornecido o browser assumirá o nome do arquivo como título.
No Nosso exercício, vamos usar: <TITLE> Exercício de HTML - Curso de Webdesign </TITLE>
CORPO DA PÁGINA Lista de Cores
<BODY BACKGROUND="URL_imagem" BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor"> corpo da página </BODY>  Delimita o corpo da página, que é a parte que é mostrada na tela do browser.

BACKGROUND Especifica a imagem (GIF ou JPG) usada para preencher o fundo da tela.

BG COLOR Usa cor no fundo da página.

TEXT define a cor do texto da página.

LINK define as cores dos links.

VLINK define as cores dos links visitados.

ALINK define as cores do links ativos.

Exercício: <BODY BACKGROUND="fundo.jpg" BGCOLOR="FFFFFF" TEXT="blue" LINK="red" ALINK="green"> corpo da página </BODY>
Comentários: Comentários dentro de um código HTML servem para orientar o programador apenas, pois não são lidos pelo browser.

Pode ser de duas formas:

<!--texto de comentário ->

<COMMENT> Texto de comentário</COMMENT>

FORMATAÇÃO FÍSICA (TEXTOS) (Exercitar no corpo - body - do documento)
<B> negrito </B> Formata tudo que estiver entre as tags em negrito.
<BIG> grande</BIG> Formata tudo que estiver entre as tags em tamanho maior que o normal, porém, fixo. Contrasta com o <SMALL>
<BLINK>piscando</BLINK> Formata tudo que estiver entre as tags de forma que fica piscando na tela.
<I> itálico</I> Formata tudo que estiver entre as tags em itálico.
<SMALL> pequeno </SMALL> Formata tudo que estiver entre as tags em fonte pequena fixa. Contraste do <BIG>
<STRIKE> riscado </STRIKE> Formata tudo que estiver entre as tags com um risco pelo centro.
<SUB> subscrito </SUB> Formata tudo que estiver entre as tags subscrito em relação à linha. 

Exemplo: Este texto está subscrito em relação a linha. 

Útil para escrever fórmulas químicas.

<SUP> sobrescrito </SUP> Formata tudo que estiver entre as tags sobrescrito em relação à linha. 

Exemplo: Este texto está sobrescrito em relação a linha. 

Útil para se escrever potenciação.

<TT> texto </TT> (true type) Formata tudo que estiver entre as tags em uma fonte de tamanho fixo (como a Courier)
<LI> lista com marcadores </LI> Lista ítens com um marcador antes de cada ítem da lista.
<BR> lista sem marcadores </BR> Lista ítens sem marcadores, apenas fazendo a quebra de linha.
<P> parágrafo </P> Insere quebras de linahs, criando parágrafos.
. JUSTIFY - Justifica igualmente o texto no espaço determinado, que pode ser a página toda ou uma célula de tabela. Dve ser usado por parágrafo, na forma:

<P ALIGN="justify">

AS FONTES  
A definição dos tamanhos das fontes é feita com os comandos: <FONT SIZE=numero_entre_1_e_7>, sendo que o 7 é o menor tamanho e o 1, o maior. </FONT> OBS: Os sinais de + e - podem ser usados para 'mediar' tamanhos de fonte.
As definição de cor p/ uma fonte (diferente da definida para o texto em geral), se faz com o comando: <FONT COLOR="nome_da_cor_ou_numero"> texto </FONT>
Exercício:  <FONT SIZE=+2 COLOR="#FF0000"> Teste de tamanho e cor. </FONT>
INCLUSÃO DE OBJETOS  
<IMG SRC="imagem.jgp"> (ou .gif) Inserção de imagens.
Os parâmetros de imagens são: SRC Localização e nome do arquivo.

ALT Frase alternativa a ser exibida no lugar da imagem.

HEIGHT Altura da imagem. Pode ser dada em pixels (fixa) ou porcentagem de tela (variável).

WIDTH Largura da Imagem. Os valores trabalham da mesma forma que na altura.

BORDER Espessura da borda em torno da imagem. 

Default=sem borda. Alguns editores tem default de borda = a 2.

VSPACE Espaçamento vertical (em pixels) entre a  imagem e o texto.

HSPACE Espaçamento horizontal entre a imagem e o texto.

LOWSRC Carrega inicialmente uma versão em baixa resolução, da imagem a ser carregada naquele local.

ALIGN Define como o texto e imagem são alinhados.

LEFT - alinha a imagem com a margem esquerda e faz o texto fluir a direita da imagem.

RIGTH - Alinha a imagem com a margem direita e faz o texto fluir a esquerda da mesma.

CENTER - alinha a imagem ao centro do documento.

 Sintaxe de sobrepor imagens:  <IMG LOWSRC="imagem1.gif" SRC="imagem2.gif">
LINKS  
<A HREF="endereço_do_link">
Título do link </A>
O endereço do link é completo, com o protocolo:
http://www.jurema-sampaio.pro.br

Caso seja um endereço de e-mail, deve-se acrescentar depois do HREF a expressão mailto: seguida do endereço de e-mail que o link destinará. Este é o protocolo de e-mail.

Exercício: Montar uma sintaxe que inclua: imagem, texto, um link de texto e um link de imagem. Sem borda.
O que vamos fazer como exercícios? Fazer uma página simples, com texto, imagem, fundo, link de e-mail, link de texto (para um endereço qualquer) e link usando imagem com o arquivo pequeno (para endereço qualquer).
Arquivo de fundo amarelo.gif
Arquivo de imagem  baixar.gif
Arquivo pequeno p/ link AQUARELA.gif

ANTERIOR

EXERCÍCIO