Curso HTML – Aula 04

Por Guilherme Farias em 22 de maio de 2010

Olá leitores :)
Vamos começar a nossa quarta aula de HTML, agora as coisas pode complicar um pouco, é bom prestar bastante atenção.

Listas <li>,<ul>,<ol>…

Outro recurso automático do navegador é a lista. Elas podem ser numeradas (ordered list, <ol>), ou apenas ter itens sem numeração (unorganized list, <ul>). Ai, cada item fica dentro de um tag <li> (listed item).

Aqui vamos direto ao nosso exemplo: a idéia é incluir uma lista não enumerada e uma ordenada para ver o resultado.

Altere o conteúdo do arquivo primeirapagina.html, acrescentando o que precisar para que fique desta forma:
<HTML>
<head>
</head>
<body>
<h1>Meu primeiro HTML</h1>
<p>parágrafo abaixo do primeiro titulo</p>
<p>Esse parágrafo vai conter um texto simples, apenas vamos mostrar os exemplos de estilo, <b>esse é o Negrito</b>, <i>esse é o itálico</i>, <u>sublinhado</u>, e para finalizar, <s>esse está riscado</s>, mas também podemos usar a tag “strike” para ter o mesmo resultado da tag “S” como por exemplo, <strike>Riscado em strike</strike>.</p>
<h2>Subtítulo</h2>
<p>Texto do subtítulo que deve aparecer no navegador de forma bem organizada, porque aqui no código fica tudo bagunçado.</p>
<h2>Lista não Ordenada</h2>
<p>texto da lista:</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
</ul>
<h2>Lista Ordenada</h2>
<p>texto da lista:</p>
<ol>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
</ol>

<h2>Outro subtítulo</h2>
<p>Parágrafo do outro subtítulo para ver como fica escrever algum texto no HTML</p>
<p>Mais outro parágrafo para ter uma idéia de como fica os parágrafos organizado dentro do HTML</p>
</body>
</HTML>

Salve o arquivo, atualize o navegador e veja o resultado.
A sua pagina vai ganhar novas linhas e ficando com esse aspecto:

A única diferença entre as duas listas é o fato de uma ser <ul> e a outra ser <ol>.

Outras Tags <br/>,<hr/>,<a>…

Há algumas outras tags classificadas como básicas.

<A>
A mais utilizada é <A> (Hiperlink), que cria um caminho (link) para outra página. É um recurso fundamental para criar a navegação. Quando o usuário clica sobre uma tag destas. Ele é levado para outra página. Veja sua estrutura:

<a href=”URL destino” title=”texto explicativo”>Texto do link</a>

Observe alguns comentários sobre a sintaxe:
* “A” é o nome da tag/
* “HREF” define o destino do link. Para qual a pagina que o navegador irá levar;
* “TITLE” é opcional. Mostra algum texto quando paramos o mouse sobre o link;
* “TEXTO DO LINK” é o conteúdo que aparecerá como link na página. Pode ser um texto ou uma imagem. (Falaremos em seguida, como colocar um link na imagem)
* Não esqueça de fechar a tag com </a>, senão todo o resto do site vai virar um hiperlink.

<br/>
Outra tag é a <br/> (break). Ela força uma quebra de linha dentro do parágrafo. A vantagem é que a nova linha será uma continuidade da anterior. Note que, pelo seu efeito essa tag não tem conteúdo interno e, portanto, não faria sentido abri-la e fechá-la. Por esse motivo, ela tem de se fechar por si mesma. Fazemos isso colocando uma barra no final.

Você já deve ter notado que a quebra de linha no código HTML não necessariamente força a quebra do browser. Isso pode parecer estranho no começo, mas permite que o designer somente quebre a linha quando achar necessário. O que também ajuda a organizar o código de forma mais estética, já que podemos separar os elementos com linhas vazias, e isso não aparecerá no resultado final. O navegador também vai quebrar a linha de texto quando este chega ao fim útil da linha, para adequá-lo à visualização.

<hr/>
A tag <hr> (horizontal row) cria uma linha horizontal. Muito útil para separar assuntos ou delimitar partes do site. Esta tag também deve se fechar (ter uma barra no final)

<marquee>
Com a tag <marquee> é a pagina recebe um efeito de animação, através dessa tag, é possível fazer um texto ou imagem ficar se movendo na página.
Como essa tag tem um conteúdo interno, por isso é necessário uma tag para abrir e uma para fechar.

<marquee> o conteúdo deve ficar aqui dentro</marquee>

<!– x –>
Essa tag é basicamente uma tag para inserir um comentário no HTML sem “aparecer” na página. Para inserir um, usamos uma tag marcada como neutra usando esta sintaxe:

<!– texto do comentário –>
<!– texto do comentário com muitas palavras, não altera em nada o fato de ser um mero comentário –>

Não esqueça de deixar um espaço entre o texto do comentário e os traços identificadores da tag.

Vamos visualizar os efeitos destes marcadores em nosso arquivo de exemplo, acrescente este conteúdo no arquivo primeirapagina.html, e atualize o navegador.

<HTML>
<head>
</head>
<body>
<h1>Meu primeiro HTML</h1>
<!– Inicio das tags de estilo –>
<p>parágrafo abaixo do primeiro titulo</p>
<p>Esse parágrafo vai conter um texto simples, apenas vamos mostrar os exemplos de estilo, <b>esse é o Negrito</b>, <i>esse é o itálico</i>, <u>sublinhado</u>, e para finalizar, <s>esse está riscado</s>, mas também podemos usar a tag “strike” para ter o mesmo resultado da tag “S” como por exemplo, <strike>Riscado em strike</strike>.</p>
<!– Fim das tags de estilo –>
<h2>Subtítulo</h2>
<p>Texto do subtítulo que deve aparecer no navegador de forma bem organizada, porque aqui no código fica tudo bagunçado.</p>
<!– Inicio das tags de listas –>
<h2>Lista não Ordenada</h2>
<p>texto da lista:</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
</ul>
<h2>Lista Ordenada</h2>
<p>texto da lista:</p>
<ol>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
</ol>
<!– Fim das tags de listas –>
<hr/><!– Inserindo HR para separar a lista do resto –>
<h2>Outro subtítulo</h2>
<p>Parágrafo do outro subtítulo para ver como fica escrever algum texto no HTML</p>
<p>Mais outro parágrafo para ter uma idéia de como fica os parágrafos organizado dentro do HTML</p>
<p>Este parágrafo está<br/> com a linha quebrada e com um link para o <a href=”http://www.google.com.br/” tittle=”Google”>Google</a>.</p>
<marquee><p>Este parágrafo está se movendo por causa da tag marquee</p></marquee>

</body>
</HTML>

O resultado deverá ser este:

Observe e preste atenção aos seguintes pontos:
* Note que as quebras de linhas do código não aparecem no resultado, a não ser as identificadas pelo marcador <br/>. Mas a linha é quebrada mesmo que no código seja mantida;
* A quebra não fará qualquer verificação quando à estética. Veja que na quebra, depois do “está”, o resto do texto foi colocado para a linha de baixo. Portanto, atenção na inserção das tags de quebra;
* Os comentários não aparecem no resultado. Por isso é bom usar para identificar as coisas e facilitar quando precisar mexer no código da página novamente. Muitas vezes, colocamos até instruções e dicas para não esquecer o que foi feito;
* A linha horizontal <hr> força uma quebra de linha.
* A tag <marquee> faz o texto ficar se movendo pela pagina, no movimento, da direita para à esquerda, mais podemos alterar o movimento, mais isso vamos ver nas próximas aulas.

Veja as outras Aulas:

* Curso HTML – Aula 01
* Curso HTML – Aula 02
* Curso HTML – Aula 03
* Curso HTML – Aula 05
* Curso HTML – Aula 06
* Curso HTML – Aula 07
* Curso HTML – Aula 08
* Curso HTML – Aula 09

Comente!

Deixe uma resposta

O seu endereço de e-mail não será publicado.