INTRODUÇÃO AO HTML

INTRODUÇÃO AO HTML

VISÃO GERAL A Web é baseada em 3 pilares:

• Um esquema de nomes para localização de fontes de informação na Web, esse

esquema chama-se URL.

• Um Protocolo de acesso para acessar estas fontes, hoje o HTTP.

• Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de

informação: o HTML.

DOM (Document Object Model) é uma multi-plataforma que representa como as marcações em HTML são organizadas e lidas pelo navegador que você usa.

API (Application Programming Interface) tem como objetivo interligar diversas funções em um site (por exemplo, busca de imagens, notícias, artigos, etc.) de modo a possibilitar que possam ser utilizadas em outras aplicações.

INICIANDO UMA PÁGINA HTML

O corpo básico de uma página HTML, é composto pelas tags, <HTML></HTML> e <BODY></BODY>.

Não há necessidade de as tags estarem em letra maiúscula, ou minúscula, porém organizar as tags, é mais fácil para a localização em um código.

Aguns exemplos na escrita:

<HTML> <BODY> </BODY> </HTML> <HTML> <body> </body> </HTML> <HtMl> <bodY> </BodY> </HTml>

Mas, para manter a organização, recomenda-se, uma “configuração” padrão. Por exemplo: <HTML> <BODY> </BODY> </HTML>

Tags são rótulos usados para informar ao navegador como deve ser apresentado o website.

PRIMEIROS PASSOS NO HTML Para se construir uma página HTML, é necessário primeiramente abrir um editor, pode ser utilizado o Bloco de Notas. Primeiramente, digita-se os comandos básicos.

<HTML> <BODY> </BODY> </HTML> Para se colocar um título na página, é necessário digitar as tags <HEAD> e <TITLE>, que vai fora da tag <BODY>. <HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY> </BODY> </HTML>

A página será exibida assim:

Na tag body, pode ser adicionada as configurações padrões da página. Atributo “bgcolor”

Serve para alterar a cor de fundo da página HTML.

<BODY bgcolor=”#000055”> = Define a cor de fundo. No bloco de notas:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY bgcolor=”#000055”> </BODY> </HTML>

PRIMEIROS PASSOS NO HTML

O atributo “bgbolor”, e a cor definida com ele pelo código, resultam no fundo azul da página.

CORES Numa página HTML, as cores são fundamentais para decorar a página. No HTML, as cores podem ser nomeadas pelo nome (em Inglês), como white para branco, green, para verde, blue, para azul e assim por diante. Podem ser codificadas, por números decimais, como 255, 160, 200, ou números hexadecimais, como, FFAA00, na verdade os códigos são como uma misturas de cores RGB (Red – Vermelho, Green – Verde, Blue – Azul), então se o código decimal for “185 ,0 ,0”, por exemplo, é sinal de que a cor é vermelha, pois ele adicionou 185 ao vermelho, 0 ao verde e 0 também ao azul, se o código hexadecimal for 006600, deduz-se que a cor é verde, pois os dois primeiros números (que correspondem ao vermelho – RRGGBB), são 0, os dois números do meio, são 6 e os dois números finais são 0.


CORES


CORES


CORES


CORES


Atributo “background”

Serve para adicionar uma imagem como pano de fundo da página HTML.

<BODY> background=”imagem_fundo.jpg”> = Define a imagem “Imagem_fundo.jpg”, como pano de fundo da página HTML.


No bloco de notas:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY background="Paisagem.jpg"> </BODY> </HTML>

Pode acontecer que a imagem seja menor que o plano de fundo. Neste caso, ela a imagem irá se repetir quantas vezes forem preciso.

TEXTOS Há vários tipos de forma de se fazer textos em páginas HTML. A mais simples delas é com a tag <Hx> (x, corresponde a um número de 1 a 6, sendo 1 o maior e 6 o menor). Por Exemplo:


<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY> <H1>Título 1</H1> <H2>Título 2</H2> <H3>Título 3</H3> <H4>Título 4</H4> <H5>Título 5</H5> <H6>Título 6</H6> </BODY> </HTML>

Todos os tamanhos possíveis do “H”

Pode-se também formatar o título (heading) usando a tag FONT. O alinhamento fica por conta do atributo align que pode ser left (esquerdo), center (centro), right (direito) e justify (justificado). No exemplo abaixo estão dois títulos (headings). O primeiro está Arial, 4, vermelho e o segundo Tahoma, 2, azul, centralizado.


<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY> <H1><FONT FACE="Arial" SIZE="4" COLOR="red">Título 1</FONT></H1> <H2 ALIGN="center"><FONT FACE="Tahoma" SIZE="2" COLOR="blue">Título 2</FONT></H2> </BODY> </HTML>

Tela do navegador mostrando a variação do heading

Atributo text

Serve para definir a cor do texto padrão da página HTML. <BODY text=”YELLOW”> = Define a cor padrão de tudo aquilo que for escrito na página HTML como texto, sem configurações.


<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#FFFF00"> <H1>Título em amarelo</H1> </BODY> </HTML>

No navegador aparece o seguinte:

PRIMEIROS PASSOS NO HTML Parágrafos

Observe que com o H, não é necessário que se mude de parágrafo, mas caso você prefira usar uma tag que não seja o H, ou não usar tags, é preciso que você use uma quebra de linhas, pois o HTML, não quebra de linha no mesmo momento que você digita a tecla “Enter”. Veja a figura 3.2.

Por Exemplo: <HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#003300"> <H1>Observe que se eu não aciono nenhum comando para quebra de linha no HTML, ele não quebra de linha automaticamente, mesmo que eu parta a pala vra ao meio</H1> </BODY> </HTML>



Para quebrar a linha, usa-se a tag <BR>, que simplesmente quebra a linha, ou a tag <P></P>, que cria um parágrafo.

Por Exemplo:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#003300"> <H1>Se algum momento do texto eu quiser quebrar linha utilizo <br> o comando "BR" para isso.</H1> <P>Quando eu uso a tag "p"</P> ele realiza o parágrafo logo após a determinação da tag "/p". </BODY> </HTML>



A tag <P></P>, ainda serve para configurar páginas.

Por Exemplo:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#0000FF"> <h1><p style="text-align:center"> Alinha o texto escrito para o centro da página</P></h1> </BODY> </HTML>


Os Alinhamentos podem ser: Comando Posição style="text-align:left” style="text-align:center” style="text-align:right”

Atributo font Além de todos os atributos para se escrever textos no HTML, há o mais útil de todos, o atributo font. Nele pode conter a formatação de letra, tamanho e cor.

Por Exemplo:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#0000FF"> <font color="#AA0000" face="arial" size="12">Onde Face é a letra, Size, é o tamanho da letra e color é a cor da letra</font> </BODY> </HTML>



Comentário

Para se fazer um comentário em uma página HTML utiliza-se “<!-- --!>” . Com o objetivo de que o texto escrito não seja exibido na área gráfica, mas que seja somente informativo ao código com intuito de manter o entendimento e a organização do mesmo.

Por Exemplo:

<HTML> <HEAD> <TITLE>Página vazia</TITLE> </HEAD> <BODY> <!--Você adiciona esse comentário em qualquer parte do seu código, e ele não será exibido na área gráfica --!> </BODY> </HTML>




Estilos de caracteres

Você pode no HTML, formatar uma palavra, frase ou letra, como negrito, itálico, sublinhado, subscrito e sobrescrito.

Para isso, usa-se os comandos:

Formatação Comando

Negrito <B></B>

Itálico <I></I>

Sublinhado <U></U>

Subscrito <SUB></SUB>

Sobrescrito <SUP></SUP>


Estilos de caracteres

Por Exemplo:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#003300"> Esse é o texto, e essa palavra está em <B>Negrito</B>, essa está em <I>Itálico</I>, essa <U>sublinhada</U>, essa <SUB>subscrita</SUB>, e essa SUP>sobrescrita</SUP> </HTML> No navegador aparece o seguinte:


Listas

As listas são muito úteis pois servem para organizar assuntos em tópicos, números, ou menus. O exemplo de LISTA abaixo descreve a tag <OL>, no qual define uma lista numerada, e a tag <LI>, é a tag que define os itens da lista. Exemplo:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#003300"> <OL> <LI>Introdução <LI>Dedicatória <LI>Capitulo 1 </OL> </BODY> </HTML>



Listas

O exemplo de LISTA abaixo descreve a tag <UL> que tem como objetivo definir uma lista não-ordenada, ou seja, somente por tópicos Exemplo:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#003300"> <UL> <LI>Introdução <LI>Dedicatória <LI>Capitulo 1 </UL> </BODY> </HTML>



Listas

Nesta estrutura são utilizadas 3 tags: dl (definition list), dt (definition term) e dd (definition description). Exemplo:

<HTML> <HEAD> <TITLE>Primeira Página </TITLE> </HEAD> <BODY text="#003300"> <DL> <DT>Introdução</DT> <DD>Aqui vai a introdução do livro</DD> <DT>Dedicatória</DT> <DD>Aqui vai a dedicatória do livro</DD> </DL> </BODY> </HTML>


Em uma página HTML, imagens são essenciais. Para inserir imagens, basta que ela seja de preferência GIF, ou JPG, não é obrigatório, mas recomenda-se o uso de imagens GIF, apenas para botões e ícones, pois ela possui uma definição de apenas 256 cores e o uso de imagens JPG, para a inserção de imagens fotográficas, pois ela possui uma definição de 16,7 milhões de cores.


Imagens

TAG img

Na tag imagem, pode-se definir o tamanho, o alinhamento, a borda e outros.

Exemplo:

<img src=”foto.jpg”>, onde foto.jpg, é o nome da imagem.

ou

<img src=”c:\foto.jpg”>, onde “c:\” é a localização da imagem, e foto.jpg, é o nome da imagem.


Imagens

Exemplo

<HTML> <HEAD> <TITLE>Inserindo imagens</TITLE> </HEAD> <BODY> <p style="text-align:center"><FONT FACE="Tahoma" SIZE="20" COLOR="blue"> Essa é a FOTO !!!</FONT></p> <img src="foto.jpg"> </BODY> </HTML> No navegador aparece o seguinte:


Imagens

Para corrigir isso, há os atributos HEIGHT e WIDTH, que significam altura e largura respectivamente.

Exemplo:

<HTML> <HEAD> <TITLE>Redimensionando imagens</TITLE> </HEAD> <BODY> <p style="text-align:center"><FONT FACE="Tahoma" SIZE="20" COLOR="blue"> Essa é a FOTO !!!</FONT></p> <img src="foto.jpg" height=150 width=150> </BODY> </HTML> No navegador aparece o seguinte:


Imagens

Para o deslocamento da imagem na tela para direita, por exemplo, você pode utilizar o comando align.

Exemplo: (Trocando a linha anterior...) <img src="foto.jpg" align=right width=“150" height=“150">


É possível adicionar borda a imagem. Exemplo: (Trocando a linha anterior...) <img src="foto.jpg" align=left width=150 height=150 border=15>


Imagens


Para fazer o deslocamento espacial da imagem em X e Y utiliza-se os atributos hspace (para horizontal) e vspace (para vertical) em pixels.

Exemplo:

<HTML> <HEAD> <TITLE>Deslocando a imagem em X e Y</TITLE> </HEAD> <BODY> <p style="text-align:center"><FONT FACE="Tahoma" SIZE="20" COLOR="blue"> Essa é a FOTO !!!</FONT></p> <img src="foto.jpg" align=left width=200 height=200 hspace=510 vspace=20> </BODY> </HTML>


Imagens


CARREGANDO VÍDEOS NO HTML <html> <body> <embed src="music.mp4" width="320" height="240" hspace="210"> <embed src="music.mp4" width="320" height="240" hspace="710" style="margin-top:20px; margin-right:2px; margin-bottom:3px; margin-left:10px;"> </body> </html>

INTRODUÇÃO AO HTML

Documents