Bordas
1 - border-top-width: largura da borda superior.
2 - border-right-width: largura da borda direita.
3 - border-bottom-width: largura da borda inferior.
4 - border-left-width: largura da borda esquerda.
5 - border-width: largura de todas as bordas.
6 - border‐top‐color: cor da borda especificada.
7 - border‐right‐color: cor da borda direita.
8 - border‐bottom‐color: cor da borda inferior.
9 - border‐left‐color: cor da borda esquerda.
10 - border‐color: cor das 4 bordas especificada.
11 - border‐top‐style: estilo da borda superior.
12 - border‐right‐style: estilo da borda direita.
13 - border‐bottom‐style: estilo da borda inferior.
14 - border‐left‐style: estilo da borda esquerda.
15 - border‐style: : estilo em todas as bordas.
16 - border‐top: estilo na borda superior.
17 - border‐right: borda direita.
18 - border‐bottom: borda inferior.
19 - border‐left: borda esquerda.
20 – border: borda dos 4 lados.
Margens
1 - margin-top: tamanho da margem superior.
2 - margin-right: tamanho da margem direita.
3 - margin-bottom: tamanho da margem inferior.
4 - margin-left: tamanho da margem esquerda.
5 - margin: tamanho das 4 margens.
6 - padding-top: define o espaço superior dos elementos.
7 - padding-right: define o espaço direito dos elementos.
8 - padding-bottom: define o espaço inferior dos elementos.
9 - padding-left: define o espaço esquerdo dos elementos.
10 - padding: define o espaço de todos os lados dos elementos.
2 - margin-right: tamanho da margem direita.
3 - margin-bottom: tamanho da margem inferior.
4 - margin-left: tamanho da margem esquerda.
5 - margin: tamanho das 4 margens.
6 - padding-top: define o espaço superior dos elementos.
7 - padding-right: define o espaço direito dos elementos.
8 - padding-bottom: define o espaço inferior dos elementos.
9 - padding-left: define o espaço esquerdo dos elementos.
10 - padding: define o espaço de todos os lados dos elementos.
Cores e fundo
1- color: cor de primeiro plano.
2 - background‐color: cor de fundo.
3 - background‐image: imagem de fundo.
4 - background‐repeat: imagem configurada lado-a-lado.
5 - background‐attachment: só a imagem de fundo rola.
6 - background‐position: posição da imagem de fundo.
7 – background: pode-se usar todos os parâmetros permitidos para essa propriedade.
2 - background‐color: cor de fundo.
3 - background‐image: imagem de fundo.
4 - background‐repeat: imagem configurada lado-a-lado.
5 - background‐attachment: só a imagem de fundo rola.
6 - background‐position: posição da imagem de fundo.
7 – background: pode-se usar todos os parâmetros permitidos para essa propriedade.
Fontes Tipográficas
1 - font‐family: tipo da fonte.
2 - font‐style: estilo da fonte.
3 - font‐variant: fontes maiúsculas e minúsculas.
4 - font‐weight: largura da fonte.
5 - font‐size: tamanho da fonte.
6 - font: pode-se usar todos os parâmetros permitidos para essa propriedade.
2 - font‐style: estilo da fonte.
3 - font‐variant: fontes maiúsculas e minúsculas.
4 - font‐weight: largura da fonte.
5 - font‐size: tamanho da fonte.
6 - font: pode-se usar todos os parâmetros permitidos para essa propriedade.
Texto
1 - text‐indent: recuo do texto.
2 - text‐align: alinhamento do texto.
3 - text‐decoration: decoração do texto.
4 - letter‐spacing: espaço entre as letras.
5 - word‐spacing: espaço entre as palavras.
6 - text‐transform: forma das letras do texto.
2 - text‐align: alinhamento do texto.
3 - text‐decoration: decoração do texto.
4 - letter‐spacing: espaço entre as letras.
5 - word‐spacing: espaço entre as palavras.
6 - text‐transform: forma das letras do texto.
Modelo de Formatação Visual
1 - float: é um elemento que pode ser empurrado para esquerda e para direita.
2 - clear: controle sobre os posicionamentos que usam float.
3 - width: largura.
4 - height: altura.
5 - line‐height: altura da linha do texto.
6 - vertical‐align: define o aliamento vertical do texto.
2 - clear: controle sobre os posicionamentos que usam float.
3 - width: largura.
4 - height: altura.
5 - line‐height: altura da linha do texto.
6 - vertical‐align: define o aliamento vertical do texto.
Listas
1 - list‐style‐type: tipo de marcador de lista.
2 - list‐style‐image: imagem como marcador de lista.
3 - list‐style‐position: posicionar o marcador de lista.
4 - list‐style: pode-se usar todos os parâmetros permitidos para essa propriedade.
2 - list‐style‐image: imagem como marcador de lista.
3 - list‐style‐position: posicionar o marcador de lista.
4 - list‐style: pode-se usar todos os parâmetros permitidos para essa propriedade.
O que é CSS
O Cascading Style Sheets (CSS) é uma "folha de estilo" é utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML).
Benefícios de utilização:
CSS permite que você a formatação do documento WEB. Quem vai determinar cores, formas, tipos e tamanhos, posicionamento e em fim todo o "visual" da página são as CSS.
Inúmeras são as utilidades do uso das CSS nos documentos Web.
- Controle total sobre a apresentação do site a partir de um arquivo central.
- Agilização da manutenção e designer do site.
- Redução do tempo de carga dos documentos Web
- Adequação simplificada aos critérios de acessibilidade.
- Aumento considerável na portabilidade dos documentos Web.
Formas de utilização (externo, embutido, inline)
1- Usar um arquivo CSS externo
Você precisara criar um arquivo de css independente. e em seguida vincular esse arquivo a qualquer pagina da web, onde queira aplicar as regras de estilo. Para incluir esse arquivo externo na sua pagina web , coloque a tag no elemento head da pagina. Exemplo.:
<link rel="stylesheet" type="text/css" href="estilo.css"/>
Você pode colocar as regras de estilo dentro da pagina onde você que o CSS rode. Exemplo.:
<style type="text/css"> dentro do cabeçalho da página (seção head).
3- Usar regras de estilos inline
Utilizar estilos inline Definir estilos para um único elemento usando um atributo STYLE. Exemplo.:
<p style = "color: red" "font-size:9px"></p>
<p style = "color: red" "font-size:9px"></p>
Sintaxe
Comentário: Para fazer um comentário basta começar com “/*” e terminar com ”*/”, o navegador ingnora oque está comentado.
Regras: A regra CSS é uma declaração que segue um sintaxe, que define como será aplicado o estilo na página HTML, a sintaxe CSS se divide em três partes, seletor, propriedade e valor, como é mostrado no exemplo abaixo:
Seletor{ propriedade:valor;}
Unidades
Relativas (px, em, ex): é tomada em relação a outra medida. Folhas de Estilo em Cascata, usam esse tipo de medida para diferentes tipos de mídia.
Px : dispositivo (mídia) de exibição.
Em: tamanho de fonte(font-size)herdada.
Ex: altura da letra x(xis) da fonte herdada.
Absolutas(in, cm, mm, pt, pc): é medida de comprimento que não referencia e nem herda nenhum valor, elas são definidas nos sistemas de medias pela física como centímetros e polegadas.
In: polegadas.
Cm: centímetros.
Mm: milímetros.
Pt: pontos.
Pc: picas.
Porcentagem: esse tipo de valor é relativo a um outro valor anterior declarado. O valor anterior que já esta definido, está em uma determinada propriedade do mesmo elemento
Siglas Importantes
WWW ( World Wide Web ): é um sistema de documentos em hipermídia que são interligados e executados na internet. Os documentos podem estar na forma e vídeos, sons, hipertexto e figura.
CGI.br ( Comitê Gestor da Internet no Brasil ): foi criado para coordenar e integrar todas as iniciativas de serviços Internet no país, promovendo a qualidade técnica, a inovação e a disseminação dos serviços ofertados.
NIC.br (Núcleo de Informação e Cordenação do .br): criado para implementar as decisões e os projetos do CGI.br. É considerado o braço executivo do CGI.br. Dentre suas atribuições está a hospedagem do escritório da W3C no Brasil.
W3C ( World Wide Web Consortium ): é um consórcio dedicado a construir consenso em torno das tecnologias da web. Sua missão é conduzir a web ao seu potencial máximo.
Protocolo: é um padrão de comunicação a ser usado nas redes de computadores.
Internet: é o conjunto de diversas redes de computadores que se comunicam através de protocolos TCP/IP.
IP ( Internet Protocol ): endereço numérico que identifica de forma única um computador na rede Internet. O formato do IP é xxx.xxx.xxx.xxx (onde xxx são números de 0 a 255). O IP pode ser fixo ou dinâmico, quando dinâmico muda a cada nova conexão na internet.
TCP/IP ( Transmission Control Protocol/Internet Protocol ): TCP é o protocolo de transporte de dados e o IP é o protocolo de endereçamento .
FTP ( File Transfel Protocol ): Protocolo de transferência de arquivos.
HTTP( Hyper Text Transfer Protocol ): Protocolo usado pelo serviço www. Sistema baseado em hipertextos que permite procura e a utilização dos recursos disponíveis na internet.Protocolo de comunicação que conecta o usuário a sites.
HTTPS( Hyper Text Transfer Protocol Secure ): é uma implementação do protocolo HTTP que permitem que os dados sejam transmitidos através de uma conexão criptografada e verifica autenticidade do servidor e do cliente através de certificados digitais.
PROXY: é um computador intermediário que fica entre o computador do usuário e a internet. Pode ser utilizado para registrar o uso da internet e também para bloquear o acesso de um site da web.
LAN( Local Area Conection): estrutura que conecta vários computadores e outros dispositivos numa área definida. A capacidade de comunicação entre os aparelhos é limitada ao alcance dos cabos de rede, ou antenas no caso de rede sem fio.
WAN(Wide Area Network): é uma rede de comunicação de dados que cobre áreas geograficamente extensas como um estado, um país ou um continente.
FIREWALL: é uma barreira de proteção que ajuda a bloquear o acesso de conteúdo malicioso, mas sem impedir que os que precisam transitar continuem fluindo.
SMTP( Simple Mail Transfer Protocol ): Protocolo de envio de emails.
PING: é utilizado em rede para testar a conectividade. Envia um pacote que pede uma resposta e mede quanto tempo demora para chegar esta resposta. Quanto menor o tempo de resposta, melhor a conexão.
Formulário HTML
são usados para transmitir dados para um servidor.
Um formulário HTML pode conter elementos de entrada, como campos de texto, caixas de seleção, botões de rádio-, apresentar botões e mais. Um formulário também pode conter listas de seleção, textarea, fieldset, legend, e elementos de rotulagem.
O <form> é usado para criar um formulário HTML:
<form>
.
input elements
.
</form>
O elemento de entrada
O elemento de forma mais importante é o elemento <input>. O elemento <input> é usado para selecionar as informações do usuário. Um elemento <input> pode variar de muitas formas, dependendo do tipo de atributo. Um elemento <input> pode ser de campo de texto, tipo caixa, senha, botão de rádio, botão enviar, e muito mais..
Os campos de texto
<input type="text"> define um campo de entrada de uma linha que um usuário pode digitar texto:
Nota: Os caracteres em um campo de senha são mascarados (mostrado como asteriscos ou círculos).
Campo de senha
<input type="password"> define um campo de senha:
Botões de rádio
<input type= "radio">define um botão de rádio. Botões de rádio que um usuário selecionar apenas um de um número limitado de opções:
Checkboxes
<input type="checkbox"> define uma caixa de seleção. Checkboxes permitir que um usuário selecionar zero ou mais opções de um número limitado de opções.
Botão Enviar
<input type="submit"> define um botão de envio
Um botão de envio é usado para enviar os dados do formulário para um servidor. Os dados são enviados para a página especificada no atributo a forma de ação. O arquivo definido no atributo action geralmente faz algo com a entrada recebida:
Etiqueta
Descrição
<form>
Define um formulário HTML para entrada de usuário
<input>
Define um controle de entrada
<textarea>
Define um controle de entrada de várias linhas (área de texto)
<label>
Define um rótulo para um elemento <input>
<fieldset>
Grupos de elementos relacionados de uma forma
<legend>
Define uma legenda para um elemento <fieldset>
<select>
Define uma lista drop-down
<optgroup>
Define um grupo de opções relacionadas em uma lista drop-down
<option>
Define uma opção em uma lista drop-down
<button>
Define um botão clicável
<datalist>
Especifica uma lista de opções pré-definidas para controles de entrada
<keygen>
Define um campo gerador de par de chaves (para formulários)
<output>
Define o resultado de um cálculo
Formulário HTML
são usados para transmitir dados para um servidor.
Um formulário HTML pode conter elementos de entrada, como campos de texto, caixas de seleção, botões de rádio-, apresentar botões e mais. Um formulário também pode conter listas de seleção, textarea, fieldset, legend, e elementos de rotulagem.
O <form> é usado para criar um formulário HTML:
<form>
.
input elements
.
</form>
.
input elements
.
</form>
O elemento de entrada
O elemento de forma mais importante é o elemento <input>. O elemento <input> é usado para selecionar as informações do usuário. Um elemento <input> pode variar de muitas formas, dependendo do tipo de atributo. Um elemento <input> pode ser de campo de texto, tipo caixa, senha, botão de rádio, botão enviar, e muito mais..
Os campos de texto
<input type="text"> define um campo de entrada de uma linha que um usuário pode digitar texto:
Nota: Os caracteres em um campo de senha são mascarados (mostrado como asteriscos ou círculos).
Campo de senha
<input type="password"> define um campo de senha:
Botões de rádio
<input type= "radio">define um botão de rádio. Botões de rádio que um usuário selecionar apenas um de um número limitado de opções:
Checkboxes
<input type="checkbox"> define uma caixa de seleção. Checkboxes permitir que um usuário selecionar zero ou mais opções de um número limitado de opções.
Botão Enviar
<input type="submit"> define um botão de envio
Um botão de envio é usado para enviar os dados do formulário para um servidor. Os dados são enviados para a página especificada no atributo a forma de ação. O arquivo definido no atributo action geralmente faz algo com a entrada recebida:
Etiqueta
Descrição
<form>
Define um formulário HTML para entrada de usuário
<input>
Define um controle de entrada
<textarea>
Define um controle de entrada de várias linhas (área de texto)
<label>
Define um rótulo para um elemento <input>
<fieldset>
Grupos de elementos relacionados de uma forma
<legend>
Define uma legenda para um elemento <fieldset>
<select>
Define uma lista drop-down
<optgroup>
Define um grupo de opções relacionadas em uma lista drop-down
<option>
Define uma opção em uma lista drop-down
<button>
Define um botão clicável
<datalist>
Especifica uma lista de opções pré-definidas para controles de entrada
<keygen>
Define um campo gerador de par de chaves (para formulários)
<output>
Define o resultado de um cálculo
Os campos de texto
<input type="text"> define um campo de entrada de uma linha que um usuário pode digitar texto:
Nota: Os caracteres em um campo de senha são mascarados (mostrado como asteriscos ou círculos).
Campo de senha
Nota: Os caracteres em um campo de senha são mascarados (mostrado como asteriscos ou círculos).
Campo de senha
<input type="password"> define um campo de senha:
<input type= "radio">define um botão de rádio. Botões de rádio que um usuário selecionar apenas um de um número limitado de opções:
<input type="checkbox"> define uma caixa de seleção. Checkboxes permitir que um usuário selecionar zero ou mais opções de um número limitado de opções.
Botões de rádio
<input type= "radio">define um botão de rádio. Botões de rádio que um usuário selecionar apenas um de um número limitado de opções:
Checkboxes
<input type="checkbox"> define uma caixa de seleção. Checkboxes permitir que um usuário selecionar zero ou mais opções de um número limitado de opções.
Botão Enviar
<input type="submit"> define um botão de envio
Um botão de envio é usado para enviar os dados do formulário para um servidor. Os dados são enviados para a página especificada no atributo a forma de ação. O arquivo definido no atributo action geralmente faz algo com a entrada recebida:
| Etiqueta | Descrição |
|---|---|
| <form> | Define um formulário HTML para entrada de usuário |
| <input> | Define um controle de entrada |
| <textarea> | Define um controle de entrada de várias linhas (área de texto) |
| <label> | Define um rótulo para um elemento <input> |
| <fieldset> | Grupos de elementos relacionados de uma forma |
| <legend> | Define uma legenda para um elemento <fieldset> |
| <select> | Define uma lista drop-down |
| <optgroup> | Define um grupo de opções relacionadas em uma lista drop-down |
| <option> | Define uma opção em uma lista drop-down |
| <button> | Define um botão clicável |
| <datalist> | Especifica uma lista de opções pré-definidas para controles de entrada |
| <keygen> | Define um campo gerador de par de chaves (para formulários) |
| <output> | Define o resultado de um cálculo |
Informações coletadas: W3C
Criando um formulário de cadastro de Aluno.
<form action="" method="post">
Nome?
<input type="text" name="nome" size="40"><br> <br>
E-mail?
<input type="text" name="e-mail" size="40">
<p>É sua primera graduação?
<input type="radio" name="sim" value="sim">
Sim
<input type="radio" name="nao" value="nao"CHECKED>
Não
<P>O que você esta cursando?
<select name="si"><option value="curso">Sistema para intenet</option>
<option value="adn">analise e desenvolvimento de sistemas</option>
<option value="jd">jogos digitais</option>
<option value="secretariado">Secretariado</option>
<option value="logistica">logistica</option>
</select>
<P> Descreva seu curso:
<textarea name="comentario" cols="28" rows="5"></textarea><br> <br>
<br />
Esporte que você pratica <br />
<br />
<input name="futebol" type="checkbox" value="" />
Futebol<br />
<input name="volei" type="checkbox" value="" />
Volei<br />
<input name="boxe" type="checkbox" value="" />
boxe <br />
<input name="outros" type="checkbox" value="" />
Outros<br />
<br />
<input type="submit" value="Enviar ">
<input type="reset" value="Limpar Dados">
</form>
Seu formulário ficara assim.
No desenvolvimento de websites, por mais simples que seja, é necessário uma maneira de organizar seus conteúdos. Para isto, usamos as famosas TABELAS.
<table></table> Serve para determinar ao navegador que o código entre eles é uma tabela.
<th></th>/ Célula que contém informação de cabeçalho
<tr></tr>Para Linhas
<td></td>Para colunas
caption : Legenda
<table></table> Serve para determinar ao navegador que o código entre eles é uma tabela.
<th></th>/ Célula que contém informação de cabeçalho
<tr></tr>Para Linhas
<td></td>Para colunas
caption : Legenda
- Agrupando informações nas tabelas.
thead- Pertencentes ao head da tabela;
tfoot - Pertencentes ao rodapé da tabela;
tboddy - Pertencentes ao corpo da tabela;
<table width="584" border="1">
<tr>
<th colspan="2">No desenvolvimento de websites, por mais simples que seja, é necessário uma maneira de organizar seus conteúdos. Para isto, usamos as famosas TABELAS. </th>
</tr>
<tr>
<td width="119"><table></table></td>
<td width="401">Serve para determinar ao navegador que o código entre eles é uma tabela. </td>
</tr>
<tr>
<td align="center" valign="middle"><p><th></th></p></br>
thead</td>
<td>Célula que contém informação de cabeçalho</td>
</tr>
<tr>
<td><tr></tr></td>
<td>Para Linhas</td>
</tr>
<tr>
<td><td></td></td>
<td>Para colunas</td>
</tr>
<tr>
<td><div align="center">Exemplo de tabela</div></td>
<td><img src="tabela.jpg" width="474" height="253" /></td>
</tr>
<tr>
<td colspan="2">Informações coletadas: <a href="http://www.w3c.br/divulgacao/guiasreferencia/xhtml1/">W3C</a></td>
<tf><a href="http://www.w3c.br/divulgacao/guiasreferencia/xhtml1/">W3C</a></tf>
</tr>
</table>
" A Internet nasceu na década de 1960, Foi desenvolvida nos tempos remotos da Guerra Fria com o nome de ArphaNet para manter a comunicação das bases militares dos Estados Unidos, mesmo que o Pentágono fosse riscado do mapa por um ataque nuclear.Quando a ameaça da Guerra Fria passou, ArphaNet tornou-se tão inútil que os militares já não a consideravam tão importante para mantê-la sob a sua guarda. Foi assim permitido o acesso aos cientistas que, mais tarde, cederam a rede para as universidades as quais, sucessivamente, passaram-na para as universidades de outros países, permitindo que pesquisadores domésticos a acessarem, até que mais de 5 milhões de pessoas já estavam conectadas com a rede e, para cada nascimento, mais 4 se conectavam com a imensa teia da comunicação mundial.Nos dias de hoje, não é mais um luxo ou simples questão de opção uma pessoa utilizar e dominar o manuseio e serviços disponíveis na Internet, pois é considerada o maior sistema de comunicação desenvolvido pelo homem. Com o surgimento da World Wide Web, esse meio foi enriquecido. O conteúdo da rede ficou mais atraente com a possibilidade de incorporar imagens e sons. Um novo sistema de localização de arquivos criou um ambiente em que cada informação tem um endereço único e pode ser encontrada por qualquer usuário da rede. Em síntese, a Internet é um conjunto de redes de computadores interligadas que tem em comum um conjunto de protocolos e serviços, de uma forma que os usuários conectados possam usufruir de serviços de informação e comunicação de alcance mundial."
Características :
•Documentos HTML são arquivos escritos em ASCII - texto;
• Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad);
• Existem editores específicos para várias plataformas;
• Existem conversores de vários formatos, por exemplo, doc para html;
• A unidade mínima de informação é a “página”;
Estrutura básica de uma página:
São necessárias quatro tags básicas para descrever a estrutura geral de uma página a ser lida pelo navegador: <html> <head> <title> <body>.
Veja o exemplo abaixo:
<html>
<head>
<title>Seja bem-vindo</title>
</head>
<body>
... conteúdo da página
</body>
</html>
Metadados:
head- cabeçalho;
title- título;
link- importar folhas de estilo externo;
meta- descrevem o conteúdo do site para os buscadores. É nelas que irá inserir as palavras-chaves que facilitarão a vida do usuário na hora de encontrar o site.
style- define um estilo de informação para um documento de HTML;
Sessões:
<body> é onde fica o conteúdo da página;
<article> é o elemento que representa um componente de uma página que consiste em uma composição auto-contida em um documento;
<section> é apenas um bloco de conteúdo relacionado;
<nav> representa uma seção da página que contém link para outras páginas ou partes do mesmo website;
<aside> define um elemento lateral que pode conter blocos de navegação (nav's), citações e outras informações que costumamos colocar em um sidebar;
<h1,h2,h3,h4,h5,h6> Define o tamanho e a importância do cabeçalho;
<hgroup> Agrupa os cabeçalhos;
<header> define um grupo de títulos ou o cabeçalhos de uma determinada seção;
<footer > define o rodapé das seções ou da página;
<address> Ele é indicado para fornecer estas (e também outras) informações a respeito das pessoas de contato do documento, geralmente o autor do documento ou o responsável pelo conteúdo exibido. Dentro do elemento address não são permitidos, no HTML 5, os elementos aside, footer, h1 até h6, header, headgroup, nav e section.
Comentário:
O comentário começa por <!-- e finaliza por --> Tudo o que colocar entre essas etiquetas está comentado.
Elementos de agrupamento:
<p> define parágrafo de paginas;
<hr> divisão de conteúdo da pagina (linha);
<blockquote> parágrafo de citação;
<ol> lista ordenada ( 1,2,3...);
<ul> lista não ordenada;
<li> item de uma lista;
<dl>define uma lista;
<dt> termo a ser definido;
<dd> definição do termo;
<div > divisão ou seção no documento HTML.
Elementos de texto semânticos:
<a> define um hiperlink na página;
<abbr> utilizado para marcar abreviações;
<span> agrupa elementos em linha de um documento;
<strong> forte ênfase (negrito);
<em> ênfase (itálico);
<br> quebra de linha.
Conteúdo embutido:
img: marcação utilizada para inserir imagens em páginas HTML.
