Comandos Básicos de HTML

(1)

Comandos Básicos de HTML

Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do windows(notepad) ou um outro editor de texto como Notepad++, Geany ou PSPAD. Para fazer você deve escrever os

comandos e depois de finaliza-los, salvando o documento assim nome_do_documento.html No HTML usamos comandos chamados TAGS, essas tags tem basicamente esse formato: <abri a tag> </fechei tag>

Assim é escrito um comando em HTML, primeiro se abre a tag dizendo de que tipo ela é, depois de utilizado sua função se fecha a tag. Por exemplo:

<font face="comic sans ms" color="red"> TEXTO1 </font> TEXTO2

No resultado deste comando teriamos TEXTO1 escrito com a fonte comic sans ms e com a cor vermelha, como foi escrito no exemplo acima. Ali escrevi a tag <font> coloquei o texto no meio e fechei a tag</font>, ou seja, tudo que está entre o início e o fim da tag, receberá o comando empenhado pela tag.

Quando utilizei a barra "/" antes de escrever a tag FONT no fim significa que eu fechei essa tag assim tudo que viria depois do fechamento dessa tag não teria a cor vermelha e não seria escrito com a fonte comic sans ms, esse foi o caso de TEXTO2. E no exemplo também aparecem atributos de FONT, os atributos são face="" e color="", os atributos são os comandos que configuram qual será a ação

empenhada pela tag, nesse caso o atributo face="" configurou a tag FONT a formatar o texto com a fonte comic sans ms, o mesmo caso aconteceu com o atributo color="", ele disse a tag que a cor seria

vermelha. Porque a tag FONT empenha a tarefa de formatação de texto, os atributos são apenas os parâmetros de FONT. Agora que entendemos como se funciona as tags, vamos começar a apresentar as tags que existem no HTML.

TAGS DE FORMATAÇÃO DE TEXTO

<h1></h1> essa tag tem a função de formatar o texto para um tamanho específico. Nesse exemplo usamos a tag h1 no texto "exemplo":

exemplo

Nesse exemplo foi escrito com h1, mas essa tag vai de h1 até h6, conseguentemente diminuindo o tamanho da fonte pelo número maior:

exemplo

nesse exemplo foi escrito com a tag <h2>exemplo</h2>.

exemplo

nesse exemplo foi escrito com a tag <h4>exemplo</h4>. exemplo

nesse exemplo foi escrito com a tag <h5>exemplo</h5>. exemplo

<b></b> essa tag tem a função de deixar o texto em negrito, tudo que for escrito entre essas tags ficará em negrito.

<i></i> essa tag tem a função de deixar o texto em italico, tudo que for escrito entre essas tags ficará em italico.

<u></u> essa tag tem a função de sublinhar o texto, tudo que for escrito entre essas tags será sublinhado.

<sup></sup> essa tag configura o texto a aparecer de modo sobrescrito. <sub></sub> essa tag configura o texto a aparecer de modo subscrito.

<br> essa tag faz pular de linha. Observe que essa tag não precisa de fechamento ela é sozinha. <p> essa tag faz pular de linha e na próxima linha deixa em branco. Note que esta também é sozinha.

(3)

<font></font> com essa tag você formata o texto em tamanho, fonte e cor. Que são configurados nos seus atributos.

<font face="nome da fonte"></font> essa tag configura o tipo da fonte que será o seu texto, por exemplo

comic sans ms,courier,arial black

entre outras.

<font color="cor"></font> essa tag especifica qual será a cor do texto. Exemplos:

<font color="red">EXEMPLO</font> ou <font color="#ff0000">EXEMPLO</font>, você pode tanto colocar o código hexadecimal da cor, quanto o nome da cor em inglês, brevemente você verá uma tabela com algumas cores e seus códigos hexadecimais.

<font size="número de 1 até 7"></font> essa tag especifica o tamanho da fonte, parecida com h1,h2,...,h6.

INSERINDO IMAGENS

<img src="endereço da imagem"> essa tag serve para inserção de imagens no seu documento html. <img src="endereço da imagem" title="título da imagem"> esse atributo especifica um título para imagem, que é visto quando você passa o cursor do mouse sobre a imagem.

<img src="endereço da imagem" width="largura da imagem" height="altura da imagem"> os atributos width="" e height="", servem para ajustar o tamanho da figura, width ajusta a largura e height a altura, o tamanho é medido em pixels, então você deve especificar um número nas aspas de width e height.

Nesse exemplo utilizei uma imagem com 100 pixels de largura e 50 de altura. <img src="endereço da imagem" alt="texto"> esse atributo serve para colocar um texto caso a imagem não apareça. Exemplo: A tag com os atributos utilizada para o exemplo acima: <img src="#" width="300" height="50" alt="Texto que aparece quando a imagem não é carregada ou quando se está carregando.">

<img src="endereço da imagem" vspace="numero" hspace="numero"> os

atributos vspace="" e hspace="", determinam o espaçamento da imagem em relação a imagens e texto. O vspace="número de pixels" define o espaçamento vertical e é definido em pixels, e o

hspace="número de pixels" define o espaçamento horizontal.

Código do exemplo acima: <img src="#" width="400" height="50" alt="FIGURA A:" hspace="35"><img src="#" width="100" height="50" alt="FIGURA B:">, o mesmo acontece para vspace="".

<img src="endereço da imagem" align="opção"> o atributo align="" especifica qual será o alinhamento da imagem na página, se é na direita esquerda ou centro. Opções: left(alinha a esquerda), right(alinha a direita) e center(alinha ao centro). Exemplo:

Neste exemplo foi utilizada a opção right, por isso a imagem está no canto direito.

INSERINDO LINKS E ÂNCORAS

Para inserirmos links e âncoras utilizamos a tag: <a href="endereço">texto do link ou imagem</a> <a href="endereço para qual o link irá te enviar">texto do link ou imagem</a> essa tag cria um texto ou uma imagem clicável, e assim que você clica te leva para um determinado ponto ou lugar.

<a href="endereço" title="texto">texto ou imagem</a> o atributo title="" configura um texto a ser amostrado assim que você coloca o cursor do mouse, em cima do link, parecido com o ícone da área de trabalho.

<a href="endereço" target="opção">texto ou imagem</a> o atributo target="", faz com que o link abra em outra janela, na janela pai ou em um frame.

OPÇÕES DO ATRIBUTO TARGET

_blank faz com que o link abra em uma nova janela em branco. _parent faz com que o link abra na janela pai.

(4)

_self faz com que abra na mesma janela. dica: self é default(padrão), geralmente não precisa colocar essa opção.

_top faz com que o link abra em uma nova janela que preencha a tela, sem botões, painéis ou menus do browser.

para abrir em frames para abrir o link em um frame você deve colocar o nome do frame no atributo target="nome do frame".

<a name="aqui">esse é o local que o link virá</a> para cria uma âncora primeiro criamos esse comando de link mas com um nome, e depois usamos outro link que quando clicado vai exatamente no local onde está a âncora, <a href="#aqui">clique aqui que irá até a âncora aqui</a>. Não repita o nome da âncora duas vezes, cada âncora deve ter seu próprio nome.

LISTAS

Listas são texto amostrados em tópicos, podemos criar listas ordenadas e não ordenadas, uma lista ordenada aparece o item e ao lado o número da ordem, se for o primeiro item da lista será o número 1, se for o segundo o número 2 e assim sucessivamente. As listas ordenadas iniciam com tag <ol> e depois a fechamos. Exemplo:

<ol>

<li> em Itaguaí tem lama <li> em Santa Cruz tem aipim <li> professor da aula particular </ol>

Assim será apresentado no browser: 1. em Itaguaí tem lama

2. em Santa Cruz tem aipim 3. professor da aula particular LISTA NÃO ORDENADA

Para criar uma lista não ordenada utilizamos a tag <ul> e depois fechamos. Utiliza da mesma maneira que a tag <ol>. Mas essa apresenta como um bolinha.

<ul> <li> item </ul>

Assim será apresentado no browser:

 item

Também podemos ao invés de colocar essa bolinha, colocar outro tipos de marcadores, com essa tag <ul type="opção">.

OPÇÕES:

circle ao invés da bolinha aparece uma circunferência. o exemplo

square aparece um pequeno quadrado.  exemplo

disc aparece a bolinha.

 exemplo

MARQUEE

<marquee>texto</marquee> a tag <marquee> configura o texto para ficar se movimentando na tela. Exemplo:

(5)

<marquee loop="número">Texto ou imagem</marquee> o atributo loop diz ao navegador quantas vezes o texto irá passar pela tela, se você não colocar esse atributo o padrão será infinito.

<marquee scrollamount="número">texto ou imagem</marquee> esse atributo configura a velocidade que o texto rolará. Quanto maior o número maior a velocidade.

<marquee direction="opção"></marquee> diz qual a direção que deve rolar o texto ou imagem. As opções são: up(cima), down(baixo), left(esquerda) e right(direita).

<marquee behavior="opção">texto ou imagem</marquee> esse atributo diz ao browser, como deve rolar.

OPÇÕES:

alternate essa opção faz com que o texto ou imagem bata no fim e volte.

slide essa opção faz com que bata no final e fique, sem voltar mais. Essa é a opção mais sem graça. scroll essa opção não precisa ser colocada, se você quiser que o texto role dessa maneira, essa já é padrão, rola até o fim e aparece outra do outro lado, sempre continua.

P.S.: na tag marquee você pode colocar atributos como bgcolor entre outros.

TABELAS

Para inserirmos tabelas em um documento HTML usamos a tag <table>. Exemplo:

<table>

<td></td>

<tr>

</table>

A tag <table> é a tag que inicia e termina a tabela e tudo que estiver entre ela faz parte da tabela. A tabela é dividida por células, como linhas e colunas. Veja no exemplo abaixo:

célula 1 célula 2 célula 3

célula 4 célula 5 célula 6

Nesse exemplo a tabela possui 2 linhas e três colunas: Atributos de <table>:

border="número" especifica se a tabela terá borda ou não. Se você não colocar nenhum número não haverá borda, se você colocar ele ajustará a espessura da borda. Exemplo:

Nesse caso a borda foi ajustada para o número 5.

Código do exemplo acima:<table border="5"><td>Nesse caso a borda foi ajustada para o número 5.</td></table>

bordercolor="cor" especifica a cor da borda. Exemplo:

borda com cor vermelha

cellpadding="número" esse atributo especifica o espaçamento dentro das células. Exemplo:

O cellpadding da tabela foi definido como 20.

cellspacing="número" o atributo cellspacing especifica o espaçamento entre as células. Exemplo:

O cellspacing dessa tabela foi definido com o

número 20.

Assim as células estão afastadas 10 pixels cada uma da

outra.

(6)

Note que a borda da célula é apenas o que está ao torno do texto, a maior que envolve as duas células é a borda da tabela. Assim as células estão afastadas por 20 pixels.

p.s.: a tag table também aceita atributos como bgcolor, background, align entre outros.

<td>texto ou imagem ou nada</td> agora falarei sobre a tag <td>, é essa tag que inseri células dentro de uma tabela. Podemos colocar várias tags dessas ao lado assim teremos várias células na tabela.

Exemplo:

célula 1 célula 2 célula 3 célula 4

Código do exemplo acima:<table border><td>célula 1</td><td>célula 2</td><td>célula

3</td><td>célula 4</td></table>, nesse exemplo agrupamos quatro tags <td> simultâneamente, assim quatro células uma ao lado da outra.

<tr> essa tag faz com que se insira linhas na tabela. Exemplo:

célula 1

célula 2

célula 3

código do exemplo acima:<table border align="center"><td>célula 1</td><tr><td>célula

2</td><tr><td>célula 3</td><tr></table>, podemos colocar várias tags <td> antes de invocar a tag <tr> assim faremos várias linhas e colunas.

Atributos de td:

colspan="número" esse atributo faz com que uma célula tome o tamanho de duas células na horizontal, uma célula ganha o espaço de duas células. Exemplo:

essa célula ganhou o lugar de duas. colspan="2" célula 2

célula 3

célula 4

célula 5

rowspan="número" esse atributo é parecido com o colspan, mais esse ajusta na vertical. Exemplo:

rowspan="2"

célula 2 célula 3

célula 4 célula 5

P.S.: essa tag também pode possuir atributos como bgcolor, background, align entre outros.

FORMULÁRIOS

Formulários são objetos que permitem a entrada de dados pelo usuário e são enviados para o e-mail do dono do site. Como exemplo podemos citar uma votação no site, você vota e esse voto será enviado para o e-mail dos desenvolvedores do site e processarão seu voto; Outro exemplo, e quando você se cadastra em um site, depois de todas as etapas eles te enviam um e-mail para confirmação, o que aconteceu foi que os seus dados foram enviados para um programa, esse programa os processou e reenviou um e-mail para você. Mas simplesmente o HTML somente não dá para processar essas informações e enviar, é necessário um script(programa), você precisará aprender uma linguagem de programação, eu te recomendo PERL, vá em sites de apostilas e baixe uma apostila falando de CGI com PERL. Para

construirmos um formulário usamos a tag <form> </form> e todas as outras tags devem estar dentro dela.

Atributos de form:

action="endereço do script" aqui você define o endereço que será enviada as informações.

method="post" esta tag define a forma na qual será enviada as informações coletadas ao servidor para processamento. E ela deve conter para que funcione corretamente.

A TAG INPUT:

Basicamente todos os componentes do formulário, utilizam essa tag mesmo sendo diferentes. A palavra INPUT significa entrada, e quase todos os componentes a utilizam.

<input type="tipo de componente" name="nome da variável" size="tamanho da caixa"

(7)

A tag INPUT deve ser escrita dessa maneira, nem o atributo type e o name devem ficar de fora. A variação ocorre quando trocamos o tipo.

EDIT BOX

<input type="text" name="nome"> para inserirmos uma EDIT BOX utilizamos a opção TEXT no atributo type. A EDIT BOX é uma pequena caixa para inserirmos texto. Veja o exemplo abaixo:

<- digite algo aqui PASSWORD

<input type="password" name="nome"> é igual a EDIT BOX a única diferença é que na tela aparecem o que você digita como asteriscos, usado para o campo senha. Veja o exemplo abaixo:

<- digite algo aqui para ver a diferença RADIO

<input type="radio" name="nome"> este é um componente que você escolhe apenas uma opção de todas determinadas. Veja o exemplo abaixo:

opção 1 opção 2 opção 3 <- escolha uma opção CHECKBOX

<input type="checkbox" name="nome"> é parecido com o componente RADIO, mas este você pode escolher várias opções. Veja no exemplo abaixo:

opção 1 opção 2 opção 3 opção 4 <- clique em quantas opções quiser SUBMIT

<input type="submit" name="nome"> o componente SUBMIT, é o botão que você irá clicar depois de inseridas todas as informações, é uma espécie de OK! Veja no exemplo abaixo:

CLIQUE AQUI PARA ENVIAR AS INFORMAÇÕES RESET

<input type="reset" value="nome"> é parecido com o componente submit, mas esse apaga todas as informações digitadas para você escrever denovo. Veja no exemplo abaixo:

<- escreva algo aqui depois aperte no botão limpar LIMPAR

TEXTAREA

<textarea name="nome" cols="número" rows="número"><textarea> o componente TEXTAREA é um espaço pré destinado a textos extensos. O atributo cols="" define a quantidade de colunas

e rows=""de linhas. Exemplo:

SELECT <select>

<option>opção 1 <option>opção 2 <option>opção 3

</select> ---este componente apresenta opções através de caixas com barras de rolagem. Exemplo:

EXEMPLO DE UM FORMULÁRIO: <h1>Requisição de dados:</h1><br>

(8)

Nome: <input type="text" name="nome"><br> Sobrenome: <input type="text" name="sobre"><br>

Sexo: <input type="radio" name="sexom"> Masculino <input type="radio" name="sexom"> Feminino<br>

Data de nascimento: <input type="text" name="nasc"> dd/mm/aa<br>

O que você achou da apostila? <input type="checkbox" name="chb">Boa <input type="checkbox" name="raz">Razoável <input type="checkbox">Ruim<br>

Dê seu comentário sobre ela <textarea name="coment" cols="50" rows="5"></textarea><br> <input type="submit" value="OK"> <inpu type="reset" value="Recomeçar"><br>

</form>

Assim ficará esse código:

Requisição de dados:

Nome:

Sobrenome:

Sexo: Masculino Feminino

Data de nascimento: dd/mm/aa

O que você achou da apostila? Boa Razoável Ruim

Dê seu comentário sobre ela OK Recomeçar

HOSPEDANDO O SITE

Os sites podem ser hospedados em espaços gratuitos na internet como o seguinte:

www.hostinger.com.br

Para saber como hospedar assista o vídeo no youtube:

http://www.youtube.com/watch?v=5r760qfr1AM

Ou leia o Tutorial:

http://www.cheatsbrasil.org/local/wyd-private-website/171857-como-hospedar-um-site-na-hostinger-de-graca.html

ALGUNS SITES DE APOSTILAS CÓDIGOS E TUTORIAIS

Aqui estou disponibilizando alguns sites que possuem apostilas de informática em geral, tutoriais e códigos prontos.  www.apostilando.com  www.apostilasbr.com.br  www.codigofonte.net  www.imasters.com.br  www.webtutoriais.com.br  www.plugmasters.com.br  www.scriptsbrasil.com.br