PDF 4 DWeb

•

FMU

0

Wilson Delphino

28/04/2022

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Desenvolvimento Web

6.936 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Desenvolvimento de Software para Web 
P r o f . M e . Re n a t o A l v e s F e r r e i r a 
e m a i l : r e n a t o . f e r r e i r a @ f m u . b r 
 
 
D i s c i p l i n a : 
Prof. Me. Renato Alves Ferreira - Desenvolvimento de Software para Web 
prof. Me. Renato Alves Ferreira 
Agenda da aula 
 
– 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 . 
Formatação de HTML utilizando a linguagem CSS 
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. 
 
Formas 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 ) Diretamente na página HTML, abrindo um bloco CSS e aplicando a configuração desejada de forma global em 
todas as tags mencionadas no bloco. 
3 ) Em um arquivo .css que será vinculado à página html que o invocar. 
 Link de referência: 
https://www.w3.org/Style/CSS/Overview.en.html 
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout 
 
https://www.w3.org/Style/CSS/Overview.en.html
https://www.w3.org/Style/CSS/Overview.en.html
https://www.w3.org/Style/CSS/Overview.en.html
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout
prof. Me. Renato Alves Ferreira 
Exemplo de implementação do CSS 
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. 
Exemplo1 - CSS diretamente na tag HTML (inline) 
prof. Me. Renato Alves Ferreira 
Exemplo de implementação do CSS 
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. 
 
E se fosse necessário padrões 
diferentes para tags de mesmo 
tipo ? 
 
Para resolver esse problema, 
podemos usar os 
parâmetros id e class, que 
veremos mais adiante. 
 
Exemplo 2 - CSS em todas as tags da página, de uma só vez 
prof. Me. Renato Alves Ferreira 
Resultado da formatação em bloco de CSS na página HTML 
(destaque do código CSS introduzido no cabeçalho da página HTML) 
prof. Me. Renato Alves Ferreira 
Exemplo de implementação do CSS 
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’. 
prof. Me. Renato Alves Ferreira 
Folha de estilos CSS que será aplicada a página HTML 
Perceba que diferentes estilizações 
são aplicadas separadamente para 
cada estrutura HTML : 
 
<body>, < h1> ao <h6> e <p> 
prof. Me. Renato Alves Ferreira 
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 em uma página HTML das 3 formas vistas até o momento. 
 
Utilize a página de Cadastro criada anteriormente como referência, mas salve cada arquivo como outro nome. 
prof. Me. Renato Alves Ferreira 
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: 
Aplicar códigos CSS por intermédio de Seletores e Segmentações (Divisões) 
Seletores de Tipo (direto no arquivo CSS) 
 
body{ 
 font-size: 20px; letter-spacing: 1.0px; } 
 
h1{ 
 font-style: italic; color:yellow; } 
 
p{ 
 color: blue; background: #550000; } 
Seletores de Classe 
(no arquivo HTML) 
 
<p class=“paragrafo2”> 
 Esse parágrafo terá um CSS exclusivo 
</p> 
 
(no arquivo CSS) 
 
.paragrafo2 { 
 color: red;} 
prof. Me. Renato Alves Ferreira 
Exemplo com uso de Seletor ID 
Seletores de ID 
 
(no arquivo HTML) 
 
<h2 id=“titulo2”> 
 Esse parágrafo terá um CSS exclusivo </p> 
 
 
(no arquivo CSS) 
#titulo2 { 
 color: black;} 
Seletores duplos ( Classes e ID ) 
 
(no arquivo HTML) 
 
<h2 class=“segundoH2” id=“titulo2”> 
 Esse título terá dois códigos CSS exclusivo s</h2> 
 
 
 
 
(no arquivo CSS) 
#titulo2 { 
 color: black; 
} 
 
.paragrafoH2 { 
 background: white; 
} 
 
Exemplo com uso de com dois seletores 
 Outras tipos de seletores são aplicados em divisões 
e seções, que podem ser aplicadas às páginas HTML 
para facilitar os códigos em CSS. 
 
 Como criar tais divisões e seções veremos 
posteriormente. 
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. 
Bibliografias 
 BIBLIOGRAFIA BÁSICA 
 
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. 
 
BIBLIOGRAFIA COMPLEMENTAR 
 
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). 
 
Laravel Documentation. Disponível em: . Acesso em: 10 jun. 2018. 
prof. Me. Renato Alves Ferreira 
Te espero nas próximas aulas!