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 QUETAG COMEÇA ETERMINA UMA
PÁGINAWEB?
 COM QUETAG COMEÇA ETERMINAO CORPO
UMA PÁGINAWEB?
 QUAL ATAG DUM CABEÇALHO?QUANTAS ?
 DIGA ASTAGS 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 ATAG PARA INSERIR LINHA HORIZONTAL?
 QUAL ATAG PARA INSERIR UMA IMAGEM?
 QUAL ATAG PARA CENTRAR CONTEÚDO?
 QUAL O FORMATO DE IMAGENS QUE JÁ
CONHECE E PODE INSERIR NA PÁGINAWEB?
 QUAL ATAG QUE PERMITE INSERIR UM PAINEL
ROLANTE?
 QUAL O FORMATO DUMA IMAGEMANIMADA ?
 QUAL ATAG 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 daTag <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 DATAG BODY?
 QUAL ATAG PARATRABALHAR COMTEXTO?
 QUAL ATAG PARA INSERIR HIPERLIGAÇÃO?
 QUAL O ATRIBUTO DATAG BODY QUE PERMITE
COLOCAR UMA IMAGEM COMO FUNDO?
 O QUE ACONTECE À IMAGEM DO FUNDO QUANDO
ELA É PEQUENA?
 QUAL O ATRIBUTO DATAG FONT PARA DEFINIR O
TIPO DE LETRA?
 QUAL O ATRIBUTO DATAG 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 umaTAG para um
parágrafo ou para uma nova linha.
Para um parágrafo sabe que tem de usar aTAG
<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 aTAG <BR> estará fazendo
uma nova linha, que também não deixa de ser um parágrafo.

IMAGENS NA PÁGINA WEB:
 ATAG 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.

COLOCAR LINKS NAS PÁGINAS
 ATAG 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 pelasTags
 <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 asTags 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
documentosWeb. 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 documentosWeb;
 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>

 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
ouTAG.

 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>

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.

Criação de sites

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Criação de sites

Ähnlich wie Criação de sites (20)

Mehr von Kundan Narendra

Mehr von Kundan Narendra (6)

Criação de sites