Algo sobre mim...
Nome Idade Comida Filme Serie
Márcio 54 Lasanha Karate Kid Smallvile

Algumas TAGS HTML que aprendi no curso
h1 table body caption tr
<td> <main> <body> <cite> <code>
<a> <abbr> <area> <article> <aside>
<audio> <dl> <dt> <figure> <frame>
<font> <h1> <h6> <head> <id=”…“>
<style=”…” > <title=”…”> <alt=”…”gt <align=”…”> <width=”…”>
<height=”…”> <main></main> <footer></footer> <div></div> <section></section>

Um tipo de FORMULÁRIO - A







Comentários:
Não precisa comentar, é só um exemplo:



Outro tipo de FORMULÁRIO - B - ATIVO sendo que dá pra escrever dentro dele:

Formulário do Márcio:








Outro tipo de FORMULÁRIO - B - INATIVO sendo que não dá pra escrever dentro dele:

Formulário do Márcio:







Nos estamos acostumado a ver a tag <img> hoje vamos aprender mais um elemento, é o <figure> e o <figcaption>.

Um é usado para imagem e outro para colocar uma espécie de informação desta imagem. Vejamos...

Trulli
Fig.1 - Estudantes.

Opção usando um input tipo CHECKBOX (Caixa de checagem)...





Opção usando um input tipo RADIO (Botão tipo radio)...

Por favor selecione uma linguagem de marcação/programação favorita:

   
   
   

Por favor selecione a sua idade:






Opção usando um input tipo PASSWORD (Senha)...

Senha: Confirmação Digite alguns numeros para ver..

Opção usando um input tipo COLOR (Cores)...

Selecione uma cor:

Opção usando um input tipo NUMBER (Número)...

Ano de Nascimeto: Selecione o ano de seu nascimento, obs: vc pode digitar tbm se quiser.

Opção usando um input tipo RANGE (Barra)...


Opção usando um input tipo TIME (Hora)...



Box Model

Primeiro Nome:

Sobrenome:


Exemplo - 1: Tipo de BOX MODEL (Modelo de caixa)...

DICA: Diferente do BOX MODEL acima este exemplo sim é um form, use a tag form

Formulário de Contato


Exemplo - 1: BOX MODEL


Exemplo - 2: Tipo de BOX MODEL (Mais um modelo de caixa)...

Preste atenção nestes box model - voce vai precisar dele.

Layout com Box Model

Caixa 1

Phasellus condimentum odio et sem tristique, eget ultrices ligula tincidunt.

Caixa 2

Phasellus condimentum odio et sem tristique, eget ultrices ligula tincidunt.

Caixa 3

Phasellus condimentum odio et sem tristique, eget ultrices ligula tincidunt.

Caixa 4

Phasellus condimentum odio et sem tristique, eget ultrices ligula tincidunt.

Caixa 5

Phasellus condimentum odio et sem tristique, eget ultrices ligula tincidunt.

Caixa 6

Phasellus condimentum odio et sem tristique, eget ultrices ligula tincidunt.


© 2024 - Exemplo 2, de um Box Model sofisticado.

Exemplo de SECTION (usado muito para sites responsivos).

Abaixo teremos quatro exemplos:

Clique no link para vermos os exemplos AQUI