INSERÇÃO DE IMAGENS

Imagens

A utilização de imagens em páginas HTML dá uma nova dimensão a página na distribuição de informação através de documentos HTML, tornando assim a informação mais atraente aos olhos do leitor, chamando muitas vezes mais a atenção do que os próprios textos descritos na página.

Uma página web deve trabalhar com as seguintes extensões de imagens: .png, .gif, .jpg, devido a aceitação destes nos navegadores utilizados nos dias hoje.

 O arquivos de imagens podem estar presentes no mesmo diretório dos seus arquivos .html, porém recomenda se que os mesmo estejam em um diretório separado, devido a organização de seu site.

Para inserirmos uma imagem em uma página HTML utilizamos a tag <IMG> junto ao atributo SRC, que tem como função especificar o caminho do diretório da imagem a ser inserida.

Sintaxe:

<img src=“imagem.png”>

<img src=“diretorio/imagem.png”>

<img src=“C:/Imagens/imagem.png”>

<img src=“http://www.meusite.com.br/img/imagem.png”>

Atributos do Comando <IMG>

·         scr: Define o caminho do diretório onde se encontra a imagem a ser inserida.

·         align: Alinhamento da imagem em relação ao texto.

·         width: Largura da imagem.

·         height: Altura da imagem.

·         alt: Insere uma legenda na imagem.

Exemplo Prático:

LISTAS EM HTML

Listas

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>

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>

Exemplo Prático:

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>

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>

Exemplo Prático:

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>

Exemplo Prático:

BLOCOS DE TEXTO EM HTML

Blocos de Textos

Na linguagem HTML, utilizamos os blocos de textos para destacar algum texto da página dos demais, podendo assim atribuir uma formatação ou estilo personalizado a cada bloco.

O Comando <PRE>

O comando <PRE> </PRE> preserva os espaços, quebra de linhas e tabulações adicionadas ao documento HTML, sendo muito utilizado na hora de representar listagens e planilhas.

Sintaxe:

<pre> Texto Pré-formatado</pre>

  

Exemplo Prático:

O Comando <BLOCKQUOTE>

O comando <BLOCKQUOTE> </BLOCKQUOTE> é utilizado para destacar um bloco de texto. Em alguns navegadores o bloco destacado fica em itálico, porem em outros é adicionado uma tabulação ao bloco de texto, destacando-o dos demais.

Sintaxe:

<blockquote> Texto Destacado </blockquote>

Exemplo Prático:

O Comando <ADDRESS>

O comando <ADDRESS> </ADDRESS> marca o inicio e o fim de um bloco de endereço utilizado para especificar a autoria do documento HTML.

Sintaxe:

<address> Texto do Endereço </address>

Exemplo Prático:

Estilos de Fontes

 Para especificarmos estilos da fonte de nossa página web utilizaremos a tag <FONT> </FONT> para definir estilos tais como a cor, o nome da fonte e o tamanho da mesma.

Atributos do Comando <FONT>

• color: Define a cor da fonte, podendo ser o nome da cor em inglês (red, Green, blue...) ou a numeração hexadecimal da mesma. (#CC00FF). 
•  face: Define o tipo da fonte a ser aplicada (verdana, tahoma, arial, calibri, etc.) 
•  size:  Define o tamanho da fonte, deve ser especificado entre 1 e 7.

Sintaxe:

<font color=“red”> Texto </font>

<font face=“calibri”> Texto </font>

<font size=“6”> Texto </font>

<font color=“red” face=“calibri” size=“6”> Texto </font>

Exemplo Prático:

Letreiros

 Para a criação de letreiros correntes na página, utilizamos a tag <MARQUEE></MARQUEE>.

Sintaxe:

<marquee> Texto Pré-formatado</marquee>

Atributos do Comando <MARQUEE>

• scrollamount: Especifica a velocidade do letreiro. 
• direction: Define a direção do letreiro. 
• behavior: Define tipo de movimento do letreiro. 
• border: Define uma borda para o letreiro. 
• bordercolor: Define a cor da borda. 
•  bgcolor: específica a cor de fundo do letreiro

Exemplo Prático:

CABEÇALHOS E ESTILOS DE TEXTO

Níveis de Cabeçalho

 Os cabeçalhos o títulos são linhas do documento que aparecem com um tamanho de letra diferenciado do restante do texto ou parágrafo com finalidade de identificar o inicio de uma seção, tópico ou parágrafo. Existem 6 níveis de cabeçalhos possíveis no HTML.

Sintaxe:

<h1> Título de Nível 1 </h1>

<h2> Título de Nível 2 </h2>

<h3> Título de Nível 3 </h3>

<h4> Título de Nível 4 </h4>

<h5> Título de Nível 5 </h5>

<h6> Título de Nível 6 </h6>

Exemplo Prático:

Atributos do Comando <H>

O atributo utilizado pelo pra de tags <h> </h> é o align, que é utilizado para alinhar o parágrafo em relação ao corpo do documento HTML.

Sintaxe:

<h1 align=“left”> Título Alinhado a Esquerda </h1>

<h2 align=“right”> Título Alinhado a Direita </h2>

<h3 align=“center”> Título Centralizado </h3>

<h4 align=“justify”> Título Justificado </h4>

Estilos de Textos

 Podemos adicionar algumas formatações básicas ao texto de nossa página HTML, tais como, alterar a sua forma ou tipo da fonte, negrito, itálico, sublinhado, etc.

Abaixo segue uma lista com os comandos básicos:

Efeito	Sintaxe	Função
Negrito	<b> Texto </b>	Aplica o estilo negrito
Itálico	<i> Texto </i>	Aplica o estilo itálico
Sublinhado	<u> Texto </u>	Aplica o estilo sublinhado
Strong	<strong> Texto </strong>	Efeito similar ao uso do Negrito
Typewriter	<tt> Texto </tt>	Espaçamento de texto regular
Big	<big> Texto </big>	Aumenta e aplica negrito
Small	<small> Texto </small>	Reduz a fonte
Sobrescrito	<sup> Texto </sup>	Aplica o estilo sobrescrito
Subscrito	<sub> Texto </sub>	Aplica o estilo subscrito
Pulsante	<blink> Texto </blink>	Faz o texto pulsar

Exemplo Prático:

QUEBRA DE LINHA E PARAGRAFOS

Quebra de Linha e Parágrafos

Quebra de Linha – O Comando <BR>

O comando <br> tem como função quebrar uma linha do texto, forçando que o mesmo continue na linha seguinte. 

Sintaxe Comando <br>:

Parágrafos – O Comando <P>

A principal diferença entre um documento gerado através de um editor de texto e uma página web, é que uma página web não reconhece o fim de cada parágrafo. Para definição de parágrafos em páginas web devemos utilizar o par de tags <p> </p> para delimitar o escopo de nosso parágrafo.

Sintaxe:

<p> Texto do parágrafo </p>

Exemplo Prático:

Atributos do Comando <P>

O atributo utilizado pelo pra de tags <p> </p> é o align, que é utilizado para alinhar o parágrafo em relação ao corpo do documento HTML.

Sintaxe:

<p align=“left”> Texto Alinhado a Esquerda </p>

<p align=“right”> Texto Alinhado a Direita </p>

<p align=“center”> Texto Centralizado </p>

<p align=“justify”> Texto Justificado </p>

Exemplo Prático:

Introdução a Linguagem HTML

O HTML (HyperText Markut Language) é uma linguagem dedicada a modelagem de páginas web. Um arquivo HTML consiste de um texto comum de códigos especiais chamados tags. As tags do HTML 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 primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Atualmente a sintaxe do HTML é muito mais rígida, permitindo um código mais preciso. Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. 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.

O que é uma página web?

Uma página web é um arquivo disponibilizado na web, geralmente no formato HTML e com ligações de hipertexto (Links) que possibilitam a navegação entre páginas ou entre sessões de uma mesma página. As páginas podem possuir recursos gráficos como imagens, animações, vídeos e sons. Uma página web é visualizada através do uso de um browser ou navegador.

Como se cria uma página web?

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, NetScape e em último caso Internet Explorer). 

Por ser uma linguagem de marcação, a sintaxe do HTML na maioria dos casos exige uma tag de início e uma de final daquele bloco.

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.

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>

As tags dever ser endentadas, ou seja, uma não deve atrapalhar o fechamento da outra.

Sintaxe Básica do HTML:

Definição do Comandos:

§  <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.