domingo, 28 de junho de 2015
Desenvolvimento Web - O Início
HTML - Hypertext Markup Language
É uma linguagem
de marcação utilizada para produzir páginas na WEB. Foi criada por Tim
Beners-Lee, o inventor da Web.
Os comandos em HTML são chamados de tags e eles irão dizer
ao navegador como o texto, a informação e as imagens serão formatadas e
exibidas. As tags HTML são identificadas pelos símbolos <> (em uma tag de
abertura) e </>(em uma tag de fechamento).
A estrutura básica de um documento HTML são as linhas
obrigatórias e essências para um bom funcionamento de uma página web.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Tag <h>
É utilizada para formatar um bloco de texto com um
cabeçalho. A tag <h> disponibiliza seis níveis de cabeçalho que formam
uma hierarquia descendente.
Tag <p> </p>
Delimita os parágrafos
Listas Não Ordenadas
<ul>
<li>
</li>
<li> </li>
</ul>
Listas Ordenadas
<ol>
<li>
</li>
<li> </li>
</ol>
Tag <div> </div>
A tag <div> é uma forma de alinhar um bloco de texto.
Utilizando essa tag todas as tags desse bloco de texto serão afetadas.
Tag <a>
O atributo da tag <a> utilizado para criar links é o
HREF. Esse atributo é o responsável por determinar o destino do link
<a href=”url”>Seu texto ou imagem aqui</a>
Target
O atributo TARGET é utilizado para especificar como o
documento ou a página de destino do link devem ser carregados.
_blank
: nova janela do navegador;
_self:
nova aba;
<a href=”url”
target=”blank”>Seu texto ou imagem aqui</a>
Tag <img>
Utilizamos essa tag para inserir imagens no site.
<img src="PastaDaImagem/NomeDaImagem.TipoDoArquivo/>
Podemos utlizar o atributo alt que especifica um texto alternativo que aparecerá no lugar da imagem para os navegadores somente de texto ou para aqueles definidos para download manual de imagem. Para usuários com deficiência visual, que utilizam sintetizadores de fala com navegadores somente de texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também aparecerá em uma legenda temporária quando o ponteiro estiver sobre a imagem.
<img src="PastaDaImagem/NomeDaImagem.TipoDoArquivo alt="TextoSobreAImagem"/>
CSS - Cascading Style Sheets
A função do CSS (Folha de Estilo em Cascata) é formatar o design do HTML. O CSS pode ser feito dentro das tags <style></style> dentro do "head" do nosso site ou em um arquivo externo. Utilizaremos um arquivo de CSS externo em nosso site. Para isso sempre precisaremos inserir o seguinte link:
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
Formatações mais utilizadas em CSS
Código
CSS
|
O
que faz
|
|
background-attachment:
|
fixed;
|
Mantem o plano de fundo fixo
|
background-color:
|
#f59e8a;
|
Cor de fundo a div, sempre deve ser com
código
|
background-image:
|
url(imagens/fundo.jpg);
|
Imagem de fundo da div
|
background-repeat:
|
no-repeat;
|
Não repetir imagem de fundo
|
background-size:
|
100%;
|
Coloca o plano de fundo em tamanho 100%
|
-moz-background-size:
|
100% 100%;
|
|
-webkit-background-size:
|
100% 100%;
|
|
border:
|
1px solid #990099;
|
Tamanho e cor da borda nos quatro lados
|
border-bottom:
|
1px solid #990099;
|
Tamanho e cor da borda embaixo da div
|
border-radius:
|
8px;
|
Arredonda as bordas da div
|
8px 2px 4px 5px;
|
Arredonda
as bordas da div nesse caso cada uma separadamente seguindo a seguinte ordem:
 |
|
clear:
|
both;
|
Anula todo float que tenha antes
|
color:
|
#990099 ;
|
Cor da fonte
|
float:
|
left;
|
Coloca uma div ao lado da outra à esquerda
|
right;
|
Coloca uma div ao lado da outra à direita
|
|
font-family:
|
"Bodoni
MT", Didot, "Didot LT STD", "Hoefler Text", Garamond,
"Times New Roman", serif;
|
Tipo da fonte
(alguns tipos podem ser encontrados no site http://cssfontstack.com/)
|
font-size:
|
22px;
|
Tamanho da fonte
|
font-weight:
|
bold;
|
Deixar o texto da div em negrito
|
height:
|
250px;
|
Altura da div
|
left:
|
200px;
|
Espaçamento a esquerda do site
|
margin:
|
0 auto;
|
Centraliza a div no meio do site (horizontalmente)
|
10px auto;
|
Centraliza a div no meio do site (horizontalmente) e da uma
margin de acordo com os px
|
|
margin:
|
10px;
|
Margem da div nos quatro lados
|
margin-left:
|
600px;
|
Margem da div na esquerda
|
margin-top:
|
10px;
|
Margem da div no topo
|
margin-right:
|
20px;
|
Margem da div na direita
|
opacity:
|
0.9;
|
Transparência da div, pode variar de 0 à 1;
|
padding:
|
10px 20px;
|
Margem interna, nessa caso em cima/embaixo e
esquerda/direita
|
10px;
|
Margem interna nos quatro lados
|
|
position:
|
relative;
|
Faz com que a div inicie no ponto 0 para x e y
|
text-align:
|
center;
|
Alinhamento do texto no centro
|
justify;
|
Alinhamento do texto justificado
|
|
right;
|
Alinhamento do texto no direita
|
|
text-decoration:
|
underline;
|
Sublinhar o texto
|
width:
|
1280px;
|
Largura da div
|
Assinar:
Postagens (Atom)