AULA 2 - HTML e CSS

•

UNASP

1

0

1

0

Progamador Senio

17/10/2022

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Algoritmos

29.043 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

TECNOLOGIAS 
WEB
AULA 2
2HTML
O QUE É XML?
▹ Significa Extensible Markup Language
▹ Uma linguagem criada para dividir de 
forma organizada as informações de 
um documento
▹ Ela não possui um padrão definido, 
ficando a cargo do criador do 
documento definir um padrão
▹ Ela funciona através de TAGS
3
4
<?xml version=”1.0”?>
<pessoa>
<nome>David</nome>
<idade>25</idade>
<sexo valor=”M”>
</pessoa>
5
{
Pessoa: {
nome: “David”,
idade: “25”
sexo {
valor: “M”
}
}
}
O QUE É HTML?
▹ Significa HyperText Markup Language
▹ É uma linguagem parecida com o XML, 
porém com tags próprias para a web
▹ Necessita de um interpretador, que na 
maioria das vezes é um browser
6
O QUE É XHTML?
▹ É um HTML, porém mais padronizado 
(seguindo o estilo do XML)
▹ Ele segue regras próprias, diferente do 
HTML comum que só dependia de ter 
tags com nomes próprios para o 
browser.
7
8
<html>
<head>
<body>
<Div name=div1>OLÁ</Div>
</body>
</html>
HTML
9
<html>
<head />
<body>
<div name=”div1”>OLÁ</div>
</body>
</html>
XHTML
10
PRINCIPAIS 
TAGS HTML
<html></html>
▹ Tag pai de toda representação HTML
▹ Basicamente todo o código HTML fica 
dentro desta Tag
▹ Visualmente, a presença dela não traz 
diferença, porém ela tem muita 
diferença para o browser e como ele vai 
interpretar o documento
11
<head></head>
▹ Cabeçalho do documento HTML
▹ Salva as informações de: título da 
página, ícone da página e arquivos CSS 
ou JS da página
12
<body></body>
▹ Corpo do documento HTML
▹ Guarda toda a parte visual da página
13
14
<html>
<head>
</head>
<body>
</body>
</html>
HTML
<title></title>
▹ Renderiza o título da página que será 
mostrado na guia do browser.
▹ Fica sempre dentro da tag Head 15
<link />
▹ Tag para carregar uma imagem ou um 
arquivo. Geralmente usado para 
carregar o ícone da página, ou os 
arquivos CSS e JS.
▹ Pode ficar tanto no Head quanto no 
Body
16
17
<head>
<title>Minha página</title>
<!- - na guia aparecerá esse título - - !>
<link rel=”icon” href=”/favicon.ico”>
<!- - carregará um ícone (icon) - - !>
<!- - este ícone está na mesma pasta do arquivo - - !>
<link rel=”stylesheet” href=”/styles.css”>
<!- - carregará um arquivo css - - !>
</head>
HTML
<p></p>
▹ Insere um texto do tipo parágrafo na 
tela.
▹ Sempre inserido dentro do body 18
<h1></h1>
▹ Insere um texto do tipo título na tela.
▹ Sempre inserido dentro do body
▹ Vai do h1 até o h6 19
20
<body>
<h1>Este é um H1</h1>
<h2>Este é um H2</h2>
<p> Este é um Parágrafo</p>
</body>
HTML
21
Resultado
<div></div>
▹ Cria um divisor dentro de uma página
▹ Este divisor pode conter outros 
elementos dentro dele, que serão 
renderizados junto com os demais, 
porém em um contexto diferente
22
<span></span>
▹ Cria um divisor dentro de um texto
▹ Utilizado quando se quer destacar ou 
inserir algum valor via JS dentro de um 
texto
23
24
<body>
<p>Este texto está fora da div</p>
<div>
<p>Este texto está dentro da div</p>
</div>
<p>Texto normal com <span>span</span></p>
</body>
HTML
25
Resultado
**Apesar de não apresentar diferenças visuais a princípio, tanto 
a div quanto o span podem ter estilos e comportamentos 
próprios que afetaram apenas as tags filhas deles 
26CSS
O QUE É CSS?
▹ Significa Cascading Style Sheets
▹ Indica como que os elementos HTML 
serão renderizados na tela (questão de 
layout)
▹ Extremamente usado quando se quer 
reaproveitar estilos em mais de uma 
tag ou parte do site.
▹ Pode ser feito junto com o HTML ou em 
um arquivo a parte
27
28
p {
color: red;
text-align: center;
}
Sintaxe CSS
Antes do { } eu informo o seletor, isto é, para quem é 
aquele estilo. Dentro do { }, se pode colocar várias 
declarações contendo chave: valor de cada atributo
29
p {
color: red;
text-align: center;
}
Sintaxe CSS
No caso acima eu estou informando que para todo p 
(parágrafo) da página HTML, a cor das suas letras serão 
vermelhas (red) e o seu texto estará alinhado no centro 
(center)
30
<html>
<head>
<style>
p {
 color: red;
 text-align: center;
} 
</style>
</head>
<body>
<p>Este parágrafo terá o estilo informado</p>
</body>
</html>
31
Resultado
32
.cor-vermelha {
color: red;
}
Outras sintaxes
Quando se coloca um . (ponto) na frente de um nome, é 
criada uma Classe CSS. Está classe pode ser utilizada em 
vários elementos de uma vez
33
#span-vermelho {
color: red;
}
Outras sintaxes
Quando se coloca um # (sharp) na frente de um nome, é 
criado uma Seletor por Id. Isso significa que somente a tag 
que tiver aquele Id pode importar aquele estilo. 
Lembrando que o Id é único em todo o documento
34
<head>
<style>
.cor-vermelha {
 background-color: red
}
#meuid {
 color: blue
}
</style>
</head>
<body>
<div class="cor-vermelha">
 <p>Texto dentro da DIV</p>
 </div>
 
 <p>Texto fora da <span id="meuid">DIV</span></p>
</body>
35
Resultado
ONDE APRENDER MAIS 
SOBRE HTML E CSS?
▹ W3School (site oficial do HTML5 e CSS)
36
https://www.w3schools.com/html/default.asp
37