Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
201829 195620 Aula+001+ +HTML+e+CSS
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Programação para internet
Prof. Marcelo Sudo
HTML e CSS
Objetivos:
Apresentar aos alunos a linguagem
HTML de forma que eles compreendam
a estrutura da linguagem e a
formatação de estilo CSS para construir
páginas web estáticas.
Internet
A internet é um sistema que interliga diversas redes
de computadores.
Internet
A internet oferece a infraestrutura para diferentes
serviços (ou aplicações):
Mensagens;
Conversas;
Recursos (Armazenamento);
Aplicativos;
Outros.
Arquitetura cliente
servidor
Cliente Servidor
Cliente inicia a comunicação,
por meio de uma requisição
Servidor processa a requisição
e devolve uma resposta
Arquitetura da web
Cliente
Servidores
Requisição padronizada
Resposta padronizada
Protocolo de
comunicação
Arquitetura da web
Cliente
Servidores
URL
HTML
HTTP
Arquitetura da web
Cliente Servidor
GET /index.html HTTP/1.0
HTTP/1.0 200 OK
URL
Uniform Resource Locator
É um identificador que oferece um método para
recuperação do recurso.
http://www.etep.edu.br/aula/programacao.html
Partes da URL
http://www.etep.edu.br/aula/curso.jsp?id=2#material
Esquema
Partes da URL
http://www.etep.edu.br/aula/curso.jsp?id=2#material
Domínio: nome + categoria + país
Partes da URL
http://www.etep.edu.br/aula/curso.jsp?id=2#material
Subdomínio
Partes da URL
http://www.etep.edu.br/aula/curso.jsp?id=2#material
Caminho / pasta / categoria, etc...
Partes da URL
http://www.etep.edu.br/aula/curso.jsp?id=2#material
Arquivo ou recurso
Partes da URL
http://www.etep.edu.br/aula/curso.jsp?id=2#material
Parâmetros: nome + valor
Partes da URL
http://www.etep.edu.br/aula/curso.jsp?id=2#material
Fragmento, seção, techo, etc...
HTTP
HyperText Transfer Protocol
É um protocolo de comunicação usado para o
intercâmbio de hiperdocumentos na World Wide
Web.
HTTPS
O HTTPS cria uma conexão criptografada sobre
uma conexão HTTP.
Usada por lojas virtuais, bancos e qualquer site que
precise de privacidade e segurança.
Linguagem HTML
É a linguagem de descrição/formatação de
documentos usada na Internet. É orientada por
marcadores ou tags. Cada tag informa ao cliente, ou
navegador, como ele deverá ver o texto.
Estrutura básica HTML
A tag principal, localizada na raiz da página é o
<html> e dentro dela se utiliza as tags <head> e
<body>, conforme estrutura abaixo.
Tag <head>
A tag <head> define o cabeçalho de um documento
HTML. As tags dentro dela trazem informações
sobre o documento que está sendo aberto
A tag <title> define o texto que é exibido na barra de
título do navegador. Veja o exemplo a seguir
Tag <head>
Algumas definições que podem ser utilizadas na tag
<head> são:
Tipo de codificação da página;
Informação de cache;
Arquivos externos como Javascript e CSS;
etc
Tag <body>
A tag <body> define o que será exibido no
navegador. Dentro da tag <body> podem ser
encontradas diversas tags.
Versões do HTML
Atualmente na versão 5.
Como boa prática deve ser definido no cabeçalho a
versão do HTML utilizada pela página.
Para definir a versão utiliza-se a tag DOCTYPE
antes da tag <html>
DOCTYPE
Exemplos:
HTML5
<!DOCTYPE html>
HTML4 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5
Versão final em 2014
Várias tags descontinuadas, como por exemplo
<center>, <font>, etc.
Passou a ter tags semânticas, como <header>,
<footer>, <nav>, etc.
Novas APIs Javascript.
Dentre outras melhorias.
Títulos e subtítulos
Existem seis níveis de título <h1></h1> até
<h6></h6>.
Parágrafos
Para marcar um parágrafo se utiliza a tag <p></p>.
Outra tag útil é o <br> que representa uma quebra
de linha.
A tag <div> e <span>
As tags <div> e <span> são utilizadas para agrupar
um conjunto de tags e aplicar alguma formatação.
A tag <span> normalmente é utilizada em um
escopo menor, por exemplo, para formatar apenas
uma frase dentro de um parágrafo.
Listas ordenadas
A tag <ol> define uma lista ordenada. E a tag <li>
para os elementos da lista. No exemplo foi utilizado
CSS para exibir um número romano na frente de
cada item.
Listas não ordenadas
A tag <ul> define uma lista ordenada. E a tag <li>
para os elementos da lista. No exemplo foi utilizado
CSS para definir o símbolo utilizado como marcador.
A tag <img>
A tag <img> é usada para inserir uma imagem no
documento HTML. Ela possui os atributos src (usado
para indicar a URL da imagem) e alt (usado para
exibir um texto alternativo).
A tag <a>
A tag <a> define um link da sua página a outras
páginas, e-mails e até mesmo, a pontos específicos
na própria ou outras páginas. O atributo href recebe
o endereço do local a ser redirecionado. Outro
atributo bem utilizado é o target para definir onde o
link será aberto, por exemplo em uma nova aba.
A tag <table>
A tag <table> define uma tabela. A tag <tr> é
inserida diretamente no corpo da tag <table> e ela
define uma linha na tabela. As colunas (células) na
linha são determinadas pela tag <td> e são inseridas
dentro da tag <tr>.
A tag <table>
Uma prática muito comum antigamente era montar o
design e alinhamento dos elementos utilizando
<table>.
Porém não é uma boa prática, ao invés disto utilize
a tag <div> combinado com CSS para alinhar os
elementos.
Formulários
Formulários
O atributo action define a página que irá receber os
dados do formulário. E o atributo method define o
formato que os campos serão enviados, por POST
ou GET.
Os elementos radio e checkbox devem possuir o
mesmo name quando se tratarem do mesmo campo.
O botão submit envia os dados do formulário para a
página definida no action.
Material de consulta
Sugestão de site:
https://www.w3schools.com/
Exercícios
Utilizar um projeto web no Netbeans:
Escrever uma página HTML com o seu nome
como título e quais são suas expectativas sobre
a disciplina.
Complemente o exercício com uma lista
numerada com suas 5 principais qualidades.
Insira uma imagem que represente um momento
importante na sua vida.
Inclua um link para a sua página favorita.
CSS
Cascading Style Sheets é uma linguagem de estilo
utilizada para definir a apresentação de documentos
escritos em uma linguagem de marcação, como
HTML
Seu principal benefício é prover a separação entre o
formato e o conteúdo de um documento.
Em vez de definir a formatação dentro do
documento, cria-se um arquivo separado
somente com os estilos e o mesmo é
referenciado no documento. Este estilo pode
inclusive ser reaproveita para diversos
documentos.
Principais características
Permite acessar e modificar propriedades de
elementos em páginas web, até mesmo
dinamicamente (com JavaScript)
Tem muito mais controle da formatação do que só
HTML
Permite padronizar a formatação dos elementos de
uma página inteira ou até mesmo do site inteiro de
uma só vez
Permite a criação de “tipos” de formatação (classes)
Permite separar a lógica de formatação do conteúdo
Sintaxe CSS
seletor { propriedade: valor }
O seletor corresponde qual elemento será
aplicado a propriedade, por exemplo body.
A propriedade que deseja ser alterada, por
exemplo, cor do fundo (background-color).
E o valor da propriedade informada, por
exemplo, cor do fundo vermelha.
Exemplo:
body { background-color: #FF0000; }
Estrutura CSS
Existem três tipos de estruturaCSS
CSS incorporado: fica no head e a configuração
vale para a página inteira.
CSS Inline: fica dentro da própria tag no atributo
style, e configura apenas o elemento.
CSS Externo: Fica dentro de um arquivo .css, e é
válido para as páginas que fizerem referencia
para o arquivo.
Como boa prática utilize CSS externo.
Algumas propriedades
Propriedade Função
color Cor do texto
background-color Cor de fundo
font-family Tipo da fonte
font-size Tamanho da fonte
border Configurações de borda
text-align Alinhamento
vertical-align Alinhamento vertical
visibility Visibilidade
margin Margem externa
padding Margem interna
CSS Inline
Para aplicar um estilo em uma única marcação
precisa-se colocar o atributo style nesta tag de
marcação
<p style="color:red;">Texto</p>
coloca-se o atributo
style no marcador
o valor do atributo style é formado
pelo nome da propriedade,
dois pontos e o valor da propriedade
para aplicar mais de uma propriedade, usa-se o ; para
separar as propriedades. Neste exemplo, setou-se a
propriedade cor da fonte e tamanho
<p style="color:red; font-size: 12px">Texto</p>
CSS Incorporado
<head>
<style type="text/css">
p {
background-color: red;
font-size: 12px;
}
</style>
</head>
Neste exemplo será aplicada a cor de fundo vermelho e tamanho de
fonte 20px em todos os textos que estiverem com a marcação <p>
As propriedades do CSS
Incorparado são as
mesmas do CSS Inline ou
Externo, o que é alterado é
apenas o local onde são
colocadas as propriedades
Os atributos precisam estar em
um bloco { } e separados por ;
CSS Externo
Para incorporar o CSS tem-se de
criar uma tag <link> no <head>
<head>
<link rel="stylesheet"
href="estilo.css"
type="text/css" />
</head>
O atributo type especifica o tipo do
arquivo
Arquivo que incorpora o estilo
p {
background-color: red;
font-size: 12px;
color: #0000ff;
}
Conteúdo do arquivo estilo.css
O atributo rel especifica a “relação”
com o arquivo HTML
O atributo href indica o arquivo
CSS que será incorporado
No arquivo .css não existem tags de
marcação, existem apenas os estilos
A tag <span>
• A tag <span> serve para se aplicar um estilo
independente das tags do HTML
<p style="color:magenta; text-align:justify">
Aqui começa um parágrafo, mas eu quero que
<span style="background-color:#99FFCC"> a partir
daqui o meu texto tenha fundo verde até este ponto.
</span>
E isto é possível usando a tag SPAN.
</p>
Neste exemplo foi aplicada a
cor de fundo apenas no texto
que está entre as tags <span>
e </span>. Veja que não
ocorreu quebra de linha
Formatação de um conjunto de tags
<style type="text/css">
p, h1, td {
background-color: #000000;
color: #FFFFFF;
font-family: "Times New Roman", Arial, Verdana;
}
</style>
O uso da vírgula permite definir uma configuração
para vários marcadores. Neste exemplo a
formatação será aplicada para as tags <p>, <h1>
e <td>
Propriedade font
• O atributo font permite definir todas as propriedades
da fonte em uma única declaração. Seu formato é:
style="font: font-style font-variant
font-weight font-size font-family"
<p style="font: italic small-caps bold 10pt Arial,
Verdana">
Exemplo de aplicação do atributo font
</p>
<p style="font: small-caps bold 10pt Arial, Verdana">
Exemplo sem o italic
</p>
Propriedade font
Veja que não existe a obrigação de fornecer todas as
propriedades, mas a ordem precisa ser mantida
Propriedade color
• A cor pode ser criada utilizando três notações
color: rgb(quantidadeVermelho, quantidadeVerde,
quantidadeAzul)
color: nomedacor
color: #RRGGBB
<p style="color: rgb(0, 0, 255)">
Este parágrafo está azul com a cor definida em valores
RGB de 0 a 255.
</p>
<p style="color: blue">
Este parágrafo está azul com a cor em definida pelo nome
em inglês.
</p>
<p style="color: #0000ff">
Este parágrafo está azul com a cor definida em valor
hexadecimal.
</p>
Propriedade text-align
• Define o alinhamento do texto
<p style="color:blue;text-align:left"> O uso deste
valor para o atributo text-align permite alinhar o
texto a esquerda. </p>
<p style="color:red;text-align:right"> O uso deste
valor para o atributo text-align permite alinhar o
texto a direita.</p>
<p style="color:magenta;text-align:center"> O uso
deste valor para o atributo text-align permite
alinhar o texto centralizado. </p>
<p style="color:green;text-align:justify"> O uso
deste valor para o atributo text-align permite
alinhar o texto justificado.</p>
left
right
center
justify
Propriedade text-align
Propriedade background-color
• Define a cor de fundo de um elemento HTML
<p style="color:#FFFFFF;background-
color:rgb(255,0,0)">
rgb(quantidadevermelho,quantidadeverde,quantidadeazul)
</p>
<p style="color:#FFFFFF;background-color:#00FF00">
#RRGGBB em hexadecimal </p>
<p style="color:#FFFFFF;background-color:blue">
nome da cor em inglês. </p>
Pseudoclasses de Estilo
• São seletores que permitem gerar efeitos nos
elementos de acordo com o estado deles. São eles:
a:link {
color:magenta;
}
a:visited{
color:green;
}
a:hover, a:active {
background-color:#CCCCCC;
}
tr:hover {
background-color: blue;
}
input:focus {
background-color: yellow;
}
:link e :visited são usados em links e
âncoras e definem respectivamente a
aparência do link não visitado e do visitado
:hover, :active e :focus são
teoricamente (depende do
navegador) aplicáveis a
qualquer elemento.
Respectivamente eles definem
a aparência do elemento
quando o mouse é passado
sobre ele, quando ele está
ativo e quando ele ganha foco
57
<html>
<head>
<style type="text/css">
p:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<p> Este parágrafo muda a cor de fundo e fonte
quando o cursor do mouse está sobre ele </p>
</body>
</html>
Pseudoclasses de Estilo
Classes de Estilo
• Uma classe de estilo pode ser criada para formatar
para um mesmo marcador sem usar CSS inline
<marcador>.classe {
atributo1:valor1;
... ;
atributoN:valorN;
}
ou
.classe {
atributo1:valor1;
... ;
atributoN:valorN;
}
<marcador> nome da tag onde a
classe de estilos será aplicada
.classe é o nome da classe
de estilos definida
Se um marcador for utilizado antes
do .classe, isto indica que somente
este pode fazer uso da classe de
estilos, já no segundo exemplo
qualquer marcador pode usar a
classe de estilos
atributo1, atributo2, ...,
atributoN é o nome do atributo
a possuir um valor de estilo
valor1, valor2,... , valorN
novo estilo para o atributo
em questão
<style type="text/css">
.destaque {
color: magenta;
font-size: 30pt;
background-color:gray;
}
.subdestaque{
color: yellow;
}
</style>
...
<div class="destaque"> Classe de estilos
aplicada à tag div e a <span
class="subdestaque"> tag span.</span>
</div>
Classes de Estilo
A tag <div> e as classes
• A tag <div> permite
trabalhar com o layout
de blocos de texto e
imagem, assim como as
tabelas, mas dá a
liberdade de
posicionamento. Além
disso podemos aplicar
as formatação de CSS
nestes blocos. Estes
blocos <div> são
conhecidos também
como layers
<style type="text/css">
.div_tag {
color:#FFFFFF;
background-
color:#FF00FF;
width:300px;
}
</style>
...
<div class="div_tag">
<p>Texto </p>
<p>Vermelho </p>
<p>Fundo branco</p></div>
Posicionamento e Tamanho
• Podemos configurar a CSS
para que a tag <div>
trabalhe com
posicionamento, que podem
ser relativo ou absoluto
• O posicionamento absoluto
considera como ponto de
referência o canto superior
esquerdo da janela do
navegador
• O posicionamento relativo
considera como ponto de
referência o canto superior
esquerdo da janela do
navegador e os objetos que
estiverem próximos
<style type="text/css">
.div_absolute {
color:red; background-
color: #FFFFFF; width:
300px; position:
absolute; left: 100px;
top: 100px;
}
.div_relative {
color:red; background-
color: #cccccc; width:
300px; position:
relative; left: 100px;
top: 100px;
}
</style>
<body bgcolor="#aaaaaa">
<div class="div_absolute">
<p>Absoluto</p>
</div>
<p>Texto normal</p>
<div class="div_relative">
<p>Relativo</p>
</div>
</body>
Posicionamento e Tamanho
Estilos Individuais
• O acesso ao estilo individual é obtido utilizando-
se o atributo id dentro dos marcadores
• Podem ser utilizados para criar estilos exclusivos
que são independentes de qualquer tag, tal como
o seletor de classes, a diferença é que eles são
normalmente utilizados para dar a cada elemento
do código HTML um nome e uma identidade
exclusiva. Este id é usado para manipulação com
o JavaScript
<style type="text/css">
#fundo{ background-color: yellow; }
.classe{ color: blue;}
</style>
...
<h2 id="fundo"> O meu único estilo é cor de fundo
amarela</h2>
<p class="classe"> Eu sou de cor azul </p>
<p class="classe" id="fundo"> Eu sou de cor azul com
cor de fundo amarelo </p>
Estilos Individuais
Exercícios
Crie um arquivo css externo e insira uma cor de
fundo ao seu HTML do exercício anterior.
Altere a sua página com outras cores e fontes.
Mude a cor e a fonte do texto em seu parágrafo
“expectativas do curso”.
Mude a cor, aumente a fonte e coloque em
negrito os títulos da lista enumerada.
Mude as cores dos estados do link (link, visited,
active e hover)
Utilize classes para definir formatação.
Exercícios
Crie uma nova página com um formulário de
contato, com os campos:
Nome (campo texto);
E-mail (campo texto);
Curso (campo de seleção / combo box);
Mensagem (campo texto);
Formate a página conforme preferência, através de
um arquivo css externo.
Dica: será utilizado tag input, select e textareaMateriais relacionados
11 pág.
39 pág.
182 pág.
Perguntas relacionadas
Compartilhar