Apostila de Programação Web I

Seções e <!
DOCTYPE html>
<html lang="PT-BR">
agrupamentos <head>
de conteúdos
<meta charset="UTF-8" />
<title>Seções</title>
</head>
<body>
<section>
<h1>The Beatles</h1>
<h2>Rock</h2>
</section>
<section>
<h1>Alok</h1>
<h2>Eletrônica</h2>
</section>
</body>
</html>
Hyperlink
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8" />
<title>Seções</title>
</head>
<body>
<a href="https://www.google.com"><h1>Clique aqui</h1></a>
</body>
</html>
Imagens Tabelas
<img src="pasta/nomeImagem.jpg"/>
Formulários
•
<form action="/pagina-processa-dados-do-form" method="post">
<label for="name">Nome:</label>
<input type="text" id="name" />
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
<button type="submit">Enviar sua mensagem</button>
</form>
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8"/>
<title>Estilização de página</title>
<style>
</style>
</head>
<body>
<h1>Olá, mundo</h1>
</body>
</html>
Funcionamento
geral do CSS
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<title>Estilização de
página</title>
<link rel="stylesheet"
type="text/css"
href="estilo.css"/>
</head>
<body>
<h1>Olá, mundo</h1>
</body>
</html>
elementoHTML{
propriedade: valor;
}
•
Funcionamento
geral do CSS
h1{
font-family: Arial;
font-size: 62px;
text-align: center;
color: red;
}
h2{
font-family: Arial;
font-size: 36px;
text-align: center;
color: blue;
} Box Model
h1{
font-family: Arial;
color: #078b4e;
}
•
div{
• width: 250px;
height: 250px;
• background-color: #08fd8b;
border: 3px solid #078b4e;
• margin: 45px;
padding: 30px;
• }
•
Estilização de
conteúdo
•
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<title>Estilização de conteúdo</title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>
<body>
<article>
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of Lorem Ipsum.</p>
<img src="imagem.png"/>
</article>
</body>
</html>
h1{
font-family: Arial;
color: #078b4e;
}
article{
padding: 50px;
}
p{
font-family: Arial;
text-align: justify;
}
img{
width: 500px;
border: 1px solid #4e4e4e;
}
Estilização de <form>
<label for="name">Nome:</label>
formulários <input type="text" id="name" /><br/>
<label for="mail">E-mail:</label>
<input type="email" id="mail" /><br/>
<button type="submit">Enviar sua
mensagem</button>
</form>
form{
border: 1px solid #3d3d3d;
background-color: #ffffff;
padding: 50px;
}
label{
font-family: Arial;
}
input{
width: 100%;
margin-bottom: 10px;
font-family: Arial;
font-size: 16px;
}
h1{
position: static;
}
h1{
position: relative;
}
h1{
position: fixed;
}
div{
width:100px;
height:100px;
h1{ border:#000 solid 1px;
position: absolute; position:fixed;
} }
#d1{
top:20px;
left:20px;
background-color:#F00;
z-index:0;
}
#d2{
top:40px;
left:40px;
background-color:#0F0;
z-index:1;
}
Responsividade
@media (max-width: 600px){

div{
width:100px;
height:100px;
border:#000 solid 1px;
position:fixed;
}
}
Instalação e
apresentação da
ferramenta
Sistema de grades
(grid)
<link rel="stylesheet"
href="bootstrap/css/bootstrap.min.
css"/>
<script
src="bootstrap/js/bootstrap.bundle
.min.js"></script>
•
•
<div class="container">
<div class="row">
<div class="col-md-8">
Conteúdo
</div>
Conteúdo
</div>
</div>
<div class="row">
Conteúdo
</div>
Conteúdo
</div>
Conteúdo
</div>
</div>
</div>
Componentes
var numero;
for (numero = 0; numero < 10;
numero++) {
var n1 = 5; alert(numero);
var n2 = 2; }
if (n1 > n2) {

alert("N1 é maior")
} else if (n1 < n2) {
alert("N1 é menor")
} else {
alert("N1 é igual a N2")
}
function soma(){
var mais = 2 + 2;
alert(mais);
}
function subtracao(){
var sub = 2 - 2;
alert(sub);
}
try{
var n1 = 0;
var n2 = 1;
var soma = n + n;
• } catch(e){
alert("Erro " + e);
• }
finally{
alert("Finalizando...");
}
•
<script type="text/javascript" $('h1')
src="js/jquery- $('#conteudo')
3.6.1.min.js"></script> $('.teste')
function nomeFuncao(){
}
<body>
<h1>Clique em mim!</h1>
<script>
$('h1').click(function(){
alert("Obrigado");
});
</script>
</body>

Apostila de Programação Web I

Enviado por

Direitos autorais:

Formatos disponíveis

Apostila de Programação Web I

Enviado por

Dados do documento

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

Apostila de Programação Web I

Enviado por

Direitos autorais:

Formatos disponíveis

Seções e <!

@media (max-width: 600px){

if (n1 > n2) {

Você também pode gostar