Criação de sites

CRIAÇÃO DE SITES

HTML ESCRITA E EDIÇÃO CÓDIGO TESTAR AS PÁGINAS

HTML – O QUE É?

HTML é a "língua mãe" do seu BROWSER.

Resumindo uma longa história, HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee.

HTML é a abreviatura de "HyperText Mark-up Language"

O QUE É PRECISO ?

Com um “BLinhaSER“, que é um programa que permite visualizar e navegar por páginas na Internet.

E, já deve ter ouvido falar de programas como, Microsoft FrontPage, Adobe Dreamweaver ou mesmo Microsoft Word, que podem criar websites.

Você precisará de um simples editor de textos. Se você tem instalado o Windows, poderá usar o Bloco de Notas, que normalmente pode ser encontrado no menu Programas Acessórios.

Preciso estar online?

Não. Não precisa de estar on-line.

Pode criar e testar as Páginas Web no seu PC.

Mas, para isso depois de escrever o Código HTML, tem de guardar o ficheiro

com a extensão .htm ou .html.

O que são tags HTML?

Tags são rótulos (ou Marcas) usados para informar ao BLinhaser como deve ser apresentado o website.

Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".

Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fecho: </comando>.

A diferença entre elas é que na tag de fecho existe um barra "/".

O que são tags HTML?

Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.

Mas existem também Tags isoladas - isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />.

HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.

Exemplos tags HTML

<b>Este texto deve ser em Negrito.</b>

<i>Este texto deve ser em Itálico.</i>

<h1>Este é um título</h1>

<h2>Este é um sub título</h2>

REVISÕES DA MATÉRIA DADA

O QUE É HTML?

DE QUE É CONSTÍTUIDA HTML?

COM QUE TAG COMEÇA E TERMINA UMA PÁGINA WEB?

COM QUE TAG COMEÇA E TERMINA O CORPO UMA PÁGINA WEB?

QUAL A TAG DUM CABEÇALHO? QUANTAS ?

DIGA AS TAGS DE:

NEGRITO; ITÁLICO E SUBLINHADO

Onde devo colocar todas estas tags?

Você deve escrever as tags num documento HTML.

Um website é constituído por um ou mais documentos HTML.

Quando se navega na Web, você está abrindo diferentes documentos HTML.


QUAL A TAG PARA INSERIR LINHA HORIZONTAL?

QUAL A TAG PARA INSERIR UMA IMAGEM?

QUAL A TAG PARA CENTRAR CONTEÚDO?

QUAL O FORMATO DE IMAGENS QUE JÁ CONHECE E PODE INSERIR NA PÁGINA WEB?

QUAL A TAG QUE PERMITE INSERIR UM PAINEL ROLANTE?

QUAL O FORMATO DUMA IMAGEM ANIMADA ?

QUAL A TAG PARA DEFINIR UM PARÁGRAFO?

Atributos da tag <Body>

Através de <BODY>, podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo. Temos então:

BGCOLOR - Cor de fundo

Outros atributos da Tag <BODY>:

TEXT - Cor da font dos textos

Atributos da tag <Body>

LINK - Cor dos links (padrão: azul)

ALINK - Cor dos links, quando clicados (padrão: vermelho)

VLINK - Cor dos Links, depois de visitados (padrão: roxo)

BACKGROUND - Imagem de fundo: Indica o URL da imagem.

Podemos definir tudo de uma só vez, colocando o seguinte código: <BODY BGCOLOR="YELLOW" TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE">

Atributos da tag <FONT>

Já sabe que a TAG FONT- permite definir o Tipo de Letra, mas eis alguns dos seus Atributos de TAMANHO E CORES DAS LETRAS :

<FONT FACE> - Define o tipo de letra

<FONT COLOR> - Define a cor da letra

<FONT SIZE> - Define o tamanho da letra Veja abaixo alguns exemplos: <FONT FACE="ARIAL" SIZE="1" COLOR="RED">Fica assim</FONT>


QUAIS SÃO OS ATRIBUTOS DA TAG BODY?

QUAL A TAG PARA TRABALHAR COM TEXTO?

QUAL A TAG PARA INSERIR HIPERLIGAÇÃO?

QUAL O ATRIBUTO DA TAG BODY QUE PERMITE COLOCAR UMA IMAGEM COMO FUNDO?

O QUE ACONTECE À IMAGEM DO FUNDO QUANDO ELA É PEQUENA?

QUAL O ATRIBUTO DA TAG FONT PARA DEFINIR O TIPO DE LETRA?

QUAL O ATRIBUTO DA TAG BODY QUE PERMITE COLOCAR UMA CÔR DE FUNDO?

COMO FAZER PARÁGRAFOS E LINHAS :

Não basta você teclar ENTER para que a linha vá para baixo. Você terá que colocar uma TAG para um parágrafo ou para uma nova linha. Para um parágrafo sabe que tem de usar a TAG <P> e para linha usar <BR> Exemplo: <P> Primeiro Parágrafo <BR> Primeira Linha<P> Segundo Parágrafo <BR> Segunda Linha Note que cada vez que você coloca a TAG <BR> estará fazendo uma nova linha, que também não deixa de ser um parágrafo.

IMAGENS NA PÁGINA WEB:

A TAG utilizada para inserir imagem é: <img src="nome da imagem+

extensão"(gif,jpg,bmp,png,etc)>

Atributos da Imagem: WIDTH - Define a largura da imagem.

HEIGHT - Define a altura da imagem. ALT - Texto que aparece quando é passado o ratosobre

a imagem BORDER - É um valor atribuído à largura do limite da

imagem (Contorno).

IMAGENS FUNDO DA PÁGINA WEB:

Para colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG <BODY>, assim:

<BODY BACKGROUND="nome da imagem+extensão">.

Quando a imagem é menor que o tamanho do ecrã, o BLinhaser duplica essa imagem tantas vezes forem necessárias para cobrir todo o espaço do ecrã.

Existem vários tamanhos do ecrã. Lembre-se: imagens grandes demoram a carregar.

CORES RGB (HEXADECIMAIS)




COLOCAR LINKS NAS PÁGINAS

A TAG PARA COLOCAR LINKS É <a> LINK </a>

EXEMPLO: < A HREF=“CAMINHO DA PÁGINA"> TEXTO</A>

Entre aspas deverá ser colocado o endereço completo URL (http://...)

Ex Site: < A HREF="http://www.kundanweb.com"> Visite o Site do Formador</A>

Ex Página: < A HREF=“mypage.htm"> Nome da Página.extensão</A>

TABELAS NUMA PÁGINA WEB:

As tabelas valorizam o Layout das páginas, pois dão harmonia e organização dos textos, imagens, listas, etc.

A tabela é representada pelas Tags

<TABLE> e </TABLE> e possui os seguintes atributos:

border="valor" -Onde o "valor" define a largura do limite (contorno).

cellspacing="valor" -Onde o "valor" define o espaço horizontal entre as células.

cellpadding="valor" -Onde o "valor" define o espaço vertical entre as células.

TABELAS NUMA PÁGINA WEB:

width="valor" -Onde o "valor" define a largura da tabela em pixels ou em percentagem. height="valor" -Onde o "valor" define a altura da tabela em pixels ou em percentagem. bgcolor="#cor" -Define a cor de fundo da tabela. bordercolor="#cor" -Define a cor do limite . background="imagem.jpg" -Define uma imagem de fundo.

A tabela possui alguns comandos que são: <TR> e </TR> -Define uma linha da tabela. <TH> e </TH> -Define um cabeçalho da tabela. <TD> e </TD> -Define a coluna de informações.

Exemplo: TABELAS

<TABLE BORDER="2" BORDERCOLOR="RED" CELLSPACING="10" CELLPADDING="6" WIDTH="50" HEIGHT="20" BGCOLOR="YELLOW" <TR> <TD> 1a.coluna </TD> <TD>2a.coluna </TD> <TD> 3a.coluna </TD> </TR> <TR> <TD> 1a.linha </TD> <TD> 1a.linha </TD><TD> 1a.linha </TD> </TABLE> </BR>

Exercício 1: TABELAS

Tabela sem linha

<table> <tr><td>Conteúdo Célula</td></tr> </table>

Tabela com linha

<table border=1> <tr><td>Conteúdo Célula</td></tr>

</table>


<table border="1"> <tr> <td>célula 1</td><td>célula 2</td> </tr> <tr> <td>célula 3</td><td>célula 4</td> </tr> </table>

Qual a diferença entre <tr> e <td>?

Como você deve ter visto no exemplo anterior as 3 tags básicas são usadas para inserir tabelas:

<table> começa e termina uma tabela. Evidente.

<tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. Também evidente.

<td> significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da

tabela. Tudo simples e evidente.


<table border="1" width="400" height="150">

<tr> <td>Linha 1, Coluna 1</td> <td>Linha 1, Coluna 2</td> </tr>

<tr> <td>Linha 2, Coluna 1</td> <td>Linha 2, Coluna 2</td> </tr> </table>


<table width="200" align="right" border="1"> <tr><th colspan="3">Exemplo célula unida!</th> </tr> <tr><td>célula1<td>

<td>célula2</td>

<td>célula3</td> </tr> </table>

CSS

Já sabe que o HTML é a linguagem utilizada para criar Páginas Web.

Vimos que formatamos as Tags localmente, até esta altura.

Isto porque as páginas que criou, são simples e que não precisam de tanta formatação..

Mas, imagine que tem um Site de 50 páginas e precisa de Formatá-las todas ao mesmo tempo !!!

O QUE HAVERIA DE FAZER ???

CSS

Aí é que entram as CSS, sigla em inglês para Cascading Style Sheet que em português foi traduzido para Folha de Estilo em Cascata.

A tarefa de estilização ficará a cargo da CSS declaradas propriedades e valores de estilização para os elementos da HTML.

Estas declarações de estilo, podem ser estruturadas num ficheiro externo com extensão .css quer sejam declaradas de outros modos (importadas, lincadas, incorporadas ou inline ), contém todas as regras de estilo para os elementos do documento HTML.

Vantagens do CSS

Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais:

controle total sobre a apresentação do site a partir de um ficheiro central;

agilização da manutenção e redesign do site; saída para diferentes tipos de media a partir de uma

versão única de HTML; redução do tempo de carga dos documentos Web; adequação simplificada aos critérios de acessibilidade e

usabilidade; elaboração de documentos consistentes com as

aplicações de utilizações futuras; aumento considerável na portabilidade dos documentos

Web.

Regras CSS

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML.

Um conjunto de regras CSS formam uma Folha de Estilos.

Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

Regras CSS

Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML.

Assim, se está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que vai usar. Vamos dar uma olhada em um exemplo concreto.

Suponha que desejamos uma cor de fundo vermelha para a página web:

Usando HTML podemos fazer assim: <body bgcolor="#FF0000"> Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;}

Regras CSS

Como você pode notar os códigos HTML e CSS são mais ou menos parecidos.

O exemplo acima serve também para demonstrar o fundamento do modelo CSS:

seletor { propriedade: valor; } Seletor: genericamente, é o

elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, etc...);

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

seletor { propriedade: valor; } Na sintaxe de uma regra CSS, escreve-se o seletor e

a seguir a propriedade e valor separados por dois pontos e entre chaves { }.

Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade quando houver mais de uma.

No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.

Exemplo 1

<html>

<head>

<style type=”text/css”>

p

{

color:blue;

text-align:center;

}

</style>

</head>

<body>

<p>Olá </p>

<p>Olá malta</p>

</body>

</html>

Exemplo 2

p {

font-size: 12px; /* ponto-e-vírgula é facultativo */

p {

text-align: right;

color: #f00;

}

p {text-align: right;color: #f00;}

Exemplo 3

h3 {

font-family: "Comic Sans MS";

}

body {

color: #000;

background: #fff;

font-weight: bold; /*ponto-e-vírgula é facultativo */

}

1- Formas de inserir CSS

1ª Forma: CSS diretamente nas tags HTML

<html ><head> <title>Seu título</title> </head>

<body>

<p style="color:#B000FF;">CSS dentro das tags HTML</p>

</body>

</html>

1ª Forma: CSS diretamente nas tags HTML

Essa forma não é recomendada pois ali está a misturar a camada de conteúdo(HTML), com a camada de apresentação(CSS).

Utilize somente em casos de extrema necessidade, ou somente para efetuar testes.


2ª Forma: CSS dentro do Head de sua página

<html >

<head> <title>Seu título</title>

<style type="text/css"> .texto {color:#B000FF;} </style>

</head> <body>

<p class="texto">Estilo chamado através do head da página</p> </body> </html>


2ª Forma: CSS dentro do Head de sua página

Nessa 2ª forma, utilizamos de classes ou ids para dar estilo a nossa página, inserindo o CSS dentro do Head da nossa página.

E, depois é invocada no respectivo objecto ou TAG.


3ª Forma: CSS dentro do Head de sua página vindo de um Ficheiro externo (estilos.css).

<html > <head>

<title>Seu título</title> <link rel=”stylesheet” type=”text/css” href=”estilo.css” /> </head> <body> <p class=”texto”>Estilo chamado através do head da página</p> </body> </html>


3ª Forma: CSS dentro do Head de sua página vindo de um Ficheiro externo (estilos.css).

Essa é a forma mais recomendada, pois o nosso CSS fica em um Ficheiro externo, e as camadas ficam todas separadas.

E, também temos a vantagem de que se precisarmos efectuar alguma manutenção no CSS, não precisaremos tocar no HTML.

Basta alterar no ficheiro .CSS e a mudança afectará o Site todo.

Ficheiro CSS externo

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas num documento à parte do documento HTML.

Uma folha de estilo externa é ideal para ser aplicada a várias páginas.

Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um Ficheiro apenas (o Ficheiro da folha de

estilo com extensão .css).


O Ficheiro css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da secção head do documento.

A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir.

<head>

<link rel="stylesheet" type="text/css" href="estilo.css">

</head>


O Browser "lerá" as regras de estilo na própria página, e formatará o documento de acordo com elas.