Tutorial de HTML - Completo

SUMÁRIO

O QUE É HTML? ........................................................................................... 3

CONSTRUINDO SEU PRIMEIRO SITE ......................................................... 4

CABEÇALHO .................................................................................................. 4

CORPO ............................................................................................................ 13

FONTE ............................................................................................................. 16

UTILIZANDO IMAGENS .................................................................................. 17

CRIAR TABELAS ............................................................................................. 22

MARCADORES DE TEXTO ............................................................................. 23

CRIAR FORMULÁRIOS .................................................................................... 24

FRAME ............................................................................................................... 27

IFRAMEs ............................................................................................................ 29

O QUE É HTML?

HTML, HyperText Markup Language, ou Linguagem de Marcação de Hipertexto, é uma linguagem de marcação que serve para criar páginas na WEB. Em contrapartida com outras linguagens, como C e Pascal, por exemplo, a linguagem HTML não é compilada, e sim interpretada por navegadores. Dessa forma, toda a estrutura de códigos criada nessa linguagem será convertida em uma página.

Os documentos HTML são arquivos de textos que podem ser criados e editados em editores de textos comuns, como o bloco de notas do Windows, TextEdit do Macintosh, assim como ferramentas como o AEdix, que possui funcionalidades práticas que pode facilitar o trabalho.

CONSTRUINDO SEU PRIMEIRO SITE

- ESTRUTURA BÁSICA

Todo site em HTML começa pela tag <html> e termina com a tag </html>. Tag pode ser considerado como o código da linguagem HTML propriamente dito. Desse modo, todas as palavras inseridas dentro de menor (<) e maior (>) são chamadas de tag.

A estrutura básica de um documento em HTML possui as seguintes tags:

Qualquer projeto feito nessa linguagem de marcação possui duas estruturas simples: o cabeçalho e o corpo.

CABEÇALHO

Para escrever o cabeçalho, deve-se iniciar com <head> e terminar com </head>.

Dentro do cabeçalho existe uma tag chamada TITLE. Usando <title> e </title>, o usuário pode escrever dentro dessas duas tags o título da página, que porventura será exibida na janela de visualizações. Veja o exemplo abaixo:

Esse exemplo gerou a seguinte página:

No próprio cabeçalho existem outras tags que podem ou não ser usadas, isso vai depender do projeto seu, se vai precisar ou não.

<style> : Define a formatação em CSS

Assim como você faz a formatação do texto em HTML pode-se fazer em CSS, veja o exemplo:

As Linhas acrescentadas foram a partir de <style>...</style>, a primeira trata-se de uma folha de estilos escrita para CSS (“text/css”). A segunda linha significa dizer que as regras de estilos a seguir aplicam-se ao elemento (“body”). A terceira linha determina a cor do texto, que está representada em hexadecimal, neste exemplo a cor do texto será azul (color: #0000FF). A quarta linha refere-se ao estilo da fonte (font-family: Verdana). A linha a seguir refere-se

a cor para o fundo da página, que será amarelo (background-color: #FFFF00), veja como ficou essa página:

Em CSS aplicam-se regras para a criação de documentos, cada regra é composta por três etapas:

1- Um selector: informa ao browser qual é a parte do documento a qual se aplica a regra (exemplo: “body”);

2- Uma propriedade: especifica qual é o aspecto do layout a ser utilizado (exemplo: “color” e “background-color”, são duas propriedades distintas);

3- Um valor: fornece o valor da propriedade (blue ou #0000FF e yellow ou #FFFF00);

No exemplo anterior as regras foram combinadas, elas valem para o mesmo elemento body, escrevemos de uma só vez o elemento e colocamos com suas propriedades juntas. Também poderia ser feito da seguinte maneira:

body {color: blue}

body {background: yellow}

<script> Define programação de funções em páginas com script, podendo adicionar funções de JavaScript. A união do JavaScript com o CSS é conhecida

como DHTML, com o JavaScript é possível modificar dinamicamente os estilos dos elementos da página em HTML. Veja o exemplo:

Com este código, foi possível exibir a data com dias da semana e mês utilizando JavaScript, a data exibida é de acordo com a máquina do usuário. Veja como ficou esse código:

<link> Define ligações da página com outros arquivos ou com outras páginas.

Os links são pontos clicáveis do documento HTML que levam a qualquer documento da sua página ou outras páginas da internet, em ambos os casos a tag será a mesma, o que vai mudar é o endereço, Vejamos:

<a href="nome-do-lugar-a-ser-levado">descrição</a>

O código a seguir levará para outra página da web:

Obs: Em “nome-do-lugar-a-ser-levado” você coloca o arquivo HTML que você deseja, por exemplo: pagina2.htm ou uma URL como: http://badoo.com/anneingrid/

Descrição: é o que vai aparecer sublinhado na sua home page indicando que pode ser clicado.

Neste exemplo de código, a descrição: Perfil DELA, ficará sublinhado na home Page, ao ser clicado levará para outra página, veja o exemplo:

Cores Dos Links

Podemos utilizar qualquer cor para o link, no entanto, recomenda-se a cor padrão azul (blue) indicada pelo código rgb=#0000FF.

Isto porque quando se clica sobre um link sua cor é alterada para indicar ao usuário que aquele link já foi consultado.

Vlink

Indica a cor dos links que já foram consultados.

Alink

Indica a cor do links ativados na página.

A notação para as cores dos links, alinks e vlinks é:

<body link= "#rrggbb" vlink= "#rrggbb" alink= "#rrggbb> </body>

Como fazer um link abrir em outra janela?

Se você desejar colocar um link para abrir em outra janela, para que o visitante n ão saia do seu site, por exemplo, colocar um link para uma home page fora do site. Para fazer isso é simples, basta inserir o atributo TARGET, assim:

<a href= “http://badoo.com/anneingrid/” target= “_blank”> descrição</a>

Veja o exemplo como fica:

Como fazer uma imagem ter um link?

Assim como faz para inserir um link em uma palavra também é possível fazer com que uma imagem possa ter um link, a diferença está apenas na descrição, em vez de colocar o texto coloca-se a tag da imagem, veja o exemplo:

CORPO

Para redigir o corpo, inicia-se com <body> e conclui-se com </body>.

Subtítulo

Não deve ser confundido com o título do documento, o título é inserido na seção do cabeçalho <head> <title>...</title> </head> enquanto o subtítulo é colocado na seção do corpo documento HTML <body>...</body>

O subtítulo possui 6 níveis de tamanho, a tag usada é o <hy>, onde o “y” é o tamanho que varia de 1 até 6, quanto menos o número, maior a letra.

<h1>...</h1>; <h2>...</h2>;...<h3>...</h3>; <h4>...</h4>; <h5>...</h5>; <h6>...</h6>

Abaixo, tem-se um pequeno exemplo:

Esse código gerou a seguinte página:

Formatando o Texto

Quebra de Linha

<br> faz uma quebra de linha, não precisa fechar a tag.

Parágrafo

Quando for utilizar um parágrafo, deve-se implementar a tag <p>. Veja exemplo:

O código acima gerou a seguinte página:

Alinhamento

Você pode escolher alinhar seu parágrafo. Pra isso, basta usar a tag ALIGN. Exemplo:

O código acima ficou da seguinte forma:

Texto Pré-formatado

Este recurso deixa o texto exatamente da forma que foi digitado. Usa-se a tag <pre>...</pre>. Exemplo:

O exemplo anterior ficou da seguinte maneira:

FONTE

Negrito: podemos escrever o texto em negrito o incluindo dentro das etiquetas <b> ... </b>. Esta mesma tarefa é desempenhada por <strong> ... </strong> sendo ambas equivalentes.

Itálico: existem duas maneiras: <i> ... </i> e outra um pouco mais longa: <em> e </em> é mais prático escrever da primeira forma, por isso que os sites que encontramos escrevem dessa forma

Sublinhado: no uso de sublinhado devemos prestar atenção, pois os links hipertexto também são sublinhados e pode confundir o leitor. Usa-se a tag <u>...</u>.

Subscrito e sobrescrito: as tags empregadas são: <sup> ... </sup> para os sobrescritos e <sub> ... </sub> para os subscritos.

Veja o exemplo:

O código anterior fica dessa forma:

UTILIZANDO IMAGENS

Para utilizar imagens em HTML é simples, usamos a tag :

<img src="caminho-para-o-arquivo">

Onde <img> significa Imagem e <src> Source.

Esse "caminho-para-o-arquivo" pode ser uma área específica do computador, ou pode ser um link .

Obs: É importante lembrar que as imagens possuem o tipo, seja JPG (imagem), GIF (animações), PNG (fotos com mais definição), etc.

Veja o exemplo:

Veja o exemplo como fica:

Atributo ALT

A função do ALT é basicamente fazer uma "Etiqueta". Quando o usuário deixar o mouse sobre a imagem irá aparecer algum texto identificando a imagem.

Sintaxe:

<img src= "tux2.jpg" alt= "TUX FEMININO">

Você pode escrever qualquer frase no atributo alt, veja como fica:

Atributos HEIGHT e WIDTH

Esses dois atributos controlam a altura e a largura. Essa medida é baseada em pixels.Sintaxe:

<img src= “tux2.jpg” alt= “TUX FEMININO “ height=”30” width= “50”>

Veja como ficou ao acrescentar os atributos height e width, a imagem “tux2.jpg” ficou menor:

Inserir Bordas:

Podemos inserir bordas nas imagens através do atributo border, veja o exemplo:

<img src= "tux2.jpg" border= "2">

<img src= "tux1.jpg" border= "8">

Podemos brincar com as imagens, isso vai depender da sua criatividade, além de cores e animações podemos inserir imagens como fundo do site. Veja exemplos:

Imagem Fixa/marca d’água:

A imagem de fundo faz parte da tag body. Basta você incluir na tag body um parâmetro (BGproperties=fixed) para fazer com que o fundo fique fixo.

<body background= “tux3.jpg” bgproperties= “fixed”>

O código anterior gerou a seguinte página:

Quando existe conteúdo na página, então o que vai descer é apenas o conteúdo e a imagem ficará fixa.

Imagem não fixa no fundo da tela.

Usaremos o mesmo exemplo anterior, só que usando apenas o BACKGROUND. Exemplo:

<body background= “tux3.jpg”>

Dessa maneira, a imagem descerá juntamente com o conteúdo do site.

CRIAR TABELAS

Tabela é um conjunto de células organizadas na qual podemos alojar diversos conteúdos. No início pode ser difícil trabalhar com esta estrutura, mas, se desejar criar uma pagina de qualidade verá que ela oferece muitas possibilidades.

Para iniciar, usa-se a tag <table>...</table> , as tabelas são formadas por linhas e colunas, na qual representamos:

<tr>...</tr> : são as linhas;

<td>...</td>: são as colunas;

Para inserir uma tabela com três colunas e duas linhas, com borda número 10, possuindo o texto dentro da tabela de forma justificada, deve-se implementar o seguinte código:

O exemplo anterior gerou a seguinte página:

A tag <table align = center color = "black" border = 10 width = "700"> serve para criar uma tabela que ficará centralizada na página da WEB, possuindo cor preta, borda 10 e largura de 700 pixels. A tag <th class = "Leis de Trânsito do Brasil" colspan = 3> pode ser implementada para mesclar colunas. Nesse caso, ela irá mesclar 3 colunas. Para adicionar textos com corpo justificado dentro de uma coluna, usa-se a tag <td align = justify>.

MARCADORES DE TEXTO

Os marcadores de textos também são listas, existem as listas numéricas e com símbolos.

Para criar marcadores numéricos usa-se a tag <ol>...</ol>;

Para criar marcadores com símbolos usa-se <ul>...</ul>;

Veja no exemplo a seguir:

O exemplo anterior gerou a página:

Também, para não digitar sempre a tag <li> podemos usar da seguinte maneira:

<ol start= “10”> , começará do 10 os marcadores;

CRIAR FORMULÁRIOS

Os formulários HTML são estruturas que permitem que usuários submetam dados a uma determinada página. Esses dados podem ser armazenados dependendo da aplicação.

Os forms são definidos pela tag <form>...</form>

Parâmetros do form

Action: é para onde os dados serão submetidos(tratados);

Method: é o método de transmissão dos dados, pode ter dois valores:

GET- Passa os valores pela URL, ou seja, podemos ver as variáveis passadas na Url da página destino definida no campo action.

POST- assa as variáveis de maneira transparente para o usuário. É o método mais aconselhável.

Elementos do Form

Podemos inserir vários dados em um formulário, definimos pela tag <input> .

Name: identifica a variável;

Campo Texto: entrada de texto normal;

Campo Senha: quando o usuário digita aparece apenas (*), mas esse campo não possui criptografia, pode ser visto;

Hidden: fica visível ao digitar.

Password: fica os (*) ao digitar.

Value: define um valor para o documento;

Button: chama uma função que roda no browser;

Rádio: o usuário só pode escolher uma única opção.

Para que o interpretador saiba que as opções fazem parte do mesmo grupo, e permita que só uma seja selecionada, basta colocar o mesmo nome no parâmetro name dos botões rádio.

CheckBox: o usuário escolhe mais de uma opção;

Reset: limpa os campos;

Submit: envia;

Exemplo de um Formulário:

O código anterior gerou a seguinte página:

Inserir Barra

Para inserir uma barra usa-se a tag <hr></hr>, para deixá-la mais grossa use o termo size(volume) juntamente com a tag <hr>.

Veja exemplo:

Veja como ficou:

Podemos controlar a largura das barras usando width =”...%” (porcentagem), exemplo:

<hr width= “50%”>

FRAME

Os FRAMES possibilitam o uso de vários documentos HTML dentro de um só. Isso deixa você dividir a tela em linhas e/ou colunas. Normalmente uma página que usa Frames basicamente é dividida em dois elementos, os Framesets e os Frames.

O FRAMESET é um arquivo do html, que substitui o <BODY> </BODY> por <FRAMESET> </FRAMESET>.

Atributos ROWS e COLS

Rows - Determina a divisão de tela em linhas.

Cols - Determina a divisão de tela em Colunas.

À medida pode ser em porcentagem (%). Exemplo:

<frameset rows="25%, 25%, 50%"> </frameset>

Também pode se usar o "*" para determinar o resto. Exemplo:

<frameset Cols="25%, 50%,*"> </frameset>

Atributos FRAMESPACING e FRAMEBORDER

Framespacing - Determina a distância dos frames em pixels.

Frameborder - Diz se vai existir ou não bordas (1 para sim e 0 para não).

<frameset rows="25%, 25%, 50%" framespacing="3" frameborder="0"> </frameset

Tag <Frame>

As tags <frame> deverão ser organizadas no código de acordo com a ordem dada pelo frameset, por que será assim que será exibido na tela.

<frameset rows="15%,*,75">

<frame src="http://www.google.com.br">

<frame src="http://www.saraiva.com.br">

<frame src="http://www.submarino.com.br">

</frameset>

Esse código gerou a seguinte página:

Atributo NAME e SRC

Indica o nome desse frame, facilitando sua pesquisa por ele, caso precise. O SRC é utilizado para mostrar o caminho de onde está a página que vai ser carregada.

IFRAMEs

Iframes são basicamente quadros que podem ser adicionados dentro da página, para fazer uma espécie de "Mural de recados".

<iframe width='700' height='546' frameborder='0' src='http://www.google.com.br'> </iframe><iframe width='400' height='450' frameborder='0' src='http://www.saraiva.com.br'> </iframe>

Como você pode ver, alguns atributos são:

Width - Define a Largura

Height - Define a Altura

O código acima gerou a seguinte página:

TUTORIAL CRIADO POR

Anne Ingrid Feitosa Bezerra

Hugo Felipe Bezerra da Silva

Janailton Mick Vitor da Silva

Tutorial de HTML - Completo

Documents

Transcript of Tutorial de HTML - Completo