Logo Passei Direto
Buscar

HTML e CSS para inciante criando layout

User badge image
!~H[a]Xxor~!

em

Ferramentas de estudo

Mostrar todas

Conteúdos escolhidos para você

Prova N2 - DESENVOLVIMENTO WEB CLIENTE
6 pág.

Prova N2 - DESENVOLVIMENTO WEB CLIENTE

ESTÁCIO

Front-end com HTML e CSS
10 pág.

Front-end com HTML e CSS

bootstrap5
108 pág.

bootstrap5

ESTÁCIO EAD

Perguntas dessa disciplina

1) Há alguns anos, quando os layouts flexíveis eram quase um “luxo” para sites, as únicas coisas que eram flexíveis em um design eram as colunas de la

Pergunta 1 Leia o trecho a seguir. “Na indústria, diagramas UML ajudam projetistas de sistema a especificar um sistema de maneira gráfica, concisa e i

USP-SP

CSS, sigla em inglês que significa Cascading Style Sheets, traduzindo para o português, Folhas de Estilo em Cascata. Os estilos definem como exibir...

As páginas web modernas têm foco na apresentação do conteúdo, que extrapola o simples uso de tags do HTML. Sobre a formatação das páginas web, anal...

3 Marcar para revisão Em um documento HTML, 0 lugar correto para se declarar folhas de estilo CSS externas e dentro da seção: A B c <

Material
Buscar
páginas com resultados encontrados.
páginas com resultados encontrados.
left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Conteúdos escolhidos para você

Prova N2 - DESENVOLVIMENTO WEB CLIENTE
6 pág.

Prova N2 - DESENVOLVIMENTO WEB CLIENTE

ESTÁCIO

Front-end com HTML e CSS
10 pág.

Front-end com HTML e CSS

bootstrap5
108 pág.

bootstrap5

ESTÁCIO EAD

Perguntas dessa disciplina

1) Há alguns anos, quando os layouts flexíveis eram quase um “luxo” para sites, as únicas coisas que eram flexíveis em um design eram as colunas de la

Pergunta 1 Leia o trecho a seguir. “Na indústria, diagramas UML ajudam projetistas de sistema a especificar um sistema de maneira gráfica, concisa e i

USP-SP

CSS, sigla em inglês que significa Cascading Style Sheets, traduzindo para o português, Folhas de Estilo em Cascata. Os estilos definem como exibir...

As páginas web modernas têm foco na apresentação do conteúdo, que extrapola o simples uso de tags do HTML. Sobre a formatação das páginas web, anal...

3 Marcar para revisão Em um documento HTML, 0 lugar correto para se declarar folhas de estilo CSS externas e dentro da seção: A B c <

Prévia do material em texto

HTML /CSS
Criando um layout de site básico com HTML E CSS
• Este vai ser um tutorial curto e básico destinado especialmente para 
iniciantes. Vamos criar um layout básico de site com HTML CSS. Quase todos 
os sites consistem neste layout básico que inclui um cabeçalho, barra lateral, 
área de conteúdo e rodapé.
•
• Vamos usar a tag DIV do HTML, pois esse será um design baseado em DIV e 
estamos usando apenas HTML e CSS. Os designs baseados em DIV são muito 
eficientes e resultam em código muito mais limpo em comparação aos designs 
baseados em tabelas. Em projetos baseados em tabelas, usamos a tag <table> 
e suas colunas / linhas para criar o layout que não é considerado de maneira 
adequada.
Vamos começar
• No começo, você terá o design criado por você ou fornecido por outro 
designer ou cliente. Você pode ver o desenho na figura abaixo.
•
Como este é apenas um projeto de demonstração vazio, existem apenas 
quatro seções. Obviamente, o design do website completo terá mais seções e, 
assim que você aprender a criar esse layout básico, poderá criar mais seções 
com facilidade.
SEÇAO HEAD
<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8” >
<title>Demo layout</title>
<link rel=“stylesheet” type=“text/css” href=“css/style.css” >
</head>
Nesta seção, fornecemos um título de página "Demo Layout" para esta página 
e vinculamos um arquivo de estilo style.css no diretório css. Se você não 
conhece essas noções básicas, saiba mais sobre isso .
Seção body
<body>
<div class=“wrap”>
<div class=“header” >
</div> <!--.header-->
<div class=“ content”>
</div> <!--.content-->
<div class=“ sidebar”>
</div> <!--.sidebar-->
<div class=“ clear”> </div>
<div class=“ footer”>
</div> <!--.footer-->
</div> <!--.wrap-->
</body>
</html>
css
Como você pode ver, estamos usando tags DIV e atribuímos classes a cada 
uma delas. Usaremos essas classes posteriormente no arquivo de folhas 
de estilo, chamando os nomes de cada classe atribuída. Também 
adicionamos comentários como o mesmo nome de cada classe atribuída 
após cada DIV de fechamento. Adicionando comentários considerados 
como boa prática e isso também torna o código amigável para outros 
usuários que possam estar editando ou lendo seu código.
Antes de estilizar cada seção, você precisará conhecer as medidas, como 
largura e altura de cada seção. Essas medições obviamente diferem de 
design para design. Eu uso a ferramenta "Régua" no Adobe Photoshop 
para obter as medidas, clicando e arrastando de um ponto para outro. 
Medições para este layout básico podem ser vistas na figura acima. Você 
também pode baixar o design de PSD em branco anexado.
.wrap{
width: 980px;
margin: 0 auto;
}
Como proeminente pelo nome “.wrap”, isso é chamado de quebra DIV que 
contém todos os outros DIVs. Você pode, obviamente, atribuir qualquer 
outro nome, como invólucro, container ou main_div etc. mas eu prefiro 
chamá-lo. O wrap parece limpo e curto.
Demos uma largura de 980 pixels de largura e adicionamos margem superior 
/ inferior como 0 e margem direita / esquerda como auto. Essa margem 
automática em ambos os lados faz com que nosso site esteja alinhado 
horizontalmente.
Body{ 
margin: 0; padding: 0; } 
↑ Apenas redefinindo a margem padrão e o preenchimento do corpo.
.header{
height: 140px;
margin-bottom: 15px;
background-color: #0d7963;
}
Espero que isso seja bem simples e explicado pelos nomes das 
propriedades CSS que nós damos a ele com altura de 140px, margem 
inferior de 15 pixels e cor de fundo “# 0d7963;” usando código de cores. 
Eu usei a ferramenta de seleção de cores para obter o código de cores no 
Adobe Photoshop.
.content{
width: 690px;
height: 450px;
background-color: #0d7963;
float: right;
}
.sidebar{
width: 275px;
height: 450px;
background-color: #0d7963;
float: left;
}
• Nós adicionamos a propriedade float: para fazer este DIVs flutuar. Dessa 
forma, podemos fazer esses DIVs ficarem lado a lado. Sem a propriedade 
float: , o DIV tomaria toda a largura da página e o novo DIV “.sidebar” 
começaria com o DIV “.content”. Você pode trocar os valores de float para 
alterar a posição da barra lateral para o lado esquerdo ou direito.
.clear{
clear: both;
}
Como você percebeu, usamos DIV claro, que provavelmente será como em 
todos os outros designs, sem qualquer texto ou conteúdo. O propósito 
deste DIV é limpar o espaço para elementos flutuantes acima de outro 
modo o rodapé DIV ignoraria DIVs flutuantes acima e se encaixaria no 
cabeçalho DIV
.footer{
height: 70px;
margin-top: 15px;
background-color: #0d7963;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8” >
<title>Demo layout</title>
<link rel=“stylesheet” type=“text/css” href=“css/style.css” >
</head>
<body>
<div class=“wrap”>
<div class=“header” >
</div> <!--.header-->
<div class=“ content”>
</div> <!--.content-->
<div class=“ sidebar”>
</div> <!--.sidebar-->
<div class=“ clear”> </div>
<div class=“ footer”>
</div> <!--.footer-->
</div> <!--.wrap-->
</body>
</html>
.footer{
height: 70px;
margin-top: 15px;
background-color: #0d7963;
}
.clear{
clear: both;
Criar layout básico de site com HTML CSS é um tutorial básico para iniciantes.
FACEBOOK
ANUNCIO AQUI

Mais conteúdos dessa disciplina