Curso html

1

HTML

HTML Básico

HTML - HyperText Markup Language (Linguagem de Formatação de Hipertexto) - é uma codificação padrão para a formatação de páginas da Internet. Utilizando o HTML puro (que pode ser escrito no Bloco de Notas do Windows e depois salvo como "html" para ser lido no navegador) é possível escrever toda uma página para a web. Os comandos ou instruções de formatação da linguagem HTML são relativamente simples, e embora praticamente ninguém mais construa páginas escrevendo o código (os programas de edição para a web, como o Dreamweaver ou o próprio Word geram-no), seu conhecimento é util, pois utilizando os códigos de formatação é possível "incrementar" bastante sites e blogs. Sobretudo quando as ferramentas de edição dos construtores de postagens ou páginas web não possuem recursos relativos a alguns elementos e atributos que podem ser inseridos via codificação. Além disso, às vezes, é bem mais fácil alterar a posição de elementos (textos, imagens etc.) por meio do "recortar/colar" do código. E a compreensão de uma página web como um suporte aberto a materiais de diferentes procedências - linkados no HTML - também é favorecida.

A linguagem HTML

O aspecto que singulariza a linguagem HTML é o uso de tags (também chamadas de etiquetas ou marcações) que são elementos entre os sinais < e > que indicam algum tipo de formatação. Geralmante as tags aparecem em duplas, uma de abertura e outra de fechamento, neste caso o sinal "/" acompanha a final, como no exemplo, abaixo:

<tag>exemplo</tag>

Ao mesmo tempo, vale notar que as tags podem possuir atributos, que correspondem a certos níveis da formatação que serão aplicados ao elemento (texto, imagem etc.) que estiver entre a tag de abertura e a de fechamento.

<tag atributo1="alguma_coisa" atributo2="outra_coisa">exemplo</tag>

2

A construção de uma página e as principais marcações

Algumas observações iniciais importantes: 1) ninguém decora TODAS as marcações - ter em mente as principais, como as de formatações de texto, imagens e links já é suficiente para muita coisa; 2) o mais interessante no estudo feito aqui é a compreensão da linguagem; 3) por isso mesmo, abaixo só são indicados algumas das muitas outras marcações existentes. De qualquer modo, ao fim dessa página, são sugeridos alguns sites com mais conteúdo sobre o tema, para quem desejar aprofundar-se e ter como material de consulta; e 4) o HTML não diferencia, na escritura das tags, o uso de letras maiúsculas ou minúsculas, então, tanto faz na construção de uma página ou edição de documento como se digita.

A estrutura básica de uma página HTML consiste no seguinte:

<html> - Indica que o documento é o de um arquivo HTML <head><title>Título do documento (irá aparecer na barra superior do navegador)</title></head> <body> - Inicia a página propriamente dita Aqui estarão os textos... imagens... links... enfim, todos os elementos da janela principal do navegador, vistos no "corpo" do texto. </body> - Finaliza o corpo do texto </html> - Fecha a construção da página

Formatações de texto

Cabe notar que existem dois tipo de formatação para textos e caracteres: a lógica e a física. A visualização tende a ser parecida, no entanto, a diferença é que a segunda opera com valores específicos (por exemplo, o tamanho do texto), enquanto a primeira utiliza instruções que serão interpretadas pelo navegador. Abaixo as principais formatações, respectivamente em formato lógico e físico. negrito -<strong>texto </strong> ou <b>texto</b> itálico - <em>texto</em>ou<i> texto </i> tachado - <strike>texto </strike>ou<s> texto</s> Agora, só formatação lógica:

tamanho maior <big>texto</big>tamanho menor - <small>texto</small>subscrito - <sub>texto</sub>sobrescrito - <sup>texto</sup>máquina de escrever - <tt> texto</tt> sublinhado - <u>texto</u>

3

Cabeçalhos

Existem 6 níveis de cabeçalho, o primeiro é o maior e depois vai continuamente diminuindo.

<h1>Cabeçalho 1</h1>

<h2>Cabeçalho 2</h2>

<h3>Cabeçalho 3</h3> <h4>Cabeçalho 4</h4> <h5>Cabeçalho 5</h5> <h6>Cabeçalho 6</h6> Atributos de fonte

Alinhamento <font align="center">Alinhamento central</font>

À direita <font align="right">Alinhamento à direita</font>

À esquerda <font align="left">Alinhamento à esquerda</font>

Cores de fonte <font color="blue">Texto</font> <font color="#7CCD7C">Texto</font> - cor em formato hexadecimal, ver tabela aqui <http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm> . Tipo da fonte, tamanho e combinação de atributos

<font face="times" size="large" color="green">Texto</font> Texto animado As tags <marquee></marquee> permitem fazer com que o texto que aparece na tela tenha um efeito de animação. Ela possui os seguintes atributos: <marquee behavior=scroll>texto que aparecerá com animação</marquee> <marquee behavior=slide direction=right>texto que aparecerá com animação</marquee> <marquee behavior=scroll direction=left>texto que aparecerá com animação</marquee>

4

Parágrafos, quebra de linha espaçada e linha horizontal

As tags <p> e </p> indicam um parágrafo que terá uma pequena distância do próximo. Já a tag <br> (que não tem marcação de fechamento) indica uma linha em branco. E para adicionar uma linha horizontal, basta colocar a tag <hr>, cujo valor em pixels pode ser indicado, como nesse exemplo: <hr size="8">.

Hiperlinks

Os hiperlinks, ou simplesmente links, são feitos com a tag <a href="endereço para

onde se vai">Link</a>. O caminho (endereço) pode ser relativo ou absoluto. No primeiro caso, quando ambos os arquivos (âncora, o do link, e do ponto de chegada) estão no mesmo servidor/diretório, basta colocar esse, por exemplo: "/imagens/pagina_2.html". Mas, se o ponto de chegada está em outro servidor, deve-se usar o caminho absoluto, ou seja, o endereço completo do link, como: "http://www.blogger.com". É possível usar uma imagem como link (no caso de um botão, por exemplo), o que será visto a seguir.

Imagens

Quando se faz o upload de uma imagem para o Blogger, ele automaticamente cria a marcação de inserção da mesma, isto é, ele dá o endereço da qual ela será "puxada" para a página html em questão, conforme esta marcação: <img src="localização da imagem/imagem.extensão da mesma">. O atributo "src" é o que contém o endereço, e - no caso de imagens de outras páginas que sejam inseridas num arquivo é nele que o endereço da mesma deve ser colocado. O Blogger também faz isso (a inserção do código), quando se informa que a imagem será colocada a partir de um endereço. A tag da imagem é outra que não possui fechamento. Outros atributos da imagem são alt, width e height, border e align. Abaixo, numa marcação de imagem com múltiplos atributos explica-se o que cada um deles faz. <img src="imagem" alt=indica um texto que será visto quando o cursor for colocado sobre a imagem width=largura da imagem em pixels height=altura da imagem align=alinhamento da imagem>

Exemplo com explicação de link em imagem

Abaixo três telas que exemplificam várias coisas faladas aqui, notando-se que as duas primeiras mostram o modo de edição em HTML do blog. Quanto à inserção de link em imagem, ela é simples, basta colocar entre a imagem as tags do link, por exemplo: <a href="endereço para onde se vai"><img src="foto.jpg"></a>

5

Porém, deve-se notar que o Blogger já cria um ponto de chegada, que é para uma imagem com a imagem isolada. Assim, deve-se apagar o trecho que existe e colocar o novo endereço: "<a href=novo_endereço>".

6

Páginas com apostilas e material sobre HTML

Introdução ao HTML - http://www.icmc.usp.br/ensino/material/html/intro.html Introdução à Linguagem HTML - http://jcmaxwell1.vilabol.uol.com.br/Html/texto.html Apostila de HTML - http://www.veradias.pro.br/JAVA/html/apostila.htm#_Toc410983591 HTML para blogs - http://www.emblema.art.br/html4blog/index.htm

Curso html

Education

Transcript of Curso html