Inicio
Software
Programación
HTML Programación - PHP (ini) Programación - PHP POO Programación - PHP / HTML SQL Java
Hardware
Desarrollos
Quién soy Mapa del sitio

HTML - 8va-Entrega etiquetas y listas

Imprimir
Categoría: HTML
Escrito por Ch4rl1X Visitas: 1577

Esta vez vamos a ver varios ejemplos de etiquetas en un sólo archivo HTML. El objetivo de éste es la práctica.

Como van a poder notar cada ejemplo está dividido por la etiqueta DIV que básicamente permite dividir nuestro sitio por bloques, por ahí a veces haciendo más fácil la interpretación.

Para ver el ejemplo vivo -> Click aquí

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Probar Experimentar</title>
</head>

<body>

<div>
     <p align="left">Probar </p>
     <p align="left">Esto </p>
</div>

<div>
<p align="center">
Este es el texto que quiero mostrar primero
<br>
Este es el texto q quiero mostrar segundo
</p>
<hr align="rigt" width"10%" size="6">
</div>

<div>
<p>Ejemplo de encabezados</p>
<p align="center">
Este es el texto que quiero mostrar primero
<br>
Este es el texto q quiero mostrar segundo
</p>
<h1>Ejemplo</h1>
<h2>Ejemplo</h2>
<h3>Ejemplo</h3>
<h4>Ejemplo</h4>
<h5>Ejemplo</h5>
<h6>Ejemplo</h6>
<hr align="rigt" width"10%" size="6">
</div>

<div>
<p>Formatos</p>
<font size="12">Texto para mostrar con fuente más grande</font>
<br>
<br>
<font size="7" face="Courier">Texto para mostrar con otra tipografía</font>
<br>
<br>
<br>
<font face="Courier,arial,verdana">Texto que puede que el formato no lo contenga el navegador</font>
<br>
<p>Probando el <strong>FORMATO</strong> del texto </p>
<br>
<em>Este es el formato cursiva o italica</em>
<br>
<p><u>Esta etiqueta subraya la palabra</u></p>
<p><dfn>Esta etiqueta se usa normalmente para definiciones web, también muestra el texto en italica, aunque en algunos navegadores no funciona bien!</dfn></p>
<p><cite>Al igual que la etiqueta dfn, muchos navegadores la interpretan como italica o cursiva</cite></p>
<p><blockquote>Esta etiqueta se usa para mostrar sangría en el texto, <br> como se ve acá</blockquote></p>
<p><q>Esta etiqueta hace que practicamente no tenga sangría el texto</q></p>
<p lang="en-us">
  The global note
</p>
<p>Texto sin big <big>Este etiqueta hace el texto más grande de lo normal</big></p>
<p><big>Este texto está dentro de la etiqueta <strong>BIG</strong></big>
<br>
<p><small>Este dentro de <strong>SMALL</strong></small></p>
<p>Esta etiqueta se usa para los subíndices Ej.: 2m<sub>2</sub></p>
<p>Esta se usa para los superíndices Ej.: 2m<sup>2</sup></p>
<p><address>Esta etiqueta se usa para direcciones, la verdad q solo la pone en italica o cursiva</address></p>
</div>

<div>
<p>Textos acr&oacute;nimos</p>
<p>El <abbr title="Señor">Sr.</abbr> Pedro Picapiedra no quiere comer. Si el <abbr>Sr.</abbr> quiere no se come.</p>
<p><acronym title="Organización de las Naciones Unidas">ONU<acronym></p>

<p>Cualquier cosa se puede <font color="red"> formatear</font></p>

<p>Cualquier cosa se puede <strong> Formatear</strong></p>

<p>Cualquier cosa se puede <strong style="color:red;"> formatear</strong></p>
</div>

<div>
<p>Ejercicios con listas</p>
<p> Listas de Nombres: </p>
<ul>
    <li>Pepe Mercader</li>
	<li>Juan Menendez</li>
	<li>José Conchichila</li>
</ul>

<ol>
    <li>Trajo <strong style="color:green;">CPU</strong></li>
	<li>Trajo <strong style="color:blue;">Notebook</strong></li>
	<li>Trajo <strong style="color:orange;">Impresora</strong></li>
</ol>

<ol start="100">
              <li>Trajo <strong style="color:green;">CPU</strong></li>
	          <li>Trajo <strong style="color:blue;">Notebook</strong></li>
	          <li>Trajo <strong style="color:orange;">Impresora</strong></li>
</ol>

<p>Herramienta de servicio técnico</p>
<dl>
    <dt>Disco con instaladores</dt>
	<dd>Con este disco instalamos los sistemas operativos.</dd>
	<dt>Pen drive con programas</dt>
	<dd>Con esto instalamos los programas que va a definir el uso de la pc</dd>
</dl>

<ul>
    <li><strong style="color:green;">Reparaciones</strong></li>
	 <ol>
	 <li>Computadoras</li>
	 <li>Impresoras>
	 <li>Dispositivos tecnológicos</li>
	 </ol>
</ul>
</div>

</body>
</html>

Hay que practicar para enterarse de la gran cantidad de etiquetas que existe sólo basta con googlear un poco y verificar el funcionamiento. Cada cual después de mucha práctica a prueba y error va a encontrar su horizonte.

Saludos, espero que sirva, Ch4rl1X!