Padrões web – HTML e CSS – Estrutura básica
Padrões web – HTML e CSS – Estrutura básica
1 3
wmc-html-css
Teaching HTML and CSSOn Github estherdefreitas / wmc-html-css
Padrões web
HTML e CSS
womakerscode.org
Instrutora
@estherdefreitas
O que você conhece sobre a web?
Web
o que é?
A Web
utiliza
Estrutura básica
do HTML
Estrutura básica
do HTML
<DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página HTML</title>
</head>
<body>
<h1>Minha primeira página</h1>
<p> Olá, <br /> mundo <b>!</b></p>
</body>
</html>
Estrutura básica
do HTML
tags
Abertura Fechamento <head> </head> <title> </title> <meta />Estrutura básica
do HTML
tags
Abertura Fechamento <body> </body> <h1> </h1> <p> </p> <b> </b>Estrutura básica
do HTML
Comentários
//Comentário de uma linha <!-- Comentário de múltiplas linhas -->Exercícios
Atributos
no HTML
<html lang="pt-BR">...</html >
<a href="google.com">...</a>
<img alt="Womakerscode" src="wmc.jpg" />
<p id="wmc"> ... </p>
Hyperlinks
em HTML
< a href="http://google.com">Google</a>
E seu link será assim: Google
Hyperlinks
em HTML
< a href="#wmc"> Tag com id = wmc </a>
E seu link âncora será assim: Tag com id = wmc
Botão
em HTML
< button type="button"> WoMakersCode </button>
WoMakersCodeImagens
em HTML
<img alt="Womakerscode" src="wmc-borboleta.jpg" />
Exercícios
Tabelas
em HTML
<table>
<tr> // linha
<th> Instrutora </th> //colunas
<th> Local </th> //do cabeçalho
</tr>
<tr> // linha
<td> Esther </td> //coluna
<td> Maceió </td> //coluna
</tr>
<tr>
<td> Marina </td>
<td> Maceió </td>
</tr>
</table>
Instrutora
Local
Esther
Maceió
Marina
Maceió
Listas
em HTML
Listas não ordenadas
em HTML
<ul>
<li> I </li>
<li> Love </li>
<li> WoMakersCode </li>
</ul>
- I
- Love
- WoMakersCode
Listas ordenadas
em HTML
<ol type="1">
<li> Love </li>
<li> Quero </li>
</ol>
1
A ou a
I ou i
I
Eu
Love
Quero
WoMakersCode
Doces
Listas de definição
em HTML
<dl>
<dt> Love </dt>
<dd> - Significa amar </dd>
</dl>
Love
- Significa amar
Exercícios
Formulários
em HTML
Formulários
em HTML
<form>
Usuário:
<br />
<input type="text" name="usuario">
<br />
Senha:
<br />
<input type="password" name="senha">
<br />
<input type="submit" name="Enviar">
</form>
Usuário:
Senha:
Formulários
em HTML
<form>
Gênero:<br />
<input type="radio" name="genero" value="feminino">
Feminino <br />
<input type="radio" name="genero" value="masculino">
Masculino <br />
<input type="radio" name="genero" value="outro">
Outro <br />
</form>
Você prefere:
Rosa
Azul
Nenhum
Formulários
em HTML
<form>
Tarefas:<br />
<input type="checkbox" name="estudar"> Estudar <br />
<input type="checkbox" name="jogar"> Jogar <br />
</form>
Tarefas:
Estudar
Jogar
Formulários
em HTML
<select name="cidades">
Onde você mora?
<br />
<option value="arapiraca"> Arapiraca </option>
<option value="maceió"> Maceió </option>
<option value="palmeiraDosIndios"> Palmeira dos Índios</option>
</select>
Onde você mora?
ArapiracaMaceióPalmeira dos Índios
Exercícios
HTML
<conteúdo>CSS
{design}CSS
Inline
<p style="color:cornflowerblue" > Estilo na linha<p>
CSS
Interno
<html>
<head>
<style>
...
regras
...
</style>
</head>
<body>
</body>
</html>
CSS
Externo
meu.html
<html>
<head>
<link rel="stylesheet" href="estilo.css" />
</head>
<body>
</body>
</html>
estilo.css
p { color: green;background-color: red;
}
h1 { border: 1px solid #efefef;width: 100%;
}
CSS
Tag
p { ...}
CSS
Id
meu.html
<p id="subl" > Estilo na linha<p>
<p id="inhado" > Estilo na linha<p>
estilo.css
#subl { text-decoration: underline; }
#inhado { text-decoration: underline; }
CSS
Classe
meu.html
<p class="subl" > Estilo na linha<p>
<p class="subl" > Estilo na linha<p>
estilo.css
.subl { text-decoration: underline; }
CSS
Texto
atributo
valores
color:
red
#fff
rgb(255, 0, 0)
hsl(0, 100%, 50%)
text-decorarion:
none
underline
overline
line-through
text-align:
center
right
left
justify
vertical-align:
top
middle
bottom
baseline
CSS
Texto
atributo
valores
text-transform:
uppercase
lowercase
capitalize
text-shadow:
tamanho horizontal/ vertical/ blur-radius
cor
none
line-height:
tamanho px/%
número
normal
CSS
Background
body {
-
fundo
repetição
posição
background:
#fff
no-repeat
px
-
url("local_da_imagem")
repeat
%
}
Padrões web
HTML e CSS
womakerscode.org
Instrutora
@estherdefreitas
Padrões web
HTML e CSS
womakerscode.org
Instrutora
@estherdefreitas