21 de julho de 2010

Aula Básica de HTML

 

Aula e Conceito básico de HTML


1°Passo: Aula HTML básico

Definição: HTML (acrônimo para a expressão inglesa HyperText Markup Language,
que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação
utilizada para produzir páginas na Web (definição retirada do wikipedia).

Para que o tutorial não fique muito extenso vamos começar pela estrutura da
programação.

<html>

<head>

<title>Titulo do site</title>

</head>

<body>


Textos,imagens,videos e etc...

</body>

<html>


Cada uma dessas chaves, são denominadas tags ou etiquetas, elas definem tudo
(praticamente) na programação do html, como por exemplo a cor, tamanho e estilo
de letras!


Definições:


<html></html>: Essa tags mostram que a linguagem que estamos usando é o html.

<head></head>: ”Cabeça”onde fica o titulo e o “javascript” e até mesmo o “css”.

<title></title>: Essa tags definem o titulo. Barra de titulo do navegador.

<body></body>: Dentro dessa tags ficam tudo que o usuario vê! (imagens, videos,
textos).

Como pode ver há duas tags uma que abre e outra que fecha (a que possui a / ).
No html isso é muito importante, se você se esquecer de fechar alguma tag toda a
página pode ser afetada. O html pode ser editado em qualquer editor de texto,
como por exemplo o bloco de notas do windows.

Primeira pagina:

1° abra o bloco de notas e depois copie esse  código (aconselho que digite
manualmente para pegar prática).

<html>

<head>

<title>Titulo do site</title>

</head>

<body>

Textos, imagens, vídeos e etc...

</body>

<html>

2°Salve esse arquivo no desktop com a extenção .html

3° Execute esse arquivo.

Parabéns! A sua primeira página já está pronta.

2ª Parte da Aula html básico

Agora vamos conhecer algumas tags.

<hr> Desenha uma linha horizontal de um limite ao outro (essa tag não precisa
ser fechada).

<br> Quebra de linha. Pula de uma linha para outra (essa tag não precisa ser
fechada).

<img> Mostra uma imagen na página (essa tag não precisa ser fechada).

<a></a> Cria um link na página.

<font></font> Defina atribuições para textos.

<table></table> Cria uma tabela na página.

*Existe uma gama enorme de tags e não ficamos restritos somente a essas acima,
porém essas são fundamentais para começar.


Conhecendo as atribuições para tags.


<a rel="nofollow" onclick="javascript:

pageTracker._trackPageview('/outgoing/article_exit_link');"
href=”link”></a>A atribuição href atribui o link da pagina que
quer direcionar. Exemplo: rel="nofollow" onclick="javascript:pageTracker._trackPageview('/outgoing/article_exit_link');"
href=”http://www.google.com.br/
ou simplesmente rel="nofollow" onclick="javascript:pageTracker._trackPageview('/outgoing/article_exit_link');"
href=”pagina-de-imagens.html”.


<img src=”caminho-da-imagem” height=” vertical” width=”
horizontal” alt=”texto-opçional”>

Src: Define o caminho da imagem como por exemplo “img/imagen.gif”.

Height: Define o tamanho vertical da imagem em pixels por
exemplo “300”.

Width: Define o tamanho horizontal da imagem em pixel por
exemplo “100”.

Alt: Define um texto opcional caso falhe o carregamento da
imagem. Ou mostra um texto quado o usuário deixa o mouse parado
em cima da imagen como por exemplo “foto”.
<font color=”cor” size=”tamanho” face=”fonte da letra”></font>

Color: Define cor da letra. Pode ser feito atraves do nome da
cor em inglês como red, yellow, blue ou cores hexadecimais #ffffff(branco),
#000000(preto), #ff0000(vermelho).

Face: Define a fonte da letra como por exemplo arial, monotype
corsival...

Size: Define o tamanho da letra em pixels como por exemplo “10”.
<h1></h1>

<h2></h2>

Esses entre outros são padrões de formatação essas tags formatão
o texto que estiver dentro delas.
Para começar se você entender tudo isso que está acima você já
pode começar a escrever sua primeira pagina. Não fique copiando
códigos prontos tente digitar para pegar prática.
Primeira pagina de teste:


<html>

<head>

<title>Hackers da Hora-2009

</title>

</head>

<body>

<center><h1>Hackers da Hora-2009</h1></center><br>

<p>Aqui pode ficar um texto qualquer; ou qualquer imagem ou
video que quiser colocar na pagina de html porém tem que ver o
que o html suporta e o que o html não suporta. Já estamos
fazendo tutorial de javascript e de css para melhorar a
ilustração de como fazer um bom site!</p>

<h1><blink><font color=”red”><center>Hackers da hora-2009</center></font></blink></h1>

</body>

</html>
Salve o código acima no bloco de notas com a extensão .html e
execute para ver o resultado.
Dica: Não é possivel dar mais de um espaço no html a não ser que
você use o caracter especial “&nbsp;” sem aspas.

Postar um comentário
Copyright © 2010 Revista Virtual All rights reserved.
Wp Theme by RaphaelAlves. Blogger Template by Ph