HTML e CSS

⮚ HTML E CSS
● Aula 1
o Como a Web Funciona
o A criação da internet e o primeiro navegador
o A história dos navegadores: para que serve HTML,CSS e Javascript
o Cliente e Servidor- O que é Front-End e Back-End

Como foi dito anteriormente, a Internet é uma rede de computadores e obtemos arquivos através da
Web.ll
Em desenvolvimento para a Web sempre separamos dois setores: a parte do servidor e a parte do
cliente.
O cliente é o computador do usuário, assim como o seu. É utilizado pelas pessoas para acessar
sites ou sistemas a partir de um endereço. Os arquivos vindos por esse endereço são
disponibilizados por um outro computador que serve estes arquivos. Estes computadores que estão
em algum lugar do mundo que servem arquivos e outros serviços são chamados de servidores.
● Aula 2
o Editores de Código e IDEs
o Nosso primeiro documento Html
o Compartilhamento de códigos com JS Playgrounds
Editor de Código
Software que ajuda na escrita de códigos.
IDE (Integrated Development Environment)

Ambiente de desenvolvimento de softwares com vários softwares integrados, incluindo um
editor de código.
Documento HTML5 básico

Pode-se gerar automaticamente no VS Code ao abrir um arquivo HTML e começar a
escrever “html”. Selecione a opção “html:5”.
● <!DOCTYPE html> - indica ao navegador que este é um documento HTML5;

● <html> - elemento raiz de uma página HTML;
● <head> - elemento onde colocamos informações sobre o documento;
● <title> - indica o título da página;
● <meta> - elemento opcional. Ele indica ao navegador algumas informações sobre o
documento;
● <body> - é o corpo do nosso documento, onde escrevemos o conteúdo da página.
Comentários HTML
Comentários servem para adicionarmos alguma anotação no código. Eles são ignorados
pelo navegador

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css
rel="stylesheet"

integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Helpers e Utilities</title>
<style>
.m-bottom {
margin-bottom: 500px;
}
.square {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<div class="d-flex justify-content-center bg-primary">
<div class="square m-4 border"></div>
<div class="square my-4 border border-5 border-dark"></div>
<div class="square mx-4"></div>
<div class="square ms-4"></div>
<div class="square me-4"></div>
<div class="square mt-4"></div>
<div class="square mb-4"></div>
</div>
<div class="d-flex justify-content-center my-5">

<div class="square p-4 mx-2 border border-5 border-dark bg-primary"></div>
<div
class="square py-4 mx-2 border border-5 border-primary bg-secondary"
></div>
<div
class="square px-4 mx-2 border border-1 border-danger bg-danger"
></div>
<div
class="square ps-4 mx-2 border border-4 border-info bg-warning"
></div>
<div
class="square pe-4 mx-2 border border-2 border-warning bg-info"
></div>
<div
class="square pt-4 mx-2 border border-5 border-success bg-dark"
></div>
<div class="square pb-4 mx-2 bg-success"></div>
<div class="square pb-4 mx-2 bg-success bg-light"></div>
</div>

<a href="#" class="link-primary">Link</a>
<a href="#" class="link-secondary mx-3">Link</a>
<a href="#" class="link-danger">Link</a>
<a href="#" class="link-warning mx-3">Link</a>
<a href="#" class="link-info">Link</a>
<a href="#" class="link-dark mx-3">Link</a>
<a href="#" class="link-success">Link</a>
<a href="#" class="link-light mx-3">Link</a>
</div>

<div class="ratio ratio-1x1 w-50">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/b3f1geJU1aQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>

<iframe
width="560"
height="315"
frameborder="0"
allowfullscreen
></iframe>
</div>
</div>

<iframe
width="560"
height="315"
frameborder="0"
allowfullscreen
></iframe>
</div>
</div>

<iframe
width="560"
height="315"
frameborder="0"
allowfullscreen
></iframe>
</div>
</div>
<div class="m-bottom"></div>
</body>
</html>
o
● Aula 5 a 7 – Componentes
o O que são componentes
o Componentes de Bootstrap
o Componentes de Buttons
o Componentes Alert
o Bootstrap Icons
o Conhecendo os Cards
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6
jIW3" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.
css">
<title>Components</title>
<style>
.m-bottom {
}
</style>
</head>
<body>
<div class="d-flex justify-content-center mt-4">
<button class="btn btn-primary"><i class="bi bi-facebook me-1"></i>
Facebook</button>
<button class="btn btn-danger mx-2">Meu botão</button>
<button class="btn btn-warning">Meu botão</button>
</div>
<div class="d-flex justify-content-center mt-4">
<a href="#" class="btn btn-primary"> Botão de link</a>
<a href="#" class="btn btn-dark mx-2"> Botão de link</a>
<a href="#" class="btn btn-info"> Botão de link</a>
</div>
<div class="d-flex flex-column justify-content-center mt-4">
<div class="alert alert-primary w-50 mt-2 mx-auto">
<i class="bi bi-exclamation-circle-fill me-3 fs-4"></i>Esse é o
meu alerta !
</div>
<div class="alert alert-danger w-50 mt-2 mx-auto">
<i class="bi bi-exclamation-circle-fill me-3 fs-4"></i>Esse é o
meu alerta !
</div>
<div class="alert alert-info w-50 mt-2 mx-auto">
Esse é o meu alerta !
</div>
</div>
<div class="d-flex flex-column justify-content-center mt-4">

<div class="card bg-primary text-white w-25 mx-auto">
<h5 class="card-header">Cabeçalho</h5>
<div class="card-body">
<h5 class="card-title">Título do Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur
adipisicing elit.</p>
<button class="btn btn-dark">Meu botão</button>
</div>
</div>
<div class="card bg-danger text-white w-25 mx-auto">
<h5 class="card-header">Cabeçalho</h5>
</div>
</div>
<div class="card w-25 mx-auto mt-5">

<img src="img/gato.jpg" alt="" class="card-img-top">
</div>
</div>
</div>
</body>
</html>
o
● Aula 7 a 8 – Estilização de formulário

o Conhecendo os Formulários
o Criando o Primeiro Formulário
o Tipos de formulários
o Form Floating e input group
<!DOCTYPE html>
<html lang="pt-BR">
<head>

<link
rel="stylesheet"
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.
css">
<title>Formulários</title>
<style>
.m-bottom {
}
</style>
</head>
<body>
<form class="w-25 mx-auto">
<div class="mb-4">
<label for="inputEmail" class="form-label">insira seu
E-mail</label>
<input type="email" class="form-control" id="inputEmail">
</div>
<div class="mb-4">
<label for="inputSenha" class="form-label">Senha</label>
<input type="password" class="form-control" id="inputSenha">
</div>
<div class="mb-4">
<input type="checkbox" class="form-check-input"
id="inputConectado">
<label for="inputConectado" class="form-check-label">Manter
conectado</label>
</div>
<button type="submit" class="btn btn-primary">Entrar</button>
</form>
<form class="w-25 mx-auto my-5">

<div>
<label for="inputComentario" class="form-label">Deixe seu
comentário</label>
<textarea id="inputComentario" rows="3"
class="form-control"></textarea>
</div>
</form>

<select class="form-select">
<option selected>Escolha uma opção</option>
<option value="1">01</option>
</select>
</form>

<div class="form-check">
<input type="radio" name="radioExemple" id="checkRadio"
class="forma-check-input" checked>
<label for="checkRadio" class="form-check-label">opção 01</label>
</div>
<input type="radio" name="radioExemple" id="checkRadio2"
class="forma-check-input">
<label for="checkRadio2" class="form-check-label">opção 02</label>
</div>
class="forma-check-input" disabled >
</div>
class="forma-check-input">
</div>
</form>


<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput"
placeholder="exemplo@exemplo.com">
<label for="floatingInput">Insira seu E-mail</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword"
placeholder="Senha">
<label for="floatingInput">Insira sua Senha</label>
</div>
</form>

<div class="input-group">
<input type="text" class="form-control" placeholder="Cep">
<button class="btn btn-outline-primary">Buscar<i class="bi
bi-search ms-2"></i></button>
</div>
</form>
</body>
</html>
o
● Aula 9 a 14 – Grid System

o Conhecendo o sistema de grid do Boostrap
o Container e Row
o Adicionando cols
o Projeto Layout – Estruturando o Projeto
o Projeto Layout – Adicionando conteúdo no header
o Projeto Layout – Conteúdo Principal
o Projeto Layout – Adicionando e Estilizando Footer
<!DOCTYPE html>
<html lang="pt-BR">
<head>

<link
rel="stylesheet"
<title>Projeto - Layout</title>
</head>
<body>
<header>
<div class="container mt-3 mb-5">
<div class="row">
<div class="col-3">
<a href="#">
<img src="img/logo-azul.png" alt="" class="img-fluid">
</a>
</div>
<div class="col-9">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active"
aria-current="page" href="#">Home</a>
</li>
<a class="nav-link"
href="#">Features</a>
</li>
<a class="nav-link"
href="#">Pricing</a>
</li>
<a class="nav-link">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-9">
<section>
<h1>Título Principal</h1>
<p class="my-3">Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Animi, reiciendis mollitia. Illum quam
voluptatem corporis mollitia sequi doloremque facilis quo ipsam commodi animi,
voluptas ut, totam ab veniam vero porro Lorem ipsum dolor sit amet consectetur
adipisicing elit. Necessitatibus, possimus dignissimos at mollitia, alias
ratione in error quidem eligendi assumenda corporis voluptas fugiat eum?
Veritatis, autem. Facilis, similique veritatis! Amet Lorem ipsum dolor sit
amet consectetur adipisicing elit. Vitae iste nemo nesciunt asperiores officia
doloremque sequi sint aperiam in quisquam mollitia sit, et inventore maiores
reprehenderit saepe quibusdam quasi. Unde? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Sed voluptatem autem illo! Soluta explicabo
ipsum odit, animi reiciendis, vitae, nulla laboriosam assumenda minus pariatur
labore quos natus accusamus dolore vero?</p>
</section>
<section class="my-5">
<h2>Título</h2>
<div class="row">
<div class="card col">
<img src="img/gato.jpg" class="card-img-top"
alt="...">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text
to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go
somewhere</a>
</div>
</div>
alt="...">
somewhere</a>
</div>
</div>
alt="...">
somewhere</a>
</div>
</div>
</div>
</section>

<section>
<h2>Título</h2>
</section>
</div>
<div class="col-3">
<h3>Ultimos Post</h3>
<ul class="nav flex-column">
<a class="nav-link active" aria-current="page"
href="#">Post 01</a>
</li>
<a class="nav-link" href="#">Post 02</a>
</li>
</li>
</li>
</ul>
<h3 class="mt-5">Outros Posts</h3>
<ul class="nav flex-column">
<a class="nav-link active" aria-current="page"
href="#">Post 01</a>
</li>
</li>
</li>
</li>
</ul>
</div>
</div>
</div>
</main>
<footer class="mt-5 py-5 bg-light">

<div class="container">
<div class="row align-items-center">
<div class="col-4">
<a href="#">
<img src="img/logo-azul.png" alt="" class="img-fluid">
</a>
</div>
<div class="col-4">
<ul class="nav flex-column align-items-center">
<a class="nav-link" href="#">Sobre Nós</a>
</li>
<a class="nav-link" href="#">Contato</a>
</li>
<a class="nav-link" href="#">Facebook</a>
</li>
<a class="nav-link" href="#">Instagram</a>
</li>
</ul>
</div>
<div class="col-4">
<ul class="nav flex-column align-items-center">
<a class="nav-link" href="#">Categorias</a>
</li>
<a class="nav-link" href="#">Cursos</a>
</li>
<a class="nav-link" href="#">Formações</a>
</li>
<a class="nav-link" href="#">Artigos</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
o

HTML e CSS

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML e CSS

Enviado por

Direitos autorais:

Formatos disponíveis

⮚ HTML E CSS

o A criação da internet e o primeiro navegador

o A história dos navegadores: para que serve HTML,CSS e Javascript

o Cliente e Servidor- O que é Front-End e Back-End

o Compartilhamento de códigos com JS Playgrounds

IDE (Integrated Development Environment)

Documento HTML5 básico

● <!DOCTYPE html> - indica ao navegador que este é um documento HTML5;

<!-- nada aqui será interpretado pelo navegador →

● Aula 3 e 4 – Estruturação de textos

o Outros elementos de Textos

o Escapando caracteres especiais no html

Tags para Estruturar Textos

<h1> a <h6> Títulos

<strong> Destaca uma palavra/frase importante

<em> Marca texto em ênfase

Marca texto que foi inserido no

Marca texto que foi removido do

Marca texto para ser exibido com letras

<sup> Deixa o texto um pouco acima da linha

<q> Usado para marcar uma citação

<code> Indica trecho de código de computador

<time> Indica data ou horário

Marca um texto para referências ou

<p> Usado para marcar um parágrafo

<div> Divisão ou seção em um documento

Marca um texto para ser estilizado ou

<br> Quebra linha

Indica oportunidade de quebra de uma

<hr> Desenha uma linha horizontal

Permite adicionar a pronúncia/leitura de

● Aula 5 – Trabalhando com Imagens

Adicionar mais significado às imagens

● Aula 6 – Âncoras e Links

o Ligando Páginas com Links

o Permitindo Download de Arquivos

<a href="#titulo-2" >Clique Aqui</a>

<a href="videos/meu-video.mp4" download="Meu Video.mp4" >Baixar</a>

o Adicionando CSS em nossas páginas

o Como o CSS Funciona? O modelo em cascata

CSS (Cascading Style Sheet)

<div style="background-color: blue;" ></div>

Força dos seletores

Prefira sempre utilizar classes

● Aula 8 – Seletores Básicos

sel = seletor. Troque por *, id, classe ou nome de tag.

Seletor Exemplo Descrição

Seleciona todas as tags

Seleciona todas as divs e

Seleciona um elemento com base em seu relacionamento com outro elemento

Essa seleção funciona

Seleciona um elemento baseado em seu atributo

Seleciona todos os elementos que conté

Seleciona todos os elementos que conté

<input type="text" />

Elementos com o atributo finalizando co

Elementos com o atributo com o valor

:active a:active Seleciona a tag <a> que esteja ativa.

Seleciona todos os elementos <input> que estejam

:disabled input:disabled Seleciona todo <input> que esteja desabilitado.

Seleciona a tag <p> caso ela seja o primeiro filho da

:focus input:focus Seleciona o elemento <input> que está com foco.

Seleciona o elemento <a> em que o cursor do mous