Esse é o meu primeiro documento HTML! Estou muito feliz!
14 |
Estou criando meu primeiro site!
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 1/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 1: Seu primeiro código HTML
2 |
3 | Também conhecida como HyperText Markup Language.
4 |
5 |
6 | # Conceitos introdutórios
7 |
8 | * HTML (HyperText Markup Language) - É uma linguagem de marcação para hipertexto focada em conteúdo (texto, imagem, vídeo, tabela, listas, etc).
9 | * CSS (Cascading Style Sheets) - São folhas de estilo em (cascata), leva esse nome porque uma folha vai modificando a característica padrão da outra. O foco dessa linguagem é no design. (cor, posicionamento, fontes, tamanhos, etc).
10 | * JavaScript - Trabalha com as interações e funcionalidades do site. (menus interativos, animações, pop-ups, validações, etc).
11 |
12 | * É importante citar que dessa trilogia, a HTML e CSS não são consideradas linguagens de programação, apenas o JavaScript. *
13 |
14 |
15 |
16 | # Conteúdo em HTML
17 |
18 | * Para transformar um conteúdo em um título, é necessario utilizar a abertura e fechamento de tag (que são chamados de colchetes angulares < >), porém nem todas as tags tem fechamento.
19 | * Todo título usa a simbologia h1 e todo parágrafo usa a simbologia p
20 | * Para fechar uma tag, só precisa adicionar uma barra antes do símbolo. Exemplos:
21 | ~~~html
22 |
Exemplo de título
23 |
Exemplo de parágrafo
24 | ~~~
25 |
26 | * Já para inserir uma foto:
27 | ~~~html
28 |
29 | ~~~
30 |
31 | # Estilo em CSS
32 |
33 | * Toda declaração tem ponto e vírgula no final.
34 | ~~~css
35 | h1{
36 | Font-family: Arial;
37 | Font-size: 20pt;
38 | Color: blue;
39 | }
40 | ~~~
41 |
42 | # Estrutura básica de um HTML
43 |
44 | * Nessa estrutura, o comando head é o título da página.
45 | * Body é o corpo da página.
46 | * O comando !DOCTYPE html quer dizer que o site será desenvolvido em HTML5.
47 | * O comando html lang="pt-br" quer dizer que o site será primordialmente em português.
48 | * O comando meta charset="UTF-8" quer dizer que o site será compatível com caracteres em UTF-8, ou seja, acentos, cedilha, e outros tipos de caracteres. Importante para desenvolver sites em português.
49 | * O comando meta name="viewport"
50 | Content="width=device-width,
51 | Initial-scale=1.0", serve para controlar o nível de amplificação quando uma página é carregada pela primeira vez, onde width é a largura do viewport virtual no dispositivo, height é a altura e o initial-scale é o nível de zoom quando a página é acessada.
52 | * O hr serve para adicionar uma linha horizontal na página.
53 |
54 | ~~~html
55 |
56 |
57 |
58 |
59 |
62 | Document
63 |
64 |
65 |
Olá, Mundo!
66 |
67 |
Esse é o meu primeiro documento HTML! Estou muito feliz!
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 2/Aula 2.1/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 2.1: Símbolos e emojis no seu site
2 |
3 | * Para colocar símbolos que são exibidos usando códigos (chamados de HTML entities), basta uma breve consulta para descobrir quais são os códigos desses símbolos. Exemplo: espaço em branco - & nbsp; , trade mark - & trade; (sem os espaços).
4 |
5 | * Para adicionar um emoji no site, basta inserir &#x + o código do emoji.
6 |
7 |
8 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 2/ex2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Parágrafos
8 |
9 |
10 |
Parágrafos e quebras de linha
11 |
12 |
Você pode escrever um parágrafo de qualquer jeito, basta colocar tudo no meio do par de tags p e /p.
13 |
14 |
Se precisar quebrar o texto em algum lugar específico como esse, você pode usar a tag br.
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 2/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 2: Parágrafos e Quebras de linha
2 |
3 | * Para abrir e fechar um parágrafo, é usado o <p> e </p>. Para que os simbolos <> apareçam sem virar uma marcação, é necessário colocar na frente da letra < ; e depois da letra > ; , sem espaços.
4 |
5 | * As quebras de linha causadas pelo enter não servem de nada no código, isso acontece porque quem comanda quebras de linhas/parágrafos são as marcação, porque html é uma linguagem de marcação.
6 |
7 | * Então para fazer uma quebra de linha, é preciso colocar <br> entre as palavras que quer que a quebra aconteça.
8 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 3/Aula 3.1/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 3.1: Quais são os formatos para imagens na web?
2 |
3 | * JPEG: É um algoritmo de compactação. A grande vantagem do uso dele é gerar arquivo muito pequenos e que ocupam pouco espaço em disco. Isso é muito importante, porque quando colocar o site no ar, ele tem que ser leve e carregar as imagens muito rapidamente.
4 | * GIF: É um formato antigo, tem uma qualidade ruim mas permite transparência e animação.
5 | * PNG: Não é tão compactado quanto o JPEG, permite transparência mas não permite animação. A principal característica do PNG e que o diferencia do JPEG é a capacidade de configurar a opacidade de cada pixel (deixá-lo transparente ou com transparência limitada).
6 |
7 | Também tem outros fatores importantes a serem lembrados:
8 |
9 | * Na hora de escolher o formato de imagem para o site, optar sempre pelo formato JPEG com uma compactação entre 30% e 50%. O formato PNG só deverá ser usado quando precisar de transparência na foto.
10 | * Optar por usar a imagem do tamanho certo, ao invés de mudar o tamanho da imagem no css, se não o navegador vai levar muito tempo pra carregar o arquivo do servidor.
11 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 3/Aula 3.2/ex1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Teste com Imagens
8 |
9 |
10 |
Testando carga e Imagens
11 |
Abaixo você vai ver uma imagem que está na mesma pasta.
12 |
13 |
Podemos também carregar imagens que estão em subpastas
14 |
15 |
Também podemos carregar imagens externas
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 3/Aula 3.2/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 3.2: A tag img em HTML5
2 |
3 | ### Carregar imagens dentro do código:
4 |
5 | Utiliza o comando:
6 | ~~~html
7 |
8 | ~~~
9 |
10 | * Basta digitar ''img'' no terminal e dar enter, já carrega o código inteiro direto, depois é só clicar no meio das aspas e dar ctrl + backspace(vai abrir uma pequena aba para selecionar a imagem desejada).
11 |
12 | * No ''alt'' é só digitar uma descrição da imagem, porque é um texto alternativo que vai aparecer caso a imagem quebre no site por algum motivo.
13 |
14 | * Para abrir imagens externas, de outros links, basta copiar a url da imagem e colar dentro das aspas no código.
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 3/Aula 3.3/ex1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Teste de Favicon
9 |
10 |
11 |
Olha o favicon aqui em cima
12 |
13 |
14 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 3/Aula 3.3/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 3.3: Como mudar o favicon de um site
2 |
3 | ### Passos:
4 |
5 | * Para inserir um favicon no HTML, basta escolher alguma imagem para virar o ícone do site e salvar ela com o formato .ico (um site para fazer essa conversão é o favicon.io).
6 |
7 | * Após isso, colocar a imagem na pasta do projeto, abrir o <head>, digitar ''link'' (escolher o ''link:favicon'') e dar enter, depois é só selecionar o arquivo da imagem dentro do ''href''.
8 |
9 | * Dar preferência para que a imagem escolhida pra ser o favicon tenha o nome de ''favicon.ico''. Exemplo:
10 |
11 | ~~~html
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Teste de Favicon
20 |
21 |
22 |
Olha o favicon aqui em cima
23 |
24 |
25 | ~~~
26 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 3/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 3: Você tem o direito de usar qualquer imagem no seu site?
2 |
3 | Todo conteúdo disponível na Internet pode estar protegido por direitos autorais, então pra que consiga profissionalmente ser capaz de criar sites com imagens que não vão gerar processos, há 4 maneiras:
4 | * Ser o criador da própria arte. Usar fotos que seu próprio cliente tirou ou que você mesmo criou.
5 | * Consiga uma autorização legal de quem é o detentor dos direitos autorais. Isso precisa de documentos específicos.
6 | * Comprar o direito de usar a imagem. Existem vários sites como o iStockPhoto, DepositPhotos, ShutterStock, etc. Só ficar de olho aberto e leia as regras, pois na maioria dos casos essa imagem que comprada só pode ser usada uma única vez ou em um único projeto.
7 | * Usar imagens de domínio público, pois essas dão a liberdade de colocar no site, seguindo as regras estabelecidas pelo autor. Alguns deles são: UnSplash, Pexels, FreePik, Rawpixel, Pixabay, Libreshot, Wikimedia Commons.
8 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 4/ex1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Hierarquia de Títulos
8 |
9 |
10 |
Entendendo Portugal
11 |
Introdução
12 |
Justificação da temática
13 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea voluptatibus quaerat autem in dignissimos vitae reprehenderit eius adipisci hic quia. Blanditiis praesentium culpa eaque molestiae minus enim eligendi repellat non!
14 |
Caráter excecional
15 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit tempore reiciendis voluptatum atque culpa architecto rerum iusto voluptates ratione tenetur deserunt magni aspernatur distinctio doloribus fuga, dignissimos laborum sequi molestiae!
16 |
Perguntas de partida
17 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias laborum non eaque, perspiciatis earum optio facere impedit corrupti molestias! Nulla ipsam quaerat fuga qui deserunt officiis, debitis fugit culpa quibusdam.
18 |
Metodologia de investigação
19 |
Etapas de investigação
20 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus rem voluptatum expedita perspiciatis, mollitia odit dolore reiciendis provident dicta perferendis a quibusdam neque dolores temporibus nihil quaerat fugit nesciunt ratione!
21 |
Instrumentos de análise
22 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quo illum dolorum. Cupiditate voluptas odio assumenda. Saepe omnis pariatur distinctio exercitationem, aliquam alias quasi illum possimus libero placeat corrupti voluptatibus!
23 |
Ordenamento do território em Portugal
24 |
Os intrumentos de Gestão
25 |
Os instrumentos de planeamento
26 |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam qui et, voluptates, hic ab, eaque neque aspernatur quos consequatur fuga libero nulla culpa quasi dolor debitis aliquid animi. Expedita, ullam.
27 |
Os regimes territoriais
28 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat nemo, delectus nulla optio doloribus velit architecto id minus sed quisquam nesciunt accusantium quos placeat accusamus! Provident reiciendis doloremque voluptates quae!
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 4/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 4: Hierarquia de Títulos
2 |
3 | Os títulos possuem 6 níveis de hierarquia, e esses níveis servem para organizar o conteúdo. Para isso, usamos as tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> para demarcar nossos títulos.
4 |
5 | * Um <h1> significa que esse é um assunto principal e é sobre ele que vamos escrever.
6 |
7 | * Já o <h2> significa que esse é um sub-assunto do <h1> que está imediatamente acima dele.
8 |
9 | * O <h3> significa que esse é um sub-assunto do <h2> que está acima dele, e assim sucessivamente até o <h6>.
10 |
11 | Exemplo:
12 | ~~~html
13 |
14 |
15 |
16 |
17 |
18 |
19 | Hierarquia de Títulos
20 |
21 |
22 |
O comando document.getElementById('teste') é escrito em JavaScript.
13 |
14 |
15 | num = int(input('Digite um número'))
16 | if num % 2 -- 0:
17 | print(f'O número {num} é PAR')
18 | else:
19 | print(f'O número {num} é IMPAR')
20 | print('Fim do programa')
21 |
22 |
23 |
Citações simples
24 |
Como diria o pai de um amigo: o computador é um burro muito rápido.
25 |
Citações Completas
26 |
Segundo Jeff Noble, no seu livro HTML para Leigos:
27 |
28 | A diferença entre elementos inline e um bloco de texto é importante. Os elementos HTML neste capítulo descrevem os blocos de texto.
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 6/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 6: Listas OL e UL / Listas Mistas e de Definição
2 |
3 | ## Listas Ordenadas:
4 |
5 | Todas aquelas listas onde a ordem dos itens é algo muito importante. Para criar uma ordered list, usar a tag <ol> para delimitar a lista e <li> (list item) para identificar cada item da lista. A tag <ol> possui um parâmetro type, onde configuramos o tipo de marcador da lista atual. As opções de valores para esse parâmetro são:
6 |
7 | * 1 - Valor padrão. Cria listas numeradas. Ex: 1, 2, 3, 4, …
8 |
9 | * A - Cria listas alfabéticas em maiúsculas. Ex: A, B, C, D, …
10 |
11 | * a - Cria listas alfabéticas em minúsculas. Ex: a, b, c, d, …
12 |
13 | * I - Cria listas com algarismos romanos em maiúsculas. Ex: I, II, III, IV, …
14 |
15 | * i - Cria listas com algarismos romanos em minúsculas. Ex: i, ii, iii, iv, …
16 |
17 | Também pode indicar o início da contagem usando o parâmetro start. Por exemplo, a tag <ol type=“I” start = “5”> vai gerar itens numerados como V, VI, VII, VIII, IX, …
18 |
19 |
20 | ## Listas não Ordenadas:
21 |
22 | São aquelas onde a ordem dos itens não influenciará no significado da lista. Para criar uma unordered list, usar a tag <ul> para delimitar a lista e a tag <li> para identificar cada item da lista. Existe a opção de configurar a propriedade type da tag <ul> com os seguintes valores:
23 |
24 | * disc - (Padrão). Uma bola preta totalmente pintada
25 |
26 | * circle - Uma bola com uma borda preta e sem preenchimento
27 |
28 | * square - Um pequeno quadrado preto totalmente pintado
29 |
30 | Também dá pra criar listas mistas, configurando listas dentro de outras listas. Exemplo:
31 | ~~~html
32 |
29 | ~~~
30 |
31 | # Estilo em CSS
32 |
33 | * Toda declaração tem ponto e vírgula no final.
34 | ~~~css
35 | h1{
36 | Font-family: Arial;
37 | Font-size: 20pt;
38 | Color: blue;
39 | }
40 | ~~~
41 |
42 | # Estrutura básica de um HTML
43 |
44 | * Nessa estrutura, o comando head é o título da página.
45 | * Body é o corpo da página.
46 | * O comando !DOCTYPE html quer dizer que o site será desenvolvido em HTML5.
47 | * O comando html lang="pt-br" quer dizer que o site será primordialmente em português.
48 | * O comando meta charset="UTF-8" quer dizer que o site será compatível com caracteres em UTF-8, ou seja, acentos, cedilha, e outros tipos de caracteres. Importante para desenvolver sites em português.
49 | * O comando meta name="viewport"
50 | Content="width=device-width,
51 | Initial-scale=1.0", serve para controlar o nível de amplificação quando uma página é carregada pela primeira vez, onde width é a largura do viewport virtual no dispositivo, height é a altura e o initial-scale é o nível de zoom quando a página é acessada.
52 | * O hr serve para adicionar uma linha horizontal na página.
53 |
54 | ~~~html
55 |
56 |
57 |
58 |
59 |
62 | 
13 | 
15 | 
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/Módulo 1/Aula 3/Aula 3.2/nota.md:
--------------------------------------------------------------------------------
1 | # Aula 3.2: A tag img em HTML5
2 |
3 | ### Carregar imagens dentro do código:
4 |
5 | Utiliza o comando:
6 | ~~~html
7 |