Cássio Fabre
Seguindo com nossa série de tutoriais, hoje começaremos a codificar nossa index.html. Sem mais delongas lá...
Como dito na Parte 0.1, você deverá escolher o programa com o qual escreverá os códigos. Eu estarei utilizando o Dreamweaver CS6 ou o NotePad++, alternando entre eles.
A primeira coisa a saber é quais as tags que são utilizadas para fazer o nevegador entender que a página que estamos escrevendo tem códigos e não apenas texto. Copie ou escreva o código abaixo respeitando o fechamento das tags (como explicado na Parte 0).
<html> <head> </head> <body> </body> </html>
Explicando esse pequeno código:
<html> </html> é a tag principal do site, que compreende todo o código;
<head> </head> tag que delimita o cabeçalho do código. O que estiver escrito aqui NÃO aparecerá para o visitante do site.
<body> </body> tag que delimita o corpo do site. Imagens, textos, blocos, tudo o que você quiser que o seu visitante veja deve estar contido aqui.
Essas são as tags que fazem o navegador entender que temos uma página em HTML e não apenas um monte de texto.
Agora incluiremos também a tag que fará o navegador pegar o titulo do seu site. Para entender o que essa tag fará, na aba do seu navegador agora está escrito: Aprenda HTML e CSS na Prática - Parte 1 ~ SobMedida Tutoriais. A tag que fará este serviço é a <title> </title>
<html> <head> <title> Titulo do Seu Site </title> </head> <body> </body> </html>
Substitua o código anterior por este segundo.
Lembra que falamos do CSS na primeira postagem desta série? Pois é. Vamos ver agora como faremos para utilizá-lo.
Existem três maneiras de escrever o código CSS: Escrever em um arquivo *.css separado, escrever entre a tag <head> </head> ou escrever diretamente no elemento HTML dentro de <body> </body>. Dentre essas três as mais utilizadas são as duas primeiras. Mostrarei abaixo como deve ser feito cado uma delas.
Em arquivo separado:
<html> <head> <title> Titulo do Seu Site </title> <link href="link-do-arquivo-css.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>Dentro da tag <head> </head>:
<html> <head> <title> Titulo do Seu Site </title> <style type="text/css"> /* Código CSS aqui */ </style> </head> <body> </body> </html>Dentro do Elemento HTML:
<html> <head> <title> Titulo do Seu Site </title> </head> <body> <div style=" /* Código CSS aqui */ "> </div> </body> </html>
Escolham umas das duas primeiras formas para escrever o CSS, copiem/escrevam o código correspondente acima e salvem o arquivo como index.html. A extensão do arquivo é muito importante. Aconselho a criar uma pasta em Meus Documentos com o nome "Primeiro Site" e salvar o arquivo dentro desta pasta.
Bom, por hoje é isso e continuem acompanhando o blog para o prosseguimento desta série!
0 comentários:
Postar um comentário