Introdução ao HTML e CSS

Introdução ao HTML e CSS

Prof. Sérgio Souza Costa

Obs: Alguns slides foram elaborados pela professora Vanesssa (UNIFEI)

O que o servidor faz ....

O que o cliente (navegador web) faz ....

O HTML, nada mais que texto

O navegador renderiza o HTML

6/3/2011

HTML Timeline

vs.

HTML 1.0

RFC 1866

1990 1995 1997 1999 200019981996 2001 2002

XHTML 2.0

Begins…

2010

Logo oficial do

Html5

HTML Timeline

vs.

HTML 1.0

RFC 1866

1990 1995 1997 1999 200019981996 2001 2002

XHTML 2.0

Begins…

2010

Logo oficial do

Html5

HTML - Template

<html><head><title></title></head><body></body></html>

HTML 4.01 - Template<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></title> </head><body>

<p>Ola mundo</p>

</body></html>

HTML 5 - Template

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body>

</body></html>

XHTML - Template

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html lang=”EN” dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”content-type” content=”text/xml;charset=utf-8” /><title></title></head><body></body></html>

HTML vs XHTML

HTML: dont worry !! escreva algo que o navegador fará o seu melhor para renderizar.

XHTML: se não é para fazer direito, melhor nem começar. Como vais querer que o JavaScript, CSS, AJAX funcione ?● rigidez do XML

● HyperText Markup Language (HTML) ou Linguagem de Marcação de Hipertexto é a linguagem usada pelos navegadores para mostrar as páginas web ao usuário.

● Ela permite combinar textos, imagens e áudios, além introduzir referências a outras páginas por meio dos links hipertextos.

HTML

● A sintaxe da HTML baseia-se em um elemento chamado tag (etiqueta).

● Tags são rótulos usados para informar ao navegador como o conteúdo deve ser apresentado.

Tags, elementos e atributos

● A tag tem a seguinte forma geral:<tag> ..... </tag>

● Tudo que estiver contido entre uma tag de abertura <> e uma tag de fechamento </> será processado segundo o comando contido na tag.

● Algumas tags, chamadas tags de comandos isolados, não necessitam de um conteúdo para serem processados.

<BR>● Tag para pular linha


E quanto aos atributos ?

E quanto aos atributos ?

Atributos modificam as tags, dizendo algo sobre os elementos< html >< head >< title > Popular Websites: Google < /title >< /head >< body >< h1 > About Google < /h1 >< p > Google is best known for its search engine, although Google now offers anumber of other services. < /p >< p > Google’s mission is to organize the world’s information and make ituniversally accessible and useful. < /p >< p > Its founders Larry Page and Sergey Brin started Google at StanfordUniversity. < /p >< p > < a href=”http://www.Google.com/” > Click here to visit Google’s Web site. < /a > < /p >< /body >< /html >


Com a evolução da web, novos padrões, crescimento na complexidade dos grandes sistemas ...

Algumas tags perderam o uso para outros padrões. Então temos :

● Bad tags, conheça para não usar :)● Good tags

Tag Explanation

b Presentational. Use strong instead.

basefont Deprecated.

big Presentational. Use CSS instead.

center Deprecated.

dir Deprecated.

font Deprecated.

hr Presentational. Use CSS instead.

i Presentational. Use em instead.

u Deprecated.

Bad Tags

Tag Explanation

isindex Deprecated.

menu Deprecated.

s Deprecated.

small Presentational. Use CSS instead.

strike Deprecated. Use del instead.

tt Presentational. Use CSS instead.

Bad Tags

Good tags: tags que tem semântica relacionada

<p> , <body>, <strong>, <em>, <a>, <ul>, <li> ...

O que pode ter no HTML ?


Elementos estruturantes

● O elemento HEAD (Cabeçalho) define uma seção que contém informações sobre o documento HTML.

● A seção pode incluir scripts, instruções para o browser encontrar os estilos, metadados, entre outros.

● As tags que podem estar na seção HEAD são:● <title>● <base>● <link>● <meta>● <script>● <style>

HTML – Seção HEAD

● Define o título do documento

● O elemento título é obrigatório em todos os documentos HTML/XHTML.

● Esse título é referenciado em buscas pela rede, dando uma identidade ao documento.

● Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela.

HTML – Seção HEADElemento TITLE

HTML – Seção HEADElemento TITLE

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Home Page do Sérgio Costa</title></head><body>

</body></html>

● Define uma url padrão para os links do documento.● <base href =http://meusite.com.br />

● Define um target padrão para os links do documento.● <base target =“_blank” />

HTML – Seção HEADElemento BASE

http://meusite.com.br/

● Define ligações do documento HTML com outros arquivos como CSS, scripts, etc.

● Tem como atributos as tags rel, type e href● Onde rel define o tipo de relacionamento● Type fornece informações aos navegadores sobre o

conteúdo do elemento que o contém (dado, estilo, script...)

● HREF informa a URL que o link aponta● A tag <link> é mais usada para ligar o documento HTML

com o style sheets:<link rel = “stylesheet” type = “text/css” href=“estilo.css”/>

HTML – Seção HEADElemento LINK

● O propósito do elemento meta é prover meta-informação sobre o documento.● Metadados – dados sobre dados

● Usado tipicamente para especificar descrição da página, palavras-chave, autor do documento, última modificação e outros metadados.

● Muito frequentemente esse elemento é usado para prover informação que é relevante para os navegadores ou para as ferramentas de busca como a descrição do conteúdo do seu documento.

<meta name = “ ” content = “ ” />

HTML – Seção HEADElemento META


<!DOCTYPE html><html><head><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="Hege Refsnes"><meta charset="UTF-8"></head><body>

<p>All meta information goes in the head section...</p>

</body></html>

● Um dos elementos do meta é o HTTP-EQUIV.

● Uma das funcionalidades é dizer ao navegador o tipo de dado que ele encontrará no documento.


● Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindo-lhe o valor Refresh.


<meta http-equiv="refresh" content="3; URL=http://sites.google.com/site/skosta/">

view-source:http://www.dpi.inpe.br/~scosta/

Usado para definir um script do lado do cliente, como um código do javascript.

Torna as páginas mais dinâmicas e iterativas.

Utiliza o atributo type para especificar a linguagem utilizada.

<script type = “text/javascript>// código javascript

</script>

HTML – Seção HEADElemento SCRIPT

HTML – Seção HEADElemento SCRIPT

<!DOCTYPE html><html><body>

<p>Click the button to display an alert box.</p>

<button onclick="myFunction()">Try it</button>

<script>function myFunction() {

alert("I am an alert box!");}</script>

</body></html>

Incorpora ao documento HTML, a folha de estilos

<style type = “text/css>grupo{nome_atributo: valor;}grupo{nome_atributo: valor;}grupo{nome_atributo: valor;}

</style>

HTML – Seção HEADElemento STYLE (CSS)

CSS será visto mais a frente

● Tudo que estiver contido em <BODY> será apresentado ao leitor na janela principal do browser.

● <BODY> pode conter títulos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos.

HTML – Seção BODY

<html><head><title>Title of the document</title></head>

<body>The content of the document......</body>

</html>



Elementos chaves

HTML – Seção BODYParágrafos e Títulos

Prudência com as tags de títulos.

HTML – Seção BODYTags de Formatação

<i> x <em><b> x <strong><del> x <strike>

HTML – Seção BODYTags de Formatação

<i> x <em><b> x <strong><del> x <strike>

NÃO usem tags de formatação, apenas "strong" e "em", que tem uma semântica associada.



Elementos chaves



Elementos chaves

Listas e dados

Listas e dados

● Em HTML, as listas podem ser itens numerados ou não.

● As listas não numeradas usam a tag <ul> de Unordered Lists para marcar o começo e fim da lista e a tag <li> para cada item da lista.

● Os itens da lista são marcados com bullets

HTML – Seção BODYListas

<ul><li> ... </li><li> ... </li>

</ul>

● Em HTML, as listas podem ser itens numerados ou não.● As listas numeradas usam a tag <ol> de Ordered Lists

para marcar o começo e fim da lista e a tag <li> para cada item da lista.

● Os itens da lista são marcados com números


<ol><li> ... </li><li> ... </li>

</ol>

● As listas podem ser compostas


<ul><li> ... </li><ul>

<li> ... </li><li> ... </li>

</ul></ul>

● Nivel 1● Nivel 2● Nível 2

● Nível 1

● As listas podem usar o atributo type.● Nas listas não ordenadas, o <type> altera o bullet usado

e pode ter os valores CIRCLE, SQUARE e DISC (default)


<ul type = square><li> ... </li><ul type = circle>

<li> ... </li><li> ... </li>

</ul></ul>

Com CSS podemos criar outros estilos para as listas.

● Tabelas são definidas pela tag <table>.

● Uma tabela tem linhas (rows) e colunas.

● Em HTML, define-se uma linha com a tag <tr>, de table row.

● A linha é dividia em colunas, onde os dados são inseridos através da tag <td>, de table data.

● Dentro de um table data, pode-se inserir texto, figura, links, listas, formulários, outras tabelas, etc.

HTML – Seção BODYTabelas

● Linhas de cabeçalho podem ser definidas utilizando a tag <th>, de table header, o que definirá o texto como negrito e centralizado


<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

● Para inserir uma legenda à tabela, usa-se a tag <caption>


<table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr></table>



Elementos chaves

Listas e dados

Links e imagens

● Em HTML, um link é criado utilizando a tag <a>, de duas maneiras:● Para criar um link para outro documento

● Atributo HREF● Para criar um link para o próprio documento (âncora ou bookmark),

criando um apelido para determinada parte do documento.● Atributo NAME

● O endereço indicado pelo link pode ser carregado na mesma janela em que o usuário se encontra, ou em outra janela.

● Essa característica é determinada pelo atributo TARGET● _self● _blank

HTML – Seção BODYHiperlink (Anchor)

<a href="http://www.w3schools.com">Visit W3Schools.com!</a>

● Para inserir imagens em um documento HTML, utiliza-se a tag <img>.

● Os seguintes atributos devem ser configurados:● src

● Endereço da imagem (source)● alt

● Texto mostrado no lugar da imagem, caso a mesma, por algum motivo não puder ser carregada

● width● Largura da imagem

● heigh● Altura da imagem

HTML – Seção BODYImagens

HTML – Seção BODYImagens

<!DOCTYPE html><html><body>

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

</body></html>



Elementos chaves

Listas e dados

Links e imagens

Formulários

HTML – Seção BODYFormulários● Formulários são usados para enviar dados para um

servidor web.

● Os elementos de um formulário permitem o usuário entrar com informações, como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.

HTML – Seção BODYFormulários● A tag <form> define uma área de formulário.

<form>...elementos de entrada...

</form>

HTML – Seção BODYFormulários● A tag <input> define um elemento de entrada.

● É a tag mais utilizada em formulários.

● Um elemento de entrada pode ser um campo de texto, um checkbox, um campo de senha, um botão de radio, um botão de envio (submit), entre outros.● Definido pelo atributo type

HTML – Seção BODYFormulários● Campo de texto

● <input type = “text” name = “nome” />

<!DOCTYPE html><html><body><form action="demo_form.asp">First name: <input type="text" name="FirstName" value="Mickey"><br>Last name: <input type="text" name="LastName" value="Mouse"><br><input type="submit" value="Submit"></form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p>

</body></html>

HTML – Seção BODYFormulários - Tipos

Text

Radio

Checked

Submit

CSS

Cascading Style Sheets

O que podemos fazer com CSS ?

Tamanho

Posição

Como usamos o CSS nas nossas paginas Web ?

Três maneiras

Inline

Embedded

External

(ordem: do mais fácil para o melhor)

Inline CSS (bad)

<body><h1 style = "color:red ;"> Ola Mundo </h1></body>

Inline CSS (bad)

<body><p style = "color:red ;"> Ola Mundo </p></body>

Mistura apresentação com estrutura

Inline CSS (bad)

<body><p style = "color:red ;"> Ola Mundo </p></body>

Mistura apresentação com estrutura

É aceito no HTML 4.01 strict e no XHTML

Embedded CSS (OK)

<head><style type="test/css">p {color:red;}</style></head>

Embedded CSS (OK)

<head><style type="test/css">p {color:red;}</style></head> Rápido e fácil.

Use em pequenas aplicações.

External CSS: link tag (GOOD)

<head><link rel="stylesheet" href="meuestilo.css"><head>

Por dentro do CSS

Três partes

1.Seletor

Três partes

1.Seletor2.Propriedades

Três partes

1.Seletor2.Propriedades

3.Valores

1. Primeiro selecionamos o elemento

p { }

2. Então dizemos o que queremos mudar

p { color: }

3. Então dizemos qual o valor para essa mudança

p { color: blue;}

h1 { color: red; font-size: 12px;}

Ponto e virgulaChaves

Dois pontos

CSS Sintaxe

1.Seleção2.Declaração3.Cascata

SELEÇÃO

Seleção

Tipos de seleção

a. elementb. classc. idd. posição no documento

1. Element

Seleciona todos elemento <p>, em todo o documento HTML

p { }

2. Class

Seleciona todos os elementos da classe "menu"

.menu { }

. significa "esse é um nome de uma classe"

3. id

Seleciona o elemento com id "rodape"

#rodape { }

# significa "esse é um nome de um id"

4. posição no documento

Seleciona todos elementos "p" descendentes de rodape.

#rodape p { color:red; }

<div id ="rodape"><p> aqui é aplicada </p><span>aqui nao se aplica</span></div><p>aqui nao se aplica</p>

aqui é aplicada aqui nao se aplica aqui nao se aplica


Seleciona todos elementos "p" descendentes de rodape.

p.primeiro { color:red; }

<div id ="rodape"> <p class ="primeiro p" > aqui é aplicada </p> <p class ="segundo p"> aqui nao se aplica </p></div><p>aqui nao se aplica</p>

aqui é aplicada aqui nao se aplica aqui nao se aplica


#header div.content form p em.required {}

O que estamos selecionando pelo seletor acima ?

Pseudo classes

a:link {} /* link não visitado */a:visited {} /* link visitado */a:hover {} /* mouseover */a:active {} /* link selecionado */

DECLARAÇÃO

Declaração

(o que está dentro das chaves)

selector { property: value;}

Declaração

É a combinação de propriedade e valor.

Nos declaramos o que queremos mudar

CSS define diversas coisas que podemos declarar. Exemplo

fontcolorbackground-colorborder

(essas são as propriedades)

Cada propriedade possui um conjunto de valores que pode de ser aplicado.

font: 12px normal Verdana, sans-serif;color: #123;background-color: red;border: 1px solid rgb(193,193,193);

Propriedades tem diferentes granularidadesPor exemplo a propriedade "border" ...


border

border-colorborder-bottomborder-widthborder-leftborder-topborder-right....


border

border-colorborder-bottomborder-widthborder-leftborder-topborder-right....

font

font-familyfont-sizefont-stylefont-weight

Existe uma alternativa mais simplesshorthand

Existe uma alternativa mais simplesshorthandborder: 1px solid #000

border-width: 1px border-style: solid border-color: #000

É equivalente a:

Podemos mudar especificas partes no estilo de um elemento

O que estamos fazendo aqui ?

p { border: 1px solid red; }p.intro {border-color:blue;}

Unidades Absoulta vs relativaspx em %

Unidades absolutas

Pixels (px) are unidades absolutas.

Elas são sempre do mesmo “tamanho”. Independentemente do dispositivo

Unidades relativas

em é sempre relativa ao valor corrente do tamanho da fonte.width: 2em;font-size: 2em;

% é relativo a diferentes coisas em diferentes contextoswidth: 50% ; 50% da largura disponívelfont-size: 50% ; 50% do tamanho corrente da fonte

Unidades relativas

em é sempre relativa ao valor corrente do tamanho da fonte.width: 2em;font-size: 2em;

% é relativo a diferentes coisas em diferentes contextoswidth: 50% ; 50% da largura disponívelfont-size: 50% ; 50% do tamanho corrente da fonte

HTML5 usaremos em para fonts e não mais px.

Como é calculado ?

Como é calculado ?

body {font-size:12 px;}

h1 {font-size: 200 % ;}

h1 a {font-size: 75%;}

Como é calculado ?

body {font-size:12 px;}

h1 {font-size: 200% ;}O texto de h1 é 24 pixels (12*2)

h1 a {font-size: 75%;}Um link dentro de um h1 é 18 pixel (12*2*.75)

Como é calculado ?

body {font-size:100%;}

h1 {font-size: .75em;}

Como é calculado ?

body {font-size:100%;}

h1 {font-size: .75em;}

Considerando o tamanho de 16 pixels para o browser, temos 0.75 * 16 = 12

CASCATA

Cascata

Como e quais declaração serão aplicadas aos elementos;

Regras para aplicação das declarações

Cascata

Como e quais declaração serão aplicadas aos elementos;

Regras para aplicação das declarações

EspecificidadeHerança

Usualmente, as declarações são aplicadas na ordem de definição

p {color: red;}p {color: blue;}

A ultima declaração é a valida para todos elementos “p”.

Usualmente, as declarações são aplicadas na ordem de definição

p {color: red;}p {color: blue;}


ESPECIFICIDADE.

Usualmente, as declarações são aplicadas na ordem de definiçãop {color: red;}p {color: blue;}


A última declaração mais específica.

ESPECIFICIDADE.

<div id =“a”><div id =“b”><h1> </h1></div>

</div>

#a #b h1 {color:red;}#a h1 {color: blue;}

Qual seletor é mais específico ?Qual será a cor de h1 dentro de #b ?

Regras para determinar a especificade

●Elemento é 1 ponto●Uma classe é 10 pontos●Um id é 100 pontos

Regras para determinar a especificade

○ Elemento é 1 ponto○ Uma classe é 10 pontos○ Um id é 100 pontos

p a {} = 2 pontosp.intro a {} = 12 pontos#about p.intro a {} = 112 pontos

Herança

Elemento podem herdar estilos dos elementos ascendentes

#blog {color: red;}

<div id=“blog”><p>Ola</p></div>

O elemento “p” por ser descendente de #blog, terá cor vermelha.

#blog {color: red;}

<div id=“blog”><p>Ola</p></div>

O elemento “p” por ser descendente de #blog, terá cor vermelha.

Atenção, nem todos os estilos são “herdáveis”.

Usualmente ...

Propriedades relativas a texto são herdadas

Propriedades relativas a layout não são herdáveis

Layout

1.Modelo caixa2.Fluxo (“propriedade display”)3.Posição4.Flutuação

Modelo caixa

ContentPaddingBorderMargin

Modelo Caixa

Content

Declarando margin ou padding

margin: 1em;Todas as margens = 1em

margin: 1em 2em;Superior e inferior = 1em e direita e esquerda = 2em

margin: 1em 2em 3em 4em ;Superior = 1em, direita = 2em, inferior = 3em e esquerda = 4em

Declarando margin ou padding

margin: 1em;Todas as margens = 1em

margin: 1em 2em;Superior e inferior = 1em e direita e esquerda = 2em

margin: 1em 2em 3em 4em ;Superior = 1em, direita = 2em, inferior = 3em e esquerda = 4em

Movimento do relógio

Fluxo (“propriedade display”)

Em linha (inline)Mostra na mesma linhaEx: <span>, <a>, <input>, <img> ..

Nível de bloco (block)Mostra em uma linha posteriorEx: <h1>,<p>, <ul>, <div>

Exemplo

<p> Click <a href=""> aqui </a> </p>

a { display: block; }

Clickaqui

Posição

static (padrão)absoluterelativefixed

Posição

static (padrão)absoluterelativefixed

Flutuação (float)

Exercícios

css-walkthrough

https://docs.google.com/open?id=0B1VtB-qFV7nyTkUyaTluVE5TQ21mZGdPeVk1ZGd0dw

https://docs.google.com/open?id=0B1VtB-qFV7nyTkUyaTluVE5TQ21mZGdPeVk1ZGd0dw

Introdução ao HTML e CSS

Documents

Transcript of Introdução ao HTML e CSS