HTML

Listas em HTML

As listas são formas de estruturar documentos em forma de sumário, menu ou resumo de conteúdo. São muito boas na hora da criação menus ou tópicos de uma página HTML. Existem dois tipos de listas: as ordenadas e as não ordenadas. As listas ordenadas obedecem a uma ordem numérica, e as não ordenadas não obedecem a nenhuma ordem.

LISTAS ORDENADAS

Para definirmos uma lista ordenada, utilizamos a tag <OL> </OL>que determina o marcador ordenado para a nossa lista. Para definir os itens da lista por sua vez utilizamos o marcador <LI></LI>.

Sintaxe:

<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>

<ol>

</ol>

Podemos escolher o tipo de marcador de nossa lista, podendo ser numérico (1,2,3), romano, (I, II, III) ou caracter (a, b, c). Para isso utilizamos o atributo type na tag <OL></OL>.

Sintaxe:

<ol type=”1”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>

<ol type=”I”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>

<ol type=”a”>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>

</ol>

</ol>

</ol>

Exemplo Prático:

<html>
<head>
<title>Exemplo Listas 1</title>
</head>
</body>
<h3>Listas Ordenadas</h3>
<ol>
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ol>
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol type="A">
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ol>
</body>
</html>

<html>

<head>

<title>Exemplo Listas 1</title>

</head>

</body>

<h3>Listas Ordenadas</h3>

<ol>

</ol>

<li>JAVASCRIPT</li>

</ol>

</ol>

</body>

</html>

LISTAS NÃO ORDENADAS

Para definirmos uma lista não ordenada, precisamos utilizar a tag <UL></UL>. Para definir os itens da lista por sua vez utilizamos o marcador <LI></LI>.

Sintaxe:

<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>

<ul>

</ul>

Podemos escolher o tipo de marcador de nossa lista, podendo ser um quadrado ou um círculo.

Sintaxe:

<ul type=”circle”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>

<ul type=”square”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>

<ul type=”disk”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>

</ul>

</ul>

</ul>

Exemplo Prático:

<html>
<head>
<title>Exemplo Listas 1</title>
</head>
</body>
<h3>Listas Ordenadas</h3>
<ul>
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ul>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<ul type="circle">
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ul>
</body>
</html>

<html>

<head>

<title>Exemplo Listas 1</title>

</head>

</body>

<h3>Listas Ordenadas</h3>

<ul>

</ul>

<li>JAVASCRIPT</li>

</ul>

</ul>

</body>

</html>

LISTA DE DEFINIÇÃO

Uma lista de definição é utilizada quando existem diversos tópicos curtos acompanhados de alguma descrição para o mesmo. Uma lista de definição é composta de três tags básica: <dl>, <dt>, <dd>, onde a tag <dl> delimita a área da lista, <dt> define um tópico e <dd> define a descrição do tópico.

Sintaxe:

<dl>
<dt> Tópico 1
<dd> Definição do Tópico 1</dd>
<dd> Definição do Tópico 1</dd>
<dd> Definição do Tópico 1</dd>
</dt>

<dt> Tópico 2
<dd> Definição do Tópico 2</dd>
<dd> Definição do Tópico 2</dd>
<dd> Definição do Tópico 2</dd>
</dt>
</dl>

<dl>

<dt> Tópico 1

<dd> Definição do Tópico 1</dd>

</dt>

<dt> Tópico 2

<dd> Definição do Tópico 2</dd>

</dt>

</dl>

Exemplo Prático:

<html>
<head>
<title>Exemplo Listas 3</title>
</head>
</body>
<h3>Listas de Definição</h3>
<dl> 
<dt> HTML
<dd> Linguagem usada na criação de páginas web.</dd>
<dd> Baseada em conjunto de pares de tags.</dd>
</dt>
<dt> CSS
<dd> É usada para criar folhas de estilos para páginas web.</dd>
<dd> Pode ser inserido no corpo de uma páginas html ou importada de um arquivo texto.</dd>
</dt>

<dt> JAVASCRIPT
<dd> Linguagem usada para dar um pouco mais de dinamismo em páginas html.</dd>
<dd> Como o HTML o JAVASCRIPT também é processado pelo BROWSER</dd>
</dt>
</dl>

</body>
</html>

<html>

<head>

<title>Exemplo Listas 3</title>

</head>

</body>

<h3>Listas de Definição</h3>

<dl>

<dt> HTML

<dd> Linguagem usada na criação de páginas web.</dd>

<dd> Baseada em conjunto de pares de tags.</dd>

</dt>

<dt> CSS

<dd> É usada para criar folhas de estilos para páginas web.</dd>

<dd> Pode ser inserido no corpo de uma páginas html ou importada de um arquivo texto.</dd>

</dt>

<dt> JAVASCRIPT

<dd> Linguagem usada para dar um pouco mais de dinamismo em páginas html.</dd>

<dd> Como o HTML o JAVASCRIPT também é processado pelo BROWSER</dd>

</dt>

</dl>

</body>

</html>

Introdução a Linguagem HTML

O HTML (HYPERTEXT MARKUP LANGUAGE) é uma linguagem dedicada a modelagem de páginas web. Um arquivo HTML consiste de um texto comum de códigos especias chamados tags, essas tags representam as marcações da linguagem HTML. O HTML é bastante simples e tem como finalidade formatar o texto exibindo em um navegador e criar ligações entre documentos web, por isso é conhecido com HyperText ou seja hipertexto.

AS TAGS DA LINGUAGEM HTML

As tags HTML são especificadas em pares e tem como finalidade a formatação de textos, criação de hyperlinks, inserção de vídeos e imagens, e etc. Além dos pares de tags existem algumas que possuem uma especificação individual é o caso da tag, utilizada para inserir uma quebra de linha. As tags são especificadas entre o sinal < > para representar o inicio da marcação e do sinal < / > para representar o fim de uma marcação.

Sintaxe de um elemento(TAG):

Sintaxe de um Documento HTML:

<html>
<head>
<title></title>
</head>
<body>
Minha Página HTML
</body>
</html>

<html>

<head>

</head>

<body>

Minha Página HTML

</body>

</html>

Definição:

<HTML> : Delimita o inicio e fim de uma página ou documento HTML.
<HEAD> : Delimita o inicio e fim do bloco de cabeçalho de uma página HTML.
<TITLE> : Delimita o texto a ser exibido na barra de títulos da janela do navegador.
<BODY> : Delimita o inicio e fim do corpo do documento HTML. É nele que a maioria das tags da linguagem HTML são definidas.

Estrutura Básica do HTML

A estrutura básica de um documento HTML é especificada através do uso de pares de tags, para delimitar o conteúdo que sofrerá alguma alteração. Além da definição de pares de tags o HTML também trabalha com algumas tags individuais.

Os pares de tags devem obedecer a seguinte estrutura:

<NOME DA TAG> TEXTO </NOME DA TAG>

1	<NOME DA TAG> TEXTO </NOME DA TAG>

As tags dever ser endentadas, ou seja, uma não deve atrapalhar o fechamento da outra. O HTML não diferencia o uso de letras maiúsculas ou minúsculas. As tags são interpretadas independente do tamanho, tipo, cor ou efeitos aplicados a sua fonte durante a digitação do código fonte da página.

Implementação do HTML

Para construirmos páginas HTML precisamos de um Editor de texto (exemplo, bloco de notas, notepad ++, Nvu, Adobe Dreamweaver) e de um navegador (exemplo: Google Chrome, Mozilla Firefox, Opera, Safari e pra quem é adepto ao mundo microsoft o Lixonet Explore).

Os arquivos criados no editor de texto deverá ser salvo com a extensão .html ou .htm . Salve os seus arquivos em um diretório de sua preferência e para abri-los basta um duplo clique.

O padrão da linguagem HTML é mantido pelo W3C – World Wide Web Consortion, que é orgão que mantêm os padrões de algumas linguagens web.

DOWNLOAD DE ALGUNS EDITORES DE TEXTO

NOTEPAD ++ 5.9.8