Exemplo:
- Página "index.html"
<html>
<head>
<title> Minha Página </title>
<!-- Requisição do Arquivo CSS que controlará a apresentação da página -->
<link rel="StyleSheet" type="Text/CSS" href="estilo.css">
</head>
<body>
<!--Aqui está o corpo da minha página-->
<div id="tudo">
<div id="topo">
<h1> Titulo </h1>
</div>
<div id="meio">
<div id="menu">
<a href="index.html">Home</a>
<a href="produtos.html">Produtos</a>
<a href="servicos.html">Serviços</a>
<a href="localizacao.html">Localização</a>
<a href="contato.html">Contato</a>
</div>
<div id="conteudo">
Conteúdo da página
</div>
</div>
<div id="rodape">
Rodape
</div>
</div>
<!--O corpo da minha página termina aqui-->
</body>
</html>
domingo, 26 de junho de 2011
segunda-feira, 20 de junho de 2011
Linkando O Arquivo .CSS Em Sua Página HTML
Ultilizaremos o elemento "Link" com os seguintes atributos:
REL - Valor > "StyleSheet"
TYPE - Valor > "Text/CSS"
HREF - Valor > Caminho e o nome do arquivo CSS.
Exemplo:
<html>
<head>
<title> Minha Página </title>
<link rel="StyleSheet" type="Text/CSS" href="estilo.css">
</head>
<body>
<!--Aqui está o corpo da minha página-->
Estou no blog do Charles WD criando minha primeira página em HTML e CSS.
<br>
Criar páginas em HTML e CSS é mais fácil do que eu imaginava.
<!--O corpo da minha página termina aqui-->
</body>
</html>
REL - Valor > "StyleSheet"
TYPE - Valor > "Text/CSS"
HREF - Valor > Caminho e o nome do arquivo CSS.
Exemplo:
<html>
<head>
<title> Minha Página </title>
<link rel="StyleSheet" type="Text/CSS" href="estilo.css">
</head>
<body>
<!--Aqui está o corpo da minha página-->
Estou no blog do Charles WD criando minha primeira página em HTML e CSS.
<br>
Criar páginas em HTML e CSS é mais fácil do que eu imaginava.
<!--O corpo da minha página termina aqui-->
</body>
</html>
Introdução ao CSS
Problemas do HTML
Grande dificuldade no momento de atualizar o site. Imagine-se tendo que alterar a cor dos títulos de um site da cor vermelha para a cor azul:
Neste exemplo você teria para cada título um bloco de código assim:
<hn>
<font color="red">
Titulo
</font>
</hn>Então deveria alterar o atributo color de cada um dos títulos.
Suponha então que você tenha 3 títulos para cada página de seu site, e que em seu site você tenha 50 páginas, sendo assim teria 150 tags diferentes para alterar os valores. E se para melhor se adequar aos títulos tivesse que alterar a cor dos textos das páginas?
Solução Proposta
Separar a estrutura da apresentação.
Para Que Serve o CSS?
- Controle Absoluto da Aparência do site:
Você gera um arquivo onde ele controlará toda a apresentação de seu site.
- Permitir Uma Rápida Atualização de Um Grande Site:
Para realizar uma atualização na aparência do site basta fazer as modificações necessárias no arquivo CSS que todo o site será atualizado.
- Como funciona:
Você ultilizará o HTML apenas para criar a estrutura de seu site, e todas as suas páginas farão a requisição de um mesmo arquivo CSS, onde este arquivo definirá toda a apresentação de suas páginas.
Grande dificuldade no momento de atualizar o site. Imagine-se tendo que alterar a cor dos títulos de um site da cor vermelha para a cor azul:
Neste exemplo você teria para cada título um bloco de código assim:
<hn>
<font color="red">
Titulo
</font>
</hn>Então deveria alterar o atributo color de cada um dos títulos.
Suponha então que você tenha 3 títulos para cada página de seu site, e que em seu site você tenha 50 páginas, sendo assim teria 150 tags diferentes para alterar os valores. E se para melhor se adequar aos títulos tivesse que alterar a cor dos textos das páginas?
Solução Proposta
Separar a estrutura da apresentação.
Para Que Serve o CSS?
- Controle Absoluto da Aparência do site:
Você gera um arquivo onde ele controlará toda a apresentação de seu site.
- Permitir Uma Rápida Atualização de Um Grande Site:
Para realizar uma atualização na aparência do site basta fazer as modificações necessárias no arquivo CSS que todo o site será atualizado.
- Como funciona:
Você ultilizará o HTML apenas para criar a estrutura de seu site, e todas as suas páginas farão a requisição de um mesmo arquivo CSS, onde este arquivo definirá toda a apresentação de suas páginas.
quinta-feira, 2 de junho de 2011
Criando link em suas páginas
Elemento e Atributos ultilizado
A - O elemento responsável por criar o link.
- HREF - Atributo ultilizado para dizer qual é o caminho do link(pode informar aqui um arquivo para download ou outra pagina em html para ser exibida).
- TITLE - Mensagem que aparecerá ao colocar o mouse em cima do link
Exemplo:
-Página Inicial
<html>
<head>
<title> Minha Página </title>
</head>
<body>
<!--Aqui está o corpo da minha página-->
<head>
<title> Minha Página </title>
</head>
<body>
<!--Aqui está o corpo da minha página-->
<h1>Página 1</h1>
<hr>
<a href="pagina2.html">Proxima página</a>
<a href="pagina2.html">Proxima página</a>
<hr>
Criei esta página para praticar o uso de link
Criei esta página para praticar o uso de link
<hr color="white">
<!--O corpo da minha página termina aqui-->
</body>
</html>
<!--O corpo da minha página termina aqui-->
</body>
</html>
Salve este arquivo com o nome de "index.html"
-Página Secundária
<html>
<html>
<head>
<title> Minha Página </title>
</head>
<body>
<!--Aqui está o corpo da minha página-->
<title> Minha Página </title>
</head>
<body>
<!--Aqui está o corpo da minha página-->
<h1>Página 2</h1>
<hr>
<a href="index.html" title="Voltar para a página inicial">Home</a>
<a href="index.html" title="Voltar para a página inicial">Home</a>
<hr>
Criei esta página com a mesma finalidade da página anterior
Criei esta página com a mesma finalidade da página anterior
<hr color="white">
<!--O corpo da minha página termina aqui-->
</body>
</html>
<!--O corpo da minha página termina aqui-->
</body>
</html>
Salve este arquivo com o nome de "pagina2.html"
Criando Tabelas
Elementos e Atributos para criação de tabela
TABLE - Elemento responsável pela criação da tabela
- BGCOLOR - Cor do fundo da tabela
- BACKGROUND - Plano de fundo da tabela
- BORDER - Borda da tabela, onde "0" é sem borda
- WIDTH - Largura da tabela, podendo o valor ser em porcentagem(% da página)
- HEIGHT - ALTURA da tabela, podendo o valor ser em porcentagem(% da página)
- BGCOLOR - Cor do fundo da linha
- BACKGROUND - Plano de fundo da linha
- HEIGHT - ALTURA da linha, podendo o valor ser em porcentagem(% da tabela)
- BGCOLOR - Cor do fundo da celula
- BACKGROUND - Plano de fundo da celula
- WIDTH - Largura da celula, podendo o valor ser em porcentagem(% da tabela)
- HEIGHT - ALTURA da celula, podendo o valor ser em porcentagem(% da tabela)
- ALIGN - Alinhamento horizontal na célula
- VALIGN- Alinhamento vertical na célula
<table border="1">
<tr>
<td> Celula 1 </td>
<td> Celula 2 </td>
</tr>
<tr>
<td> Celula 3 </td>
<td> Celula 4 </td>
</tr>
</table>
Entendendo...
quarta-feira, 1 de junho de 2011
Alguns Elementos e Seus Atributos - Exemplos
<html>
<head>
<title> Minha Página </title>
</head>
<body bgcolor="#CCCCCC">
<!--Aqui está o corpo da minha página-->
<hr>
<h1 align="right"> Charles WD </h1>
<hr>
<p align="center">
<font color="white" size="2" face="Times New Roman">
Estou no blog do Charles WD criando minha terceira página em HTML.
</font>
<br>
<img src="pastaondeestaaimagem/nome.jpg" width="400" height="250">
<br>
Esta página que criei possui:
<ul>
<li> Linhas Horizontais </li>
<li> Cabeçalho no corpo </li>
<li> Imagem </li>
<li> Marcador de texto não numerado </li>
<li> Cor no fundo da página </li>
<li> Fonte Alterada </li>
<li> E texto Alinhado</li>
</ul>
</p>
<hr color="white">
<!--O corpo da minha página termina aqui-->
</body>
</html>
<head>
<title> Minha Página </title>
</head>
<body bgcolor="#CCCCCC">
<!--Aqui está o corpo da minha página-->
<hr>
<h1 align="right"> Charles WD </h1>
<hr>
<p align="center">
<font color="white" size="2" face="Times New Roman">
Estou no blog do Charles WD criando minha terceira página em HTML.
</font>
<br>
<img src="pastaondeestaaimagem/nome.jpg" width="400" height="250">
<br>
Esta página que criei possui:
<ul>
<li> Linhas Horizontais </li>
<li> Cabeçalho no corpo </li>
<li> Imagem </li>
<li> Marcador de texto não numerado </li>
<li> Cor no fundo da página </li>
<li> Fonte Alterada </li>
<li> E texto Alinhado</li>
</ul>
</p>
<hr color="white">
<!--O corpo da minha página termina aqui-->
</body>
</html>
Alguns Elementos e Seus Atributos
FONT
- FACE - Tipo de Fonte. O valor que esse atributo receberá é o nome da fonte desejada(com espaço, se tiver).
- COLOR - Cor da Fonte. Valor: O nome(em inglés) ou o Código em Hexadecimal correspondente a cor desejada.
- SIZE - Tamanho da fonte. Valor: Números de 1 a 7, onde 7 corresponde ao maior tamanho.
- COLOR - Cor da Linha
- SIZE - Tamanho da linha
- BGCOLOR - Cor do fundo da página
- BACKGROUND - Adiciona uma imagem como plano de fundo. Valor: O caminho da imagem(se a mesma não estiver no mesmo diretório que seu arquivo em HTML), nome da imagem e sua extenção.
- SRC - Atributo esponsável por indicar qual será a imagem exibida. Valor: O caminho da imagem(se a mesma não estiver no mesmo diretório que seu arquivo em HTML), nome da imagem e sua extenção.
- WIDTH - Define o tamanho horizontal da imagem. Valor: número em pixels correspondente ao temanho desejado
- HEIGHT - Define o tamanho vertical da imagem. Valor: número em pixels correspondente ao temanho desejado
- BORDER - Define a borda da imagem. Valor: Número correspondente a borda desejada(0 é sem borda).
- ALIGN - Alinha o texto dento do cabeçalho. Valores: nome da posição desejada(em ingles: Left, Center ou Right).
- ALIGN - Alinha o texto dento do cabeçalho. Valores: nome da posição desejada(em ingles: Left, Center ou Right).
- TYPE - Tipo do marcador. Valores: "disc", "circle" ou "square".
- TYPE - Tipo do marcador. Valores: "A", "a", ou "i".
Elementos e Atributos
No HTML usamos as TAGs(Etiquetas de Markup) para definir os elemento, todas as TAGs são escritas com os sinais "<" e ">" em volta do nome do elemento e de todos os seus atributos. A maioria dos elementos possuem as TAGs de "abertura" e de "finalização" e todas as TAGs de finalização possuem a "/"(barra) entre o sinal "<" e o nome da TAG.
Ex.: <body> - Abertura do corpo da página.
</body> - Finalização do corpo da página.
Os atributos servem para termos a opção de personalizar nossos elementos, com objetivo de ter um melhor resultado estético. Todos os atributos são inseridos entre o nome da TAG e o sinal ">" tendo um pegueno espaço entre o nome da TAG e o atributo ou entre cada atributo, seguido do sinal de "=" e entre aspas duplas( " ) o valor que o atributo estará recebendo.
Ex.: Corpo da página com o fundo azul.
Atributo: "bgcolor";
Valor do atributo: A cor que deseja aplicar como cor de fundo da página.
<body bgcolor="#0000FF"> ou <body bgcolor="blue">
Ex.: <body> - Abertura do corpo da página.
</body> - Finalização do corpo da página.
Os atributos servem para termos a opção de personalizar nossos elementos, com objetivo de ter um melhor resultado estético. Todos os atributos são inseridos entre o nome da TAG e o sinal ">" tendo um pegueno espaço entre o nome da TAG e o atributo ou entre cada atributo, seguido do sinal de "=" e entre aspas duplas( " ) o valor que o atributo estará recebendo.
Ex.: Corpo da página com o fundo azul.
Atributo: "bgcolor";
Valor do atributo: A cor que deseja aplicar como cor de fundo da página.
<body bgcolor="#0000FF"> ou <body bgcolor="blue">
Negrito, Itálico e Sublinhado
Para esses estilos de fonte a formatção é muito simples, basta apenas escrever seu texto entre os elementos que delimitão a formatação desejada. Para identificar o elemento, basta saber o nome do elemento em inglés e ultilizar a tag com a primera letra do nome, e para especificar onde a formatação termina, é só colocar uma barra antes do nome da tag (ex.: <tag>Texto</tag>).
Traduções:
Negrito > Bold
Itálico > Italic
Sublinhado > Underline
Exemplo:
<html>
<head>
<title> Minha Página </title>
</head>
<body>
<!--Aqui está o corpo da minha página-->
Estou no blog do Charles WD criando minha segunda página em HTML.
<br>
Esta postagem me ensinou a deixar meu texto em:
<br>
<b>Negrito</b><br>
<i>Itálico</i><br>
<u>Sublinhado</u><br>
Aqui abaixo tenho todos os estilos juntos.
<br>
<b><i><u>Todos os Estilos</u></i></b>
<!--O corpo da minha página termina aqui-->
</body>
</html>
Salve o seu arquivo como "index.html".
Traduções:
Negrito > Bold
Itálico > Italic
Sublinhado > Underline
Exemplo:
<html>
<head>
<title> Minha Página </title>
</head>
<body>
<!--Aqui está o corpo da minha página-->
Estou no blog do Charles WD criando minha segunda página em HTML.
<br>
Esta postagem me ensinou a deixar meu texto em:
<br>
<b>Negrito</b><br>
<i>Itálico</i><br>
<u>Sublinhado</u><br>
Aqui abaixo tenho todos os estilos juntos.
<br>
<b><i><u>Todos os Estilos</u></i></b>
<!--O corpo da minha página termina aqui-->
</body>
</html>
Salve o seu arquivo como "index.html".
Sua Página Básica - Primeira página
Elementos Principai
HTML - Especifica o arquivo que está sendo criadoHEAD - Define o cabeçalho do seu arquivo
TITLE - Define o título da sua página(texto que aparecerá em sua barra de títulos).
BODY - Definirá o corpo de sua página, tudo que estiver entre as tags "<body>" e "</body>" está visivel no navegador.
Todas essas tags terão o seu começo e o seu fim espécificados
Para adicionar comentários ao seu código HTML basta escrever o texte desejado entre "<!--" e "-->", dessa maneira você poderá relembrar alguns conseitos somente em olhar novamente o seu código HTML, e também no caso de uma página com o código muito grande poder identificar rapidamente a finalidade de cada bloco de código.
Quebra de linha(Passar o texto para linha abaixo)
Basta ultilizar a tag "<br>" onde deseja quebrar a linha.
Exemplo:
<html>
<head>
<title> Minha Página </title>
</head>
<body>
<!--Aqui está o corpo da minha página-->
Estou no blog do Charles WD criando minha primeira página em HTML.
<br>
Criar páginas em HTML é mais fácil do que eu imaginava.
<!--O corpo da minha página termina aqui-->
</body>
</html>
Salve o seu arquivo como "index.html".
index - É a sua página inicial, quando tiver o seu site hospedado em um servidor, esta será a primeira
página a ser aberta ao entrar em seu site.
.html - É o tipo de arquivo criado.
Assinar:
Comentários (Atom)