HTML - 8va-Entrega etiquetas y listas
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ó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!
Escribir un comentario