Algoritmos e Programação
Web - Internet, protocolos, HTML e CSS
Internet
Roteadores
IP
#.#.#.#
[Link]
[Link]
DNS
Fully Qualified Domain Name IP Address
[Link] [Link]
TCP/IP
Camada 4 Aplicação
Camada 3 Transporte
Camada 2 Internet
Camada 1 Enlace
Camada 4 - aplicação
Esta camada envia arquivos, como Você escreve uma carta para sua prima e entrega
para uma amiga colocar no correio pra você.
páginas web para a camada de
transporte. Alguns protocolos comuns de
Sua prima lê a
alto nível são:
carta.
● HTTP e HTTPS(para páginas web)
● POP e SMTP(para emails)
● FTP(para arquivos)
● DNS
Camada 3 - transporte
Esta camada cuida da comunicação Sua amiga coloca a carta num
envelope, endereça ele, coloca um
entre origem e destino. Ela “quebra” o selo e coloca na caixa de correio.
dado em pacotes e controla o fluxo de
Sua tia abre o correio e
envio mediante uma conexão entrega a carta para a prima
estabelecida. Os pacotes podem ser
retransmitidos no caso de erros:
● TCP
● UDP
Camada 2 - internet
O carteiro pega a carta e coloca num
cesto para levar ao centro dos correios
Esta camada faz o endereçamento,
roteamento e a entrega do pacote da As cartas são ordenadas por
origem ao destino: área e entregues ao carteiro
para entrega.
● IP
● ARP
● ICMP
Camada 1 - enlace
A camada de enlace ou de interface de
rede, obtém os dados a partir do
dispositivo utilizado que pode ser:
● Ethernet
● Wi-Fi
● DSL
Os correios entregam a carta para um
centro de distribuição
HTTP
GET 200 OK
POST 301 Moved Permanently
PUT 302 Found
DEL 304 Not Modified
307 Temporary Redirect
PATCH 401 Unauthorized
HEAD 403 Forbidden
OPTIONS 404 Not Found
TRACE 418 I'm a Teapot
PATCH 500 Internal Server Error
… 503 Service Unavailable
…
HTML e CSS
Tutorial de HTML e CSS
Clique aqui
Para pegar o código do
projeto.
O conteúdo do projeto
está contido na pasta
“original”.
Tutorial de HTML e CSS
Crie um arquivo chamado
[Link] no seu projeto
e coloque o conteúdo ao lado Mirror Fashion.
nele e veja o resultado no
Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.
browser
Confira nossas promoções.
Receba informações sobre nossos lançamentos por email.
Navegue por todos nossos produtos em catálogo.
Compre sem sair de casa.
Tutorial de HTML e CSS <!DOCTYPE html>
Crie o arquivo <html>
<head>
[Link] no seu
<title>Mirror Fashion</title>
projeto, coloque o <meta charset="utf-8">
conteúdo ao lado nele e </head>
veja o resultado no <body>
browser <h1>Mirror Fashion.</h1>
<h2>Bem-vindo à Mirror Fashion, sua loja de roupas e
acessórios.</h2>
<ul>
<li>Confira nossas <strong>promoções</strong>.</li>
<li>Receba a <em>newsletter</em> dos nossos lançamentos
por email.</li>
<li>Navegue por todos nossos produtos em catálogo.</li>
<li>Compre sem sair de casa.</li>
</ul>
</body>
</html>
Tutorial de HTML e CSS
Html é uma linguagem de marcação que utiliza tags para marcar o texto:
<h1>Mirror Fashion.</h1>
Observe o uso da tag “h1” que é utilizada para designar o título de um documento. Toda
tag é definida com “<” tem seu identificador e finaliza com “>”, essa tag é a tag de abertura,
pois várias terão conteúdo e finalizam com uma tag de fechamento, conforme o exemplo
do <h1> temos </h1>
Algumas tags recebem atributos dentro da definição e já podem finalizar sem
necessariamente uma tag de fechamento:
<img src=”../imagens/[Link]” />
Observe que ela finaliza com a “/” e não precisa de tag de fechamento
Tutorial de HTML e CSS - principais tags
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Tutorial de HTML e CSS - principais tags
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Tutorial de HTML e CSS - principais tags
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Tutorial de HTML e CSS - principais tags
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Tutorial de HTML e CSS
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Tutorial de HTML e CSS - títulos
Faça o seguinte teste no seu documento:
<h1>Mirror Fashion</h1>
<h2>Mirror Fashion</h2>
<h3>Mirror Fashion</h3>
<h4>Mirror Fashion</h4>
<h5>Mirror Fashion</h5>
<h6>Mirror Fashion</h6>
As tags heading são utilizadas para títulos seguindo uma ordem de importância
com subtítulos.
Tutorial de HTML e CSS - parágrafos
Ao escrever algum texto na página é recomendado que essa tag seja filha de
<body>. A marcação recomendada é a tag de parágrafos:
<p>Não há itens na sacola de compras.</p>
Havendo vários parágrafos utilize várias tags <p> para separar.
<p>Este é um excelente parágrafo</p>
<p>Se aquele é excelente, devo ser sensacional</p>
Tutorial de HTML e CSS - ênfases
Podemos utilizar <strong> para negrito e <em> para itálico.
O mesmo resultado é alcançado com <b> e <i>, porém não é recomendado.
<li>Confira nossas <strong>promoções</strong>.</li>
<li>Receba a <em>newsletter</em> dos nossos lançamentos por email.</li>
Tutorial de HTML e CSS - imagens
Para colocar imagens, a tag utilizada é <img> que deve ter 2 atributos: src e alt.
Pegue esta imagem
Coloque no seu arquivo utilizando a tag <img>
<img src=”./[Link]” alt=”foto da familia” />
Existem tags que ajudam na utilização de imagens: <figure> e <figcaption>.
Coloque no arquivo:
<figure>
<img src=”./[Link]” alt=”foto da familia” />
<figcaption>Família Buscapé</figcaption>
</figure>
Tutorial de HTML e CSS - listas
No HTML podemos utilizar listas ordenadas <ol> ou listas sem ordem <ul>. Após
abrir a tag da lista é necessário utilizar a tag <li> para designar o item da lista.
Utilize o exemplo a seguir no seu arquivo:
<ul> <ol>
<li>Primeiro item da lista</li> <li>Primeiro item da lista</li>
<li> <li>Segundo item da lista</li>
Segundo item da lista:
<li>Terceiro item da lista</li>
<ul>
<li>Quarto item da lista</li>
<li>Primeiro item da lista aninhada</li>
<li>Quinto item da lista</li>
<li>Segundo item da lista aninhada</li>
</ol>
</ul>
</li>
<li>Terceiro item da lista</li>
</ul>
Tutorial de HTML e CSS - organização
Nos projetos de front-end separamos os arquivos html das imagens, arquivos css e
arquivos js. Essa separação favorece a separação de responsabilidades e reuso de
código.
Tutorial de HTML e CSS - [Link]
Vamos criar a página [Link]
Tutorial de HTML e CSS - [Link]
Obtenha as imagens necessárias para começar o trabalho do site nessa url
1) Crie o arquivo [Link] com o seguinte conteúdo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sobre a Mirror Fashion</title>
</head>
<body>
</body>
</html>
2) Utilize os textos encontrados aqui
3) A página deve ter duas imagens:
● A 1ª apresenta o centro da Mirror Fashion e será inserida após o 2º parágrafo do texto.
● A 2ª é uma imagem da Família Pelho e deve ser colocada após o subtítulo da História.
Tutorial de HTML e CSS - Introdução a CSS
Para colocar estilos na página utilizamos o CSS (Cascading style sheets) que é
uma linguagem responsável por descrever o estilo de um documento HTML.
A estrutura do css funciona da seguinte forma: uma propriedade seguida de dois
pontos “:”, e cada propriedade é separada por um sinal de ponto e vírgula “;” da
seguinte maneira:
background-color: yellow;
color: blue;
Com essas propriedades em um elemento, teremos um plano de fundo amarelo
combinado com letras da cor azul.
Existem 3 formas de colocar estilo em um documento HTML
Tutorial de HTML e CSS - Atributo style
A primeira forma de colocar CSS em um documento HTML é utilizando o atributo
style diretamente no elemento desejado conforme exemplo a seguir:
<h1>Mirror Fashion.</h1>
<h2 style="color: blue; background-color: yellow;">
Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.
</h2>
<ul>
<li>Confira nossas <strong>promoções</strong>.</li>
<li>Receba a <em>newsletter</em> sobre nossos lançamentos por email.</li>
<li>Navegue por todos nossos produtos em catálogo.</li>
<li>Compre sem sair de casa.</li>
</ul>
Tutorial de HTML e CSS - Tag <style>
A segunda forma de colocar CSS em um documento HTML é utilizando a tag style
que se localiza na tag <head> conforme exemplo a seguir:
<body>
<html> <h1>Mirror Fashion.</h1>
<head> <h2>
Bem-vindo à Mirror Fashion, sua loja de
<title>Mirror Fashion</title>
roupas e acessórios.
<meta charset="utf-8">
</h2>
<style> <ul>
h2 { <li>Confira nossas
<strong>promoções</strong>.</li>
background-color: yellow;
<li>Receba a <em>newsletter</em> sobre nossos
color: blue; lançamentos por email.</li>
} <li>Navegue por todos nossos produtos em
</style> catálogo.</li>
<li>Compre sem sair de casa.</li>
</head>
</ul>
</html>
Tutorial de HTML e CSS - Arquivo externo
A terceira forma de colocar CSS em um documento HTML é utilizando um arquivo
com a extensão .css que contém as regras css desejadas e importar esse arquivo
no documento HTML. Para exemplificar crie um arquivo chamado “[Link]” e
coloque a regra a seguir:
h2 {
background-color: yellow;
color: blue;
}
Tutorial de HTML e CSS - Arquivo externo
Agora importe o arquivo css em seu arquivo HTML conforme o exemplo a seguir:
<head>
<meta charset="utf-8">
<title>Sobre a Mirror Fashion</title>
<link rel="stylesheet" href="[Link]">
</head>
Tutorial de HTML e CSS - Tipografia e fontes
Com o css podemos alterar a fonte utilizada no nosso texto. Para isso modificamos
a propriedade font-family essa propriedade recebe uma lista de fontes e
percorre da primeira até a última buscando os arquivos na máquina em que o css é
executado, a primeira encontrada é “renderizada”.
body {
font-family: "Arial", "Helvetica", sans-serif;
}
Tutorial de HTML e CSS - Alinhamento
A propriedade utilizada no alinhamento de texto é o text-align que pode ter o
valor “right”, “left”, “center” ou “justify”.
h2 {
text-align: right;
}
Outras formas de configurar espaçamentos com css:
p {
line-height: 2px; // tamanho da altura de cada linha
letter-spacing: 2px;// tamanho do espaço entre cada letra
word-spacing: 4px; // tamanho do espaço entre cada palavra
text-indent: 20px; // tamanho da margem da primeira linha do texto
}
Tutorial de HTML e CSS - Transformar texto
A propriedade text-transform pode ser utilizada para deixar o texto maiúsculo,
minúsculo ou deixar somente a primeira letra maiúscula
h2 {
text-transform: uppercase; //lowercase ou capitalize
}
Tutorial de HTML e CSS - Imagens de fundo
Podemos utilizar a tag <img /> para utilizar imagens no HTML. No CSS é possível
utilizar imagens de fundo para os elementos HTML:
h2 {
background-image: url([Link]);
}
Tutorial de HTML e CSS - Bordas
Com o css podemos definir várias propriedades para as bordas de um elemento
como por exemplo: cor, exibição, largura. Confira o exemplo:
body {
border-color: red;
border-style: solid;
border-width: 1px;
border-bottom-color: blue;
border-radius: 5%; // teste colocar 5%, 10%, 100%
}
Tutorial de HTML e CSS - Cores
Utilizamos cores com o css quando utilizamos propriedades como
background-color, color, border-color. Propriedades como essas
aceitam cores como valor.
h1 {
color: teal;
}
h2 {
background-color: blue;
}
O que podemos fazer quando temos de usar uma variação de cor? Podemos
utilizar o RGB ou a forma mais moderna e utilizada que é a notação hexadecimal
h1 {
color: F3EDED;
}
Tutorial de HTML e CSS - CSS Box Model
Todos os elementos HTML são considerados “caixas” e essas caixas têm 5
propriedades com possibilidade de modificação:
● height
● width
● border
● padding
● margin
Tutorial de HTML e CSS - Padding
Utilizamos o padding para definir uma distância interna de alguns elementos até a sua
borda(veja a imagem do box model no slide anterior):
• padding-top
• padding-right
• padding-bottom
• padding-left
Essa ordem é importante para entendermos como funciona a shorthand property
do padding. Podemos utilizar apenas a propriedade padding, da seguinte forma:
p {
padding: 10px;//aqui é aplicado no top/bottom/right/left
}
p {
padding: 10px 7.5px 5px 2px; //top right bottom left
}
Tutorial de HTML e CSS - Margin
Utilizamos o margin para definir uma distância do elemento com o exterior do
documento(veja a imagem do box model no slide anterior):
• margin-top
• margin-right
• margin-bottom
• margin-left
Essa ordem é importante para entendermos como funciona a shorthand property
do margin. Podemos utilizar apenas a propriedade margin, da seguinte forma:
p {
margin: 10px;//aqui é aplicado no top/bottom/right/left
}
p {
margin: 10px 7.5px 5px 2px; //top right bottom left
}
Tutorial de HTML e CSS - Dimensões
É possível manipular, também, as dimensões de um elemento html por meio das
propriedades height e width:
p {
height: 250px;
width: 250px;
} // todos os parágrafos terão altura e largura de 250px
Tutorial de HTML e CSS - [Link]
1) Crie o subtítulo “Diferenciais” na página [Link] e utilize uma lista para tal.
Lembre-se de utilizar o texto contido em “[Link]”
2) Melhore a apresentação da página utilizando algumas propriedades CSS:
a) Dê um espaçamento no h1;
b) Ajuste a margem superior do h2;
c) Utilize espaçamento lateral nos parágrafos, bem como uma indentação do texto;
d) Dê um espaçamento e margem no figure
e) Ajuste a margem superior do figcaption
3) Centralize os textos e imagens utilizando uma largura fixa para a página e deixando o
navegador ajustar as margens:
body {
margin-left: auto;
margin-right: auto;
width: 940px;
}
Tutorial de HTML e CSS - links e bookmarks
Para utilizar links em nossas páginas HTML podemos usar a tag <a></a>:
<p>
Visite o site da <a href="[Link]
</p>
A tag cria uma “âncora” apenas sobre a palavra “UnDF” tornando ela um link para o endereço
contido no atributo “href”.
Uma outra forma de utilizar uma âncora é para marcar links dentro do próprio documento,
chamamos esta âncora de bookmark:
<p>Mais informações <a href="#info">aqui</a>.</p>
…
<h2 id="info">Mais informações sobre o assunto:</h2>
<p>Informações...</p>
Tutorial de HTML e CSS - [Link]
1) Crie um link para o google maps mostrando a cidade de jacarezinho e utilize uma âncora
na citação de Jacarezinho na página
2) Ao longo do tutorial estamos criando a página [Link], agora vamos direcionar dessa
página para a página principal que é o [Link]. Se você ainda não tem um [Link]
crie um com a estrutura básica mostrada em slides anteriores
3) Adicione um link ao [Link] quando na página [Link] ocorre uma citação para
“nossa loja”
4) Perceba que no 3º parágrafo temos referências para outras seções na própria página
[Link], crie os respectivos “id” nos títulos para criar os bookmarks associados
Tutorial de HTML e CSS - div e span
Apesar de existir tag’s para muitas necessidades no HTML, eventualmente não
encontraremos uma tag para um caso específico. Em casos assim podemos utilizar os
elementos estruturais do HTML que são as divs e os spans
<html>
<head>
<style>
div {
background-color: yellow;
}
span {
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p> eu sou um parágrafo dentro de uma div </p>
</div>
<p> eu sou um <span>parágrafo</span> fora de uma div </p>
</body>
</html>
Tutorial de HTML e CSS - Seletor de ID
Quando criamos uma regra css como a que está a seguir:
p {
color: red;
}
Temos a seleção de todos os parágrafos do documento. Caso não seja essa o objetivo, pode
ser utilizado o seletor de id para seleção de um parágrafo específico.
#primeiro-paragrafo {
color: yellow;
}
<p id="primeiro-paragrafo">eu sou o primeiro parágrafo</p>
<p>eu sou o segundo parágrafo</p>
Note que não há mais o tag <p> na regra do css, apenas o ID utilizado. No documento HTML
o ID é único e não pode ser repetido.
Tutorial de HTML e CSS- Seletor Hierárquico
Caso o elemento que possui um ID tenha filhos, é possível utilizar um Seletor Hierárquico
para especificar regras css:
#primeiro-paragrafo span {
color: red;
}
<p id="primeiro-paragrafo">sou o primeiro <span>parágrafo</span></p>
<p>eu sou o segundo parágrafo</p>
Note que apenas a palavra parágrafo vai receber o estilo da regra que foi específica para
spans dentro do seletor de id
Tutorial de HTML e CSS - Seletor de Classe
Outro seletor muito utilizado é o Seletor de Classe que pode ser acumulado e não precisa
ser único no documento HTML:
.texto-vermelho {
color: red;
}
.fundo-amarelo {
background-color: yellow;
}
<p class="texto-vermelho fundo-amarelo">
sou o primeiro <span>parágrafo</span>
</p>
<p>eu sou o segundo parágrafo</p>
Esse seletor também pode ser feito com um Seletor Hierárquico, ou seja, utilizar uma tag
após a classe para especificar o elemento dentro de uma classe
Tutorial de HTML e CSS
Flexbox
Tutorial de HTML e CSS - [Link]
Tutorial de HTML e CSS - Analisando index
Cabeçalho
Rodapé
Tutorial de HTML e CSS - Analisando index
Menu lateral Banner Principal
Tutorial de HTML e CSS - Analisando index
Seções
Tutorial de HTML e CSS - HTML Semântico
O HTML possui tags apropriadas para representar os diversos tipos de layout utilizados:
Tutorial de HTML e CSS - [Link]
<body>
<header>
<!-- Conteúdo do cabeçalho -->
</header>
<main>
<!-- Conteúdo principal -->
</main>
<section id="destaques">
<!-- Painéis com destaques -->
</section>
<footer>
<!-- Conteúdo do rodapé -->
</footer>
</body>
Tutorial de HTML e CSS - Criando o header
Cabeçalho
Tutorial de HTML e CSS
Block vs Inline
Tutorial de HTML e CSS - Criando o header
1. Crie o arquivo [Link] para as regras css do [Link] e faça a importação no html
2. Crie o cabeçalho, utilize a tag <header></header> para agrupar os elementos do
cabeçalho
3. Utilize a tag <nav></nav> para o menu de links do cabeçalho e deixe ele na horizontal
4. Faça o link para a página [Link]
5. Tente reproduzir os elementos conforme a imagem do cabeçalho. Obtenha as imagens
no link fornecido nos slides anteriores
6. Alinhe tudo no centro. O Site inteiro deve ter um alinhamento ao centro com a regra
mostrada em slide anterior
Tutorial de HTML e CSS - Criando o header
Resultado intermediário
Tutorial de HTML e CSS - Position
Com o flexbox ajustar a posição dos elementos na tela ficou bem mais simples do que as
alternativas prévias como o Position ou o Float por exemplo. Apesar do uso amplo do
flexbox, existem situações que o Position é importante, e ele pode ter os seguintes valores:
static;
relative;
absolute;
fixed;
O static em um elemento estabelece seu local original no documento, aquele que o
browser entende como sendo seu local inicial de renderização. Passando qualquer valor para
as coordenadas, eles serão ignorados.
O relative é um valor de position que já recebe coordenadas e às obedece em relação à
posição original do documento.
Tutorial de HTML e CSS - Position
O próximo valor de position que temos é o absolute. O elemento que tem o modo de
posicionamento absolute tem sua referência no elemento que seja seu pai na estrutura do
HTML, e esse pai deve possuir posicionamento diferente de static (que é o padrão), e
obedece às coordenadas de acordo com o tamanho total desse elemento pai.
Quando não há nenhum elemento em toda a hierarquia daquele que recebe o
posicionamento absolute que seja diferente de static, o elemento vai aplicar as coordenadas
tendo como referência a porção visível da página no navegador. Faça o teste:
.retangulo {
<div class="retangulo"></div>
background: green;
<div class="retangulo absoluto"></div>
height: 300px;
width: 400px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
Tutorial de HTML e CSS - Position
Conforme o exemplo do slide anterior a segunda <div>, que recebe o valor “absoluto” em
seu atributo class, não tem elemento “pai” na hierarquia do documento, logo ela vai alinhar-se
ao topo e à direita do limite visível da página no navegador, adicionando respectivamente
20px e 30px nessas direções. Vamos analisar agora o exemplo a seguir:
<div class="retangulo relativo"> .retangulo {
<div class="retangulo absoluto"></div> background: green;
</div> height: 300px;
width: 400px;
}
O outro modo de posicionamento,fixed, sempre .absoluto {
vai tomar como referência a porção visível do position: absolute;
documento no navegador, e mantém essa top: 20px;
right: 30px;
posição inclusive quando há rolagem na tela. É }
uma propriedade útil para avisos importantes .relativo {
que devem ser visíveis com certeza. position: relative;
}
Tutorial de HTML e CSS - Criando o header
Tente alinhar elementos usando Position, depois apague e
faça com flexbox
Tutorial de HTML e CSS - Criando o main
Menu lateral Banner Principal
Tutorial de HTML e CSS - Forms
No HTML, temos o elemento <form> cuja finalidade é capturar dados do usuário e enviá-los
para algum serviço da Internet. Os dados são passados para o <form> utilizando a tag
<input>, que pode uma ter duas finalidades: receber os dados digitados ou enviar o
formulário. É por meio da propriedade type que definimos essa finalidade. Em nosso caso,
utilizamos o tipo search para capturar os dados digitados e o tipo image para enviar o
formulário. Existe também o tipo submit, que possui a mesma finalidade do image, mas é
renderizado como um botão.
<form>
<input type="search">
<input type="image" src="img/[Link]"disk>
</form>
Tutorial de HTML e CSS - Criando o main
Faça isso acontecer
Tutorial de HTML e CSS - Criando a section
Faça isso acontecer
Tutorial de HTML e CSS - Criando o footer
Faça isso acontecer
Tutorial de HTML e CSS - Resultado final