Antes de tudo,surge uma pergunta: O quê é HTML? Para quê serve? Vamos as rápidas definições:
O quê é HTML?
HTML- HyperText Markup Language
(Linguagem de programação usada para criar páginas da Web)
Para quê serve?
Bom,qualquer pessoa que deseja criar um site,tem por obrigação saber ou ter uma noção da linguagem HTML. Ao contrário dos que desconhecem,HTML é uma linguagem muito simples de se aprender e de se aplicar,talvez,mais fácil do que as outras linguagens de programação como por exemplo,a linguagem C/C++.
Para que você tenha uma ideia,não é necessário que se tenha um programa compilador(programas que recebem,interpretam e executam comandos de programação),basta que o usuário tenha apenas 2 coisas que são básicas num computador comum: Um editor de texto e um navegador de acesso à internet. Obs: nãp precisa estar conectado à internet para poder desenvolver uma página da web.
Para quê serve a linguagem HTML? Muito simples....Criar páginas da Web!!!.
Vamos agora aos conceitos básicos do HTML:
1-Estrutura=Todas as linguagens de programação possui uma estrutura própria para a sua leitura;quando você estiver desenvolvendo em HTML,vai perceber que realmente,existe uma lógica para essa tal estrutura. Essa é a estrutura do HTML:
<html>
<head>
</head>
<body>
</body>
</html>
Vamos entender o que significa cada código:1-Estrutura=Todas as linguagens de programação possui uma estrutura própria para a sua leitura;quando você estiver desenvolvendo em HTML,vai perceber que realmente,existe uma lógica para essa tal estrutura. Essa é a estrutura do HTML:
<html>
<head>
</head>
<body>
</body>
</html>
<html>.............INICIO DE UMA PROGRAMAÇÃO EM HTML
<head>...........CABEÇA(Comandos que necessariamente não aparecerão)
</head>..........FIM DOS CÓDIGOS QUE ESTARÃO NA CABEÇA
<body>...........CORPO(Elementos que aparecerão em sua página Ex:Textos)
</body>..........FIM DOS CÓDIGOS QUE APARECERÃO NO CORPO DA PÁGINA
</html>...........FIM DE UMA PROGRAMAÇÃO EM HTML
2-Tags=Códigos usados durante a criação de páginas da web. As tags são um meio de você se comunicar com a máquina,dizendo o que você está ordenando que ela faça;para quem já programou,tags são idênticas as variáveis. Darei apenas um tipo de tag para que você faça a sua primeira página.
<p>-Tag usada para inicio de um parágrafo
Vamos agora criar a sua primeira página. Nota: Todas as tags tem um início e um fim,ou seja,você deve dizer para a máquina que está começando e terminando uma ação.
Ex1:
<html> Quer dizer que você usará códigos para a criação de um arquivo em HTML
</html>Quer dizer que você terminou de escrever em HTML
Ex2:
<p>ESCREVA QUALQUER COISA AQUI</p>
<p>-Comando de inicialização de um parágrafo
</p>-Comando de terminação de um parágrafo.
Agora que você já sabe usar esse comando,vamos fazer sua página-teste!!!!
1-Abra seu editor de texto favorito (eu estarei usando o Notepad/Bloco de Notas)
2-Faça a estrutura do HTML como mostra a figura abaixo:
4-Escolha qualquer nome para esse arquivo e salve como .html ou .htm...como mostra na figura abaixo!
Viu como é simples programar em HTML!!!!!!!! Aqui abaixo,segue uma lista de alguns comandos utilizados durante a programação de páginas da Web;qualquer dúvida,deixem nos comentários e espero que tenha gostado deste post!
<html>
<head> comandos </head>
<body> comandos
</body>
</html> ESTRUTURA
PARA OS COMANDOS
<b> Texto em negrito
<i> Texto em itálico
<p> Parágrafo/texto
<small> Texto com letras menores
<h1>
Título/Cabeçalho
<h2> Subtítulo
<h3> Sub-subtítulo
<title> Título da página
<br /> Pulo de linha
<hr /> Linha horizontal
<body style="background-color:
cor em inglês;"> COR DE FUNDO DA PÁGINA
<h2 style="background-color:
cor em inglês;">Qualquer
texto aqui</h2> COR DO TEXTO
<a href="endereço da página">link de atalho para entrar na página</a> TAG PARA REDIRECIONAR A UM LINK
<a href="page2.htm">Aqui
um link para a pagina 2</a>
LINK PARA ENTRAR EM UM OUTRO LINK
<a href="mailto:QUALQUER E-MAIL">Enviar e-mail para QUALQUER E-MAIL</a> TAG PARA RECEBER E-MAIL
<img src="NOME
DO ARQUIVO DE IMAGEM.jpg"
alt="NOME DO ARQUIVO"
/> TAG PARA INSERIR IMAGEM NA PÁGINA
(o tipo de arquivo pode ser trocado EX:NOME DO ARQUIVO.jpg
.gif .png) (src=source-local de armazenagem do arquivo)
<img src="NOME DO ARQUIVO DE
IMAGEM/logo.png"> TAG PARA DEFINIR A LOGO DA PÁGINA
<img src="NOME DO ARQUIVO DA
LOGO.gif" title="texto"> TAG PARA CURTA DESCRIÇÃO DA
IMAGEM(quando passar o mouse por cima)
<img src="NOME DE ARQUIVO DA
LOGO.png" width="QUALQUER
VALOR" height="QUALQUER VALOR">
TAG PARA DEFINIR O TAMANHO DA IMAGEM sendo:width=largura height=altura(em
pixels)
<ul>
<li>Um item de lista</li> ITEM EM TÓPICOS
<li>Outro item de lista</li>
</ul>
<ol>
<li>Primeiro item da lista</li> ITEM EM TÓPICOS NUMÉRICOS
<li>Segundo item da lista</li>
</ol>
<table>
<tr>
<td>Célula 1</td> USADO PARA
FAZER TABELAS
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
3 tags básicas são usadas para inserir tabelas:
• <table>
começa e termina uma tabela. Evidente.
• <tr>
significa "table row" - linha de tabela - começa e termina e uma
linha horizontal da tabela. Também evidente.
• <td> significa "table data" - dados da
tabela. começa e termina cada célula contida nas linhas da tabela. Tudo simples
e evidente.
<table
border="QUALQUER VALOR">
<tr>
<td>Célula 1</td>
<td>Célula 2</td> ATRIBUTO PARA ESPESSURA DA BORDA DA TABELA
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
Existe uma grande quantidade de atributos para tabelas. A
seguir mais dois:
• align:
define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma
célula. Por exemplo, left, center ou right (à esquerda, no centro ou à
direita).
• valign:
define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top,
middle ou bottom (em cima, no meio ou em baixo).
Exemplo: <td align="right"
valign="top">Célula 1</td>
