Archive for the ‘HTML’ Category

Tutorial – HTML parte 2

04/12/2008

As TAGs

Agora que já aprendemos como criar uma simples página e visualizar em um browser, vamos conhecer e testar as demais Tag’s existentes, você pode manter o bloco de notas aberto e clicar em salvar a cada modificação, assim cada alteração no bloco de notas realizada e salva, atualize seu browser e veja o que mudou, é a melhor forma de entender a função de cada comando.

<html> e </html>
Tag a qual deve estar presente no início e no fim de todo documento HTML


<head> e </head>
Início e fim do cabeçalho


<title> e </title>
Título que será exibido na “barra de títulos” do browser


<body> e </body>
Indica o começo e fim de sua página propriamente dita, o corpo da página.

Exemplo:

bgcolor: Cor de fundo da página (hexadecimal)

<body bgcolor=”#45DDFF”%gt;

background: Define uma figura como plano de fundo da página

<body background=”nome_da_imagem.jog”%gt;

Text: Define a cor padrão do texto de sua página
Link: Define a cor dos links não visitados
Vlink: Define a cor dos links visitados
Alink: Define a cor dos links ativos, enquanto clicamos nele.

<body bgcolor=”#000000″ text=”#ffffff” link=”#ffff33″ alink=”ffffcc” vlink=”ffff00″>


<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
Formatações de texto para cabeçalho 

Código:

<h1> Texto </h1>
<h2> Texto </h2>
<h3> Texto </h3>
<h4> Texto </h4>
<h5> Texto </h5>
<h6> Texto </h6>


 <font> e </font>
Usado para alterar a cor, o tipo e o tamanho da fonte

<font size=”5″> altera o tamanho da fonte
<font face=”verdana”> altera o tipo da fonte
<font color=”#1DAACC”> Altera a cor (hexadecimal)

<font color=”33dd33″ face=”verdana” size=”5″&gtTexto
</font>


 <p> e </p>
Cria um novo parágrafo

Código:
<p> Parágrafo 1</p><p>Parágrafo 2</p>

Resultado:
Parágrafo 1

Parágrafo 2


<br/>
Esta tag não possui um par, ela força uma quebra de linha em um parágrafo, diferente da tag <p> que cria um novo parágrafo

Código:
Força a <br/> quebra de linha em um parágrafo

Resultado:
Força a
quebra de linha em um parágrafo


<img/>
Tag usada para inserir imagens em sua página

Atributos:
src – caminho da figura
alt – descrição da figura
border – borda da figura (opcional)

Exemplo:
<img src=”nome_da_figura.jpg” alt=”Descrição da imagem” border=”1″ />

 

Tutorial – HTML parte 1

03/12/2008

São incontáveis os tutoriais existentes de HTML pela Web, e este não trará novas ferramentas mais sim uma nova forma de se abordar o assunto, de maneira clara e de fácil assimilação. Confira agora.

HTML (HyperText Markup Language – Linguagem de Formatação de Hipertexto)

O HTML é a linguagem de formatação para construção de páginas, em geral todas as páginas fazem uso dela e também de outras linguagens simultaneamente.

HTML é uma linguagem de formatação e não de programação!

As Tags

Os elementos HTML são apresentados como tags, as quais se apresentam dentro dos sinais de “menor e maior” conforme o exemplo:

<tag>

A maioria das tag’s possui 1 par que “fecha” a região de formatação, veja o exemplo:

<tag> Texto a ser formatado </tag>

Vamos Começar

Nenhum programa especial é necessário para o HTML, basta um editor simples de texto como o notepad do windows para começarmos.

Toda página HTML começa da seguinte maneira:

<HTML>
<HEAD> </HEAD>
<BODY>
</BODY>
</HTML>

Onde:

<html> indica que vamos usar esta linguagem deste ponto em diante
</html>indica que não mais vamos usar esta linguagem deste ponto em diante

<head> indica que tudo que estiver dentro deste ponto até </head> faz parte do cabeçalho da página

<body> indica que tudo que estiver dentro deste ponto até </body> faz parte do corpo da página

 

Sem embromações, vamos logo aos execícios para entender, crie uma pasta no desktop de seu computador com o nome Site, abra o bloco de notas e digite:

<HTML>
<HEAD> <TITLE> TITULO DA PÁGINA</TITLE></HEAD>
<BODY>
<H1> Sua Primeira Página da Web </H1>
<H4> Esta é sua primeira página da web! </H4>
</BODY>
</HTML>

Agora Clique em Salvar Como selecione a pasta Site que você criou no desktop e na caixa Nome do arquivo: digite index.htm e na caixa Salvar como tipo: selecione Todos os Arquivos e clique em Salvar

Dentro da pasta Site no seu desktop o arquivo index.htm foi criado, duplo clique nele e seu browser (internet Explorer, Firefox, Crome, Opera, etc…) irá abrir e agora você pode visualizar sua primeira página, ver o resultado e entender melhor o que estamos falando.

Vamos analisar um pouco as novas tag’s usadas:

<TITLE> TITULO DA PÁGINA</TITLE> => Coloca um título na barra de títulos do Browser

<H1> <H2> … <H6> São tag’s para texto pré formatadas onde H1 é a maior usada para títulos, H2, h3 para subtítulos e assim por diante decrescendo.

Existem muitas outras tag’s, que serão apresentadas pouco a pouco nos próximos tutoriais.

Até breve!

Confira também:Tutorial HTML – parte 2