O documento discute tags HTML e CSS importantes para configurar um site, incluindo fontes, footer, formulários, inputs, labels, fieldsets e select. É explicado como escolher fontes, configurar rodapés e como criar formulários complexos com diferentes campos de entrada para coletar dados do usuário.

1. Html e CSS

2. Fontes
● A escolha de uma fonte para seu site é um dos
assuntos mais importantes quando estamos
falando em design e identificação visual para
suas páginas.

3. Fontes
● Um dos principais repositorios da internet é o
próprio Google
● https://fonts.google.com/

4. Fontes
● Quando eu quero inserirum tipo de fonte que
esta salvo no meu computador eu faço o
download no repositorio do google e incluo ela
no meu CSS

5. Fontes
● Depois é só char ela em uma parte especifica
do codigo

6. Fontes
● O próprio navegador já tem um pacote extenso
de fntes para ser utilizado

7. Footer
● O footer significa rodapé da pagina. Onde
geralmente é postado informações relativas a
site, outros links e informações do
desenvolvedor

8. Footer
● E configurado dessa forma em Css ( forma
bem simples)

9. Formulários
● Tag form :
– Em HTML, temos um elemento <form> criado para capturar os dados do
usuário e submetê-lo a algum serviço da Internet.
– Os dados são passados para o <form> por meio da tag <input> , que pode
uma ter dupla finalidade: receber os dados digitados ou submeter o formulário.
● EX:
<form method= “post” action= “ paginaDeDados.php”>
<input type= ” text” size= “10” name= “exemplo” id= “ex”>
</form>

10. Formulários
● Tag form :
– Atributos method e action:
● O atributo method serve para escolher o tipo de envio
faremos dos dados que estão na pagina e estão
relacionados a tag form com seus respectivos inputs:
● Existe dois tipos no parametro method que são:
– Get: parametro utilizado para enviar as informações de uma
maneira mais rapida, porem não segura. O get coloca todos os
dados depois da URL e depois os envia pelo formulario
– Post: parametro utilizado para enviar as informações de uma
maneira mais segura, porem mais lento pois ele passa todos os
dados em forma de pacotes.

11. Formulários
● Tag form :
– Atributos method e action:
● O atrubuto action pode enviar os dados para vários tipos
de tecnologias ( PHP, JavaScript etc). No exemplo que
iremos utilizar vamos enviar para uma e-mail, contudo
para que possa ser possível um cliente de e-mail tem
que esta configurado no servidos web os no nosso caso
na nossa maquina. Os dados ainda podem ser
armazenados em um banco de dados.

12. Formulários
● Tag input :
– O elemento HTML <input> é usado para criar
controles interativos para formulários baseados na
web para receber dados do usuário. A semântica
de um <input> varia consideravelmente
dependendo do valor de seu atributo type.

13. Formulários
● Tag input :
– Alguns atributos do
type:
● Button
● Checkbox
● Color
● Date
● Datetime
● Text
● Nunber
● Image
●
Radio
●
Search
● Time
● Url
●
Week
●
Password
●
Month
● E-mail
●
etc

14. Formulários
● Exemplo de paginas com form:

15. Formulários
● Pagina PHP que a recebe:

16. Formulários
● Tag label :
– Os Rótulos servem para informar pra que serve cada campo do
Formulário HTML.
– Quando você utilizar a Tag <label> juntamente com o
parâmetro for, poderá fazer um vínculo entre um rótulo e um
campo do formulário de forma que, ao clicar no rótulo, você terá
o mesmo resultado que se clicasse no campo vinculado.
– EX:
<form action="efetuar-login.php" method="post">
<label for="email">Digite seu e-mail:</label>

17. Formulários
● Tag fildset :
– A tag <fieldset> é usada para agrupar elementos relacionados dentro de
um formulário, desenhando uma borda em torno desses elementos.
– Ela é especialmente útil na organização de formulários extensos. Junto
com ela, usamos a tag <legend> para definir um título para o bloco.
– EX:
<fieldset>
<legend>Dados Pessoais</legend>
<p>Nome: <input type="text" /></p>
<p>E-Mail: <input type="text" /></p>
</fieldset>

18. Formulários
● Tag select :
– O elemento HTML select (<select>) representa um controle que apresenta
um menu de opções. As opções dentro do menu são representadas pelo
elemento <option>, que podem ser agrupados por elementos <optgroup>. As
opções podem ser pré-selecionadas para o usuário.
– Ex:
<select name="select">
<option value="valor1">Valor 1</option>
<option value="valor2" selected>Valor 2</option>
<option value="valor3">Valor 3</option>
</select>

19. Exemplo dessas tags utilizadas
para configurar nosso site

20. Exemplo dessas tags utilizadas
para configurar nosso site

21. Exemplo dessas tags utilizadas
para configurar nosso site

22. Exemplo dessas tags utilizadas
para configurar nosso site

23. Exemplo dessas tags utilizadas
para configurar nosso site