Introdução à Criação de Páginas Web usando HTML: Tags e Cores, Notas de estudo de Informática

Baixe Introdução à Criação de Páginas Web usando HTML: Tags e Cores e outras Notas de estudo em PDF para Informática, somente na Docsity!

Tutorial Básico

de HTML

Title

A TAG Title vai dizer qual título aparecera na barra de nomes no topo da página; do contrario aparecerá apenas o endereço da página.

A Tag Meta

As tag’s Meta são utilizadas por sites de busca como o Google®^ e o Cadê?®. Através delas você irá descrever alguns comentários sobre sua pagina. Fará uma pequena descrição sobre seu site. Ex. . Com esta tag você colocará a(s) palavra(s) chave(s). Ex. . Indica qual é o author de sua pagina. Ex. . Indica o Idioma a ser utilizado na página. Ex. . Redireciona sua página para uma página secundária, um outro Site ou para algum arquivo como uma foto. Ex. , onde 2 é o tempo em segundos que a página vai demorar até redirecionar e URL é para onde o site será redirecionado.

BODY

A Tag BODY fará algumas configurações no corpo de sua pagina. Ela é quem diz a cor do plano de fundo, a cor dos links, entre outras coisinhas.

ELEMENTOS BODY

BGCOLOR – Determina a cor do Plano de Fundo da pagina. LINK – Determina a cor do Link que aparecerá na pagina ALINK – Determina a cor que aparecera quando o link for clicado VLINK – Determina a cor que aparecera no link após ser clicado. BACKGROUND – Se você for por uma imagem como plano de fundo deve usar este elemento de BODY no lugar de bgcolor. LEFTMARGIN – margem esquerda da página(no MS Internet Explorer). TOPMARGIN – margem superior da página(no MS Internet Explorer). MARGINHEIGHT – margem superior(no Netscape). MARGINWIDTH – margem esquerda(no Netscape). EX.

Parágrafo

Para iniciar um parágrafo utilizamos a Tag P.

Minha Primeira Página

• Aplica o estilo sublinhado (nem todos os browser o reconhecem). Ex. texto sumblinhado
• Faz com que o texto fique sobrescrito. Ex. Texto sobrescrito
• Faz com que o texto fique subscrito. Ex. texto subscrito
• Aumenta a fonte e atribui negrito. Ex. Texto GRANDE
• Reduz e altera a fonte. Ex. TEXTO pequeno
• Aplica um espaçamento regular ao texto. Ex. Texto com espaçamento regular

TITULOS E SUBTITULOS

Estas Tag’s são utilizadas para dar ao leitor uma visão geral sobre o que se trata o texto em questão. Estas tags apresentam seis níveis de títulos que são numerado de 1 a 6 por ordem de importância. (1 - Titulo principal, - 2 titulo secundário, 3 – subtítulo...) Ex. Este é o meu titulo principal Este é meu titulo secundário Este é o meu subtítulo

Quebras de Linha

São utilizadas para escreverem textos em linhas diferentes, mas em um mesmo parágrafo, como num poema, versos em linha diferentes, mas numa mesma estrofe. EX.

Este é meu texto em cima
Este é meu texto embaixo

A TAG DIV

Ela permite o alinhamento horizontal de qualquer elemento em uma página. Esta TAG é muito utilizada em DHTML pela propriedade de agrupar elementos de página. Ex. Este texto está alinhado no centro.

A TAG HR

Insere uma linha horizontal no Browser. EX.

Onde: ALIGN="posição": pode ser left, center e rigth; WIDTH="n%": define a largura da linha, pode ser definida em pixels ou em percentagem do tamanho horizontal da tela; SIZE="n": define a espessura da barra, em pixels; NOSHADE: define que a barra não deve ser com efeito 3D; COLOR="#RRGGBB": define a cor da barra. (MS Internet Explorer).

Criando Links

Existem dois tipos de links: 1º - Para páginas Externas 2º - Para paginas Internas, chamados de âncoras. Criando um Link Externo: Texto mostrando o Link(ex. “Clique aqui”)

Ex.

Inserindo Imagens

Para inserir imagens numa WebPage vamos utilizar a Tag IMG. Ex.

Configurando a Imagem

Após inserirmos a imagem temos de configurá-la. Não é necessário, mas você pode utilizar para deixar a sua imagem ao seu gosto. Utilizamos as seguintes Tag’s a partir de IMG SRC:

Minha Primeira Página

Este é o meu primeiro título

Este é o meu primeiro parágrafo em HTML

Este é o meu segundo parágrafo
E esta é minha primeira quebra de linha.

Google Voltar para o primeiro parágrafo

Width – A partir dela informamos a largura da imagem. Se não for configurada a imagem será inserida no seu tamanho original. Height – Com ela, informamos a altura. Quando não é informada mantém também sua altura original. Border – Cria e configura o tamanho da borda da figura. Align – Alinha a imagem em relação ao texto. Temos três tipos de alinhamento. Top – Alinha o texto paralelamente ao topo da Imagem. Middle – Alinha o texto no centro da Imagem. Bottom – Alinha o texto paralelamente à base da imagem. Alt – É uma tag em que você insere um texto alternativo, para que se no caso o browser não abrir a imagem o texto aparecerá no lugar. Exemplo:

Minha Primeira Página

Este é o meu primeiro título

Este é o meu primeiro parágrafo em HTML

TABELAS

As Tabelas servem para deixar mais organizados os dados disponíveis em sua pagina.

Criando tabelas

Para criar tabelas simples, vamos fazer da seguinte maneira:

As tag’s Table e /Table servem para indicar inicio e fim de tabela. TR define cada linha de cada tabela. TH Define o cabeçalho da Tabela. É uma célula da tabela. TD Define os dados da Tabela.

Melhorando a Tabela Agora vamos melhorar a aparência da tabela inserindo Tag’s BORDER: espessura da borda em pixels. BOREDERCOLOR: especifica a cor da borda da tabela WIDTH: especifica a largura da tabela em relação ao browser, em pixels ou %; HEIGHT: especifica a altura da tabela em relação ao browser, em pixels ou %; CELLSPACING: especifica o espaço entre uma célula e outra, em pixels; CELLADDING: especifica o espaço entre os dados e a borda da tabela, em pixels; BGCOLOR: cor de fundo das células da tabela.

Cabeçalho da Tabela Dados da Tabela

Atributos Individuais

Vamos agora configurar individualmente cada célula. ALIGN: alinha do conteúdo da célula ou das células da linha. Valores: right, left, center. BGCOLOR: define a cor de fundo das células da linha ou de uma célula individual; VALIGN: alinhamento vertical de uma célula ou de células de uma linha; Pode ser top, middle ou bottom. WIDTH: largura de uma célula em pixels ou %; NOWRAP: indica ao browser que o texto da célula não pode ser dividido em mais de uma linha. A coluna inteira terá o tamanho do texto escrito naquela célula;

Células Mescladas Para mesclar as células vamos atribuir à Tag TD os seguintes atributos: COLSPAN: Será o numero de colunas que a célula ocupara.

ROWSPAN: Será o numero de linhas que a célula ocupara.

Célula 1

Frames

Frames são divisões de uma pagina em HTML. Ela é composta de uma pagina principal e diversas outras divisões, compostas por outras paginas. Na pagina principal você insere as outras paginas em colunas ou linhas, sendo que você identifica o tamanho que cada uma deve ter. É necessária cautela ao pôr frames, pois se você não souber como organizá- las, sua pagina perdera todo o sentido. No entanto, elas podem ser muito úteis para criação de menus em sua pagina. Para criar as frames vamos usar duas Tag’s: FRAMESET: Indica como vai ser sua Frame, se vai ser Horizontal ou vertical. ROWS: Com este tipo, a frame ficará na horizontal. COLS: As Frames ficarão verticalmente. Quando você for configurar frame terá que dar valores de tamanhos para elas, preferencialmente em % para ficar mais fácil de configurar.

Note que colocamos uma parte que vem ser o menu com 16% da pagina, os outros 84% foram embutidos no asterisco, após a virgula. Agora vamos ver o atributo SRC da tag FRAME. No quadro acima você pode ver que inserimos dois arquivos: “menu.html” e “texto.html” e damos nomes à elas. Os nomes são muito importantes para que quando for abrir um link na outra frame coloque o atributo target e o nome da frame. Exemplo: Os atributos Noresize e Scrollolling, servem respectivamente para não deixar modificar o tamanho da frame e nem que apareça a barra de rolagem nela.

Inserindo Caracteres Principais

Alguns caracteres como o “Ç” e letras acentuadas, como o “ê” ou o “ã”, não fazem parte do dicionário inglês, e então não podem ser inseridas diretamente. É necessária a utilização de códigos para que o Ç seja criado e as letras acentuadas sejam crias. Abaixo segue uma tabela com estes códigos.

Caractere Código Caractere Código

Ç Ç ç ç

  â â

à à ã ã

Á Á á á

À À à à

Ê Ê ê ê

Í Í í í

Ó Ó ó ó

Ô Ô ô ô

Õ Õ õ õ

Ú Ó ú ú

Ü Ü ü ü

< < > >

" " & &

Ø Ø ø ø

Temos também os nomes aceitos em HTML

Outras Tabelas

Tabela de Cores - Verde Aquamarine "#70DB93" Forest Green "#238E23" Green Yellow "#93DB70" Spring Green "#00FF7F" Dark Green "#2F4F2F" Dark Green Copper "#4A766E" Dark Olive Green "#4F4F2F" Lime Green "#32CD32" Green Copper "#527F76" Hunter Green "#215E21" "#9F9F5F" Khaki Medium Aquamarine "#32CD99" Medium Forest Green "#6B8E23" Medium Sea Green "#426F42" Medium Spring Green "#7FFF00" Pale Green "#8FBC8F" Sea Green "#238E68" Yellow Green "#99CC32"

Tabela de Cores - Marrom Baker's Chocolate "#5C3317" "#A62A2A" Brown Dark Brown "#5C4033" "#97694F" Dark Tan

Dark Wood "#855E42" Feldspar "#D19275" Firebrick "#8E2323"

Light Wood "#E9C2A6" Medium Wood "#A68064" New Tan "#EBC79E" Semi-Sweet Chocolate "#6B4226" Sienna "#8E6B23" "#DB9370"^ Tan^ Very Dark Brown "#5C4033"

aqua black blue fuchsia

gray green lime maroon

navy olive purple red

silver teal white yellow

Tabela de Cores - Violeta Blue Violet "#9F5F9F" Dark Orchid "#9932CD" Dark Purple "#871F78" Dusty Rose "#856363" Indian Red "#4E2F2F" Maroon "#8E236B" Violet "#4F2F4F" Medium Orchid "#9370DB" Medium Violet Red "#DB7093" Neon Pink "#FF6EC7" Orchid "#DB70DB" Pink "#BC8F8F" Plum "#EAADEA" Spicy Pink "#FF1CAE" Violet Red "#CC3299" Salmon "#6F4242" Tabela de Cores - Amarelo Brass "#B5A642" Bright Gold "#D9D919" Bronze "#8C7853" Bronze II "#A67D3D" Cool Copper "#D98719" "#B87333" Copper "#FF7F00" Coral "#CD7F32" Gold

Goldenrod "#DBDB70" Mandarian Orange "#E47833"^ Medium Goldenrod "#EAEAAE"^ Old Gold "#CFB53B" Orange "#FF7F00" Orange Red "#FF2400" Scarlet "#8C1717" Wheat "#D8D8BF" Tabela de Cores - Azul Cadet Blue "#5F9F9F" Corn Flower Blue "#42426F" Dark Slate Blue "#6B238E" Dark Turquoise "#7093DB" Light Blue "#C0D9D9" Light Steel Blue "#8F8FBD" Medium Blue "#3232CD" Medium Slate Blue "#7F00FF" Medium Turquoise "#70DBDB" Midnight Blue "#2F2F4F" Navy Blue "#23238E" Neon Blue "#4D4DFF" New Midnight Blue "#00009C" Rich Blue "#5959AB" Sky Blue "#3299CC" Slate Blue "#007FFF" Steel Blue "#236B8E" Summer Sky "#38B0DE" Thistle "#D8BFD8" Turquoise "#ADEAEA" Tabela de Cores - Cinza Dark Slate Grey "#2F4F4F" Dim Grey "#545454" Grey "#C0C0C0" Light Grey "#A8A8A8" Quartz "#D9D9F3" Silver "#E6E8FA" Very Light Grey "#CDCDCD"