HTML e CSS
Profa. Cintia Carvalho Oliveira
Doutoranda em Ciência da Computação – UFU
Mestre em Ciência da Computação – UFU
Bacharel em Ciência da Computação - UFJF
HTML
http://www.w3schools.com/html/DEFAULT.asp
Introdução a HTML (HYPER TEXT
MARKUP LANGUAGE)
• Linguagem para descrever páginas Web
• Consiste normalmente de um cabeçalho e um corpo definidos
por tags
• Os browsers são encarregados de interpretar as tags e
formatar o texto adequadamente
• Não é uma linguagem de programação
• Possui extensão htm ou html
Tags em HTML
• São delimitados por < e >
• Não são case-sensitive
• Forma geral:
<tag> texto </tag>
• Outras formas:
<tag atributo=“valor”> texto </tag>
<tag />
<br>
<hr>
Exemplo de tags
• <b>Texto em negrito</b>
• <strong> Texto em negrito </strong>
• <h1><b>Tags aninhadas</b><h1/>
• <img src="constr4.gif" width="144" height="50" />
http://www.w3schools.com/tags/default.asp
Estrutura de um documento HTML
<html>
<head>
<title>Título</title>
</head>
<body>
<p> Conteúdo </p>
</body>
</html>
Cabeçalho
Corpo
Tag de quebra de linha e parágrafo
<br> e <p></p>
• <br> é usada para pular linha
• <p> é utilizado para definir um parágrafo
• Teste <br /> de quebra de linha
• <p> Este é um parágrafo </p> <p> Este é outro </p>
Tag de linha <hr>
• Usada para separar conteúdo – desenha uma linha
• <h1>HTML</h1>
<p>HTML é uma linguagem de descrição web.....</p>
<hr>
<h1>CSS</h1>
<p>CSS define como o HTML será exibido... </p>
Lista ordenada <ol>
• Lista ordenada
• Atributos da tag
• type -> Define como será exibida a numeração (1, A, a, I, i)
• <ol>
<li>Cofé</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Lista não ordenada <ul>
• Lista não ordenada
• <ul>
<li>Cofé</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Tag <img>
• Usada para inserir uma figura no documento HTML
• Atributos da tag
• alt -> define uma descrição da imagem
• src -> define a url da imagem
• height -> define a altura da imagem em pixels
• width -> define a largura da imagem em pixels
• <img src=“logoIftm.gif" alt=“Logo do IFTM" />
Tag de link <a>
• Usada para criar um link para outro documento ou para
apontar para um lugar específico no documento atual
• Atributos principais
• href -> define a localização do documento de destino
• name -> define rótulo para definir um lugar específico da página
• target -> define como o link será exibido
• _blank -> nova página
• _self -> mesma página
•
<a href="http://www.iftm.edu.br">Site do IFTM!</a>
•
<a href=“index.html#topo”>Voltar ao topo</a>
•
<a name=“topo”>Topo da página</a>
Tabelas <table>
• São definidas com a tag <table>
• São divididas em linhas (<tr>) e as linhas são divididas em
colunas (<td>)
<table >
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
</table>
Atributos de tabela
-> define o tipo de borda da tabela
•
Border
•
Colspan
-> define quantas colunas uma célula ocupará
•
Rowspan
-> define quantas linhas uma célula ocupará
Formulários <form>
• Formulários permitem que o usuário informe dados para
serem processados pela aplicação
• Normalmente os elementos de um form são: text fields, text
area, checkboxes, radio button...
• A tag <form> não pode ser aninhada
Passos na submissão de um formulário
• O navegador envia os dados do formulário para o servidor
• O servidor ativa a url especificada através do atributo action
• O tipo do método definido no atributo method define como
os dados enviados pelo formulário serão acessados
• O método padrão, caso não haja especificação, é o GET
• É boa prática usar o método POST
Formulários
<body>
<form action=“processaForm.jsp" >
Nome: <input type="text"
name="firstname"><br />
Sobrenome: <input type="text"
name="lastname"><br />
Senha: <input type="password" name="senha">
<input type="submit" value="Enviar">
</form>
</body>
• URL após clicar no botão:
.../sirius/processaForm.jsp?firstname=Carlos&lastname=Bazilio&senha=abcdefg
Formulários
• Quando algum elemento do tipo “submit” é inserido num formulário e
acionado, seus dados são enviados para um arquivo
• O arquivo mencionado é indicado pelo atributo “action” do elemento
<form>
• Este arquivo deverá estar armazenado num servidor web (Apache,
Tomcat, IIS, ...), e estará escrito em alguma linguagem de
programação de servidores:
• jsp, php, asp, sevlets, ...
Elementos de um <form>
Campos de texto, senha e hidden
• Campo de texto:
• Name: <input type="text" name=“login">
• Campo de senha
• Senha: <input type=“password" name=“senha">
• Campo hidden:
• <input type=“hidden" name=“methodToCall“ value=“1”>
Radio buttons
• São usados quando é necessário que o usuário escolha uma
opção dentre algumas oferecidas
• <input type="radio" name=“sexo" value=“masculino">
Masculino
• <input type="radio" name=“sexo" value="feminino">
Feminino
Checkboxes
• São usados quando o usuário pode escolher uma ou mais
opções dentre algumas oferecidas
•
<input type="checkbox" name="curso" value="basico"> Java basico
•
<input type="checkbox" name="curso" value="web"> Java Web
•
<input type="checkbox" name="curso" value="avancado"> Java
avancado
Textarea
• É usado para que o usuário possa passar um texto com várias
linhas
•
<textarea name="informacoes" rows="2" cols="30">A carga horaria
do curso de java web do citi totaliza 30 horas divididas em duas
semanas.
</textarea>
Button
• Define um botão com uma ação específica
• Pode conter textos e imagens
• Atributos onMouseOver, onClick podem especificar a ação do
botão
• O atributo type é obrigatório com o valor “button”
•
<button type="button“>Incluir</button>
Drop-down list
• Cria uma lista com algumas opções que são exibidas quando o
usuário clica
<select>
<option value=“1”>Sport</option>
<option value=“2”>Sarna</option>
<option value=“3”>Barbie</option>
</select>
Formulários
• Tipos que podem ser utilizados com a tag <input>:
• button: Insere um botão
• checkbox: Insere um checkbox; para vários itens, basta inserirmos vários
“inputs” deste tipo
• file: Insere botão seleção de arquivo através de uma caixa de diálogo
• hidden: Campo pertencente ao formulário, mas que não será exibido na
página
• image: Insere uma imagem como um botão submit
• password: Insere um campo password (caracteres digitados não aparecem)
• radio: Insere um radiobox (análogo ao checkbox)
• reset: Restaura os valores iniciais do formulário
• submit: Encaminha os dados inseridos para algum arquivo
• text: Insere um campo de edição de texto
Outras tags de Formulários
Tag
<form>
Define um formulário para entrada do usuário
<input>
Define um campo de entrada
<textarea>
<label>
<fieldset>
Descrição
Define um campo texto com múltiplas linhas
Define um label para algum controle
Desenha uma caixa em torno de um conjunto de
elementos
<legend>
Define um título para um <fieldset>
<select>
Cria uma lista drop-down
<optgroup>
Criar uma hierarquia nas opções de uma lista drop-down
<option>
Uma opção na lista drop-down
<button>
Insere um botão. Difere de <input> por poder conter
algum conteúdo, como uma imagem
Tag <div>
• Serve para dividir o documento em partes que apresentam
características em comum
• Útil para adicionar CSS e alterar a visualização na tela
<div id="lista1“ align="center">
<select>
<option>Sport</option>
<option>Sarna</option>
<option>Barbie</option>
</select>
</div>
Prática 1
• Implementar uma busca do google com opções de italiano e
português (padrão)
• Deve usar:
<div>, <img>, <form>, <table>, radio button
CSS
CSS
• Cascading Style Sheets
• Estilos definem como elementos html devem ser
apresentados
• Permite a separação entre definição de conteúdo e
formatação em HTML
• Style sheets externos são definidos através de arquivos
CSS
• Atualmente é o padrão para inserção de estilo na
construção de páginas html
• http://www.csszengarden.com/
CSS
• Formato geral:
seletor { propriedade: valor }
• Uma definição de estilo em CSS será composta por uma
sequência de definições
• Exemplos:
• body { color: black }
• p { font-family: “Verdana”; text-align: center; color:
red }
• h1,h2,h3,h4,h5,h6 { color: green }
• p {margin-left: 20px}
Classes em CSS
• Classes em CSS permitem que um mesmo elemento seja exibido
de diferentes formas
• Formato usando classes:
• Exemplos:
seletor.classe { propriedade: valor }
• p.direita {text-align: right} // Alinha à direita
• p.centro {text-align: center} // Centraliza
• .esquerda {text-align: left} // Aplicado a qualquer elemento
html que contenha classe esquerda
<p class=“direita”>Este parágrafo será alinhado à
direita</p>
<p class=“centro”>Este parágrafo será centralizado</p>
<p class=“esquerda”>Este será à esquerda</p>
CSS em Link Externo
• Existem 3 maneiras se definir um CSS para um documento HTML
• Criando um link externo
<html>
<head><link rel="stylesheet" type="text/css"
href="mystyle.css" /></head>
<body>
Esta é minha primeira página.
</body>
/* Conteúdo do arquivo mystyle.css
</html>
*/
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
CSS definido internamente
<html>
<head>
<style type="text/css“>
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
<body>
Esta é minha primeira página.
</body>
</html>
CSS inline
<html>
<head</head>
<body style=“color: sienna; text-align: center”>
Esta é minha primeira página.
</body>
</html>
Aplicações
• Com CSS podemos formatar:
• Background
• Textos
• Fontes
• Margens
• Bordas
• Listas
• Tabelas
• http://www.w3schools.com/css/css_examples.asp
Tableless
• Padrão que vem sendo adotado na web para uso
massivo de html+css
• Objetiva, principalmente, melhor acessibilidade de
páginas web
• Propõe a não utilização tabelas html para a
construção do layout da página (origem do nome)
• Naturalmente, este uso não deveria ser evitado se o
que se deseja construir é uma tabela de fato
Construindo um Layout CSS
• http://www.maujor.com/tutorial/layout-css-passo-apasso.php
Diretrizes
• Construa em passos pequenos e teste cada passo em
diferentes navegadores
• Desenvolva para navegadores modernos e depois adapte para
os antigos
• Na fase de desenvolvimento e testes coloque a folha de estilos
na seção HEAD da página
• Valide seu código HTML e CSS
1º Passo
• Decidir a qual nível de navegadores o layout será servido
• Existem os com diferentes níveis de suporte
• Suporte total às CSS
• Suporte parcial às CSS
• Conteúdos não estilizados
2º Passo – Escolher os containers do
layout
• Analise o design da página e faça um esboço (pode ser em
uma folha de papel)
3º Passo – Nomear os containers
• Nomeie de acordo com a finalidade de cada container.
• container
• header
• mainnav
• menu
• contents
• footer
• Se o container for único na página use Ids no lugar de
Classes. Isso evita CSS conflitantes.
Nomeando containers
4º Passo – Criando as Marcações
• Começamos com uma declaração DOCTYPE strict que
permite o uso de marcações CSS
• Ligamos o documento CSS ao arquivo HTML.
Criamos os blocos DIV
Referências
• http://www.codecademy.com/
• http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf
• www.ic.uff.br/~bazilio/cursos/java/slides/HTML_CSS_Javascri
pt.ppt
• www.cin.ufpe.br/~hsp/Modulo1e2.ppt
• www.maujor.com/tutorial/layout-css-passo-a-passo.php
Download
