├── assets
    ├── html.png
    ├── left.png
    ├── center.png
    ├── right.png
    ├── tabela.png
    ├── tbody.png
    ├── various.png
    ├── altimagem.png
    ├── atrtitle.png
    ├── headings.png
    ├── listadisc.png
    ├── logohe4rt.png
    ├── listacircle.png
    ├── listasquare.png
    ├── listastart.png
    ├── listatype1.png
    ├── listatypeAA.png
    ├── listatypeII.png
    ├── listatypea.png
    ├── listatypei.png
    ├── tabelawidth.png
    ├── listadescricao.png
    ├── tabelasemborda.png
    ├── tabelacomcolspan.png
    ├── tabelacomlegenda.png
    ├── tabelacomrowspan.png
    ├── tabelasemcolspan.png
    └── tabelasemrowspan.png
├── contents
    ├── 13.Projeto.md
    ├── 6.Comentarios.md
    ├── 12.Estilo.md
    ├── 1.Introducao.md
    ├── 9.Multimidia.md
    ├── 2.Tags.md
    ├── 4.Texto.md
    ├── 10.Formulario.md
    ├── 3.Estruturais.md
    ├── 7.Link.md
    ├── 8.Lista.md
    ├── 5.Atributos.md
    └── 11.Tabela.md
└── README.md


/assets/html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/html.png


--------------------------------------------------------------------------------
/assets/left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/left.png


--------------------------------------------------------------------------------
/assets/center.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/center.png


--------------------------------------------------------------------------------
/assets/right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/right.png


--------------------------------------------------------------------------------
/assets/tabela.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tabela.png


--------------------------------------------------------------------------------
/assets/tbody.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tbody.png


--------------------------------------------------------------------------------
/assets/various.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/various.png


--------------------------------------------------------------------------------
/assets/altimagem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/altimagem.png


--------------------------------------------------------------------------------
/assets/atrtitle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/atrtitle.png


--------------------------------------------------------------------------------
/assets/headings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/headings.png


--------------------------------------------------------------------------------
/assets/listadisc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listadisc.png


--------------------------------------------------------------------------------
/assets/logohe4rt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/logohe4rt.png


--------------------------------------------------------------------------------
/assets/listacircle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listacircle.png


--------------------------------------------------------------------------------
/assets/listasquare.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listasquare.png


--------------------------------------------------------------------------------
/assets/listastart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listastart.png


--------------------------------------------------------------------------------
/assets/listatype1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listatype1.png


--------------------------------------------------------------------------------
/assets/listatypeAA.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listatypeAA.png


--------------------------------------------------------------------------------
/assets/listatypeII.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listatypeII.png


--------------------------------------------------------------------------------
/assets/listatypea.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listatypea.png


--------------------------------------------------------------------------------
/assets/listatypei.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listatypei.png


--------------------------------------------------------------------------------
/assets/tabelawidth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tabelawidth.png


--------------------------------------------------------------------------------
/assets/listadescricao.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/listadescricao.png


--------------------------------------------------------------------------------
/assets/tabelasemborda.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tabelasemborda.png


--------------------------------------------------------------------------------
/assets/tabelacomcolspan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tabelacomcolspan.png


--------------------------------------------------------------------------------
/assets/tabelacomlegenda.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tabelacomlegenda.png


--------------------------------------------------------------------------------
/assets/tabelacomrowspan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tabelacomrowspan.png


--------------------------------------------------------------------------------
/assets/tabelasemcolspan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tabelasemcolspan.png


--------------------------------------------------------------------------------
/assets/tabelasemrowspan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucassoren/HTML4Noobs/HEAD/assets/tabelasemrowspan.png


--------------------------------------------------------------------------------
/contents/13.Projeto.md:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | ----
4 | 
5 | [Tags de Estilo e Script](/contents/12.Estilo.md) <= Anterior | [Início](/README.MD)


--------------------------------------------------------------------------------
/contents/6.Comentarios.md:
--------------------------------------------------------------------------------
 1 | <h1 align = "center"> Comentário </h1>
 2 | 
 3 | A **tag** de **comentário** é usada para inserir comentários no código-fonte, dessa forma o comentários não sera exibido no navegador.
 4 | Você pode usar comentário para explicar seu código.
 5 | 
 6 |  ## Uso da tag comentário 
 7 | 
 8 |     <!-- Esse comentario não sera exibido -->
 9 | 
10 |  **OBS:** Lembre sempre de fechar tag
11 | 
12 |  ----
13 | 
14 | [Atributos](/contents/5.Atributos.md) <= Anterior | [Início](/README.MD) | Proximo => [Tags de Link](/contents/7.Link.md)
15 | 


--------------------------------------------------------------------------------
/contents/12.Estilo.md:
--------------------------------------------------------------------------------
 1 | <h1 align = "center"> Style & Script </h1>
 2 | 
 3 | **Style** a tag é usada para definir informações de estilo (CSS) para um documento.
 4 | 
 5 | Dentro do `<style>` você especifica como os elementos HTML devem ser renderizados em um navegador.
 6 | 
 7 | ***
 8 | 
 9 | **Script** `<script>` tag é usada para incorporar um script do lado do cliente (JavaScript).
10 | 
11 | O `<script>` elemento contém instruções de script ou aponta para um arquivo de script externo por meio do atributo src.
12 | 
13 | Os usos comuns do JavaScript são manipulação de imagens, validação de formulários e mudanças dinâmicas de conteúdo.
14 | 
15 | 
16 | 
17 | 
18 | ----
19 | 
20 | [Tags de Tabela](/contents/11.Tabela.md) <= Anterior | [Início](/README.MD) | Próximo => [Projeto](/contents/13.Projeto.md)
21 | 


--------------------------------------------------------------------------------
/contents/1.Introducao.md:
--------------------------------------------------------------------------------
 1 | <h1 align = "center"> Sobre o projeto👋 </h1>
 2 | 
 3 | Intuito desse projeto é ajudar os iniciantes de como usar o HTML de uma forma simples e totalmente gratuita.
 4 | 
 5 | # O que é HTML
 6 | HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web, utilizada para desenvolver páginas e documentos para a internet garantindo a formatação ideal para sites.
 7 | 
 8 | # Ambiente
 9 | 
10 | Você deve ter um ambiente de trabalho básico configurado:
11 | 
12 |  - **Um editor de texto** [Visual Studio Code](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [Atom](https://atom.io/), ou [VIM](https://www.vim.org/)), ou um editor hibrído (ex: [Dreamweaver](https://www.adobe.com/br/products/dreamweaver.html) ou [WebStorm](https://www.jetbrains.com/webstorm/)).
13 | 
14 |  - **Navegadores web** [Chrome](https://www.google.com/intl/pt-BR/chrome/), [Opera](https://www.opera.com/pt-br) ou [Firefox](https://www.mozilla.org/pt-BR/firefox/new/)
15 | 
16 |  ----
17 | 
18 |  [Início](/README.MD) | Próximo => [Tags](/contents/2.Tags.md)
19 | 


--------------------------------------------------------------------------------
/contents/9.Multimidia.md:
--------------------------------------------------------------------------------
 1 | <h1 align = "center"> Multimídia </h1>
 2 | 
 3 | Enquanto você estava em site, já reparou que nele tinha um vídeo para dar play ou uma imagem aparecendo? Se sim, então você já viu como é em prática uma tag de multímidia, se não, você vai ver agora.  
 4 | 
 5 | ## **Tags** 
 6 | 
 7 | As principais Tags que utilizamos para mexer com multimídia são:
 8 | 
 9 | + `<img>` -> têm como função incluir uma imagem dentro da página;  
10 | 
11 | **Ex**:  
12 | 
13 | ```html 
14 | <img src = "imagens/he4rt-logo.png" alt = "logo da he4rt">
15 | ```
16 | 
17 | Destrinchando fica:  
18 | 
19 | + **src**: local de origem da imagem;
20 | + **alt**: informa o texto alternativo da imagem;
21 | 
22 | --- 
23 | 
24 | + `<video>` -> têm como função inserir um vídeo;
25 | 
26 | **Ex**:  
27 | 
28 | ```html
29 | <video controls>
30 |   <source src="video.mp4" type="video/mp4">
31 |   <source src="video.ogg" type="video/ogg">
32 |   Seu navegador não possui suporte para Vídeos.
33 | </video>
34 | ```
35 | Destrinchando fica:  
36 | 
37 | + **source src** -> local de origem do arquivo de vídeo;
38 | + **type** -> tipo de arquivo;
39 | 
40 | ----
41 | + `<audio>` -> têm como função inserir um áudio;  
42 | 
43 | **Ex**:  
44 | 
45 | ```html
46 | <audio controls>
47 |   <source src="musica.ogg" type="audio/ogg">
48 |   <source src="musica.mp3" type="audio/mpeg">
49 |   Seu navegador não possui suporte para áudio.
50 | </audio>
51 | ```
52 | 
53 | Destrinchando fica:  
54 | 
55 | + **source src** -> local de origem do arquivo de áudio;
56 | + **type** -> tipo de arquivo;
57 | 
58 | ----
59 | 
60 | + `<iframe>` -> têm como função incluir recursos de outra página na sua página;
61 | 
62 | **Ex**:  
63 | 
64 | ```html
65 | <iframe src="https://heartdevs.com/">
66 |   <p>Seu navegador não possui suporte para iFrames.</p>
67 | </iframe>
68 | ```
69 | 
70 | Destrinchando fica:  
71 | 
72 | + **iframe** -> tag do frame;
73 | + **src** -> local de origem da página a ser exibida;
74 | 
75 | ----
76 | 
77 | [Tags de Lista](/contents/8.Lista.md) <= Anterior | [Início](/README.MD) | Proximo => [Tags de Formulário](/contents/10.Formulario.md)
78 | 


--------------------------------------------------------------------------------
/contents/2.Tags.md:
--------------------------------------------------------------------------------
 1 | <h1 align = "center"> Tags </h1>
 2 | 
 3 | **Tags** são estruturas de linguagem de marcação contendo instruções, tendo uma marca de início e outra de fim para que o navegador possa renderizar uma página. 
 4 | 
 5 | 
 6 | ## Tags Básicas 
 7 | 
 8 | **DOCTYPE**  
 9 | 
10 | Todos os documentos HTML devem começar com uma `<!DOCTYPE>` declaração.
11 | 
12 | A declaração não é uma tag HTML. É uma "informação" para o navegador sobre que tipo de documento esperar.
13 | 
14 | **TAG:** `<!DOCTYPE html>` 
15 | 
16 | ***
17 | 
18 | **HTML**  
19 | 
20 | A tag `<html>` representa a raiz de um documento HTML.
21 | 
22 | **TAG:** `<html>` 
23 | 
24 | ***
25 | 
26 | **HEAD**
27 | 
28 | O elemento `<head>` é um contêiner para metadados (dados sobre dados) e é colocado entre a `<html>` tag e a `<body>` tag.
29 | 
30 | **TAG:** `<head>`
31 | 
32 | ***
33 | 
34 | **TITLE**  
35 | 
36 | O `<title>` define o título do documento. O título deve ser somente texto e é mostrado na barra de título do navegador ou na guia da página.
37 | 
38 | A tag `<title>` é necessária em documentos HTML!
39 | 
40 | O conteúdo do título de uma página é muito importante para a otimização do mecanismo de pesquisa (SEO)! O título da página é usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar as páginas nos resultados da pesquisa.
41 | 
42 | O `<title>` elemento:
43 | 
44 | - define um título na barra de ferramentas do navegador;
45 | - fornece um título para a página quando ela é adicionada aos favoritos;
46 | - exibe um título para a página nos resultados do mecanismo de pesquisa;
47 | 
48 | 
49 | **TAG:** `<title>`
50 | 
51 | ***  
52 | 
53 | **META**  
54 | 
55 | A `<meta>` tag define metadados sobre um documento HTML. Metadados são dados (informações) sobre dados.
56 | 
57 | `<meta>` tags sempre vão dentro do elemento `<head>` e são normalmente usadas para especificar conjunto de caracteres, descrição de página, palavras-chave, autor do documento e configurações de janela de visualização.
58 | 
59 | Os metadados não serão exibidos na página, mas podem ser analisados ​​pela máquina.
60 | 
61 | Os metadados são usados ​​por navegadores (como exibir conteúdo ou recarregar a página), mecanismos de pesquisa (palavras-chave) e outros serviços da web.
62 | 
63 | Existe um método para permitir que os web designers controlem a janela de visualização (a área visível do usuário em uma página da web), por meio da `<meta>` tag
64 | 
65 | **TAG:** `<meta>`  
66 | 
67 | 
68 | ***  
69 | 
70 | 
71 | **BODY**  
72 | 
73 | A `<body>` tag define o corpo do documento.
74 | 
75 | O `<body>` elemento contém todo o conteúdo de um documento HTML, como títulos, parágrafos, imagens, hiperlinks, tabelas, listas, etc.
76 | 
77 | **TAG:** `<body>`  
78 | 
79 | ***
80 | 
81 | [Introdução](/contents/1.Introducao.md) <= Anterior | [Início](/README.MD) | Próximo => [Tags Estruturais](/contents/3.Estruturais.md)


--------------------------------------------------------------------------------
/contents/4.Texto.md:
--------------------------------------------------------------------------------
 1 | <h1 align = "center"> Tag de Texto </H1>
 2 | 
 3 | ## Tag **`P`**
 4 | 
 5 | Para iniciar nossa jornada iremos comecar pela tag `P`, que tem como funcionalidade criar um parágrafo.
 6 | 
 7 | _Sintaxe_
 8 |  ```html
 9 | <p> Texto </p>
10 |  ```
11 | 
12 | Ele é um elemento em bloco.  
13 | 
14 | Elementos de bloco: Utilizam todo o espaço disponível e começam uma nova linha no documento.  
15 | 
16 | Dentro dele, podemos adicionar qualquer elemento embutido que quisermos, como `SPAN` ou `A`. (Vocês verão nos próximos tópicos.)
17 | 
18 | ## Tag **`SPAN`**
19 | 
20 | Esta é uma tag inline que pode ser usada para criar uma seção em um parágrafo que pode ser direcionada usando CSS.  
21 | 
22 | Ex: 
23 | 
24 | ```html
25 | <p>Uma parte do texto <span> e aqui outra parte </span></p>
26 | ```
27 | 
28 | ## Tag **`BR`**
29 | 
30 | Esta tag representa uma quebra de linha. É um elemento embutido e não precisa de uma tag de fechamento.
31 | 
32 | Nós o usamos para criar uma nova linha dentro de uma tag <b>P</b>, sem criar um novo parágrafo.
33 | 
34 | >Dica: Em comparacão com a criação de um novo parágrafo, não adiciona espaçamento adicinal!
35 | 
36 | Ex:
37 | 
38 | ```html
39 | <p>Um texto<br>Uma nova linha</p>
40 | ```
41 | 
42 | ## Tag de títulos **`<h1>–<h6>`**
43 | 
44 | O html possui 6 tipos de tags de títulos. De mais importante para o menos importante,temos: **H1,H2,H3,H4,H5,H6.**
45 | 
46 | Normalmente sempre uma página terá um **H1** que será o título da página.
47 | 
48 | Abaixo vocês verão um exemplo do uso das tags `heading`:
49 | 
50 | ![tag de titulos](../assets/headings.png)
51 | 
52 | >Todos os títulos são elementos de bloco.
53 | 
54 | ## Tag **`STRONG`**
55 | 
56 | Esta tag é usada para marcar o texto dentro dela como forte. Isso é muito importante, não é uma dica visual, mas uma dica semântica. Dependendo do meio usado, sua interpretação pode variar.  
57 | 
58 | Os navegadores, por padrão, deixam o texto dessa tag em `negrito`.
59 | 
60 | ## Tag **`EM`**
61 | 
62 | Esta tag é usada para marcar o texto dentro dela como enfatizado. Os navegadores, por padrão, deixam o texto em `Italico`.
63 | 
64 | ## Outras tags de texto
65 | 
66 | Existem várias tags com fins de apresentação:
67 | 
68 | > A tag `mark` 
69 | 
70 | > A tag `ins` 
71 | 
72 | > A tag `del` 
73 | 
74 | > A tag `sup` 
75 | 
76 | > A tag `sub` 
77 | 
78 | > A tag `small` 
79 | 
80 | > A tag `i` 
81 | 
82 | > A tag `b`
83 | 
84 | Este é um exemplo de renderização visual deles, que é aplicado por padrão pelos navegadores:
85 | 
86 | ![tag de titulos](../assets/various.png)
87 | 
88 | Você pode acabar se perguntando porque `b` é diferente de `strong`? E como `i` é diferente de `em`?
89 | 
90 |  A diferença está no significado semântico. Enquanto `b` e `i` são uma dica direta ao navegador para deixar um trecho de texto em negrito ou itálico `strong` e `em` dar ao texto um significado especial, e cabe ao navegador definir o estilo, que é exatamente o mesmo que `b` e `i`, por padrão. Embora você possa mudar isso usando CSS.
91 | 
92 |  ---
93 | 
94 |  [Tags Estruturais](/contents/3.Estruturais.md) <= Anterior | [Início](/README.MD) | Próximo => [Atributos](/contents/5.Atributos.md)
95 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align = "center"> Bem vindo ao HTML4Noobs! </h1>
 2 | 
 3 | <h1 align = "center">
 4 | <img src = assets/html.png width = 300px height = 300px>
 5 | </h1>
 6 | 
 7 | # Sobre o Repositório
 8 | 
 9 | O intuito desse projeto é ajudar os iniciantes a como usar o HTML de uma forma simples e totalmente gratuita.
10 | 
11 | # Road Map
12 | 
13 | 1. [Introdução](contents/1.Introducao.md)  
14 |     - Sobre o projeto
15 |     - O que é HTML
16 |     - Ambiente
17 | 2. [Tags](contents/2.Tags.md)
18 |     - O que são?
19 |     - Tags Básicas
20 | 3. [Tags Estruturais](contents/3.Estruturais.md)
21 | 4. [Tags de Texto](contents/4.Texto.md)
22 | 5. [Atributos](contents/5.Atributos.md)
23 | 6. [Comentários](contents/6.Comentarios.md)
24 | 7. [Tags de Link](contents/7.Link.md)
25 | 8. [Tags de Lista](contents/8.Lista.md)
26 | 9. [Tags de Multimídia](contents/9.Multimidia.md)
27 | 10. [Tags de Formulário](contents/10.Formulario.md)
28 | 11. [Tags de Tabela](contents/11.Tabela.md)
29 | 12. [Tags de Estilo e Script](contents/12.Estilo.md)
30 | 13. [Projeto](contents/13.Projeto.md)
31 | 
32 | # Como Contribuir
33 | 
34 | Contribuições fazem com que a comunidade open source seja um lugar incrível para aprender, inspirar e criar. Todas contribuições
35 | são **extremamente apreciadas**!
36 | 
37 | 1. Realize um Fork do projeto
38 | 2. Crie um branch com a nova feature (`git checkout -b feature/featurebraba`)
39 | 3. Realize o Commit (`git commit -m 'feature/featurebraba'`)
40 | 4. Realize o Push no Branch (`git push origin feature/featurebraba`)
41 | 5. Abra um Pull Request
42 | 
43 | 
44 | # Autores
45 | 
46 | - **Luis Eduardo (Nadachi)** - _Developer_ - [Twitter](https://twitter.com/Luis_Nadachi) | [LinkedIn](https://www.linkedin.com/in/luis-eduardo-ribeiro-teixeira-384b9819a/)
47 | - **Lucas (SorenHe4rt)** - _Backend Developer_ - [Twitter](https://twitter.com/sorenhe4rt) | [LinkedIn](https://www.linkedin.com/in/sorenheart/)
48 | - **Pedro Paulo (ZxPedro)** - _Developer_ - [Twitter](https://twitter.com/zxpedro_) | [LinkedIn](https://www.linkedin.com/in/pedropaulofc/)
49 | 
50 | <p align = "center"> Made with 💜
51 | 
52 | # Contribuidores
53 | 
54 | <table>
55 |   <tr>
56 |     <td align="center"><a href="https://twitter.com/Luis_Nadachi"><img src="https://avatars3.githubusercontent.com/u/51420622?s=460&u=cf47bc8eccd1fcc03c7a2986ea13f0436eb01721&v=4" width="100px;" alt=""/><br /><sub><b>Nadachi</b></sub></a><br /><a href="https://github.com/Luisnadachi" title="Code">💻</a></td>
57 |     <td align="center"><a href="https://twitter.com/sorenhe4rt"><img src="https://avatars2.githubusercontent.com/u/61706097?s=400&u=75bf7ae7f36b5d3eb6161d92b2a9ac4f895987fc&v=4" width="100px;" alt=""/><br /><sub><b>SorenHe4rt</b></sub></a><br /><a href="https://github.com/sorenhe4rt" title="Code">💻</a></td>
58 |     <td align="center"><a href="https://twitter.com/zxpedro_"><img src="https://avatars0.githubusercontent.com/u/54921618?s=460&u=bc793b19a397d29b734ea898a38d9f8d5afc1afe&v=4" width="100px;" alt=""/><br /><sub><b>ZxPedro</b></sub></a><br /><a href="https://github.com/ZxPedro" title="Code">💻</a></td>
59 |     <td align="center"><a href="https://twitter.com/zxpedro_"><img src="https://avatars3.githubusercontent.com/u/61285566?s=400&u=e3b596dd9f4f1235023224afc56b15e943c98b34&v=4" width="100px;" alt=""/><br /><sub><b>SrRenato</b></sub></a><br /><a href="https://github.com/SrRenato" title="Code">💻</a></td>
60 | 
61 |   </tr>
62 | </table>
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/contents/10.Formulario.md:
--------------------------------------------------------------------------------
 1 | <h1 align = "Center"> Formulário </h1>
 2 | 
 3 | Você já estave num site e reparou que existia um formulário para mandar sua opinião ou requisitar um serviço de uma empresa? Se sim, então você já viu como é um formulário, se não, então vai ver aqui nesse módulo.  
 4 | 
 5 | O formulário tem utilidade para várias funções como: obter dados do usuário, realizar cadastro, mandar emails, receber opiniões, entre outros. Então, eles são muitos importantes para vários tipos de páginas.  
 6 | 
 7 | ## **Tags** 
 8 | 
 9 | As principais tags para formulário são:  
10 | 
11 | + `<form>` -> têm como função iniciar o formulário;
12 | + `<input>` -> têm como função definir um campo de texto;
13 | + `<textarea>` -> têm como função também, definir um campo para o formulário, mas diferentemente, tem como principal característica conter preenchimentos e textos grandes;  
14 | + `<button>` -> têm como função definir um botão;
15 | + `<select>` -> têm como função definir uma lista selecionável ou conhecida como "drop-down"; 
16 | + `<option>` -> têm como função definir uma lista de opções dentro de um "drop-down";  
17 | + `<optgroup>` -> têm como função definir um grupo de opções; 
18 | + `<fieldset>` -> têm como função definir um grupo de campos;
19 | + `<label>` -> têm como função definir define uma legenda ou nome para um campo de texto ou controle do formulário; 
20 | + `<output>` -> têm como função definir elementos de saída para o formulário;
21 | + `<legend>` -> têm como função definir um título para um conjunto de campo; 
22 | 
23 | 
24 | Agora os diferentes types de input que podem ser usados:  
25 | 
26 | + `<input type="button">`
27 | + `<input type="checkbox">`
28 | + `<input type="color">`
29 | + `<input type="date">`
30 | + `<input type="datetime-local">`
31 | + `<input type="email">`
32 | + `<input type="file">`
33 | + `<input type="hidden">`
34 | + `<input type="image">`
35 | + `<input type="month">`
36 | + `<input type="number">`
37 | + `<input type="password">`
38 | + `<input type="radio">`
39 | + `<input type="range">`
40 | + `<input type="reset">`
41 | + `<input type="search">`
42 | + `<input type="submit">`
43 | + `<input type="tel">`
44 | + `<input type="text">`
45 | + `<input type="time">`
46 | + `<input type="url">`
47 | + `<input type="week">`
48 | 
49 | Agora vamos para um exemplo de como seria um formulário:  
50 | 
51 | ```html
52 | <form action="backend.php">
53 |   <label for="nome">Primeiro Nome:</label>
54 |   <input type="text" id="pnome" name="pnome"><br><br>
55 |   <label for="ultimonome">Último Nome:</label>
56 |   <input type="text" id="unome" name="unome"><br><br>
57 |   <input type="submit" value="Enviar">
58 | </form>
59 | ```
60 | Destrinchando fica:  
61 | 
62 | + **form** -> Está iniciando o formulário;
63 | + **action** -> De uma forma simples de explicar, quer dizer o que vai ser feito com esses dados coletados;
64 | + **label for** -> A indentificação para a legenda que vai ser exibida;
65 | + **input type** -> O tipo que vai ser o campo de enttrada de dados; 
66 | 
67 | **Obs**: Uma dica que eu dou é aprender sobre HTTP, porque ele é necessário para se aprofundar mais também sobre como funciona o formulário com o backend, se quiser ver mais, segue um site que pode ajudar -> [Site](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods)
68 | 
69 | ----
70 | 
71 | [Tags de Multimídia](/contents/9.Multimidia.md) <= Anterior | [Início](/README.MD) | Próximo => [Tags de Tabela](/contents/11.Tabela.md)
72 | 


--------------------------------------------------------------------------------
/contents/3.Estruturais.md:
--------------------------------------------------------------------------------
  1 | # Tags Estruturais
  2 | 
  3 | Nesse tópico, nós vamos falar sobre as principais tags utilizadas na estrutura HTML.
  4 | 
  5 | ## Header
  6 | 
  7 | A tag `<header>` é utilizada como um contêiner que contém o conteúdo introdutório ou de navegação da sua página. O `<header>` pode conter os seguintes elementos:
  8 | 
  9 | - Tags de cabeçalho
 10 | - Logo
 11 | - Seções de cabeçalho
 12 | - Informações de autoria
 13 | 
 14 | *_Sintaxe_*
 15 | ```html
 16 | <header>
 17 |     <h1>He4rt Devs</h1>
 18 |     <img *src*="./img/logo.png">
 19 | </header>
 20 | ```
 21 | 
 22 | - **Obs:A tag `header` não pode ser colocada dentro de uma tag `footer`, `address` ou dentro de outro `header`.**
 23 | 
 24 | ## Nav
 25 | 
 26 | A tag `<nav>` é utilizada para representar uma seção da página que contém um conjunto de links de navegação.Esses links são utilizados para navegar entre outras páginas ou para outras áreas da página.
 27 | 
 28 | *_Sintaxe_*
 29 | 
 30 | ```html
 31 | <nav>
 32 |     <a *href*="home.html">Home</a>
 33 |     <a *href*="about.html">About</a>
 34 |     <a *href*="contact.html">Contact</a>
 35 | </nav>
 36 | ```
 37 | 
 38 | ## Section
 39 | 
 40 | A tag `<section>` é utilizada para definir uma seção da página. Normalmente uma tag `<section>` é composta por uma tag de cabeçalho (`<h1> - <h6>`).
 41 | 
 42 | *_Sintaxe_*
 43 | ```html
 44 | <section>
 45 |     <h2>Linguagens</h2>
 46 |     <p>PHP, Javascript, Ruby</p>
 47 | </section>
 48 | 
 49 | <section>
 50 |     <h2>Frameworks</h2>
 51 |     <p>Laravel, NodeJS, Ruby on Rails</p>
 52 | </section>
 53 | ```
 54 | 
 55 | ## Article
 56 | 
 57 | A tag `<article>` é utilizada para especificar um conteúdo independente ou que é destinado a ser distribuido de forma independente ou reutilizável.
 58 | 
 59 | *_Sintaxe_*
 60 | ```html
 61 | <article>
 62 |     <h5>PHP</h5>
 63 |     <p>É uma linguagem interpretada livre...</p>
 64 | </article>
 65 | 
 66 | <article>
 67 |     <h5>Javascript</h5>
 68 |     <p>É uma linguagem de programação interpretada estruturada...</p>
 69 | </article>
 70 | ```
 71 | 
 72 | ## Aside
 73 | 
 74 | A tag `<aside>` é utilizada para especificar um conteúdo que está relacionado de forma indireta ao conteúdo que está ao seu entorno.
 75 | 
 76 | *_Sintaxe_*
 77 | 
 78 | ```html
 79 | <p>Programador é alguém que escreve, desenvolve ou faz manutenção de software em um grande sistema ou alguém que desenvolve software para uso em computadores pessoais.</p>
 80 | <aside>
 81 |     <h5>He4rt Devs</h5>
 82 |     <p>A He4rt Developers foi criada com o intuito de guiar quem deseja iniciar na área da programação.</p>
 83 | </aside>
 84 | ```
 85 | 
 86 | ## Footer
 87 | 
 88 | A tag `<footer>` é utilizada para definir o rodapé de um documento ou de uma seção. Normalmente um rodapé contém:
 89 | 
 90 | - Informações sobre o autor
 91 | - Direitos autorais
 92 | - Links para documentos relacionados
 93 | - Informações de contato.
 94 | 
 95 | *_Sintaxe_*
 96 | 
 97 | ```html
 98 | <footer>
 99 |     <p>He4rt, todos os direitos reservados.</p>
100 |     <p><a *href*="https://github.com/he4rt">Github</a></p>
101 | </footer>
102 | ```
103 | 
104 | ## Div
105 | 
106 | A tag `<div>` é utilizada para definir uma divisão ou seção de uma página. A tag `<div>` também pode ser utilizada como um contêiner para elementos HTML.
107 | 
108 | *_Sintaxe_*
109 | 
110 | ```html
111 | <div>
112 |     <h2>Nossos serviços</h2>
113 |     <p>Montagem e manutenção de computadores</p>
114 | </div>
115 | ```
116 | ---
117 | 
118 | [Tags](/contents/2.Tags.md) <= Anterior | [Início](/README.MD) | Próximo => [Tags de Texto](/contents/4.Texto.md)
119 | 


--------------------------------------------------------------------------------
/contents/7.Link.md:
--------------------------------------------------------------------------------
  1 | <h1 align = "Center"> Links </h1>
  2 | 
  3 | ## **O que são Links?**   
  4 | 
  5 | Você enquanto estava num site já viu uma palavra ou frase azul? Então você já viu um link. O Link nada mais é do que uma referência a um outro documento, sendo ele local ou de outro domínio, ele que é responsável por fazer você ir para outra página na internet ou entrar em uma específica.  
  6 | 
  7 | ## **Estrutura de uma Tag de Link**  
  8 | 
  9 | _Sintaxe_
 10 | ```html
 11 | <a href = "https://heartdevs.com/"> He4rt Devs </a>
 12 | ``` 
 13 | 
 14 | Destrinchando a sintaxe temos a tag `<a>` que é a tag de link e dentro temos o atributo **href** que é o endereço de destino, seja ele um arquivo local ou até mesmo uma página da Internet como está na sintaxe acima. 
 15 | 
 16 | Com o atributo **href** temos várias possibilidades de links, desde links simples para um arquivo local até mesmo para um link que envie um email, abaixo vou explicar um pouco mais sobre isso.  
 17 | 
 18 | 
 19 | Os três tipos utilizados dentro do href são:  
 20 | 
 21 | + **Interno**: Irá redirecionar a um elemento âncora ou falando numa maneira mais simples, a algum elemento existente dentro da mesma página.  
 22 | 
 23 | **Ex**:
 24 | 
 25 |  ```html
 26 | <a href = "#home"> Inicial </a>
 27 |  ```
 28 | 
 29 | + **Local**: Irá redirecionar para uma página que está dentro da pasta.  
 30 | 
 31 | **Ex**: 
 32 | 
 33 | ```html
 34 | <a href = /contents/6.Comentarios.md> Comentários </a> 
 35 | ```
 36 | 
 37 | + **Global**: Irá redirecionar para uma página de "fora".  
 38 | 
 39 | **Ex**: 
 40 | 
 41 | ```html
 42 | <a href = "https://heartdevs.com/"> He4rt Devs </a>
 43 | ```
 44 | 
 45 | Além desses, temos outras formas de fazer links usando o **href**, que vão ser vistas abaixo.
 46 | 
 47 | ## **Link para e-mail**
 48 | 
 49 | Usando o **href** podemos fazer o link enviar um email, contendo o email da pessoa, assunto e até mesmo mensagem no corpo do email.  
 50 | 
 51 | **Ex**:
 52 | 
 53 | ```html
 54 | <a href="mailto:salve@salvado.com?subject=Aprendendo&body=Manda um Salve"> Salve?</a>
 55 | ```
 56 | 
 57 | Vamos lá, distrinchando todo o conteúdo do **href** temos:
 58 | 
 59 | + **Mailto**: Vai ser para qual endereço você vai está enviando email.
 60 | + **?**: Vai separar o mailto e subject.
 61 | + **Subject**: Qual vai ser o assunto do email.
 62 | + **&**: Separa o subject do body.
 63 | + **Body**: Vai ser o corpo do email ou texto do email.
 64 | 
 65 | 
 66 | ## **Link para download**
 67 | 
 68 | Podemos usar o **href** para usar o link como forma de download de um arquivo. Ex: 
 69 | 
 70 | ```html
 71 | <a href = "urldodownload" download = "nomedoarquivo.exe">
 72 | ```
 73 | 
 74 | Aqui a única coisa diferente é o **download** que é onde vamos indentificar o nome do arquivo a ser baixado.
 75 | 
 76 | ## **Link em imagens**
 77 | 
 78 | E por último, também podemos transformar imagens como links.  
 79 | 
 80 | **Ex**:  
 81 | 
 82 | ```html
 83 | <a href = https://heartdevs.com> <img width = "100" height = "100" src = "../assets/logohe4rt.png"></a>
 84 | ```
 85 | 
 86 | Destrinchando o link, vai ser:  
 87 | 
 88 | + **src**: Local onde está a imagem.
 89 | + **img**: Serve para colocar uma imagem.
 90 | 
 91 | ## **Atributo Target**
 92 | 
 93 | E para finalizar o módulo sobre links, vamos falar do último atributo utilizado nos links que é o target, que ele tem como função informar como o link ou redirecionamento deverá ocorrer.  
 94 | 
 95 | Os atributos targets são:  
 96 | 
 97 | + **_blank**: abre a página em uma nova janela/aba.
 98 | + **_self**: abre a página na mesma janela.
 99 | + **_parente**: abre a página na mesma janela do link.
100 | + **_top**: cancela todos os frames e abre a pagina no mesmo navegador.
101 | 
102 | **Ex**:  
103 | 
104 | ```html
105 | <a href="https://heartdevs.com/" target="_blank"> Site da He4rt </a>
106 | ```
107 | 
108 | ----
109 | 
110 | [Comentários](/contents/6.Comentarios.md) <= Anterior | [Início](/README.MD) | Proximo => [Tags de Lista](/contents/8.Lista.md)
111 | 


--------------------------------------------------------------------------------
/contents/8.Lista.md:
--------------------------------------------------------------------------------
  1 | <h1 align = "Center"> Listas </h1>
  2 | 
  3 | No HTML nós temos três tipos de listas, sendo elas `listas não ordenadas`, `listas ordenadas` e `listas de descrição`.
  4 | 
  5 | ## Listas não ordenadas 
  6 | 
  7 | Para criar uma lista não ordenada basta utilizar a tag `<ul>` e adicionar a tag `<li>` para definir os itens da lista.
  8 | 
  9 | _Sintaxe_
 10 | ```html
 11 | <!DOCTYPE html>
 12 | 
 13 | <html>
 14 | 
 15 |     <head>
 16 |         <title>Minha lista</title>
 17 |     </head>
 18 | 
 19 |     <body>
 20 |         <h3>Minha lista</h3>
 21 |         <ul>
 22 |             <li>Carro</li>
 23 |             <li>Moto</li>
 24 |             <li>Avião</li>
 25 |         </ul>
 26 |     </body>
 27 | 
 28 | </html>
 29 | ```
 30 | Resultado:
 31 | 
 32 | ![Lista de descrição](../assets/listacircle.png)
 33 | 
 34 | ### Tipos de marcadores nas listas não ordenadas
 35 | 
 36 | Por padrão os itens das listas não ordenadas serão marcados por círculos pretos, mas nós podemos mudar utilizando o `type="valor"` dentro da tag `<ul>`.
 37 | 
 38 | _Sintaxe_
 39 | ```html
 40 | <ul type="valor">
 41 | ```
 42 | 
 43 | Onde: 
 44 | - Valor: Tipo de marcador que você queira utilizar.
 45 | 
 46 | Os valores podem ter três padrões:
 47 | 
 48 | - type="circle": Círculo não preenchido.
 49 | 
 50 | ![Marcador circle](../assets/listacircle.png)
 51 | 
 52 | - type="square": Quadrado preto.
 53 | 
 54 | ![Marcador square](../assets/listasquare.png)
 55 | 
 56 | - type="disc": Círculo preenchido.
 57 | 
 58 | ![Marcador disc](../assets/listadisc.png)
 59 | 
 60 | ## Listas ordenadas 
 61 | 
 62 | Para criar uma lista Ordenada basta utilizar a tag `<ol>` e adicionar a tag `<li>` para definir os itens da lista.
 63 | 
 64 | _Sintaxe_
 65 | ```html
 66 | <!DOCTYPE html>
 67 | 
 68 | <html>
 69 | 
 70 |     <head>
 71 |         <title>Minha lista</title>
 72 |     </head>
 73 | 
 74 |     <body>
 75 |         <h3>Minha lista</h3>
 76 |         <ol>
 77 |             <li>Item 1</li>
 78 |             <li>Item 2</li>
 79 |             <li>Item 3</li>
 80 |         </ol>
 81 |     </body>
 82 | 
 83 | </html>
 84 | ```
 85 | Resultado:
 86 | 
 87 | ![Lista de descrição](../assets/listatype1.png)
 88 | 
 89 | ### Tipos de marcadores nas listas ordenadas
 90 | 
 91 | Por padrão os itens das listas ordenadas serão marcados por números, mas nós podemos mudar utilizando o `type="valor"` dentro da tag `<ol>`.
 92 | 
 93 | _Sintaxe_
 94 | ```html
 95 | <ol type="valor">
 96 | ```
 97 | 
 98 | Onde: 
 99 | - Valor: Tipo de marcador que você queira utilizar.
100 | 
101 | Os valores podem ter cinco padrões:
102 | 
103 | - type="1": Valores inteiros 1,2,3...
104 | 
105 | ![Marcador valor inteiro](../assets/listatype1.png)
106 | 
107 | - type="A": Alfabeto em maiúsculas A,B,C...
108 | 
109 | ![Marcador alfabeto em maiúsculas](../assets/listatypeAA.png)
110 | 
111 | - type="a": Alfabeto em minúsculas a,b,c...
112 | 
113 | ![Marcador alfabeto em minúsculas](../assets/listatypea.png)
114 | 
115 | - type="I": Algarismos Romanos em maiúsculo I,II,III...
116 | 
117 | ![Marcador algarismos Romanos em maiúsculo](../assets/listatypeII.png)
118 | 
119 | - type="i": Algarismos Romanos em minúsculO i,ii,iii...
120 | 
121 | ![Marcador algarismos Romanos em minúsculo](../assets/listatypei.png)
122 | 
123 | ### Alterar valor inicial da numeração
124 | 
125 | A lista ordenada por padrão começa com 1, mas é possível alterar utilizando o atributo `start="valor"` dentro da tag `<ol>`.
126 | 
127 | _Sintaxe_
128 | ```html
129 | <ol start="valor">
130 | ```
131 | Onde: 
132 | - Valor: Valor que você gostaria de iniciar a lista.
133 | 
134 | Exemplo:
135 | _Sintaxe_
136 | ```html
137 | <!DOCTYPE html>
138 | 
139 | <html>
140 | 
141 |     <head>
142 |         <title>Minha lista</title>
143 |     </head>
144 | 
145 |     <body>
146 |         <h3>Minha lista</h3>
147 |         <ol start="5">
148 |             <li>Item 1</li>
149 |             <li>Item 2</li>
150 |             <li>Item 3</li>
151 |         </ol>
152 |     </body>
153 | </html>
154 | ``` 
155 | 
156 | Resultado:
157 | 
158 | ![Lista ordenada com start](../assets/listastart.png)
159 | 
160 | ## Listas de descrição 
161 | 
162 | A lista de descrição é definida através da tag `<dl>`, a tag `<dt>` define o nome que será descrito e a tag `<dd>` é a descrição.
163 | 
164 | _Sintaxe_
165 | ```html
166 | <!DOCTYPE html>
167 | 
168 | <html>
169 | 
170 |     <head>
171 |         <title>Minha lista</title>
172 |     </head>
173 | 
174 |     <body>
175 |         <h3>Minha lista</h3>
176 |         <dl>
177 |             <dt>He4rt Developers</dt>
178 |             <dd>Uma comunidade de desenvolvedores ajudando os iniciantes do mundo da programação.</dd>
179 |             <dt>4noobs</dt>
180 |             <dd>Projetos desenvolvidos para facilitar o estudos dos devs iniciantes feitos pela nossa comunidade!</dd>
181 |         </dl>
182 |     </body>
183 | </html>
184 | ``` 
185 | 
186 | Resultado:
187 | 
188 | ![Lista de descrição](../assets/listadescricao.png)
189 | 
190 | ----
191 | 
192 | [Tags de Link](/contents/7.Link.md) <= Anterior | [Início](/README.MD) | Proximo => [Tags de Multimídia](/contents/9.Multimidia.md)
193 | 


--------------------------------------------------------------------------------
/contents/5.Atributos.md:
--------------------------------------------------------------------------------
  1 | <h1 align = "center"> Atributos </h1> 
  2 | 
  3 | ## Para que serve os atributos? 
  4 | 
  5 | Os atributos servem para definir uma propriedade de um elemento HTML. Os atributos são sempre definidos dentro da tag de abertura.
  6 | 
  7 | - Os atributos são definidos após o nome do elemento.
  8 | - Os atributos são formados pelo nome, um sinal de igual e valor.
  9 | - O valor pode ficar dentro de aspas duplas **""** ou aspas simples **''**.
 10 | 
 11 | _Sintaxe_
 12 | ```html
 13 | <body bgcolor="red">
 14 |     <p> Lorem Ipsum </p>
 15 | </body>
 16 | ```
 17 | 
 18 | Onde:
 19 | 
 20 | - `body`: É o elemento que estamos inserindo o atributo.
 21 | - `bgcolor`: É o nome do atributo.
 22 | - `red`: É o valor do atributo
 23 | 
 24 | ## Tipos de atributos 
 25 | 
 26 | ### Atributo id
 27 | 
 28 | O atributo `id` é um atributo global utilizado para definir um identificador exclusivo. Esse identifcador deve ser único em todo a página. O `id` é utilizado para identificar o elemento ao navegar por âncoras utilizando scripts ou para estilização.
 29 | 
 30 | _Sintaxe_
 31 | ```html
 32 | <body>
 33 |     <p id="contato"> Entre em contato </p>
 34 | </body>
 35 | ```
 36 | 
 37 | ### Atributo class
 38 | 
 39 | O atributo `class` é um atributo global utilizado para definir uma lista de classes de um elemento. Diferente do `id`, as classes podem ser repetidas na página. O `class` é bastante utilizado para definir o css de um grupo de elementos.
 40 | 
 41 | _Sintaxe_
 42 | ```html
 43 | <body>
 44 |     <p class="paragrafo"> Entre em contato </p>
 45 |     <p class="paragrafo"> Entre em contato </p>
 46 | </body>
 47 | ```
 48 | 
 49 | ### Atributo style 
 50 | 
 51 | O atributo `style` é um atributo global utilizado para definir estilos a um elemento, como tamanho, fonte e muito mais.
 52 | 
 53 | _Sintaxe_
 54 | ```html
 55 | <body>
 56 |     <p style="font-size: 12px; color: aquamarine;">Lorem Ipsum</p>
 57 | </body>
 58 | ```
 59 | 
 60 | ### Atributo href 
 61 | 
 62 | #### URL
 63 | 
 64 | O atributo `href` pode ser utilizado para indicar a URL da página para a qual o link irá redirecionar.
 65 | 
 66 | _Sintaxe_
 67 | ```html
 68 | <a href="https://www.google.com/">Goole</a>
 69 | ```
 70 | Onde:
 71 | 
 72 | - `a`: É o elemento que estamos inserindo o atributo.
 73 | - `href`: É o nome do atributo.
 74 | - `link`: Endereço para qual será redirecionado ao clicar no link.
 75 | 
 76 | #### Âncora
 77 | 
 78 | Com o href também é possível redirecionar a um elemento âncora, mas antes é necessário definir uma id para o elemento.
 79 | 
 80 | _Sintaxe_
 81 | ```html
 82 | <a href="#sobre">Sobre a empresa</a>
 83 | ```
 84 | Onde:
 85 | 
 86 | - `a`: É o elemento que estamos inserindo o atributo.
 87 | - `href`: É o nome do atributo.
 88 | - `#sobre`: Redirecionará ao elemento âncora sobre.
 89 | 
 90 | #### Página
 91 | 
 92 | Também é possível redirecionar a uma página.
 93 | 
 94 | _Sintaxe_
 95 | ```html
 96 | <a href="./paginas/contato.html">Contato</a>
 97 | ```
 98 | Onde:
 99 | 
100 | - `a`: É o elemento que estamos inserindo o atributo.
101 | - `href`: É o nome do atributo.
102 | - `#sobre`: Redirecionará a página contato.html dentro da pasta paginas.
103 | 
104 | ### Atributo src 
105 | 
106 | O atributo `src` é utilizado para inserir uma imagem em uma página HTML. Para inserir uma imagem você pode enviar a URL de duas formas:
107 | 
108 | #### URL Absoluto
109 | 
110 | URL Absoluto é composto pelo protocolo, domínio e o caminho no servidor. Com URL Absoluto você pode passar o caminho de uma imagem que está hospedada em outro site.
111 | 
112 | _Sintaxe_
113 | ```html
114 | <img src="https://heartdevs.com/dist/images/logo-he4rt2.png">
115 | ```
116 | Onde:
117 | 
118 | - `a`: É o elemento que estamos inserindo o atributo.
119 | - `src`: É o nome do atributo.
120 | - `link`: Caminho no qual a imagem está hospedada.
121 | 
122 | 
123 | #### URL Relativo
124 | 
125 | Com URL Relativo você pode passar o caminho de uma imagem que está hospedada no site. 
126 | - URL sem barra: Será utilizado o domínio e o caminho da página atual.
127 | 
128 | _Sintaxe_
129 | ```html
130 | <img src="heartdevs.png">
131 | ```
132 | 
133 | - URL com barra: Será relativo ao domínio.
134 | 
135 | _Sintaxe_
136 | ```html
137 | <img src="/imagens/heartdevs.png">
138 | ```
139 | 
140 | ### Atributo width e height 
141 | 
142 | O atributo `width` e o atributo `height` é utilizado na tag `img`. Onde o `width` indica a largura e o `height` indica a altura da imagem.
143 | 
144 | _Sintaxe_
145 | ```html
146 | <img src="heartdevs.png" width="50" height="50">
147 | ```
148 | 
149 | Também é possível passar o valor como porcentagem como no exemplo abaixo: 
150 | 
151 | _Sintaxe_
152 | ```html
153 | <img src="heartdevs.png" width="50%">
154 | ```
155 | ### Atributo alt 
156 | 
157 | O atributo `alt` é utilizado na tag `img`. Com o atributo `alt` você pode especificar um texto alternativo para uma imagem, caso a imagem não seja exibida por algum motivo.
158 | 
159 | _Sintaxe_
160 | ```html
161 | <img src="heartdevs.png" alt="He4rt Devs">
162 | ```
163 | 
164 | Resultado:
165 | 
166 | ![He4rt Devs](../assets/altimagem.png)
167 | 
168 | ### Atributo lang 
169 | 
170 | O atributo `lang` é utilizado na tag `html`. Com o atributo `lang` você declara o idioma da sua página web, auxiliando mecanismos de pesquisa e navegadores.
171 | 
172 | _Sintaxe_
173 | ```html
174 | <!DOCTYPE html>
175 | <html lang="pt">
176 |     <head>
177 |         ...
178 |     </head>
179 |     <body>
180 |         ...
181 |     </body>
182 | </html>
183 | ```
184 | O exemplo a cima declara o português como o idioma.
185 | 
186 | _Sintaxe_
187 | ```html
188 | <!DOCTYPE html>
189 | <html lang="pt-BR">
190 |     <head>
191 |         ...
192 |     </head>
193 |     <body>
194 |         ...
195 |     </body>
196 | </html>
197 | ```
198 | O exemplo a cima declara o português como o idioma e o Brasil como o país.
199 | 
200 | ### Atributo title 
201 | 
202 | O atributo `title` exibi informações de orientação relacionado ao elemento que ele pertence. O valor será exibido ao passar o mouse sobre o elemento.
203 | 
204 | _Sintaxe_
205 | ```html
206 |  <h1 title="Eu sou um título">HTML4NOOBS</h1>
207 | ```
208 | 
209 | Resultado:
210 | 
211 | ![Atributo title](../assets/atrtitle.png)
212 | 
213 | ### Atributo hidden
214 | 
215 | O atributo `hidden` é utilizado para ocultar elementos no qual ele foi definido, indicando que o elemento não é importante. Por ser um atributo global, o `hidden` pode ser utilizado em qualquer elemento HTML.  
216 | 
217 | _Sintaxe_
218 | ```html
219 |  <h1 hidden>HTML4NOOBS</h1>
220 | ```
221 | 
222 | ### Atributo align
223 | 
224 | O atributo `align` é utilizado para alinhar elementos da sua página. O `align` pode:
225 | 
226 | - Alinhar a esquerda
227 | _Sintaxe_
228 | ```html
229 |  <h1 align="left">HTML4NOOBS</h1>
230 | ```
231 | ![Alinhar a esquerda](../assets/left.png)
232 | 
233 | - Centralizar
234 | _Sintaxe_
235 | ```html
236 |  <h1 align="center">HTML4NOOBS</h1>
237 | ```
238 | ![Centralizar](../assets/center.png)
239 | 
240 | - Alinhar a direita
241 | _Sintaxe_
242 | ```html
243 |  <h1 align="right">HTML4NOOBS</h1>
244 | ```
245 | ![Alinhar a direita](../assets/right.png)
246 | 
247 | **Obs: Por padrão os elementos serão alinhados a esquerda.**
248 | 
249 | ---
250 | 
251 | [Tags de Texto](/contents/4.Texto.md) <= Anterior | [Início](/README.MD) | Próximo => [Comentários](/contents/6.Comentarios.md)


--------------------------------------------------------------------------------
/contents/11.Tabela.md:
--------------------------------------------------------------------------------
  1 | <h1 align = "center"> Tabelas </h1>
  2 | 
  3 | ## O que é uma tabela?
  4 | 
  5 | Tabela é o conjunto de linhas e colunas. Uma tabela é utilizada para organizar dados.
  6 | 
  7 | ## Estrutura de uma tabela em HTML
  8 | 
  9 | Para criar uma tabela no HTML é necessário utilizar a tag `<table>` e mais algumas estruturas que são as tags `<tr>`, `<th>` , `<td>` , `<thead>`,`<tbody>` e `<tfoot>`.
 10 | 
 11 | ## Tags Básicas
 12 | - `<table>`: Define uma estrutura de tabela.
 13 | - `<tr>`: Define uma linha para tabela.
 14 | - `<th>`: Define o cabeçalho da tabela.
 15 | - `<td>`: Define os dados/células na tabela.  
 16 | 
 17 | **Obs: Todas as tags possui fechamento.**
 18 | 
 19 | _Sintaxe_
 20 | ```html
 21 | <!DOCTYPE html>
 22 | 
 23 | <html>
 24 | 
 25 |     <head>
 26 |         <title>Minha primeira tabela</title>
 27 |         <meta charset="UTF-8">
 28 |     </head>
 29 | 
 30 |     <body>
 31 |         <table border="1">
 32 |             <tr> <!-- Linha que contêm os cabeçalhos -->
 33 |                 <th>Cabeçalho 1</th>
 34 |                 <th>Cabeçalho 2</th>
 35 |                 <th>Cabeçalho 3</th>
 36 |             </tr>
 37 |             <tr> <!-- Linha que contêm os dados/células -->
 38 |                 <td>Célula 1</td>
 39 |                 <td>Célula 2</td>
 40 |                 <td>Célula 3</td>
 41 |             </tr>
 42 |             <tr> <!-- Linha que contêm os dados/células -->
 43 |                 <td>Célula 4</td>
 44 |                 <td>Célula 5</td>
 45 |                 <td>Célula 6</td>
 46 |             </tr>
 47 |         </table>
 48 |     </body>
 49 | </html>
 50 | ```
 51 | 
 52 | Resultado:
 53 | 
 54 | ![Primeira tabela](../assets/tabela.png)
 55 | 
 56 | ## Definir bordas 
 57 | 
 58 | Para ter uma visualização melhor da tabela é necessário definir uma borda. Para definir uma borda, use o `border="número"` dentro da tag `<table>`. 
 59 | 
 60 | _Sintaxe_
 61 | ```html
 62 |  <table border=" ">
 63 | ```
 64 | 
 65 | Onde:
 66 | - Número: Recebe um valor inteiro.
 67 | 
 68 | Se a borda da tabela não for definida, teremos o seguinte resultado:
 69 | 
 70 | ![Tabela sem borda](../assets/tabelasemborda.png)
 71 | 
 72 | Adicionando a borda, teremos o seguinte resultado:
 73 | 
 74 | ![Tabela com borda](../assets/tabela.png)
 75 | 
 76 | **Obs: Se o tamanho da borda não for definido, por padrão ele começará com 1.**
 77 | 
 78 | ## Definir tamanho da tabela 
 79 | 
 80 | Para definir o tamanho da tabela, use o `width="tamanho"` dentro da tag `<table>`. 
 81 | 
 82 | Onde:
 83 | - Tamanho: Recebe o valor(px ou porcentagem) para definir o tamanho da tabela.
 84 | 
 85 | _Sintaxe_
 86 | ```html
 87 | <!DOCTYPE html>
 88 | 
 89 | <html>
 90 | 
 91 |     <head>
 92 |         <title>Minha primeira tabela</title>
 93 |         <meta charset="UTF-8">
 94 |     </head>
 95 | 
 96 |     <body>
 97 |         <table border="1" width="500">
 98 |             <tr> 
 99 |                 <th>Cabeçalho 1</th>
100 |                 <th>Cabeçalho 2</th>
101 |                 <th>Cabeçalho 3</th>
102 |             </tr>
103 |             <tr> 
104 |                 <td>Célula 1</td>
105 |                 <td>Célula 2</td>
106 |                 <td>Célula 3</td>
107 |             </tr>
108 |             <tr>
109 |                 <td>Célula 4</td>
110 |                 <td>Célula 5</td>
111 |                 <td>Célula 6</td>
112 |             </tr>
113 |         </table>
114 |     </body>
115 | </html>
116 | ```
117 | 
118 | Resultado:
119 | 
120 | ![Tabela com width](../assets/tabelawidth.png)
121 | 
122 | **Obs: Para definir o tamanho em porcentagem é necessário adicionar o símbolo % após o valor.**
123 | 
124 | ## Expansão de coluna
125 | 
126 | Quando queremos que uma célula ocupe mais de uma coluna, nós utilizamos o `colspan="número"`. Podemos utilizar o `colspan="número"` dentro das tags `<th>` e `<td>`.
127 | 
128 | Onde:
129 | - Número: Recebe o número de colunas que uma célula deve se expandir.
130 | 
131 | Exemplo de tabela sem `colspan`:
132 | 
133 | _Sintaxe_
134 | ```html
135 | <!DOCTYPE html>
136 | 
137 | <html>
138 | 
139 |     <head>
140 |         <title>Minha primeira tabela</title>
141 |         <meta charset="UTF-8">
142 |     </head>
143 | 
144 |     <body>
145 |         <table border="1" width="500">
146 |             <tr>
147 |                 <th>Carro</th>
148 |                 <th>Cor</th>
149 |             </tr>
150 |             <tr>
151 |                 <td>Gol</td>
152 |                 <td>Vermelho</td>
153 |                 <td>Prata</td>
154 |             </tr>
155 |             <tr>
156 |                 <td>Uno</td>
157 |                 <td>Preto</td>
158 |                 <td>Verde</td>
159 |             </tr>
160 |         </table>
161 |     </body>
162 | </html>
163 | ```
164 | 
165 | Resultado:
166 | 
167 | ![Tabela sem colspan](../assets/tabelasemcolspan.png)
168 | 
169 | Exemplo de tabela com `colspan`:
170 | 
171 | _Sintaxe_
172 | ```html
173 | <!DOCTYPE html>
174 | 
175 | <html>
176 | 
177 |     <head>
178 |         <title>Minha primeira tabela</title>
179 |         <meta charset="UTF-8">
180 |     </head>
181 | 
182 |     <body>
183 |         <table border="1" width="500">
184 |             <tr>
185 |                 <th>Carro</th>
186 |                 <th colspan="2">Cor</th>
187 |             </tr>
188 |             <tr>
189 |                 <td>Gol</td>
190 |                 <td>Vermelho</td>
191 |                 <td>Prata</td>
192 |             </tr>
193 |             <tr>
194 |                 <td>Uno</td>
195 |                 <td>Preto</td>
196 |                 <td>Verde</td>
197 |             </tr>
198 |         </table>
199 |     </body>
200 | </html>
201 | ```
202 | 
203 | Resultado:
204 | 
205 | ![Tabela com colspan](../assets/tabelacomcolspan.png)
206 | 
207 | ## Expansão de linha
208 | 
209 | Quando queremos que uma célula ocupe mais de uma linha, nós utilizamos o `rowspan="número"`. Devemos utilizar o `rowspan="número"` dentro da tag `<td>`.
210 | 
211 | Onde:
212 | - Número: Recebe o número de linhas que uma célula deve se expandir.
213 | 
214 | Exemplo de tabela sem `rowspan`:
215 | 
216 | _Sintaxe_
217 | ```html
218 | <!DOCTYPE html>
219 | 
220 | <html>
221 | 
222 |     <head>
223 |         <title>Minha primeira tabela</title>
224 |         <meta charset="UTF-8">
225 |     </head>
226 | 
227 |     <body>
228 |         <table border="1" width="500">
229 |             <tr>
230 |                 <th>Nome</th>
231 |                 <td>Pedro</td>
232 |             </tr>
233 |             <tr>
234 |                 <th>Stacks</th>
235 |                 <td>HTML5</td>
236 |             </tr>
237 |             <tr>
238 |                 <th>Stacks</th>
239 |                 <td>CSS3</td>
240 |             </tr>
241 |             <tr>
242 |                 <th>Stacks</th>
243 |                 <td>Javascript</td>
244 |             </tr>
245 |         </table>
246 |     </body>
247 | </html>
248 | ```
249 | 
250 | Resultado:
251 | 
252 | ![Tabela sem rowspan](../assets/tabelasemrowspan.png)
253 | 
254 | Exemplo de tabela com `rowspan`:
255 | 
256 | _Sintaxe_
257 | ```html
258 | <!DOCTYPE html>
259 | 
260 | <html>
261 | 
262 |     <head>
263 |         <title>Minha primeira tabela</title>
264 |         <meta charset="UTF-8">
265 |     </head>
266 | 
267 |     <body>
268 |         <table border="1" width="500">
269 |             <tr>
270 |                 <th>Nome</th>
271 |                 <td>Pedro</td>
272 |             </tr>
273 |             <tr>
274 |                 <th rowspan="3">Stacks</th>
275 |                 <td>HTML5</td>
276 |             </tr>
277 |             <tr>
278 |                 <td>CSS3</td>
279 |             </tr>
280 |             <tr>
281 |                 <td>Javascript</td>
282 |             </tr>
283 |         </table>
284 |     </body>
285 | </html>
286 | ```
287 | 
288 | Resultado:
289 | 
290 | ![Tabela com rowspan](../assets/tabelacomrowspan.png)
291 | 
292 | ## Legenda 
293 | 
294 | Para adicionar legenda a uma tabela é preciso usar a tag `<caption>` dentro da estrutura `<table>`.
295 | 
296 | Exemplo:
297 | 
298 | _Sintaxe_
299 | ```html
300 | <!DOCTYPE html>
301 | 
302 | <html>
303 | 
304 |     <head>
305 |         <title>Minha primeira tabela</title>
306 |         <meta charset="UTF-8">
307 |     </head>
308 | 
309 |     <body>
310 |         <table border="1" width="500">
311 |             <caption>HTML4NOOBS</caption>
312 |             <tr> 
313 |                 <th>Cabeçalho 1</th>
314 |                 <th>Cabeçalho 2</th>
315 |                 <th>Cabeçalho 3</th>
316 |             </tr>
317 |             <tr>
318 |                 <td>Célula 1</td>
319 |                 <td>Célula 2</td>
320 |                 <td>Célula 3</td>
321 |             </tr>
322 |             <tr> 
323 |                 <td>Célula 4</td>
324 |                 <td>Célula 5</td>
325 |                 <td>Célula 6</td>
326 |             </tr>
327 |         </table>
328 |     </body>
329 | </html>
330 | ```
331 | 
332 | Resultado:
333 | 
334 | ![Tabela com legenda](../assets/tabelacomlegenda.png)
335 | 
336 | ## Tags Avançadas, voltadas para o posicionamento dos elementos.
337 | - `<thead>`: Define as linhas que irão fazer parte do cabeçalho.
338 | - `<tbody>`: Define as linhas que irão fazer parte do corpo.
339 | - `<tfoot>`: Define as linhas que irão fazer parte do cabeçalho.
340 | 
341 | Estas tags deveram está antes d
342 | 
343 | Com essas tags, a tabela torna-se um pouco mais manipulável. Um exemplo disto é caso eu queria destacar o resultado de uma pesquisa, posso por exemplo aplicar um estilo apenas para o rodapé.
344 | 
345 | Também, ajudam na questão semântica de seu código e garante que as tabelas vão ser exibidas de forma correta:
346 | 
347 | Idealmente suas tabelas deveriam seguir, este padrão:
348 | ## Tabelas com `<theader>, <tbody> e <tfoot>`
349 | 
350 | ```html
351 |     <table border="1" width="500">
352 |         <thead>
353 |             <tr> 
354 |                 <th>Cabeçalho 1</th>
355 |                 <th>Cabeçalho 2</th>
356 |                 <th>Cabeçalho 3</th>
357 |             </tr>
358 |         </thead>
359 |         <tbody>
360 |             <tr>
361 |                 <caption>HTML4NOOBS</caption>
362 |                 <td>Célula 1</td>
363 |                 <td>Célula 2</td>
364 |                 <td>Célula 3</td>
365 |             </tr>
366 |         </tbody>
367 |         <tfoot>
368 |             <tr> 
369 |                 <td>Célula 4</td>
370 |                 <td>Célula 5</td>
371 |                 <td>Célula 6</td>
372 |             </tr>
373 |         </tfoot>
374 |     </table>
375 | ```
376 | 
377 | ![Tabela com <theader>, <tbody> e <tfoot>](../assets/tabelacomlegenda.png)
378 | 
379 | Você deve ter percebido, que não houve diferença entre este e o exemplo anterior. Dentro de um cenário ideal, realmente este deve ser o resultado.
380 | 
381 | Mas avançando um pouco, poderiamos fazer algo como:
382 | 
383 | ## Rodapé ou cabeçalho ?
384 | 
385 | ```html
386 |     <table border="1" width="500">
387 |         <tfoot>
388 |             <tr> 
389 |                 <th>Cabeçalho 1</th>
390 |                 <th>Cabeçalho 2</th>
391 |                 <th>Cabeçalho 3</th>
392 |             </tr>
393 |         </tfoot>
394 |         <tr>
395 |             <caption>HTML4NOOBS</caption>
396 |             <td>Célula 1</td>
397 |             <td>Célula 2</td>
398 |             <td>Célula 3</td>
399 |         </tr>
400 |         <tr> 
401 |             <td>Célula 4</td>
402 |             <td>Célula 5</td>
403 |             <td>Célula 6</td>
404 |         </tr>
405 |     </table>
406 | ```
407 | 
408 | Resultado:  
409 | ![Rodapé ou Cabeçalho](../assets/tbody.png)
410 | 
411 | Perceba neste exemplo, não segue necessáriamente a ordem descrita no HTML, o rodapé exibido foi descrito nas primeiras linhas do código e não nas últimas como é tradicionalmente. A Tag `<tfoot>`, força o elemento a se encaixar-se no final da tabela.
412 | 
413 | A mesma lógica é valida para as tags `<thead>`  e `<tbody>` que força o elemento a se encaixar-se no inicio e meio da tabela respesctivamente.
414 | 
415 | Desta forma podemos ganhar mais controle sobre o posicionamento dos elementos tabulares.
416 | 
417 | 
418 | ----
419 | 
420 | [Tags de Formulário](/contents/10.Formulario.md) <= Anterior | [Início](/README.MD) | Próximo => [Tags de Estilo e Script](/contents/12.Estilo.md)
421 | 
422 | 


--------------------------------------------------------------------------------