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>


Imagens

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
  1. I
  2. Eu
  1. Love
  2. Quero
  1. WoMakersCode
  2. 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?

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