Skip to content

Commit 94ffe55

Browse files
ShellydaShellyda
committed
Incluindo as pastas do Curso de Front End
1- Introdução a HTML e CSS 2- Aprofundando Conceitos
1 parent 6faed93 commit 94ffe55

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2072
-0
lines changed

‎1- Introdução a HTML e CSS/1- Introdução a HTML.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html> <!-- DECLARANDO O TIPO DO ARQUIVO -->
2+
<html>
3+
4+
<head>
5+
<title>Título do meu Website</title>
6+
<meta charset="utf-8" /> <!--Permite a acentuação! -->
7+
</head>
8+
9+
<body>
10+
<h4>Título do meu texto</h4>
11+
<h3>Título do meu texto</h3>
12+
<h2>Título do meu texto</h2>
13+
<h1>Título do meu texto</h1>
14+
15+
<spam> Um texto maior para o website </spam> <!-- In line -->
16+
<br /> <!-- pular linhas -->
17+
<p>Um texto maior para o meu website dividido em parágrafos</p> <!-- Parágrafos-->
18+
19+
<img src="https://i.pinimg.com/originals/88/21/cc/8821cc74b8d7bddc23cf2226df36b641.jpg" width="200" height="200" />
20+
<!-- POSSO BOTAR IMAGENS PELO ENDEREÇO OU SALVANDO E COLOCANDO O SEU NOME, EXEMPLO: <img src="imagem.jpg" /> -->
21+
22+
<a href="https://www.youtube.com/">Meu link</a>
23+
24+
25+
</body>
26+
27+
28+
29+
30+
31+
</html>

‎1- Introdução a HTML e CSS/10- Listas e níveis de Importância no css.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8" />
4+
<title>Listas e níveis de importância no CSS</title>
5+
<link href="css/listas.css" type="text/css" reL="stylesheet" />
6+
</head>
7+
8+
<body>
9+
<!--Primeira lista ul -->
10+
<ul class="lista">
11+
<li>Produto 1</li>
12+
<li>Produto 2</li>
13+
<li class="Item3">Produto 3</li>
14+
</ul>
15+
16+
17+
<ul class="lista2"> <!-- Segunda lista ul -->
18+
<li>Poduto 4</li>
19+
<li>Poduto 5</li>
20+
<li>Poduto 6</li>
21+
</ul>
22+
23+
24+
<ol class="lista3"> <!-- lista ol, a sua diferença para a lista ul é a definição padrão que no seu caso é o list-style-type: decimal; (Marcação Númerica) -->
25+
<li>Produto 7</li>
26+
<li>Produto 8</li>
27+
<li>Produto 9</li>
28+
29+
</ol>
30+
</body>
31+
32+
</html>

‎1- Introdução a HTML e CSS/11- Propriedade de Display e técnicas de espaçamento.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Título do meu site</title>
6+
<meta charset="utf-8" />
7+
<link href="css/display.css" type="text/css" rel="stylesheet" />
8+
</head>
9+
10+
<body>
11+
12+
<div class="pai">
13+
<div class="child">
14+
</div>
15+
16+
<div class="child">
17+
</div>
18+
19+
</div>
20+
<p style="width:300px;">
21+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper fermentum lacinia. Duis ullamcorper faucibus nunc, et congue est. Fusce fermentum erat vel augue maximus, consectetur consectetur nulla scelerisque. Fusce urna lorem, dictum vitae venenatis sit amet, mollis nec mi. Cras aliquam lorem eu eros tincidunt, a vehicula tellus rutrum. Vestibulum fringilla interdum lacus non maximus. Nullam id hendrerit mauris. Sed convallis mi sed nulla dictum, quis faucibus ex fermentum. Maecenas tristique posuere tortor, sit amet luctus velit ultrices ut. Aliquam sed finibus sapien, ac semper odio. Vestibulum ac lectus in nunc placerat molestie eu ut dui.</span>
22+
</p>
23+
</body>
24+
25+
26+
<!doctype html>
27+
<html>
28+
29+
<head>
30+
<title>Título do meu site</title>
31+
<meta charset="utf-8" />
32+
<link href="css/style5.css" type="text/css" rel="stylesheet" />
33+
</head>
34+
35+
<body>
36+
37+
<div class="pai">
38+
<div class="child">
39+
</div>
40+
41+
<div class="child">
42+
</div>
43+
44+
</div>
45+
<p style="width:300px;">
46+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper fermentum lacinia. Duis ullamcorper faucibus nunc, et congue est. Fusce fermentum erat vel augue maximus, consectetur consectetur nulla scelerisque. Fusce urna lorem, dictum vitae venenatis sit amet, mollis nec mi. Cras aliquam lorem eu eros tincidunt, a vehicula tellus rutrum. Vestibulum fringilla interdum lacus non maximus. Nullam id hendrerit mauris. Sed convallis mi sed nulla dictum, quis faucibus ex fermentum. Maecenas tristique posuere tortor, sit amet luctus velit ultrices ut. Aliquam sed finibus sapien, ac semper odio. Vestibulum ac lectus in nunc placerat molestie eu ut dui.</span>
47+
</p>
48+
</body>
49+
50+

‎1- Introdução a HTML e CSS/12- Overflow.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow!</title>
6+
<link rel="stylesheet" type="text/css" href="css/overflow.css" />
7+
</head>
8+
<body>
9+
<div class="pai">
10+
<div class="filha">
11+
<p>Lorem ipsum suspendisse sapien fringilla ullamcorper porta curabitur posuere cursus, proin blandit rhoncus nam est tortor congue varius. ultrices imperdiet est erat euismod auctor fringilla mollis, cursus curabitur arcu elementum vel metus nisl, semper ornare vel nam senectus elementum. porta nec facilisis bibendum faucibus vehicula senectus quisque donec, tortor phasellus netus platea hendrerit quisque porta sem tempus, nullam morbi adipiscing mi primis amet et. bibendum etiam semper per habitant varius, eu praesent inceptos at habitasse, egestas molestie lectus at. elementum nam nulla mollis mi ultrices elit lacinia aliquet, elementum molestie varius lobortis ligula volutpat ultrices molestie, ornare luctus nostra augue vitae nisi ac. </p>
12+
</div>
13+
</div>
14+
15+
</body>
16+
</html>

‎1- Introdução a HTML e CSS/2- Introdução a CSS.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Introdução a CSS</title>
6+
<style type="text/css">
7+
h1{color:red; background: black;}
8+
h2{color:yellow; background: blue;}
9+
a{text-decoration: none;}
10+
</style>
11+
12+
</head>
13+
<body>
14+
15+
<h1>Título do meu texto</h1>
16+
<h2>Título do meu texto</h2>
17+
<h3 style="color: orange; front-size:20px;">Título do meu texto</h3>
18+
<h4>Título do meu texto</h4>
19+
<h5>Título do meu texto</h5>
20+
<h6>Título do meu texto</h6>
21+
22+
<a href="https://www.youtube.com/">Meu link!</a>
23+
</body>
24+
</html>

‎1- Introdução a HTML e CSS/3- DIV, TABLE e FORM.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html> <!-- DECLARANDO O TIPO DO ARQUIVO -->
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Título aqui!</title>
6+
</head>
7+
<body>
8+
<!--DIVISÃO DE SITUAÇÕES! -->
9+
<div>
10+
<h2>Título do meu conteúdo</h2>
11+
<p>Conteúdo!</p>
12+
</div>
13+
14+
<table width="900" align="center" border="1" /> <!-- no table da pra definir a largura, a localização e se vai ter ou n borda na tabela e a largura dessa borda. td = colunas e tr = linhas -->
15+
<tr>
16+
<td>Nome</td>
17+
<td>Idade</td>
18+
<td>Cargo</td>
19+
</tr>
20+
<tr>
21+
<td>Guilherme</td>
22+
<td>24</td>
23+
<td>Programador</td>
24+
</tr>
25+
26+
<!--
27+
BASICO DE FORMULARIO:
28+
29+
<form>
30+
<input type="text" />
31+
<textarea></textarea>
32+
<input type="submit" value="enviar" /> MESMA SITUAÇÃO: <input type= "button" value="enviar" </form> -->
33+
34+
35+
36+
</table>
37+
</body>
38+
</html>

‎1- Introdução a HTML e CSS/4- + sobre tabelas (THEAD e TBODY).html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html> <!-- DECLARANDO O TIPO DO ARQUIVO -->
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Título aqui!</title>
6+
</head>
7+
8+
<body>
9+
<table align="left" width="900" border="1">
10+
11+
<thead> <!-- Uma maneira mais profissinal de se fazer a tabela, muda o estilo um pouco tb, deixa em negrito e move para o centro oq esta definido abaixo-->
12+
<th>Nome</th>
13+
<th>Idade</th>
14+
<th>Cargo</th>
15+
</thead>
16+
17+
<tbody> <!-- O CORPO : o conteúdo da tabela -->
18+
<tr>
19+
<td>Guilherme</td>
20+
<td>24</td>
21+
<td>Programador</td>
22+
</tr>
23+
</tbody>
24+
25+
</table>
26+
27+
</body>
28+
</html>

‎1- Introdução a HTML e CSS/5- Incluir estilos de arquivos externos.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Incluir estilos de arquivos externos!</title>
6+
<link href="css/style.css" type="text/css" rel="stylesheet" />
7+
<!--chamando um link externo dessa "PASTA/ESSE ARQUIVO" é importante dizer qual O TIPO DE ARQUIVO QUE VOU PUXAR (type = texto é da codificação CSS e rel = o arquivo contém condições de estilo) -->
8+
</head>
9+
10+
<body>
11+
<div id="div1" class="div1" /> <!-- IDENTIDADE E CLASSE (deixa o código mais organizado e facilita o acesso em arquivos externos! -> exemplo q estamos usando agr: style.css) -->
12+
<h2>Título 1</h2>
13+
</div>
14+
15+
<div class="div2" />
16+
17+
<h2>Título 2</h2>
18+
19+
</div>
20+
21+
22+
</body>
23+
</html>

‎1- Introdução a HTML e CSS/6- Iniciando e entendendo estilos.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Introdução a CSS</title>
6+
<!-- Pré-definições impondo condições as tags; Tanto as de texto, quanto as de links, ect-->
7+
<style type="text/css">
8+
h1{color:red; background: black;}
9+
h2{color:yellow; background: blue;}
10+
a{text-decoration: none;}
11+
</style>
12+
13+
</head>
14+
<body>
15+
16+
<h1>Título do meu texto</h1>
17+
<h2>Título do meu texto</h2>
18+
<h3 style="color: orange; front-size:20px;">Título do meu texto</h3> <!-- COR; TAMANHO DA LETRA EM PIXELS;
19+
Aqui quero mostrar que é possível definir as condições diretamente, sem pré-definir na head-->
20+
<h4>Título do meu texto</h4>
21+
<h5>Título do meu texto</h5>
22+
<h6>Título do meu texto</h6>
23+
24+
<a href="https://www.youtube.com/">Meu link!</a>
25+
</body>
26+
</html>

‎1- Introdução a HTML e CSS/7- RevisãoHTML.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>REVISÃO!</title>
6+
</head>
7+
<body>
8+
<div>
9+
10+
<div></div>
11+
<!-- Tags de texto! -->
12+
<h1>Título do meu texto</h1>
13+
<h2>Título do meu texto</h2>
14+
<h3>Título do meu texto</h3>
15+
<h4>Título do meu texto</h4>
16+
<h5>Título do meu texto</h5>
17+
<h6>Título do meu texto</h6>
18+
19+
<p> Olá Mundo!</p>
20+
<span>Olá Mundo do <b>Span!</b></span> <!-- entre b = negrito! obs: <strong></strong> tb faz a msm função!-->
21+
<p>Olá <u>Mundo</u> do <i>Span!</i></p> <!-- entre u = sublinhado. entre i = italico! <em></em> tb faz a msm função!-->
22+
23+
</div>
24+
25+
<img src="https://i.pinimg.com/originals/88/21/cc/8821cc74b8d7bddc23cf2226df36b641.jpg" width="200" />
26+
<br/>
27+
<a target="blank" href="https://www.youtube.com/">Meu link></a>
28+
29+
<table width="900" align="center" border="1">
30+
<thead>
31+
<tr>
32+
<th>Nome</th>
33+
<th>Cargo</th>
34+
</tr>
35+
</thead>
36+
37+
<tbody>
38+
39+
<tr>
40+
<td>Gui</td>
41+
<td>Administrador</td>
42+
</tr>
43+
44+
</tbody>
45+
</table>
46+
47+
<form>
48+
<input type="text" />
49+
<input type="password" />
50+
<textarea></textarea>
51+
<input type="submit" value="enviar" />
52+
<input type="button" value= "enviar">
53+
<button>Enviar!</button>
54+
</form>
55+
56+
57+
</body>
58+
</html>
59+
60+
61+
<!-- <mark>BORDA AMARELA</mark> -> marca as palavras dando uma borda amarela a elas.
62+
63+
<sub></sub> -> desce a palavra e diminui um pouco seu tamanho.

0 commit comments

Comments
 (0)