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, e . Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. 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:



Mas, para manter a organização, recomendase, uma “configuração” padrão. Por exemplo:

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.



Para se colocar um título na página, é necessário digitar as tags e , que vai fora da tag . Primeira Página

A página será exibida assim:

PRIMEIROS PASSOS NO HTML 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.

= Define a cor de fundo. No bloco de notas:

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

PRIMEIROS PASSOS NO HTML 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.

PRIMEIROS PASSOS NO HTML CORES

PRIMEIROS PASSOS NO HTML CORES

PRIMEIROS PASSOS NO HTML CORES

PRIMEIROS PASSOS NO HTML CORES

PRIMEIROS PASSOS NO HTML Atributo “background” Serve para adicionar uma imagem como pano de fundo da página HTML. background=”imagem_fundo.jpg”> = Define a imagem “Imagem_fundo.jpg”, como pano de fundo da página HTML. No bloco de notas:

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

PRIMEIROS PASSOS NO HTML TEXTOS Há vários tipos de forma de se fazer textos em páginas HTML. A mais simples delas é com a tag (x, corresponde a um número de 1 a 6, sendo 1 o maior e 6 o menor). Por Exemplo: Primeira Página Título 1 Título 2 Título 3 Título 4 Título 5 Título 6

Todos os tamanhos possíveis do “H”

PRIMEIROS PASSOS NO HTML 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. Primeira Página Título 1 Título 2

Tela do navegador mostrando a variação do heading

PRIMEIROS PASSOS NO HTML Atributo text Serve para definir a cor do texto padrão da página HTML. = Define a cor padrão de tudo aquilo que for escrito na página HTML como texto, sem configurações. Primeira Página Título em amarelo 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: Primeira Página 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

No navegador aparece o seguinte:

PRIMEIROS PASSOS NO HTML Parágrafos Para quebrar a linha, usa-se a tag , que simplesmente quebra a linha, ou a tag , que cria um parágrafo.

Por Exemplo: Primeira Página Se algum momento do texto eu quiser quebrar linha utilizo o comando "BR" para isso. Quando eu uso a tag "p" ele realiza o parágrafo logo após a determinação da tag "/p". No navegador aparece o seguinte:

PRIMEIROS PASSOS NO HTML Parágrafos A tag , ainda serve para configurar páginas. Por Exemplo:

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

Primeira Página Alinha o texto escrito para o centro da página

No navegador aparece o seguinte:

PRIMEIROS PASSOS NO HTML 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: Primeira Página Onde Face é a letra, Size, é o tamanho da letra e color é a cor da letra No navegador aparece o seguinte:

PRIMEIROS PASSOS NO HTML Comentário Para se fazer um comentário em uma página HTML utiliza-se “