HTML e CSS

HTML e CSS são fundamentais para a criação de páginas web, permitindo a definição de estrutura e estilo. HTML é uma linguagem de marcação que organiza o conteúdo, enquanto CSS controla a aparência visual. O documento também aborda a utilização de seletores e exemplos práticos para layouts e formulários responsivos.

Enviado por

gramelobr

Direitos autorais

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

0% acharam este documento útil (0 voto)

10 visualizações8 páginas

HTML e CSS

Enviado por

gramelobr

Direitos autorais

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/ 8

HTML e CSS

HTML e CSS são tecnologias chave para a criação de páginas web

atraentes e responsivas. Esta apresentação irá te guiar pelo básico até
alguns exemplos mais avançados.
O que é HTML?
HTML é uma Arquivo HTML é um HTML é fácil de
linguagem de simples arquivo de aprender
marcação texto
Com algumas horas de
Significa que ela é usada Ele contém apenas textos e estudo, você será capaz de
para definir partes da marcações, como se fosse criar sua primeira página
página como títulos, um documento. Todos os web!
parágrafos, imagens, etc. navegadores web são
capazes de processá-lo.
Estrutura básica de uma página HTML

Doctype head body

Declara o tipo de documento Contém informações sobre a Contém o conteúdo da página,

sendo utilizado. Doctype é página, como o título, link para como texto, imagens,
necessário para que o CSS, meta tags, etc. formulários, etc.
navegador saiba como
interpretar a página.
Tags e atributos em HTML
Atributos

Usados para fornecer informações adicionais

sobre as tags. Por exemplo, a tag <img> pode
ter um atributo "src" que especifica o local da
imagem que deve ser exibida.

1 2 3

Tags Aninhamento de tags

Usadas para envolver o conteúdo que Algumas tags podem ter outras tags
queremos que apareça na página. Alguns aninhadas dentro delas para criar hierarquia,
exemplos incluem: <p>, <img>, <a>, etc. como uma lista dentro de um parágrafo.
O que é CSS?

Significa “Cascading Permite a separação Trabalha com regras e

Style Sheets” entre conteúdo e seletores
design
Utilizado para controlar a Cada regra é composta por um
aparência das páginas web. você pode escrever um arquivo seletor que define quais
HTML que contém apenas o elementos na página a regra se
conteúdo e controlar como ele aplica e um bloco de
é exibido com um arquivo CSS declarações que define como
separado. esses elementos devem ser
exibidos.
Como funciona o CSS

1 Seletores

Seletores são usados para identificar

os elementos da página que serão
Declarações 2 estilizados. Eles podem se basear em
Cada declaração inclui uma atributos, classes, IDs e muito mais.
propriedade e um valor. Exemplo:
"color: blue". Esta declaração faz com
que o texto fique azul. 3 Herança

Algumas propriedades são transmitidas

dos elementos pais para os seus filhos,
como fonte, tamanho da letra, etc.
Seletores CSS
Seletores simples Seletores combinados

Selectores simples selecionam elementos Selectors combinados selecionam elementos

com base em seu nome, atributo ou com base em sua relação com outros
conteúdo. Por exemplo, <p> seleciona todos elementos. Por exemplo, <div><p> seleciona
os parágrafos da página. todos os parágrafos dentro de um div.

Seletores por classe Selectores por ID

Seleciona elementos com base em sua classe. Seleciona elementos com base em seu ID
A classe é definida no arquivo HTML e vários exclusivo. Um ID só pode ser atribuído a um
elementos podem compartilhar a mesma elemento em toda a página.
classe.
Exemplos práticos de uso de HTML e
CSS

Criação de layouts Páginas responsivas Formulários web

Usando HTML e CSS, você pode Com CSS, você pode fazer com Com HTML, você pode criar
criar layouts complexos com que sua página se adapte formulários para coletar
várias colunas, bordas, margens, automaticamente a diferentes informações do usuário. Com
etc. utilizando flexbox, grid ou tamanhos de tela, desde CSS, você pode personalizar a
floats. smartphones até monitores aparência desses formulários.
grandes.