•  
     

[Tutorial] HTML parte1 básico

Programas utilizados: Dreamweaver MX e CS4

<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='expires' content='0'>
<title>Tutorial HTML</title>
<style type=text/css>
table{color=000000; font-family:verdana; font-size:12px;}
</style>
<head><body bgcolor=f f f f f f text=000000 topmargin=0 lef tmargin=0 margin=0px><center>
<table width=100% border=0 cellspacing=0 cellpadding=0><tr><td align=center valign=top>
<table width=100% border=1 cellspacing=0 cellpadding=0><tr bordercolor=f f f f f f>
<td align=center valign=top>
<table w idth=100% border=0 cellspacing=0 cellpadding=0>
<tr><td>
conteúdo aqui
</td></tr>
</table>
</td></tr></table>
</td></tr></table></center></body></html>


aqui temos um exemplo de script HTML com tabela e folha de estilo, mas isso eu irei explicar nos próximos tutoriais.

Vamos às explicações;

<html></html> HTML:
<html>
codigo html e conteudo a ser exibido
</html>

É a primeira tag de um documento HTML, nas primeiras versões dos browsers essa tag era
obrigatória.
hoje pode parecer inútil, mas existe uma propriedade que pode ser configurada nessa tag:
<html lang=pt>
codigo html e conteudo a ser exibido
</html>

A propriedade "lang" é utilizada por alguns mecanismos de busca, seu valor indica o tipo de idioma
da página HTML. O valor "pt" corresponde à português, "jp" ao idioma japonês, "en" inglês ...

<head></head> cabeçalho:
<html>
<head></head>
codigo html e conteúdo a ser exibido
</html>

Local onde são declaradas as metatags, variáveis de script JS ou VBS e Estilos CSS.
Em browsers antigos a falta dessa tag gerava erros de compilação do HTML

<title></title> título:
<html>
<head>
<title>TUTORIAL HTML</title>
</head>
codigo html e conteúdo a ser exibido
</html>

Essa tag não é obrigatória. Se encontrar algum WEBSITE sem um título você já vai ter uma noção
do tipo de "programador" que desenvolveu o site. É muito comum encontrar sites sem a tag "title"
Pode ser colocada em qualquer local do código HTML, mas de preferência coloque-a dentro da tag
"head"

<meta></meta> META TAGS:
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta name='keywords' content='tutorial, html, basico, avancado, guia, referencia, interativo'>
<meta name='description' content='tutorial html'>
<meta name='language' content='Portuguese'>
<meta name='robots' content='all'>
<title>TUTORIAL HTML</title>
</head>
codigo html e conteúdo a ser exibido
</html>

Definem o tipo de conteúdo do documento HTML e configura suas propriedades.
keywords, description, language, robots são muito usados por mecanismos de busca

Content-Type tipo de conteúdo, no caso texto/html
charset identificação ISO dos carecteres usados na página
pragma informa ao browser se a página deve ser armazenada em cache (Internet Temporary
Fles)
expires data de expiração do documento HTML, o valor 0 (ZERO) indica que o documento
deve ser sempre atualizado a cada solicitação
keywords palavras-chave que indicam o tipo de conteúdo que contém a página ou site
description descrição do site
language idioma do site
robots mecanismos de busca permitidos
<meta HTTP-EQUIV="refresh" content="3 url=about:blank">
refresh
"content" recebe um valor em segundos, "url" o caminho para onde o browser deve ser
redirecionado quando o valor de "content" expirar

<LINK></LINK> link rel:
<LINK REL="SHORTCUT ICON" HREF="imagens/teste.ico">
<LINK REL="stylesheet" HREF="css/textos.css" type=text/css>

Devem ser colocados dentro da tag "head", SHORTCUT ICON indica o caminho do arquivo de
ícone (.ico) para a página HTML, se o usuário adicionar seu site aos favoritos (CTRL+D) o ícone
será baixado automaticamente e aparecerá na lista dos favoritos.
Já stylesheet indica o local da folha de estilos externa que deve ser carregada junto à página HTML.

<body></body> corpo:
<html>
<head>
<title>TUTORIAL HTML</title>
</head>
<body>
codigo html e conteúdo a ser exibido
</body>
</html>

É dentro dessa tag que o conteúdo é exibido, textos, imagens, vídeos..
A tag possui muitas propriedades, até mesmo scripts de JavaScript podem ser definidos dentro dela
<html>
<head>
<title>TUTORIAL HTML</title>
</head>
<body>
bgcolor=000000 text=ffffff topmargin=0 leftmargin=0 marginwidth=0 marginheight=0 margin=0px
>
codigo html e conteúdo a ser exibido
</body>
</html>

um simples exemplo de como colocar um background (figura de fundo):
<html>
<head>
<title>TUTORIAL HTML</title>
</head>
<body
bgcolor=ffffff text=000000 background=imagens/hempa.gif bgproperties=fixed topmargin=0 leftm
argin=0 marginwidth=0 marginheight=0 margin=0px>
codigo html e conteúdo a ser exibido
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

bgcolor cor de fundo
text cor do texto, se um texto não receber nenhum valor de cor, a cor aqui setada será atribuída ao texto
background caminho relativo ou absoluto para imagem de fundo
bgpropertiesdisposição do background, "fixed" indica que a figura de fundo permanecerá fixa na tela quando a página for rolada
topmargin expessura (em pixels) do topo da margem (reconhecido pelo IE)
leftmargin expessura (em pixels) do lado esquerdo da margem (reconhecido pelo IE)
marginwidth ídem ao topmargin (reconhecido pelo NE)
marginheight ídem ao leftmargin (reconhecido pelo NE)
margin equivalente à "border" muito usado em tabelas, raramente um website usa esse atributo na tag <body>
(IE - Internet Explorer · NE - Netscape)

<!-- --> comentando o código:
Use essa tag especial para comentar seus códigos HTML, use para identificar trechos de códigos,
principalmente se forem muito complexos. Tudo que é digitado dentro dessa tag é ignorado pelo
compilador do HTML.
<html>
<head>
<!-- título da página -->
<title>TUTORIAL HTML</title>
</head>
<body>
<!-- início do conteúdo -->
codigo html e conteúdo a ser exibido
<!-- fim do conteúdo -->
</body>
</html>




Página montada com script abaixo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Index do site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFF00" text="#000000">
<h1 align="center">Index</h1>
<br>
<br>
<div align="center"><a href="primeirapagina.html"><img src="internet-explorer.png" border="0" align="middle" alt="teste1"></a><br>
<font size="+1" face="Arial" color="#FF9900">clique na imagem para entrar </font><p>
<embed src="Rihana_-_Russian_Roulette.mp3" autostart="false" showstatusbar="1" transparentatstart="0" showdisplay="0">
</div>
</body>
</html>







Tutorial parte 2 > http://www.acemprol.com/viewtopic.php?f=16&t=17052

Fonte principal: http://paraiso.etfto.gov.br
Modificado por : [J]ack
 
Quando vc por copias. pelo menos poe o credito do criador
 
Vc está cego?

Eu pesquisei nesse site aew e modifiquei olhe antes de comentar flw.