Scribd
Carregar
38 visualizações31 páginas

PDF8 DWeb

Enviado por

daviasddb
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
38 visualizações31 páginas

PDF8 DWeb

Enviado por

daviasddb
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 31

P r o f. M e .

Re n a t o A l v e s F e r r e i r a
linkedin.com/in/renato-alves-ferreira

Disciplina:

Aplicações para Internet

Prof. Me. Renato Alves Ferreira


HTML COM CSS

prof. Me. Renato Alves Ferreira


Agenda da aula

Utilizando a linguagem CSS para estilizar páginas em HTML

– Descrever a função e a importância do CSS para as páginas web.


– Apresentar a sintaxe e as possibilidades de criação com CSS aplicado ao layout.
– Criar páginas HTML estilizadas com CSS.
- Aplicar códigos CSS por intermédio de Seletores .

prof. Me. Renato Alves Ferreira


Formatação de HTML utilizando CSS – Criando Folhas de Estilos
CSS (Cascating Style Sheet – Folha de Estilos em Cascata), é uma linguagem que auxilia na aparência e ajustes no
layout de paginas para a Web. A partir de um só documento do CSS, pode-se utilizar em vários documentos
HTML.

Foi idealizado em 1994, mas em 1995 o CSS1 foi desenvolvido pela W3C (World Wide Web Consortium - principal
organização de padronização da World Wide Web).

Com o CSS podemos ajustar margens, linhas, cores, alturas, larguras, imagens e posicionamento, sem
necessidade de usar Tags em HTML. O CSS tem também alguns códigos prontos, permitindo aos usuários
pouparem tempo criando códigos muito comuns.

Métodos de implementação do CSS:

1 ) Diretamente na tag HTML, coloca-se o código CSS dentro da tag que pretende-se ajustar (inline).
2 ) No cabeçalho da página HTML, abrindo um bloco CSS dentro da tag <head> e aplicando a configuração
desejada de forma global em todas as tags mencionadas no bloco.
3 ) Em uma folha de estilos. Um arquivo .css que será vinculado à página html que o invocar.

prof. Me. Renato Alves Ferreira


Formulário com formatação sem CSS

prof. Me. Renato Alves Ferreira


Método 1 – Inline - Implementação com CSS - individual
Exemplo1 - CSS diretamente em cada tag HTML
(inline)

Nesse exemplo, apenas a 1ª tag h1 recebeu


o código em CSS
style="font-style: italic“ ,além da tag de cor.

No caso da tag p, o código CSS


style ="color:blue”, apenas esse parágrafo
ficará azul.
prof. Me. Renato Alves Ferreira
Método 2 - Implementação com CSS – Método global aplicado no cabeçalho da página
Exemplo 2 - CSS em todas as tags da página de uma só vez pelo <head> da página

Nesse exemplo, usamos a sessão


<head> da página para aplicar o
CSS em todas as tags
especificadas, deixando o código
HTML mais limpo.

Mas se fosse necessário padrões


diferentes para tags de mesmo
tipo ?

Para resolver esse problema,


deve-se usar os seletores como
os parâmetros id e class, que
veremos mais adiante.

prof. Me. Renato Alves Ferreira


Resultado da formatação em bloco de CSS na página HTML

(trecho do código CSS introduzido no cabeçalho da página HTML)

prof. Me. Renato Alves Ferreira


Método 3 - Implementação do CSS – Usando uma folha de estilos
Exemplo 3 – Criação de uma folha de estilos em arquivo CSS e referenciado nas páginas HTML

Perceba agora que o código HTML


está ‘limpo’ e livre de formatações
desnecessárias, pois a folha de
estilos CSS, invocada na linha 11,
fará todo o trabalho ‘sujo’,
deixando a parte de estilização
separada da estruturação e
conteúdo da página.
O arquivo folha_estilo.css deverá
estar na pasta css ou ../css do
prof. Me. Renato Alves Ferreira
(continuação) - Arquivo .css que implementará a Folha de estilos CSS

Perceba que diferentes


estilizações são aplicadas
separadamente para cada
elemento HTML :
<body> ,
< h1> ao <h6> ,
e <p>

prof. Me. Renato Alves Ferreira


Todo o trabalho de formatação e estilização da página fica a cargo do CSS e libera o código HTML
apenas para a estruturação e conteúdo.

prof. Me. Renato Alves Ferreira


Atividade com CSS

Aplicar códigos CSS das 3 formas vistas até o momento em 3 páginas pequenas.

prof. Me. Renato Alves Ferreira


Divisões no código para facilitar a estilização por CSS

Ao estruturar um site, pode-se aplicar diversas divisões, afim de organizar áreas distintas no site. Cada divisão representa
uma parte do layout ou ainda representar um grupo de conteúdo. Isso facilita a implementação com CSS.

Anteriormente ao HTML5, usava-se a tag div para criar essas segmentações, agora, é possível combinar as div com um novo
recurso, chamado Seções (Sections), isso facilita a segmentação de forma mais evidentes e simples .

A tag div é chamada de container genérico, que permite definirmos separações ou segmentações no código, identificadas
pelos parâmetros class e ou id, que permitirão dar nomes e ids a tais segmentações.

As divs podem ser utilizadas para agrupar elementos para fins comuns de estilos, ou porque compartilham valores de
atributos.

Vejamos alguns tipos de divs e posteriormente as Sections :

prof. Me. Renato Alves Ferreira


Exemplo de aplicações com divs
<!DOCTYPE html> exep_div1.html <!DOCTYPE html> exep_div2.html
<html lang="pt-br"> <head>
<head> <meta charset="utf-8">
<title></title> <link href="css1.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8"> </head>
<link href="css1.css" rel="stylesheet" type="text/css" /> <body>
</head> <div class=“textos”>
<body> <div class="classe1"> Texto 1 </div>
<div class="classe1"> Texto 1 </div> <div class="classe2"> Texto 2 </div>
<div class="classe1"> Texto 2 </div > <div class="classe3"> Texto 3 </div>
<div class="classe1"> Texto 3 </div > <div > Exemplo de Div Sem classe </div>
</body> <p> Texto em parágrafo na Div</p>
</html> </div>
</body>
.classe1{ css1.css </html>
background: blue;
color: red;}
.textos{
background: yellow;
color: blue;} Obs. Se necessário, acrescentar a pasta em que está seu css.
.classe3{ Exemplo: href = “pasta/css1.css”
color: white;
background: #FBA919;} prof. Me. Renato Alves Ferreira
Tipos de Sections:
HEADER Define um cabeçalho de uma determinada seção.
FOOTER Define o rodapé da seção ou da página.
NAV Define um grupo ou bloco de links de navegação.
ASIDE Define um elemento lateral podendo conter bloco de navegação, citação ou outras informações de um
sidebar.

ARTICLE Define a área onde pode conter um artigo, texto, redação, conteúdo ou otros.
SECTION Define um bloco ou um grupo para um assunto específico. A section agrupa diversos elementos em comum
que tenham relação entre si. Exemplo, uma área no site com links, conteúdo, imagens, etc.

Veremos esses elementos ao longo do curso e alguns exemplo a seguir.

prof. Me. Renato Alves Ferreira


Exemplo de organização da página com Sections

(Nesse exemplo não foi aplicado CSS)

Esse bloco poderia entrar em algum


ponto do body.

prof. Me. Renato Alves Ferreira


Exemp_section.html
Exemplo de organização da página
com vários tipos de Sections e
Seletores para uso com CSS

Seletores para o CSS :


tags
#
.
Continuação...
folha_estilo_section.css Folha de estilos utilizada e seus Seletores

Tag → todas as tags do mesmo tipo serão afetadas


# → o elemento com a Id especificada será afetado
. → todas as classes com mesmo nome serão
afetadas
Resultado

prof. Me. Renato Alves Ferreira


Resultado

prof. Me. Renato Alves Ferreira


Mais um exemplo....

Aplicando sections, bordas,


efeitos, menus e outros
recursos CSS.

prof. Me. Renato Alves Ferreira


CSS usado na página

prof. Me. Renato Alves Ferreira


prof. Me. Renato Alves Ferreira
Atividade

Crie uma página em HTML, ou altere a anterior salvando em um novo arquivo, e aplique os diferentes Seletores vistos .

Altere o arquivo CSS ou gere um novo. Teste outras possibilidades.

prof. Me. Renato Alves Ferreira


Uso de Seletores em HTML para facilitar a identificação e estilização
Os Seletores permitem identificar, agrupar e definir elementos HTML para facilitar a
referenciação dos mesmo no CSS.
Seletores podem ser :
➔ As próprias tags HTML (p, h1, form, ol, ul, input, label, table, body, textarea, etc)
➔ ID - o seletor id permite identificar de maneira individual e exclusiva uma tag HTML. Não pode
ser usado em outras tags. Exemplo <p id=“paragrafo5”>
➔ CLASS – o seletor class permite agrupar e identificar um grupo de tags de mesmo tipo para
receberem formatações todos de uma vêz.
Exemplo : Nome : <input class=“bloco2” type=“text”>
Email : <input class=“bloco2” type”email”>
Telefone : <input class=“bloco2” type=“number”>
➔ Seletores específicos : <div> <section> <header> <footler> <nav> <article> <aside> <span>
prof. Me. Renato Alves Ferreira
Aplicar códigos CSS por intermédio de Seletores e Segmentações (Divisões)

Em HTML e CSS, há a possibilidade de aplicar estilos exclusivos em marcações HTML, identificadores, regiões,
comportamentos ou divisões na página, por intermédio de Seletores.

Tais Seletores podem ser as próprias tags HTML, chamadas Seletor de Tipo ou de Tag (já visto no exemplo
anterior), Seletor de Classes, Seletores de identificação ou Seletores de ID, Seletores de Atributos, Seletores de
Pseudo -Classes ou Estado.

Vejamos alguns exemplos de seletores:

Seletores de Tipo (direto no arquivo CSS) Seletores de Classe


(no arquivo HTML)
body{
<p class=“paragrafo2”>
font-size: 20px; letter-spacing: 1.0px; }
Esse parágrafo terá um CSS exclusivo
</p>
h1{ ----------------------------------------------------------------------------------------------

font-style: italic; color:yellow; } (no arquivo CSS)

p{ .paragrafo2 {
color: blue; background: #550000; } color: red;}

prof. Me. Renato Alves Ferreira


Exemplo com uso de Seletor ID Exemplo com uso de com dois seletores
Seletores de ID Seletores duplos ( Classes e ID )

(no arquivo HTML) (no arquivo HTML)


<h2 id=“titulo2”> <h2 class=“segundoH2” id=“titulo2”>
Esse parágrafo terá um CSS exclusivo </p> Esse título terá dois códigos CSS exclusivo s</h2>

(no arquivo CSS)


#titulo2 { (no arquivo CSS)
color: black;} #titulo2 {
color: black;
}
Outras tipos de seletores são aplicados em divisões
e seções, que podem ser aplicadas às páginas HTML .paragrafoH2 {
para facilitar os códigos em CSS. background: white;
}
Como criar tais divisões e seções veremos
posteriormente.

prof. Me. Renato Alves Ferreira


Enviando dados do formulário (métodos get e post)
No formulário que enviará os dados (Front-end / lado do cliente), é necessário informar qual o arquivo no lado do servidor
(Back-end ou Server-side) terá um script para processar os dados de entrada (em php, por exemplo). O arquivo que irá
receber tais dados é especificado no parâmetro action do formulário .

<form action="/pagina_no_servidor.php" method="post">

Também deverá ser informado o método de envio, como GET ou POST. O método especifica a forma como o
dado transportado via HTTP. Os dados do formulário podem ser enviados como variáveis (parâmetro name dos
objetos) pela URL (method="get") ou como transação no corpo do protocolo HTTP (method="post").

Notas sobre GET: Acrescenta os dados do formulário ao URL, em pares nome/valor; NUNCA use GET para enviar dados
confidenciais! (os dados do formulário enviado são visíveis no URL!) ; O comprimento de um URL é limitado (2.048
caracteres); GET é rápido e bom para dados não sigilosos.

Notas no POST: Acrescenta os dados do formulário dentro do corpo da solicitação HTTP (os dados do formulário enviado
não são mostrados no URL); O POST não tem limitações de tamanho e pode ser usado para enviar grandes quantidades de
dados de maneira mais segura.
O botão enviar do formulário deverá ser do tipo submit (não pelo tipo button).

<input type="submit" id="enviar" value="Enviar">.

prof. Me. Renato Alves Ferreira


Atividade – Criação de Páginas Estilizada

Crie uma página em HTML, ou altere alguma existente, aplicando o CSS, os diferentes
Seletores HTML e recursos vistos.

prof. Me. Renato Alves Ferreira


Como receber os dados de um formulário em HTML
Para receber os dados do lado do formulário do lado do servidor (Back-end) será necessário um Serviço HTTP habilitado,
como Apache ou IIS (Servidores Web), uma aplicação em linguagem de programação que trabalhe do lado do servidor,
como PHP, JAVA, ASP, Python, Perl, C#, .NET, C++ e posteriormente um banco de dados para armazenar os dados
recebidos, como MySQL, SQL Server, PostgreSQL, Oracle.
Programação PHP e manipulação de banco de
Exemplo de código em PHP para receber dados dados será visto no decorrer do curso.

//Arquivo: recebe_dados.php

<?php
// Recebe os dados e guarda-os em variáveis
$nome = $_POST['nome'];
$email = $_POST['email'];

echo "Seu nome é $nome, e o e-mail é $email";


?>

https://www.alura.com.br/artigos/o-que-e-front-end-e-back-end

prof. Me. Renato Alves Ferreira


Algumas Bibliografias sobre Desenvolvimento Web
LEMAY, Laura; COLBURN, Rafe; TYLER, Denise. Aprenda a criar páginas Web com HTML e XHTML em 21 dias. São Paulo: Pearson Education
do Brasil, 2002. Recurso online.

MILETTO, Evandro Manara. Desenvolvimento de Software II Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP. Porto
Alegre Bookman 2014 1 recurso online ISBN 9788582601969.

SOARES, Walace. PHP 5 conceitos, programação e integração com banco de dados. 7. São Paulo Erica 2013 1 recurso online ISBN
9788536505633.

TERUEL, Evandro C. HTML 5 - Guia Prático, 2nd edição. Érica, 06/2014. Recurso online.

HAROLD, Elliotte R. Refatorando HTML. Bookman, 01/2010. Recurso online.

MARINHO, Antonio L. Desenvolvimento de Aplicações para Internet. São Paulo: Pearson Education do Brasil, 2016. (Biblioteca Universitária
Pearson).

DEITTEL, Paulo J, DEITTEL, Harvey M. Ajax, Rich Internet Applications e Desenvolvimento Web para Programadores. São Paulo: Pearson
Education do Brasil, 2008. (Biblioteca Universitária Pearson).
Outras referência:
https://www.w3.org/Style/CSS/Overview.en.html
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout
https://www.w3schools.com/
prof. Me. Renato Alves Ferreira
Te espero na próxima aula!

Você também pode gostar