-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
153 lines (146 loc) · 5.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bem vindos à trilha de Desenvolvimento Front-End!!</title>
</head>
<body id="body">
<header>
<img src="http://epic-ufscar.org/static/images/logo_epic.png">
<h1>Desenvolvimento Front-End</h1>
</header>
<main>
<nav>
<ul>
<li>
<a target="_blank" href="http://epic-ufscar.org/sobre/">Sobre a EPiC</a>
</li>
<li>
<a target="_blank" href="http://epic-ufscar.org/cursos/">Cursos</a>
</li>
<li>
<a target="_blank" href="http://epic-ufscar.org/apoio/">Apoio</a>
</li>
</ul>
</nav>
<aside>
<nav>
<ul>
<li>
<a href="#body">
<b>Índice</b>
</a>
</li>
<li>
<a href="#html">HTML</a>
</li>
<li>
<a href="#css">CSS</a>
</li>
<li>
<a href="#js">JS</a>
</li>
</ul>
</nav>
</aside>
<section>
<h3 id="html">HTML - Principais elementos</h3>
<h4>Listas</h4>
<p>Para criarmos listas não ordenadas utilizamos a etiqueta <code><ul></ul></code>, já para listas ordenadas utilizamos a etiqueta <code><ol></ol></code>.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h4>Tabelas</h4>
<p>Tabelas de dados são criadas com a etiqueta <code><table></table></code>, e podemos dividir o cabeçalho do corpo em si, usando as etiquetas <code><thead><thead></code> e <code><tbody><tbody></code>. Porém a partir daí precisamos ter a visão de linhas e colunas, pois primeiro precisamos criar uma linha, utilizando a etiqueta <code><tr><tr></code>, para só então criar as células de coluna, utilizando a etiqueta <code><td><td></code> (ou a etiqueta <code><th><th></code> para o cabeçalho).</p>
<table>
<thead>
<tr>
<th>Mês</th>
<th>Resultado</th>
</tr>
</thead>
<tbody>
<tr>
<td>Janeiro</td>
<td>Concluído</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>Concluído</td>
</tr>
<tr>
<td>Março</td>
<td>Pendente</td>
</tr>
</tbody>
</table>
<h4>Mídias</h4>
<p>Podemos criar elementos de áudio e vídeo, com reprodutor nativo do navegador, usando a etiqueta <code><audio><audio></code>, <code><video><video></code> e a sub etiqueta <code><source><source></code>.</p>
<audio controls>
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
Seu navegador não suporta o elemento de áudio.
</audio>
<br>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Seu navegador não suporta o elemento de vídeo.
</video>
<h4>Gráficos</h4>
<p>Para aplicações ou animações em Flash, é necessário adicionar a etiqueta <code><embed><embed></code>.</p>
<embed src="https://www.w3schools.com/tags/helloworld.swf" />
<h4>Formulários</h4>
<p>Existe uma vasta gama de elementos envolvendo a entrada de dados, contudo é necessário se atentar à compatibilidade entre navegadores. Aqui temos as etiquetas <code><form></form></code>, <code><fieldset></fieldset></code> (com <code><legend></legend></code>), <code><label></label></code>, <code><input /></code> (dos tipos <code>text</code>, <code>number</code>, <code>date</code>, <code>password</code> e <code>submit</code>), <code><select></select></code> (com <code><option></option></code> e <code><optgroup></optgroup></code>) e <code><textarea></textarea></code>. Ufa!</p>
<form action="#" method="get">
<fieldset>
<legend>Formulário de teste</legend>
<label>Nome: <input type="text" name="name" /></label><br>
<label>Idade: <input type="number" name="age" min="18" /></label><br>
<label>Data de nascimento: <input type="date" name="date" /></label><br>
<label>Senha: <input type="password" name="pass" /></label><br>
<select>
<option disabled selected>Curso</option>
<optgroup label="UFSCar">
<option value="ufscar-bcc">BCC</option>
<option value="ufscar-enc">ENC</option>
</optgroup>
<optgroup label="USP">
<option value="usp-bcc">BCC</option>
<option value="usp-enc">ENC</option>
</optgroup>
<optgroup label="UNICAMP">
<option value="unicamp-bcc">BCC</option>
<option value="unicamp-enc">ENC</option>
</optgroup>
</select><br>
<textarea placeholder="Dissertação"></textarea><br>
<input type="submit" />
</fieldset>
</form>
</section>
<section>
<h3 id="css">CSS</h3>
</section>
<section>
<h3 id="js">JS</h3>
</section>
</main>
<footer>
<h3>Rodapé</h3>
<div>
<b>Escola Piloto de Computação - EPiC UFSCar</b><br>
Universidade Federal de São Carlos<br>
Departamento de Computação<br>
</div>
</footer>
</body>
</html>