Universidad de San Carlos de Guatemala USAC

Escuela de Formacin de Profesores de Enseanza Media EFPEM

Ctedra de Computacin e Informtica
Programacin Cientfica Comercial
Catedrtico: Mynor Escobar

HTML RESUMEN DE ETIQUETAS

1. Etiquetas Bsicas de HTML
Etiqueta
Inicio
<b>
<i>
<u>
<strong>
<strike>
<sub>
<sup>
<big>
<small>
<p>

Cierre
</b>
</i>
</u>
</strong>
</strike>
</sub>
</sup>
</big>
</small>
</p>

<br/>
<hr/>
<pre>

</pre>

<center>
<div>

</center>
</div>

<a href=direccin>
<a name="nombre">
<a href=#nombre>

</a>
</a>
</a>

<Font>

</Font>

<img=ruta, nombre y extensin>

Descripcin
Negrita
Cursiva
Subrayado
Texto Resaltado
Tachado
Subndice
Superndice
Aumenta el tamao del texto en 1
Disminuye el tamao del texto en 1
Prrafo, con esta etiqueta se pueden utilizar los
atributos:

aling = center

aling = left

align="right"
Salto de lnea
Colocar una lnea horizontal de divisin en la pgina.
Texto pre formateado: muestra texto tal y como fue
escrito, tomando en cuenta espacios.
Centrar informacin.
Divisin, separar contenido en bloques para aplicarles un
conjunto de caractersticas.
Crear enlaces o vnculos.
Punto de anclaje. <a href=#nombre> establece el
punto donde el usuario dar clic para ir al punto
especificado en <a name="nombre">.
Fuente, con esta etiqueta se pueden utilizar los atributos:

size = tamao

face = nombre de tipo de fuente

color =cdigo de color o nombre

Colocar imgenes, 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=tamao borde en pixeles

aling=alineacin
La alineacin puede ser: left, right, top, bottom, middle.

____________________________________
Material de Apoyo: HTML - Pg. 1

Universidad de San Carlos de Guatemala USAC

Escuela de Formacin de Profesores de Enseanza Media EFPEM
Ctedra de Computacin e Informtica
Programacin Cientfica Comercial
Catedrtico: Mynor Escobar

2. Listas en HTML
Ejemplo
<ul>
<li>Elemento 1 </li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Elemento 1 </li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

Descripcin
<ul> iniciar lista desordenada (vietas)
<li> define los elementos de la lista.
Atributos para definir tipo de vieta:

type =circle

type=cquare

type=disc
<ol> iniciar lista ordenada
<li> define los elementos de la lista.
Atributos para definir tipo de lista:

tipe=A

type=a

type=i

type=I

type=1
Atributos para indicar inicio de la lista

valu

start

3. Tablas
Ejemplo
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>contenido col 1</td>
<td>contenido col 2</td>
<td>contenido col 3</td>
</tr>
</tbody>
</table>

Descripcin
<table> iniciar tabla, cada tabla est formada por fila
<tr> y las filas estn compuestas por columnas <td>,
dentro de las columnas se escribe la informacin que
contendr la tabla.
Importante:

<th> es utilizada para escribir los ttulos de

las columnas.

Las tablas se dividen en 2 bloques:

encabezado <thead> para los ttulos de
columna y <tbody> para el contenido de la
tabla.
Atributos de las tablas:

Border=tamao

Cellspacing=tamao

Cellpadding=tamao

width=tamao

aling=left, right, center

valign=top,middle,bottom

bgcolor=color

colspan=numero

rowspan=numero

____________________________________
Material de Apoyo: HTML - Pg. 2

Universidad de San Carlos de Guatemala USAC

Escuela de Formacin de Profesores de Enseanza Media EFPEM
Ctedra de Computacin e Informtica
Programacin Cientfica Comercial
Catedrtico: Mynor Escobar

4. Formularios en HTML
<form>
</form>

Iniciar y finalizar formulario.

Atributos:

method="get" , "post"

action="pgina de enlace"

HTML HTML 4
<input type="text">
<input type="password">

<input type="radio">
<input type="checkbox">
<input type="submit" value="Submit">
<textarea rows="10" cols="30"> </textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

Caja de Texto
Caja de Texto tipo contrasea, no se aprecia los
caracteres ingresados en este elemento ya que son
sustituidos por el carcter
Opcin
Seleccin
Boton de Envio
Area de Texto
Lista (Combo box)

HTML 5
Importante: la mayora 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"
Nmeros en un listado, especificando incremento y
value="3">
valor por defecto.
<input type="range" min="1" max="10" step="1"
Barra de desplazamiento especificando tamao,
value="1">
incremento y valor por defecto.
<input type="time">
Hora
<input type="week">
Semana y ao
Los valores para semana pueden ser desde 1 hasta
53 (el ao posee 53 semanas)
ATRIBUTOS
Placeholder="texto a mostrar"
Escribir texto de explicacin en objetos,
principalmente cajas de texto.
name="Nombre del objeto"
Nombre del objeto, como norma y buena prctica
todos los objetos deben poseer nombre.
Required
Dato obligatorio
Value="valor"
Valor por defecto del elemento.
maxlength="tamao"
Largo mximo de texto.
size="tamao"
Tamao del objeto.

____________________________________
Material de Apoyo: HTML - Pg. 3