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:
href=”link”></a>A atribuição href atribui o link da pagina que
quer direcionar. Exemplo: rel="nofollow" onclick="javascript:
href=”http://www.google.com.br/
ou simplesmente rel="nofollow" onclick="javascript:
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)
Face: Define a fonte da letra como por exemplo arial, monotype
corsival...
Size: Define o tamanho da letra em pixels como por exemplo “10”.
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)
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.
<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.
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></
</body>
</html>
Salve o código acima no bloco de notas com a extensão .html e
execute para ver o resultado.
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 “ ” sem aspas.
você use o caracter especial “ ” sem aspas.
Nenhum comentário:
Postar um comentário