Primeiros Passos Em HTML
Estamos de volta! Bem, desta vez para falar de HTML. HTML significa HyperText Markup Language. Para quem não sabe, o HTML serve para criar páginas na Internet. Bem, não falar muito sobre tecnicismos e introduções teóricas. Os melhores tutoriais, e os que eu mais gosto são aqueles mais práticos em que as pessoas ficam com as ideias na cabeça e não se cansam tão facilmente.
Vamos começar com o tutorial propriamente dito. Primeiro, vocês perguntam: “Mas como vamos programar HTML? Que programa precisámos?” Essa é a parte engraçada. Existem vários programas na Internet para programarem HTML e cada um com as suas vantagens. Mas, para nós, chega perfeitamente o Bloco de Notas do Windows. Sim, é verdade, podemos criar páginas da Internet no Bloco de Notas que todos nós utilizámos sempre no Windows.
Vamos ver primeiro a estrutura do código:
<html>
<head>
<title>Titulo Teste</title>
</head>
<body>
…
</body>
</html>
Vamos agora analisar linha por linha:
<html> – </html> -> Dentro destas duas tags dizemos ao nosso browser (Firefox, Internet Explorer, etc…) que o código que vamos escrever é em HTML.
<head> – </head> -> Dentro destas duas tags dizemos quais as informações que vão ser lidas antes de a página ser carregada.
<title>Titulo Teste</title> -> Destro destas duas tags dizemos qual vai ser o título da nossa página. Neste caso dizemos que é “Titulo Teste”. Pode ser qualquer título.
<body> – </body> -> Dentro destas duas tags é onde se encontra a nossa página. A página que vemos é programada aqui.
Nada que saber até agora pois não? Isto foi o mais chato do tutorial. Agora vamos fazer alguns exemplos.
Abra o Bloco de Notas. Vamos começar por algo muito simples. Uma página com a frase “Olá Mundo!” a saudarmos a nossa entrada no mundo da programação.
Escrevam isto no Bloco de Notas… Eu espero. Já está? Óptimo! Agora prestem atenção pois aqui que está o truque. Para guardarem fazem o seguinte.
Muita atenção aqui. Se nós guardássemos normalmente, ele guardaria como um ficheiro de texto mas se pusermos (nome qualquer).html . Muita atenção aqui, se guardarem assim fica guardado como uma página web. Vejam a figura. Guardei a nossa página com o nome “teste.html“. Façam o mesmo. Agora vão onde guardaram a página (aconselho o ambiente de trabalho pois é fácil de alcançar). Vão ver o resultado. Tcharam! Têm aí a vossa primeira página web. Sei que não é lá grande coisa mas para começar não está mal. Bem vamos melhorá-la. Vamos agora mudar o tipo de letra. Para isso, vamos adicionar este código.
Vejam o código que adicionei.
<font face=Verdana size=13>Olá Mundo!</font>
Vejámos por partes.
<font… -> Indica que vamos alterar o parámetro fonte.
… face=Verdana … -> Aqui dizemos que o tipo de letra vai ser “Verdana”. Podia ser “Arial”, “Comic Sans”, etc… Foi só para dar um exemplo.
… size=13> -> Dizemos que o tamanho da letra vai ser 13.
Ok, adicionem lá isto à vossa página. Eu espero… Ok, agora que já adicionaram isto gravem e abram a vossa página.
As letra ficaram um pouco grandes não foi? Eu sei… Mas vocês estão a aprender HTML, temos festejar em grande! xD Realmente o tipo de letra e o tamanho alteraram. Bem vamos ver só mais um código pois já me estou a alongar muito neste post. Vamos adicionar isto:
Reparem no que adicionei:
<center> … </center> -> Estas tags fazem com que o texto dentro delas fique centrado.
Adicionem o código e testem. Voilá! O vosso texto está centrado. Bem existem mais tags para a formatação de texto mas fica para uma próxima.
Fikem Bem!
Para principiantes este tutorial dá umas ideias básicas, mas ao mesmo tempo fundamentais para a aprendizagem em html. =)
Boa, ainda vou aprender
quanto ao plágio
é deixar no ostracismo
Só isso? Onde estão os próximos passos?
Boas Glaucia!
No futuro daremos uma continuação. Porque não espreitas o tutorial que temos traduzido? Está dividido em várias partes e é bem ao estilo destes passos!
Esse tuto foi muito bom, pena que nao tem mais
Galera, vou criar minha HTML pra um Pocket PC e posto aki o na sequancia que for rendendo resultados…
inté
{
margin: 0px;
padding: 0px;
}
body {
background: #187AD5 url(images/back_all.gif) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #A4E4F5;
}
input, textarea {
background: #A4E4F5;
border: 1px solid #FFFFFF;
font: bold 13px Arial, Helvetica, sans-serif;
color: #0F5B96;
}
h1, h2, h3, p, ol, ul {
margin-top: 0;
}
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif;
}
h1, h2 {
text-transform: lowercase;
font-weight: normal;
}
h1 {
font-size: 2.4em;
}
h2 {
font-size: 1.8em;
}
p, ol, ul {
margin-bottom: 1.5em;
line-height: 150%;
}
a {
color: #1D74A6;
}
a:hover {
text-decoration: none;
color: #1D74A6;
}
hr {
display: none;
}
#main
{
width: 1036px;
margin: 0 auto;
}
/* Header */
#header {
height: 320px;
width: 1036px;
}
#logo {
width: 1036px;
height: 204px;
background: url(images/header.jpg) repeat-x;
}
#logo h1, #logo p {
margin: 0;
line-height: normal;
}
#logo h1 {
padding: 47px 0 0 20px;
font-size: 24px;
color: #ffffff;
}
#logo h2 {
padding: 10px 0 0 20px;
font-size: 10px;
text-transform: uppercase;
color: #ffffff;
}
#logo a {
text-decoration: none;
color: #ffffff;
}
#menu {
height: 84px;
padding-top: 30px;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
width: 136px;
height: 32px;
margin: 0 0 0 5px;
padding: 14px 0 0 0;
text-decoration: none;
text-align: center;
letter-spacing: -1px;
font-size: 1.1em;
font-weight: bold;
color: #187AD5;
background: url(images/button.gif) no-repeat;
}
#menu a:hover {
height: 37px;
margin-top: -4px;
padding-top: 18px;
background: url(images/button_r.gif) repeat-x;
}
/* Page */
#page {
width: 1036px;
background: #ffffff url(images/page_back.gif) repeat-y;
margin: 0 auto;
margin-top: 12px;
}
/* Content */
#content {
float: left;
width: 532px;
margin-left: 10px;
}
#content .post ul, #content .post ol
{
margin-left: 30px;
}
.post {
margin-bottom: 15px;
padding: 10px;
color: #0A416B;
}
.post a {
color: #1D74A6;
}
.post a:hover {
color: #FFFFFF;
}
/* Sidebars */
.sidebar {
float: left;
width: 221px;
margin-top: 10px;
color: #0D699B;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
.sidebar li {
padding: 6px 0 6px 20px;
}
.sidebar a {
text-decoration: none;
color: #0D699B;
font-size: 11px;
}
.sidebar a:hover {
color: #0D699B;
text-decoration: underline;
}
.sidebar h2 {
padding-top: 10px;
color: #FFFFFF;
background: url(images/title.gif) no-repeat;
height: 33px;
padding-left: 20px;
font-size: 16px;
font-weight: bold;
}
/* Left Sidebar */
#leftbar {
margin-left: 15px;
}
/* Right Sidebar */
#rightbar {
margin-left: 20px;
}
#leftbar .back, #rightbar .back
{
background: url(images/back.gif) repeat-y;
padding: 10px;
}
#leftbar .bottom, #rightbar .bottom
{
background: url(images/bottom.gif) no-repeat;
height: 6px;
width: 221px;
margin-bottom: 10px;
}
/* Calendar */
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
}
#calendar tbody td {
border: 1px solid #F1F1F1;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #696969;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff
}
/* Footer */
#footer {
clear: both;
padding-top: 20px;
height: 62px;
background: url(images/footer.gif) repeat-x;
}
#footer p {
text-align: center;
font-size: smaller;
color: #0F5B96;
}
#footer a {
color: #0F5B96;
}
——————
aki amigao oque que ta faltando?
quando eu coloco la no html do blog nao da,
da uma messagem de erro “” bla bla bla html verifik os campos nao sei de q esta aberto”"
se for ´possivel me responda,no meu email
mauricio-gunit@hotmail.com >email provisorio
brigadao…