Analizando um HTML

Olá gente! Eu decidi explicar a extrutura de um HTML, com um layout bem comum que eu fiz só pra mostrar as extruturas as quais EU SEI. Por isso não vai estar lá as melhores explicaçoes, pois eu não sou uma expert em HTML (e tô muito longe disso), mas vai dar pra dar uma ajudadinha básica pra quem não entende muita coisa.


IMPORTANTE!! Para que as tags não fizessem efeito e vocês pudessem vê-las, eu tive que por um "*" nelas, mas é só tirar depois!


O que é HTML?

É um conjunto de comandos digitados no formato de texto puro. Para a criação, ou apenas modificação de um código de HTML, geralmente é utilizado o Notepad (Bloco de Notas), já eu não recomento o uso do Word, pois ele modifica as tags.

O que são Tags?

As tags são comandos em HTML (digitadas no formato puro, como disse acima), que se comunicarão com seu browser (navegador) e irão dizer como serão as configurações de seu texto, script, imagem....

Como funcionam as tags:

O funcionamento de uma tag é muito importante, pois, caso você não saiba como utiliza-las, você não fará absolutamente nada. Uma tag é quase sempre formada a par com outra tag, as tags são abertas por um "<" (denominada menor que) e fechadas por outro ">" (denominada maior que), por exemplo as tag <*html>, <*head>, <*style>... Mas não basta só abrir essas tags, em certo ponto, você terá que fecha-las. Mas e como fechar? A mesma coisa que aí em cima, só que com um detalhe, adicionando uma barra ( / ) entre "<" e o "html>", ou seja, ficará assim nos exemplos que eu pus acima, só que com a barrinha a mais: <*/html>, <*/head>, <*/style> e assim com as outras diversas tags.

Importante: Não há diferença em escrever as tags em letra maiúscula e em letra minúscula. Se você escreve <*HEAD> ou <*head>, o efeito será o mesmo.

Tags básicas e suas funções: <*html> e <*/html>: Servem para abrir e fechar uma página <*head> e <*/head>: Servem para iniciar e encerrar uma seção de cabeçalho na página <*body> e <*/body>: É onde vão todos os comandos, também os textos, imagens, links, e essas coisas.. É o "corpo" da página, onde há o "conteúdo visível".

Outras tags úteis:

<*b><*/b>: Para deixar seu texto em negrito
Exemplo: Miyu

<*u><*/u>: Para deixar seu texto sublinhado
Exemplo: Miyu

<*i><*/i>: Para deixar seu texto em itálico
Exemplo: Nachii

<*s><*/s>: Traça um tracinho sobreposto a palavra
Exemplo: Miyu

<*center><*/center>: Para centralizar um texto ou imagem
Exemplo:
Miyu


<*title><*/title>: Para por o titulo da sua página

<*p><*/p>: Para mudar o parágrafo de um texto
Exemplo: Tutorial feito pela Miyu

www.miyu-meow.blogger.com.br


<*br>: Define o encerramento da linha atual e também pode pular uma linha. (não necessita fechamento) Exemplo: Miyu
www.miyu-meow.blogger.com.br
<*br> <*hr>: Traça uma linha horizontal, e para definir o tamanho que você deseja, basta utiliza-la assim: <*hr width="85%">.
Exemplo:


<*img src="endereço da imagem">: Serve para adicionar uma imagem na sua página.
Exemplo:

Caso você queira alinhar essa imagem para direita, esquerda ou outras maneiras, há outros "códigos" para aprender.

<*img src="imagem.GIF" align="TOP">

A imagem é alinhada acima do texto

<*img src="imagem.GIF" align="BOTTOM">

A imagem é alinhada no fundo do texto

<*img src="imagem.GIF" align="MIDDLE">

A imagem é alinhada no meio do texto

<*img src="imagem.GIF" align="RIGHT">

A imagem é alinhada a direita do texto

<*img src="imagem.GIF" align="LEFT">

A imagem é alinhada a esquerda do texto

<*a href="endereço do site">: Serve para adicionar um link destacado na página, para que o internauta clique e possa ir a este endereço.

Importante: Caso você queira que esse site abra em outra janela, basta adicionar o comando "target blank", que ficaria assim:

<*a href="endereço do site" target="_blank"> Site <*/a> <*a href="mailto:seuemail">: Serve para adicionar um link destacado na página, para que o internauta clique e possa enviar um e-mail a você.

<*font size="tamanho da fonte"><*/font>: Font size define o tamanho da fonte.

Importante: No tamanho da fonte, você pode escolher, pode por 1, 2, 3... e assim vai.

<*font color="#código da cor da fonte"><*/font>: Define a cor da fonte.

Importante: A cor da fonte SEMPRE deve-se iniciar com um "jogo da velha" (#), sendo eles letras e números, só letras, ou só números. Mas também vc pode escrever os nomes das cores, em inglês, por exemplo:
<*font color: red>VERMELHO<*/font> Se necessário, busque uma tabela de cores, onde haverão as cores e seus respectivos códigos, por exemplo "#39de00", que é um tom de verde.

Eu, particularmente prefiro esse esquema dos numeros, é muito mais prático e eficiente.
<*font face="fonte que você queira">: Define a fonte que será utilizada.

E você também poderá unir todas elas, por exemplo: <*font face="fonte que você queira" color="#código da fonte" size="tamanho">Seu texto aqui<*/font>

<*body bgcolor="cor">: Essa tag não precisa necessáriamente de fechamento, e alí onde esta escrito "cor", você pode escrever a cor que deseja em inglês ou por o código da cor desejada.

<*body background="imagem.gif ou jpg">: Serve para por uma imagem como o fundo da sua página.


Mouse:

onclick: Script aplicado quando há percepção de um clique no mouse.

ondblclick: Script aplicado quando há percepção de um clique duplo no mouse.

onmousedown: Script aplicado quando o botão do mouse é pressionado.

onmousemove: Script aplicado para quando o mouse se move.br>
onmouseout: Script aplicado quando o mouse deixa de estar sobre algo (texto, imagem, etcccc...).

onmouseover: Script aplicado quando o mouse fica sobre algo(texto, imagem, entre outros).

onmouseup: Script aplicado quando o botão do mouse é solto.

<~Voltar | Avançar~>