Workshop Linguagem de Hipertextos Formatação de Páginas para Web com CSS.
30
Workshop Linguagem de Hipertextos Formatação de Páginas para Web com CSS
-
Upload
luis-canedo-bras -
Category
Documents
-
view
222 -
download
2
Transcript of Workshop Linguagem de Hipertextos Formatação de Páginas para Web com CSS.
WorkshopLinguagem de HipertextosFormatação de Páginas para Web com CSS
Sumário
HTML Introdução Estrutura Tags Tipos de elementos Tabelas Imagens
CSS Introdução Escrita Propriedades Novidades
HTMLHyperText Markup Language (Linguagem de Marcação de Hipertexto) utilizada para disponibilizar conteúdo na internet.
HTML
IntroduçãoCódigo HTML são marcações (tags) feitas entre conteúdo, que lidas por navegadores formatam o conteúdo, apresentam mídia (áudio, vídeo, animação), interage com banco de dados.
HTML e sua estrutura
Início do documento <html>
Cabeçalho do documento <head>
Corpo do documento <body>
+HTML e suas Tags
*Containers <div> *Tabelas <table> <tr> <td> *Parágrafo <p> **Quebra de linha <br> **Imagem <img> **Linha divisória <hr> *Link <a> *Lista <ul> <ol> <li>
Negrito <strong> ou <b>
Itálico <em> <i>
Sublinhado <u>
Títulos <h1> <h2>… <h6>
Substituir <del> / <ins>
Destacar <mark> e <span>
Elementos *Formatação
*Elementos de encapsulamento
Parágrafo: <p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry.</p>
Negrito <p>Lorem Ipsum is <strong>simply dummy</strong>
text of the printing and typesetting industry.</p>
Sublinhado <p>Lorem Ipsum is <strong>simply dummy</strong> text
of the printing and <u>typesetting industry</u>.</p>
Estes elementos possuem tags de abertura e fechamento.
**Elementos de marcação
Imagem <img
src=“http://www.unisul.br/gra/matricula-2015-01/img/matricule-se.jpg” width=“300” height=“80” alt=“Matricule-se para o semestre 2015/1” >
Quebra de linha <p>Lorem Ipsum is <strong>simply dummy</strong>
<br>text of the printing and <u>typesetting industry</u>.</p>
São tags simples, não possuem fechamento
+Imagens
<img src=“http://www.unisul.br/gra/matricula-2015-01/img/matricule-se.jpg” width=“300” height=“80” alt=“Matricule-se para o semestre 2015/1” > src: caminho absoluto do arquivo a ser mostrado; width: largura da imagem (px / %); height: altura da imagem (px / %); alt: texto mostrado quando a imagem não carrega.
+Links
<a href=“http://www.unisul.br” title=“Site da Unisul”>Unisul</a>
<a href=“http://www.unisul.br” title=“Site da Unisul”><img src=“http://www.unisul.br/…/marca-unisul.jpg” alt=“Marca Unisul” width=“70” height=“35”></a> href: url da página a ser visitada ao clicar no link; title: dica a ser mostrada ao passar o mouse sobre o link.
Tabelas
<table> <tr> (Linhas) <td></td> (células/colunas) <td></td> </tr> <tr> <td></td> <td></td> </tr></table>
+Tabelas – Mesclar células<table> <tr> <td colspan=“2”></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></table>
<table> <tr> <td rowspan=“2”></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></table>
+Listas
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul>
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ol>
Item 1 Item 2 Item 3
1. Item 1
2. Item 2
3. Item 3
Não
Orde
nada
Orde
nada
CSSLinguagem que formata o conteúdo da internet.
CSS
IntroduçãoCSS dá forma e posiciona o conteúdo contido no HTML.
Os arquivos .css são chamados de folhas de estilos.
CSS
Vinculado
Incorporado
Inline
Escrita
Vinculado ≅ Incorporado
.teste { color: #FFFFFF;}.teste-2 { color: #000000;}
As duas formas utilizam classes para formatar os elementos.
<p class=“teste”>Texto…</p>
<p class=“teste-2”>Texto…</p>
CSS - Vinculado
Quando temos dois arquivos e o CSS é chamado através de um link no html, dentro da tag <head> e usam as classes das tags para formatá-las:
<html> <head> <link href=“nome-do-arquivo.css” rel=“stylesheet” type=“text/css”> </head>…
Escrita
CSS - Incorporado
Se escreve no próprio arquivo HTML, dentro da tag <head> em uma tag <style> e assim como no vinculado são utilizadas classes para a formatação:
<head> <style type="text/css"> .teste { color: #FFFFFF; } </style></head>
Escrita
CSS - Inline
Quando o CSS é escrito na própria tag que irá receber a propriedade:
<html>…<body> <p style=“color: #cccccc; text-decoration: underline;”> texto</p></body></html>
Escrita
+
PropriedadesTextoPlano de FundoContainerListaPosicionamento
Propriedades de texto
font-family: famílias de fontes a serem utilizadas;
font-size: tamanho da fonte;
font-style: estilo da fonte; font-weight: espessura da
fonte; text-decoration: mostra
ou não decorações no texto
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
text-decoration: underline;
Propriedades de plano de fundo background-color: cor do
fundo; background-image: imagem
de fundo; background-repeat:
repetição da imagem de fundo; background-attachment:
fixação da imagem de fundo; background-position:
posição da imagem de fundo.
background-color: #eeffee;
background-image: url(http://www.unisul.br/.../image/fundo.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
Propriedades de container width: largura; height: altura; float: flutuar perante os
próximos; clear: limpar float; margin: espaço entre o
container e objetos ao seu redor; padding: espaço entre a borda
do container e seu conteúdo.
width: 250px;
height: 150px;
float: left;
clear: left;
margin: 20px;
padding: 5px;
Propriedades de container border-style: estilo da borda; border-width: espessura da
borda; border-color: cor da borda; border-top: borda do topo; border-right: borda da direita; border-bottom: borda da base. border-left: borda da esquerda.
border-top-style: solid;
border-top-width: 2px;
border-top-color: #ff98ee;
border-top: solid 2px #ff98ee;
Propriedades de lista
list-style-type: símbolo a ser mostrado como bullet;
list-style-image: imagem a ser mostrada como bullet;
list-style-position: posicionamento dos bullet perante o container.
list-style-type: circle;
list-style-image: url(http://www.unisul.br/.../image/bullet.jpg);
list-style-position: outside;
Propriedades de posicionamento
position: tipo de posicionamento; overflow: definição sobre a sobra de
conteúdo; top: distância entre o topo do elemento
e o elemento acima; right: distância entre a borda direita do
elemento e o elemento a sua direita; bottom: distância entre a base do
elemento e o elemento abaixo; left: distância entre a borda esquerda
do elemento e o elemento a sua esquerda;
position: relative;
overflow: scroll;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
CSS 3
Com o CSS é possível customizar o texto (fonte, corpo, parágrafo, cor) caixas (div) de conteúdo (fundo, borda, posição).
A chegada da versão 3 do CSS trás consigo mais propriedades, aprimora algumas já existentes e desativa outras.
Agora customizações que precisavam de imagens para serem feitas podem ser implementadas com CSS.
Propriedades
CSS 3
Entre as novidades do CSS, destacam-se as seguintes propriedades: Transition: faz animações com as estruturas; Transform: atribui modificações a estruturas já
customizadas; Shadow: aplica sombra em estruturas e em textos; border-radius: arredonda os cantos dos elementos.
Novidades
Obrigado!Eduardo Cardilloemail: [email protected]: www.eduardocardillo.com.brskype: eduardo.cardillo
