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 : <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 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 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 <html></html> essa tag deve ser colocada no início do documento e no final. É ela que diz que o documento é em HTML. <head></head> essa tag é o cabeçalho do documento, dentro dela é colocada SCRIPTS, FOLHA DE ESTILOS, a tag TITLE entre outros comandos. <title></title> essa tag vai definir o título do documento, é aquele texto que aparece naquela barra onde estão os botões minimizar, maximinizar e fechar. <body></body> essa tag é aonde você vai escrever todas as tags do documento exceto as listadas acima, nela colocamos as tags de texto, imagem, links entre outros, ela é o corpo do documento. Atributos de <body> bgcolor="cor" esse atributo desempenha a função de definir a cor de fundo da página, entre as aspas você pode colocar o nome da cor em inglês ou seu código hexadecimal. background="endereço da imagem" esse atributo desempenha a função de definir uma imagem para ser o fundo da página, entre as aspas você deve colocar o endereço da imagem, seja ela on-line ou no seu hd. bgsound="endereço do som" esse atributo serve para que assim que o site se carregue, carregue juntamente uma música, executando-a automaticamente. link="cor" esse atributo define qual será a cor do link. vlink="cor" esse atributo define qual será a cor do link visitado. alink="cor" esse atributo define qual será a cor do link ativo. text="nome da fonte" esse atributo define qual será a cor da fonte padrão utilizada pelo documento html.
Modo de escrita de um documento HTML: <html> <head> <title> Título da página </title> </head> <body> </body> </html> Essa é a maneira de se iniciar um documento HTML, tente escrever da maneira que esta escrito acima, dando enter depois de comandos e espaços, para ter uma melhor organização do documento e para você entender conseguentemente o que está escrito. Dica: você pode pegar esse código e colar no bloco de notas e salvar, você pode colocar qualquer título no lugar de "Título da página", para entender o funcionamento da tag TITLE. TAGS DE FORMATAÇÃO DE TEXTO <h1></h1> essa tag tem a função de formatar o texto para um tamanho específico. Nesse usamos a tag h1 no texto "": Nesse foi escrito com h1, mas essa tag vai de h1 até h6, conseguentemente diminuindo o tamanho da fonte pelo número maior: nesse foi escrito com a tag <h2></h2>. nesse foi escrito com a tag <h3></h3>. nesse foi escrito com a tag <h4></h4>. nesse foi escrito com a tag <h5></h5>. nesse foi escrito com a tag <h6></h6>. <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.
<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 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 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 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 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 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.
_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 square aparece um pequeno quadrado. disc aparece a bolinha. MARQUEE <marquee>texto</marquee> a tag <marquee> configura o texto para ficar se movimentando na tela. Exemplo:
<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> </table> <td></td> <tr> 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 abaixo: célula 1 célula 2 célula 3 célula 4 célula 5 célula 6 Nesse 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 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.
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 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 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 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: célula 2 célula 3 rowspan="2" 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 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, 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" maxlenght="quantidade de caracteres que poderão ser escritos" value="texto que aparece na caixa">
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 abaixo: PASSWORD <- digite algo aqui <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 abaixo: RADIO <- digite algo aqui para ver a diferença <input type="radio" name="nome"> este é um componente que você escolhe apenas uma opção de todas determinadas. Veja o 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 abaixo: SUBMIT opção 1 opção 2 opção 3 opção 4 <- clique em quantas opções quiser <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 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 abaixo: LIMPAR TEXTAREA <- escreva algo aqui depois aperte no botão limpar <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> <form action="http://www.site.com.br/cgi-bin.pl" method="post"><br>
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-nahostinger-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