Encabezados

Practica 6:
Etiqueta Uso
<h1> … </h1> Título tamaño H1
<h2> … </h2> Título tamaño H2
<h3> … </h3> Título tamaño H3
<h4> … </h4> Título tamaño H4
<h5> … </h5> Título tamaño H5
<h6> … </h6> Título tamaño H6

Alineación

Practica 7:

Formato de texto

Practica 8:
Etiqueta Uso
<b>…</b> Poner texto en negrita
<strong>…</strong> Poner texto en negrita
<i>…</i> Poner texto en cursiva
<em>…</em> Poner texto con acento de intensidad
<u>…</u> Poner texto subrayado
<small>…</small> Poner texto más pequeño
<big>…</big> Poner texto más grande
<sub>…</sub> Poner texto subíndice
<sup>…</sup> Poner texto superíndice
<tt>…</tt> Poner texto en formato teletipo
<strike>…</strike> Poner texto como tachado
<s>…</s> Poner texto como tachado
<del>…</del> Poner texto como eliminado
<code>…</code> Texto con formato de código de computadora

Divisiones

Practica 9:

Listas

<ol> es utilizado para insertar listas ordenadas.
<ul> es utilizado para insertar listas sin orden.
<li> es utilizado para insertar elementos en cada lista.

Para la etiqueta <ol> se debe modificar el atributo type con los siguientes valores:

type=”1″ Los elementos de la lista se numerarán con números
type=”A” Los elementos de la lista se numerarán con letras mayúsculas
type=”a” Los elementos de la lista se numerarán con letras minusculas
type=”I” Los elementos de la lista se numerarán con números romanos en mayúsculas
type=”i” Los elementos de la lista se numerarán con números romanos en minúsculas

Ejemplo

<ol type=”1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Para la etiqueta <ul> se debe modificar el atributo style con los siguientes valores:

disc Establece el marcador del elemento de lista en un punto
circle Establece el marcador del elemento de lista en un circulo
square Establece el marcador del elemento de lista en un cuadrado

Ejemplo

<ul style=”disc”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ejercicio:

Practica 10:

Tablas

  • La etiqueta <table> sirve para definir el inicio de una tabla
  • La etiqueta <th> sirve para definir el encabezado de una columna
  • La etiqueta <tr> sirve para definir una fila
  • La etiqueta <td> sirve para definir una celda dentro de una fila
  • La propiedad border sirve para definir un borde de la tabla
  • La propiedad width sirve para definir un ancho de la tabla
  • La propiedad height sirve para definir un alto de la tabla
  • La propiedad padding especifica el espacio entre el contenido de la celda y sus bordes
  • La propiedad text-align especifica la alineación del texto dentro de la celda
  • La propiedad colspan define la longitud en columnas de una celda
  • La propiedad rowspan define la longitud en filas de una celda
  • La propiedad bgcolor cambia el color de fondo en hexadecimal de una celda
  • Practica 11:
    Cree una tabla similar a la que se muestra en la siguiente imagen

    Practica 12:
    Elabore su horario de clases en una tabla con HTML
    Practica 13:
    Cree una tabla similar a la que se muestra en la siguiente imagen

    Imágenes

    • La etiqueta <img> se utiliza para insertar una imagen
    • El atributo src especifica el origen de la imagen
    • El atributo alt define un nombre alternativo en caso de que la imagen no sea encontrada
    • El atributo width sirve para definir un ancho de la imagen
    • El atributo height sirve para definir un alto de la imagen
    Practica 14:
    Inserte 16 imágenes de banderas de países dentro de una tabla de 4×4. Coloque en el atributo alt el nombre del país. Establezca el tamaño de la imagen en 250×200.
    Ejemplo:
    <img src=”CostaRica.jpg” alt=”Costa Rica” widht=”250px” height=”200px”>

    Enlaces

    • La etiqueta <a> define un enlace
    • El atributo href especifica la dirección del enlace
    • El atributo target especifica donde abrir el nuevo enlace
    • Estos son los valores que puede tomar target:
      • _blank abre el link en una nueva ventana
      • _self abre el link en la misma ventana
      • _parent abre el link en la escena superior
      • _top abre el link en el cuerpo completo de la ventana
    Practica 15:
    Inserte los links a la entrada de Wikipedia de cada país de las imágenes de la practica anterior. Cada pagina se debe abrir en una nueva ventana.
    Ejemplo:
    <a href=”https://es.wikipedia.org/wiki/Costa_Rica” target=”_blank”><img src=”CostaRica.jpg” alt=”Costa Rica” widht=”250px” height=”200px”></a>
    Practica 16:
    Cree un mapa interactivo señalando al menos 15 estados en el siguiente mapa de la república mexicana. Debe especificar las coordenadas de cada señalización en pixeles. Establezca un enlace a la pagina oficial del gobierno del estado. Ayúdese de la aplicación Paint para obtener las coordenadas correctas.
    Descargar Mapa
    Ejemplo:
    <img src=”MapaArtisticoMexico.jpg” alt=”Mapa Interactivo de Mexico” usemap=”#mapainteractivo”>
    <map name=”mapainteractivo”>
    <area shape=”rect” coords=”34,44,270,350″ alt=”Campeche” href=”https://www.campeche.gob.mx/”>
    <area shape=”rect” coords=”290,172,333,250″ alt=”Zacatecas” href=”https://www.zacatecas.gob.mx/”>
    </map>

    Estilos en cascada