Tags HTML Básicas e Listas

Prévia do material em texto

Tecnologia para Internet I
Aula 4
Vidal. Ronnison Reges1
1Ana´lise e Desenvolvimento de Sistemas - Parangaba
Centro Universita´rio Esta´cio do Ceara´
2018
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 1 / 19
DROPBOX
https://goo.gl/uxZ45L
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 2 / 19
ROTEIRO
1 Tag’s
Tag’s Ba´sicas
Listas com HTML 5
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 3 / 19
ROTEIRO
1 Tag’s
Tag’s Ba´sicas
Listas com HTML 5
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 4 / 19
Tag’s Ba´sicas
A
Elemento que representa um hiperlink
Atributos:
href = A URL que fornece o destino do hiperlink.
target = nome de navegac¸a˜o ao contexto ou palavra-chaves seguintes
strings literais: ” blank”, ” self”, ” parent”, ou ” top”.
<p>
<a href="http://en.wikipedia.org/wiki/Cambera">Cambera</a>
is the capital city of Australia.
</p>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 5 / 19
Tag’s Ba´sicas
EM
Este elemento enfatiza um bloco de texto, colocando-o em ita´lico.
<p>
<a href="http://en.wikipedia.org/wiki/Cambera">
Cambera</a>
is the capital city of Australia.
</p>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 6 / 19
Tag’s Ba´sicas
STRONG
Este elemento transforma um texto simples em um texto de certa
importaˆncia, colocando- o em negrito.
<p><strong><strong>Warning.</strong>
This dungeon is dangerous.</strong></p>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 7 / 19
Tag’s Ba´sicas
SMALL
Este elemento diminui o tamanho do texto.
<footer>
<p><small>&capy copyright 2010 Example Corp.</small></p>
</footer>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 8 / 19
Tag’s Ba´sicas
S
Este elemento transforma o texto em um conteu´do na˜o relevante.
<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: \$3.99 per bottle</s></p>
<p><strong>Now selling for just \$2.99 a bottle!</strong></p>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 9 / 19
Tag’s Ba´sicas
CITE
Este elemento transforma o texto em uma citac¸a˜o
<p>My favorite movie is <cite>star wars</cite>.</p>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 10 / 19
Tag’s Ba´sicas
Q
Este elemento coloca aspas em um bloco de texto.
<p>The man said <q>The quote is input here</q>.</p>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 11 / 19
Tag’s Ba´sicas
CODE
Este elemento representa um fragmento de co´digo de computador.
<pre>
<code>
function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}
</code>
</pre>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 12 / 19
Tag’s Ba´sicas
SPAN
Este elemento representa um fragmento de co´digo de computador.
<span> Teste de exemplo </span>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 13 / 19
Tag’s Ba´sicas
BR
Este elemento representa uma quebra de linha.
<p>32 Vassar Street<br>
Cambridge, MA 02139
</p>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 14 / 19
ROTEIRO
1 Tag’s
Tag’s Ba´sicas
Listas com HTML 5
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 15 / 19
Listas com HTML 5
OL
Define uma lista numerada. Os itens da listas sa˜o definidos pela tag li
Atributos da lista:
reversed = altera a ordem da lista.
start = Valor inicial da lista
type = Altera o numerador da lista.
<ol>
<li>exemplo1</li>
<li>exemplo2</li>
<li>exemplo3</li>
</ol>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 16 / 19
Listas com HTML 5
UL
Define uma lista na˜o numerada. Utiliza os mesmos atributos de ol.
<ul>
<li>exemplo1</li>
<li>exemplo2</li>
<li>exemplo3</li>
</ul>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 17 / 19
Tag’s Textuais
DL
Elemento que textual que exibe uma lista de definic¸o˜es, com termos
espec´ıficos. Trabalha com as tags dt termo a ser exibido e dd
elementos do termo.
Exemplo de utilizac¸a˜o:
<dl>
<dt>Carros</dt>
<dd>Uno</dd>
<dd>Gol</dd>
<dt>Motos</dt>
<dd>Honda</dd>
<dd>Yamaha</dd>
</dl>
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 18 / 19
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 19 / 19
	Tag's
	Tag's Básicas
	Listas com HTML 5