Universidad de San Carlos de Guatemala – USAC

Escuela de Formación de Profesores de Enseñanza Media – EFPEM

Cátedra de Computación e Informática
Programación Científica Comercial
Catedrático: Mynor Escobar

HTML – RESUMEN DE ETIQUETAS

1. Etiquetas Básicas de HTML

Etiqueta
Descripción
Inicio Cierre
<b> </b> Negrita
<i> </i> Cursiva
<u> </u> Subrayado
<strong> </strong> Texto Resaltado
<strike> </strike> Tachado
 Subíndice
 Superíndice
<big> </big> Aumenta el tamaño del texto en 1
<small> </small> Disminuye el tamaño del texto en 1
<p> </p> Párrafo, con esta etiqueta se pueden utilizar los
atributos:
 aling = “center”
 aling = “left”
 align="right"
<br/> Salto de línea
<hr/> Colocar una línea horizontal de división en la página.
<pre> </pre> Texto pre formateado: muestra texto tal y como fue
escrito, tomando en cuenta espacios.
<center> </center> Centrar información.
<div> </div> División, separar contenido en bloques para aplicarles un
conjunto de características.
<a href=“dirección”> </a> Crear enlaces o vínculos.
<a name="nombre"> </a> Punto de anclaje. <a href=“#nombre”> establece el
<a href=“#nombre”> </a> punto donde el usuario dará clic para ir al punto
especificado en <a name="nombre">.

<Font> </Font> Fuente, con esta etiqueta se pueden utilizar los atributos:
 size = “tamaño”
 face = “nombre de tipo de fuente”
 color =“código de color o nombre”

<img=“ruta, nombre y extensión”>
Colocar imágenes, los atributos que se pueden utilizar
son los siguiente:
 alt=“texto alternativo si no se muestra img”
 width=“ancho en pixeles”
 height=“alto en pixeles”
 border=“tamaño borde en pixeles”
 aling=“alineación”
La alineación puede ser: left, right, top, bottom, middle.

____________________________________
Material de Apoyo: HTML - Pág. 1
 Universidad de San Carlos de Guatemala – USAC
Escuela de Formación de Profesores de Enseñanza Media – EFPEM
Cátedra de Computación e Informática
Programación Científica Comercial
Catedrático: Mynor Escobar

2. Listas en HTML
Ejemplo Descripción
<ul> <ul> iniciar lista desordenada (viñetas)
<li>Elemento 1 </li> <li> define los elementos de la lista.
<li>Elemento 2</li> Atributos para definir tipo de viñeta:
<li>Elemento 3</li>  type =“circle”
</ul>  type=“cquare”
 type=“disc”
<ol> <ol> iniciar lista ordenada
<li>Elemento 1 </li> <li> define los elementos de la lista.
<li>Elemento 2</li> Atributos para definir tipo de lista:
<li>Elemento 3</li>  tipe=“A”
</ol>  type=“a”
 type=“i”
 type=“I”
 type=“1”
Atributos para indicar inicio de la lista
 valué
 start

3. Tablas
Ejemplo Descripción
<table> <table> iniciar tabla, cada tabla está formada por fila
<thead> <tr> y las filas están compuestas por columnas <td>,
<tr> dentro de las columnas se escribe la información que
<th>Encabezado 1</th> contendrá la tabla.
<th>Encabezado 2</th>
<th>Encabezado 3</th> Importante:
</tr>  <th> es utilizada para escribir los títulos de
</thead> las columnas.
<tbody>  Las tablas se dividen en 2 bloques:
<tr> encabezado <thead> para los títulos de
<td>contenido col 1</td> columna y <tbody> para el contenido de la
<td>contenido col 2</td> tabla.
<td>contenido col 3</td>
</tr> Atributos de las tablas:
</tbody>
 Border=“tamaño”
</table>
 Cellspacing=“tamaño”
 Cellpadding=tamaño”
 width=“tamaño”
 aling=“left”, “right”, “center”
 valign=“top”,”middle”,”bottom”
 bgcolor=“color”
 colspan=“numero”
 rowspan=“numero”

____________________________________
Material de Apoyo: HTML - Pág. 2
 Universidad de San Carlos de Guatemala – USAC
Escuela de Formación de Profesores de Enseñanza Media – EFPEM
Cátedra de Computación e Informática
Programación Científica Comercial
Catedrático: Mynor Escobar

4. Formularios en HTML
<form> Iniciar y finalizar formulario.
</form> Atributos:
 method="get" , "post"
 action="página de enlace"
HTML – HTML 4
<input type="text"> Caja de Texto
<input type="password"> Caja de Texto tipo contraseña, no se aprecia los
caracteres ingresados en este elemento ya que son
sustituidos por el carácter ●
<input type="radio"> Opción
<input type="checkbox"> Selección
<input type="submit" value="Submit"> Boton de Envio
<textarea rows="10" cols="30"> </textarea> Area de Texto
<select> Lista (Combo box)
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
HTML 5
Importante: la mayoría de estas etiquetas funcionan únicamente en los navegadores Google Chrome
o Safari
<input list="nombre"> Caja de texto con lista de valores predefinidos.
<datalist id="nombre">
<option value="valor 1">
<option value="valor 2">
<option value="valor 3">
<option value="valor 4">
<option value="valor 5">
</datalist>
<input type="color"> Seleccionar Color
<input type="date"> Seleccionar Fecha
<input type="datetime"> Hora y fecha
<input type="datetime-local">
<input type="email"> Correo Electronico
<input type="month"> Mes
<input type="number" min="1" max="10" step="2" Números en un listado, especificando incremento y
value="3"> valor por defecto.
<input type="range" min="1" max="10" step="1" Barra de desplazamiento especificando tamaño,
value="1"> incremento y valor por defecto.
<input type="time"> Hora
<input type="week"> Semana y año
Los valores para semana pueden ser desde 1 hasta
53 (el año posee 53 semanas)
ATRIBUTOS
Placeholder="texto a mostrar" Escribir texto de explicación en objetos,
principalmente cajas de texto.
name="Nombre del objeto" Nombre del objeto, como norma y buena práctica
todos los objetos deben poseer nombre.
Required Dato obligatorio
Value="valor" Valor por defecto del elemento.
maxlength="tamaño" Largo máximo de texto.
size="tamaño" Tamaño del objeto.

____________________________________
Material de Apoyo: HTML - Pág. 3