Skip to content

Commit d272906

Browse files
niljoshuaniljoshua
authored
Add files via upload
1 parent 6143284 commit d272906

34 files changed

+2892
-0
lines changed

‎M1 - S1/HTML_ Tags e Atributos.html

+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<!-- saved from url=(0095)https://conteudo-kenzie-fullstack.vercel.app/modulo_1/sprint_1/html/aulas/tags_e_atributos.html -->
3+
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>HTML: Tags e Atributos</title>
8+
9+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index.css">
10+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(1).css">
11+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(2).css">
12+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(3).css">
13+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(4).css">
14+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(4).css">
15+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(5).css">
16+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(6).css">
17+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(7).css">
18+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(8).css">
19+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(9).css">
20+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(10).css">
21+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(11).css">
22+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(12).css">
23+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(13).css">
24+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(14).css">
25+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(15).css">
26+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(16).css">
27+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(17).css">
28+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(18).css">
29+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(19).css">
30+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/index(20).css">
31+
32+
<link rel="stylesheet" href="./HTML_ Tags e Atributos_files/dracula.min.css">
33+
</head>
34+
35+
<body>
36+
37+
38+
<div class="container">
39+
<h1>HTML: Tags e Atributos</h1>
40+
41+
<div class="video-redering" data-video-src="https://player.vimeo.com/video/626571033?h=7792a00ce9&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" style="padding: 56.25% 0px 0px; position: relative;">
42+
<iframe src="./HTML_ Tags e Atributos_files/626571033.html" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="HTML: Tags e Atributos">
43+
</iframe>
44+
</div>
45+
46+
<hr>
47+
<h2 id="htmlanditstags">HTML e suas Tags</h2>
48+
<p>
49+
O HTML é uma linguagem de marcação interpretada pelo navegador. Esta linguagem utiliza
50+
tags ou elementos específicos para dizer ao navegador como as coisas
51+
devem ser interpretadas. Vamos dar uma olhada em alguns conceitos e sintaxe para declararmos as tags, ou seja, elementos HTML.
52+
</p>
53+
54+
<p>
55+
As tags são colocadas dentro de sinais de <strong>menor que</strong> <code>&lt;</code> e <strong>maior que</strong>
56+
<code>&gt;</code>. Perceba que a tag de fechamento leva o caractere
57+
<code class="prettyprint prettyprinted"><span class="pun">/</span></code>. As tags são quase sempre seguidas de tags de
58+
fechamento correspondentes.
59+
</p>
60+
61+
<p>Os exemplos a seguir são puramente didáticos, portanto não tags reais. Elas servirão para entendermos como o HTML é estruturado.</p>
62+
63+
<pre class="pre-copy" style="position: relative;"><code class="language-html code-copy hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">tagDeAbertura</span>&gt;</span>Conteúdo<span class="hljs-tag">&lt;/<span class="hljs-name">tagDeFechamento</span>&gt;</span>
64+
</code><button>Copiar para àrea de transferência</button><textarea type="text" style="display: none;"></textarea></pre>
65+
66+
<p>As tags também podem ser aninhadas umas dentro das outras.</p>
67+
68+
<pre class="pre-copy" style="position: relative;"><code class="language-html code-copy hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">pizza</span>&gt;</span>
69+
<span class="hljs-tag">&lt;<span class="hljs-name">sabor</span>&gt;</span>Queijo<span class="hljs-tag">&lt;/<span class="hljs-name">sabor</span>&gt;</span>
70+
<span class="hljs-tag">&lt;<span class="hljs-name">sabor</span>&gt;</span>Calabresa<span class="hljs-tag">&lt;/<span class="hljs-name">sabor</span>&gt;</span>
71+
<span class="hljs-tag">&lt;<span class="hljs-name">sabor</span>&gt;</span>Cebola<span class="hljs-tag">&lt;/<span class="hljs-name">sabor</span>&gt;</span>
72+
<span class="hljs-tag">&lt;/<span class="hljs-name">pizza</span>&gt;</span>
73+
</code><button>Copiar para àrea de transferência</button><textarea type="text" style="display: none;"></textarea></pre>
74+
75+
<p>As tags utilizam <strong>atributos</strong> para adicionar
76+
funcionalidades ou descrever comportamentos.</p>
77+
78+
<pre class="pre-copy" style="position: relative;"><code class="language-html code-copy hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">tagDeAbertura</span> <span class="hljs-attr">atributo</span>=<span class="hljs-string">"valorDoAtributo"</span>&gt;</span>Conteúdo<span class="hljs-tag">&lt;/<span class="hljs-name">tagDeFechamento</span>&gt;</span>
79+
</code><button>Copiar para àrea de transferência</button><textarea type="text" style="display: none;"></textarea></pre>
80+
81+
<p>
82+
Algumas tags possuem fechamento próprio
83+
e normalmente não envolvem algum conteúdo. A tag
84+
<code class="prettyprint prettyprinted"><span class="tag">&lt;img&gt;</span></code>
85+
é um exemplo que contém fechamento próprio. Como você pode ver, ainda
86+
há uma
87+
<code class="prettyprint prettyprinted"><span class="pun">/</span></code>
88+
no final da tag. Observe também o uso dos atributos.
89+
</p>
90+
<pre class="pre-copy" style="position: relative;"><code class="language-html code-copy hljs language-xml"> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"pastaRaiz/arquivo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"descrição para acessibilidade."</span> /&gt;</span>
91+
</code><button>Copiar para àrea de transferência</button><textarea type="text" style="display: none;"></textarea></pre>
92+
93+
<hr>
94+
95+
<h2 id="somecommontagsexplained">Tags comuns</h2>
96+
<p>
97+
Aqui você verá algumas das tags HTML mais comuns ao
98+
criar aplicações web. Esta será uma lição interativa, então poderemos
99+
ver o resultado do uso dessas tags em um navegador. Vamos construir uma
100+
página de viagens.
101+
</p>
102+
103+
<h3 id="headings">Títulos</h3>
104+
<p>
105+
As tags HTML
106+
<code class="prettyprint prettyprinted"><span class="tag">&lt;h1&gt;</span></code>
107+
até
108+
<code class="prettyprint prettyprinted"><span class="tag">&lt;h6&gt;</span></code>
109+
representam seis níveis de elementos de bloco para títulos. O
110+
<code class="prettyprint prettyprinted"><span class="tag">&lt;h1&gt;</span></code>
111+
é o nível mais elevado, e o
112+
<code class="prettyprint prettyprinted"><span class="tag">&lt;h6&gt;</span></code>
113+
é o mais baixo. É sempre importante respeitar a hierarquia de títulos.
114+
</p>
115+
116+
<h3 id="paragraphs">Parágrafos</h3>
117+
<p>
118+
A tag HTML
119+
<code class="prettyprint prettyprinted"><span class="tag">&lt;p&gt;</span></code>
120+
representa um parágrafo com texto e é um elemento de bloco.
121+
</p>
122+
123+
<h3 id="divs">Divs</h3>
124+
<p>
125+
O elemento HTML
126+
<code class="prettyprint prettyprinted"><span class="tag">&lt;div&gt;</span></code>
127+
é um recipiente genérico para fluxo de conteúdo. Nós não utilizaremos
128+
neste momento, mas à medida que avançarmos em
129+
nossa grade. É uma tag principalmente utilizada para agrupar elementos com o objetivo de
130+
estilização e posicionamento.
131+
</p>
132+
<p>
133+
A
134+
<code class="prettyprint prettyprinted"><span class="tag">&lt;div&gt;</span></code>
135+
é um elemento de bloco. Os navegadores normalmente exibem o
136+
elemento de nível de bloco colocando uma nova linha antes e depois do
137+
elemento.</p>
138+
139+
<pre class="pre-copy" style="position: relative;"><code class="language-html code-copy hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
140+
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Qualquer tipo de conteúdo aqui.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
141+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code><button>Copiar para àrea de transferência</button><textarea type="text" style="display: none;"></textarea></pre>
142+
143+
<h3 id="spans">Spans</h3>
144+
<p>
145+
O elemento HTML
146+
<code class="prettyprint prettyprinted"><span class="tag">&lt;span&gt;</span></code>
147+
é um elemento de linha principalmente para fins de
148+
estilo.
149+
</p>
150+
<p>
151+
A tag
152+
<code class="prettyprint prettyprinted"><span class="tag">&lt;span&gt;</span></code>
153+
ocupa apenas o espaço
154+
delimitado pelas tags que o definem. Basicamente isso significa que você
155+
pode colocá-lo em volta de uma palavra ou algo semelhante.</p>
156+
157+
<pre class="pre-copy" style="position: relative;"><code class="language-html code-copy hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Qualquer tipo de conteúdo <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>aqui<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
158+
</code><button>Copiar para àrea de transferência</button><textarea type="text" style="display: none;"></textarea></pre>
159+
160+
<hr>
161+
162+
<h2>Conclusão</h2>
163+
<p>Agora você já conhece quais são as principais tags e pode começar a praticar!</p>
164+
165+
<div class="documentation-element">
166+
<section class="hilightedContent hilightedContent--references">
167+
<header>
168+
<h4>Referências</h4>
169+
</header>
170+
<div class="hilightedContent-main">
171+
<ul>
172+
<li>
173+
<a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Block-level_elements" target="_blank">MDN | Elementos de nível de Bloco</a>
174+
</li>
175+
176+
<li>
177+
<a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elements" target="_blank">MDN | Elementos de nível de Linha</a>
178+
</li>
179+
</ul>
180+
</div>
181+
</section>
182+
</div>
183+
184+
<div class="feedback-card">
185+
<h5 class="feedback-card-subtitle">Queremos sempre evoluir juntos com você</h5>
186+
<h3 class="feedback-card-title">Gostaria de deixar seu feedback?</h3>
187+
<p class="feedback-card-text">Separamos uma área que você pode contribuir para uma melhor experiência ao consumir nosso conteúdo</p>
188+
<a id="toggle-forms" class="button" href="https://conteudo-kenzie-fullstack.vercel.app/modulo_1/sprint_1/html/aulas/tags_e_atributos.html#feedback">Abrir formulário de feedback</a>
189+
</div>
190+
</div>
191+
<script src="./HTML_ Tags e Atributos_files/script.js.download"></script>
192+
193+
194+
<script src="./HTML_ Tags e Atributos_files/highlight.min.js.download"></script></body></html>

‎M1 - S1/HTML_ Tags e Atributos_files/1268918172-dddcbb00acdedb5ec8e477c6856a587fa553ce794dfd82ac4.jpg

1.58 KB
Loading

0 commit comments

Comments
 (0)