Workshop Linguagem de Hipertextos Formataçã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

HTML HyperText Markup Language (Linguagem de Marcação de Hipertexto) utilizada para disponibilizar conteúdo na internet.

HTML Introdução Có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 Cabeçalho do documento Corpo do documento

+ HTML e suas Tags *Containers *Tabelas *Parágrafo **Quebra de linha **Imagem **Linha divisória *Link *Lista Negrito ou Itálico Sublinhado Títulos … Substituir / Destacar e Elementos*Formatação

*Elementos de encapsulamento Parágrafo: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Negrito Lorem Ipsum is simply dummy text of the printing and typesetting industry. Sublinhado Lorem Ipsum is simply dummy text of the printing and typesetting industry. Estes elementos possuem tags de abertura e fechamento.

**Elementos de marcação Imagem Quebra de linha Lorem Ipsum is simply dummy text of the printing and typesetting industry. São tags simples, não possuem fechamento

+ Imagens 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 Unisul 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 (Linhas) (células/colunas)

+ Tabelas – Mesclar células

+ Listas Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 1. Item 1 2. Item 2 3. Item 3 Não Ordenada Ordenada

CSS Linguagem que formata o conteúdo da internet.

CSS Introdução CSS 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. Texto…

CSS - Vinculado Quando temos dois arquivos e o CSS é chamado através de um link no html, dentro da tag e usam as classes das tags para formatá-las: … Escrita

CSS - Incorporado Se escreve no próprio arquivo HTML, dentro da tag em uma tag e assim como no vinculado são utilizadas classes para a formatação:.teste { color: #FFFFFF; } Escrita

CSS - Inline Quando o CSS é escrito na própria tag que irá receber a propriedade: … texto Escrita

+ Propriedades Texto Plano de Fundo Container Lista Posicionamento

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( e/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( e/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 Cardillo site: skype: eduardo.cardillo