INDICE

Introducción
Para crear documentos html (páginas web) se necesitan dos elementos que casi
siempre están presente en las computadoras que utilizan la tecnología estándar de IBM
y el sistema operativo Windows el cual es un editor de texto ASCII, un programa
navegador y la creatividad del desarrollador siendo este último el elemento más
importante para desarrollar una web exitosa y con mucho flujo de cibernautas.

Nixon Waldemar Ventura Farfán 2

 Qué es HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas
web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma
estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada
elemento del documento.
HISTORIA DE HTML

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN
(Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto"
para compartir documentos.

Los sistemas de "hipertexto" habían sido

desarrollados años antes. En el ámbito
de la informática, el "hipertexto" permitía
que los usuarios accedieran a la
información relacionada con los
documentos electrónicos que estaban
visualizando. De cierta manera, los
primitivos sistemas de "hipertexto"
podrían asimilarse a los enlaces de las
páginas web actuales.

Tras finalizar el desarrollo de su sistema

de "hipertexto", Tim Berners-Lee lo
presentó a una convocatoria organizada
para desarrollar un sistema de
"hipertexto" para Internet. Después de
unir sus fuerzas con el ingeniero de
sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre
HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia
informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte
del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances
significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios)
ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse
en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22

de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el
primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización
llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de
1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los

Nixon Waldemar Ventura Farfán 3

últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto
que fluye alrededor de las imágenes.

QUE SE NECESITA PARA CREAR UNA PAGINA WEB

 Ser creativo
 Editores de código como sublime Text, notepad++ entro otros
 Conocimientos de html
 Conocimientos de css y css3

Es de suma importancia que contemos con el software de Xampp para crear nuestro propio
servidor web; lo que quiere decir es que nuestra computadora será un servidor donde
temporalmente, estará alojada nuestra página web. Más adelante conoceremos más acerca
de Xampp.
CONCEPTOS BÁSICOS DE HTML

Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse
con un servidor y comprender el lenguaje de todas las herramientas que manejan la información
de Web. Puede decirse que cada casa de software podría tener su navegador propio, aunque
los mas populares sean Netscape e Internet Explorer.

Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita.
Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador.

HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de

World Wde Web utilizan para mandar documentos HTML a través de Internet.

URL: Es el Localizador Uniforme de Recursos, o dicho más claramente, es la dirección que

localiza una información dentro de Internet.

ASCII: Caracteres de texto sin formato. Código Estándar Americano Para El Intercambio De
Información, conjunto de caracteres codificados de 8 bits, capaz de representar mediante
números a 256 caracteres alfanuméricos y símbolos diferentes.

Hipertexto: Texto con marcas o códigos que permiten desplazarse a través de un documento a
otro en la misma computadora, o entre documentos guardados en distintas computadoras
conectadas entre si mediante redes, de internet.

Nixon Waldemar Ventura Farfán 4

Bit: acrónimo de digito binario. Mínima unidad de información capaz de ser representada por
una computadora o sistema de comunicación representado por (1 o 0).

ESTRUCTURA DE UNA PÁGINA WEB

Tres son las etiquetas que describen la estructura general de un documento y dan una
información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y solo
interpretan y filtran los archivos HTML.
Ejemplo de etiquetas:
<html> </html>

 <html> las etiquetas se abren de esta manera.

 </html> así es como se cierra una etiqueta abierta.

<HTML>: Limitan el documento e indica que se encuentra

escrito en este lenguaje.

<HEAD>: (cabecera) Especifica el prólogo del resto del

archivo. Son pocas las etiquetas que van dentro de ella,
destacando la del título <TITLE> que será utilizado por los
marcadores del navegador e identificará el contenido de la
página. Solo puede haber un título por documento,
preferiblemente corto aunque significativo, y no caben otras
etiquetas dentro de él. En head se escriben textos que no
se verán en la pantalla del navegador

<BODY>: (cuerpo) Encierra el resto del documento, el

contenido.

ACTIVIDAD No. 1 – Conociendo páginas web

INDICACIONES: Visita varias páginas de internet

Nixon Waldemar Ventura Farfán 5

 Etiquetas
Etiquetas usadas en HTML

ETIQUETA DESCRIPCIÓN
ELEMENTO RAÍZ
<!doctype html> Define que el documento está bajo el estándar de HTML 5
<html> </html> Representa la raíz de un documento HTML o XHTML. Todos los demás
elementos deben ser descendientes de este elemento.
Metadatos del documento
<head> </head> Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<meta /> Define los metadatos que no pueden ser definidos usando otro elemento
HTML.
<title> </title > Define el título del documento, el cual se muestra en la barra de título del
navegador o en las pestañas de página. Solamente puede contener texto
y cualquier otra etiqueta contenida no será interpretada.
<link /> Usada para enlazar JavaScript y CSS externos con el documento HTML
actual.
<base> </base> Define la URL base para las URLs relativas en la página.
<style> Etiqueta de estilo usada para escribir CSS en línea.
Scripting
<script></script> Define ya sea un script interno o un enlace hacia un script externo. El
lenguaje de programación es JavaScript
<noscript></nosc Define una contenido alternativo a mostrar cuando el navegador no
ript> soporta scripting.
Secciones
<body> </body> Representa el contenido principal de un documento HTML. Solo hay un
elemento <body> en un documento.
<section></sectio Define una sección en un documento.
n>
<nav></nav> Define una sección que solamente contiene enlaces de navegación
<article></article> Define contenido autónomo que podría existir independientemente del
resto del contenido.
<aside></aside> Define algunos contenidos vagamente relacionados con el resto del
contenido de la página. Si es removido, el contenido restante seguirá
teniendo sentido
<h1>,<h2>,<h3>,< Los elemento de cabecera  implementan seis niveles de cabeceras de
h4>,<h5>,<h6> documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un
elemento de cabecera describe brevemente el tema de la sección que
introduce.
<header> Define la cabecera de una página o sección. Usualmente contiene un
</header> logotipo, el título del sitio Web y una tabla de navegación de contenidos.
<footer></footer> Define el pie de una página o sección. Usualmente contiene un mensaje
de derechos de autoría, algunos enlaces a información legal o direcciones

Nixon Waldemar Ventura Farfán 6

 para dar información de retroalimentación.
<main></main> Define el contenido principal o importante en el documento. Solamente
existe un elemento <main> en el documento.

Agrupación de Contenido
<p></p> Se utiliza para escribir párrafos
<pre></pre> Indica que su contenido esta pre formateado y que este formato debe ser
preservado.
<blockquote> Representa una contenido citado desde otra fuente.
</blockquote>
<ol></ol> Define una lista ordenada de artículos.
<ul></ul> Define una lista de artículos sin orden. (se usa en los menú
desplegables.
<li></li> Define un artículo de una lista enumerada.
<figure></figure> Representa una figura ilustrada como parte  del documento.
<figcaption> Representa la leyenda de una figura.
</figcaption>
<div Representa un contenedor genérico sin ningún significado especial.
</div>
Semántica a nivel de Texto
<a href=""></a> Representa un hiperenlace, enlazando a otro recurso.
<em></em> Representa un texto enfatizado, como un acento de intensidad.
<strong></strong> Representa un texto especialmente importante.
<q></q> Representa una cita textual  inline.
<mark></mark> Representa texto resaltado con propósitos de referencia, es decir por su
relevancia en otro contexto.
<span></span> Representa texto sin un significado específico.  Este debe ser usado
cuando ningún otro elemento semántico le confiere un significado
adecuado, en cuyo caso, provendrá de atributos globales
como class, lang, o dir.
<br> Representa un salto de línea.
<B> </B> Crea un texto en negrita.
<I></I> Crea un texto en cursiva.
<!-- comentario--> Se usa para insertar un comentario, el cual no se ve en la página web;
solo en el código fuente.
Contenido incrustado
<img src=""> Se utiliza para insertar una imagen
<iframe Representa un contexto anidado de navegación, es decir, un documento
src=""></iframe> HTML embebido.
<embed></embed> Representa un punto de integración para una aplicación o contenido
interactivo externo que por lo general no es HTML.
<object></object> Representa un recurso externo, que será tratado como una imagen, un
sub-documento HTML o un recurso externo a ser procesado por
un  plugin.
<param name="" Define parámetros para el uso por los plugins invocados por los
value=""> elementos <object>.

Nixon Waldemar Ventura Farfán 7

<video></video> Representa un video , y sus archivos de audio y capciones asociadas,
con la interfaz necesaria para reproducirlos. 

<audio></audio> Representa un sonido o stream de audio.

<source src="" Permite a autores o autoras especificar recursos multimedia
type=""> alternativos para los elementos multimedia como
<video> o <audio>.
<track kind="" src=""> Permite a autores o autoras especificar una pista de
texto temporizado para elementos multimedia
como <video> o  <audio>.
<canvas></canvas> Representa un área de mapa de bits  en el que se pueden utilizar
scripts para renderizar gráficos como gráficas, gráficas de juegos o
cualquier imagen visual al vuelo.
<map></map> En conjunto con <area>, define un mapa de imagen.
<area></area> En conjunto con  <map>, define un mapa de imagen.
Datos tabulares
<table></table> Representa datos con más de una dimensión.
<caption></caption> Representa el título de una tabla.
<colgroup></colgroup> Representa un conjunto de una o más columnas de una tabla.
<col></col> Representa una columna de una tabla.
<tbody></tbody> Representa el bloque de filas que describen los datos contretos  de
una tabla.
<thead></thead> Representa el bloque de filas que describen las etiquetas de
columna de una tabla.
<tfoot></tfoot> Representa los bloques de filas que describen los resúmenes de
columna  de una tabla.
<tr></tr> Representa una fila de celdas en una tabla.
<td></td> Representa una celda de datos en una tabla.
<th></th> Representa una celda encabezado en una tabla. 

Elementos interactivos
<details></details> Representa un widget desde el que un usuario o usuaria puede
obtener información o controles adicionales.
<summary></summary Representa un resumen, título o leyenda para un
> elemento  <details> dado.
<command> Representa un comando que un usuario o usuaria puede invocar.
<menu> Representa unalista de comandos .

Nixon Waldemar Ventura Farfán 8

 Formularios
<form></form> Representa un formulario, consistendo de controles que puede
ser enviado a un servidor para procesamiento.
<fieldset></fieldset> Representa un conjunto de controles.
<legend></legend> Representa el título de un <fieldset>.
<label></label> Representa el título de un control de formulario.
<input></input> Representa un campo de datos escrito que permite al usuario o
usuaria editar los datos.
<button></button> Representa un botón .
<select></select> Represents un control que permite la selección entre un
conjunto de opciones.
<datalist></datalist> Representa un conjunto de opciones predefiniddas para otros
controles.
<option></option> Representa una opción en un elemento <select>, o una
sugerencia de un elemento <datalist>.
<textarea></textarea> Representa un control de edición de texto multi-línea.

NOTA IMPORTANTE – Conociendo Etiquetas

El listado de etiquetas te servirá para conocer el uso de cada una

De ellas cuando te encuentres programando tu pagina web.

Nixon Waldemar Ventura Farfán 9

 Cómo Usar XAMPP Para Ejecutar Su Propio Servidor Web
Que es XAMPP

XAMPP es el acrónimo de Cualquier Plataforma (X), Apache (A), MySQL (M), PHP (P) y Perl
(P). Es una distribución de Apache sencilla y ligera que facilita enormemente a los
desarrolladores crear un servidor web local para realizar pruebas. Todo lo que necesita para
configurar un servidor web – la aplicación servidor (Apache), la base de datos (MySQL), y un
lenguaje de script (PHP) – está incluído en un único fichero extraíble. XAMPP es también multi-
plataforma, lo que significa que funciona bien tanto en Linux, como Mac o Windows. Dado que
la mayoría de servidores web actuales usan los mismos componentes que XAMPP, la transición
desde el servidor de prueba local al servidor de producción es extremadamente fácil también.
¿Qué Se Incluye en XAMPP?
XAMPP tiene cuatro componentes principales. Éstos son:
1. Apache: Apache es la aplicación de servidor web que procesa y entrega el contenido
web a un ordenador. Apache es el servidor web más popular en internet, haciendo
funcionar casi el 54% de todas las páginas web.
2. MySQL: Cada aplicación web, ya sea simple o compleja, requiere una base de datos
para almacenar los datos que recoge. MySQL, que es de código abierto, es el sistema
gestor de base de datos más popular. Alimenta desde websites de aficionados hasta
plataformas profesionales como WordPress. Puede aprender cómo dominar PHP con
este curso xxx.
3. PHP: PHP son las siglas de Preprocesador de Hipertexto. Es un lenguaje de script del
lado del servidor que hace funcionar algunas de las páginas web más famosas del
mundo, incluyendo WordPress y Facebook. Es de código abierto, relativamente fácil de
aprender, y funciona perfectamente con MySQL, lo que lo ha hecho una opción muy
popular para los desarrolladores web.
4. Perl: Perl es un lenguaje de programación dinámico y de alto nivel que se usa
ampliamente en la programación de redes, la administración de sistemas, etc. Aunque
menos popular para el desarrollo web, Perl tiene un montón de aplicaciones específicas.
Diferentes versiones de XAMPP pueden incluir componentes adicionales como phpMyAdmin,
OpenSSL, etc. para crear servidores web completos.

Nixon Waldemar Ventura Farfán 10

 ACTIVIDAD No. 1 – Servidor Web

CREANDO UN SERVIDOR WEB

Instalando XAMPP

Siga estos pasos para instalar

XAMPP:
Paso 1: Deshabilite su antivirus ya
que puede provocar que algunos
componentes de XAMPP se
comporten de manera irregular.
Paso 2: Deshabilite el Control de
Cuentas de Usuario (UAC). UAC
limita los permisos de escritura al
directorio por defecto de XAMPP
(c:/Program Files/xampp),
obligándole a instalarlo en un
directorio diferente. Puede aprender
cómo deshabilitar UAC aquí.
(Opcional)
Paso 3: Haga doble click en el
instalador XAMPP para comenzar
el proceso de instalación. Haga
click en ‘Next’ después de la
pantalla de presentación.

Paso 4: Aquí, puede seleccionar

los componentes que quiere
instalar. Elija la opción por defecto
y haga click en ‘Next’.

Nixon Waldemar Ventura Farfán 11

Paso 5: Elija la carpeta en la que quiere instalar XAMPP. Esta carpeta contendrá todos los
ficheros de su aplicación web, así que asegúrese de seleccionar una unidad que tenga bastante
espacio.

Paso 6: La siguiente pantalla es una

promoción de BitNami, una tienda de
aplicación para software de servidores.
Deseleccione la casilla ‘Learn more about
BitNami for XAMPP’, ¡a no ser que
realmente disfrute recibiendo correos de
promoción!

Paso 7: El instalador está ahora preparado

para instalar XAMPP. Haga click en ‘Next’ y
espere a que el instalador desempaquete e
instale los componentes. Esto puede llevar
varios minutos. Puede que se le pida aprobar el
acceso al cortafuegos para ciertos
componentes (como Apache) durante el
proceso de instalación.
Paso 8: ¡El proceso de instalación ha acabado!
Marque la casilla ‘Do you want to start the
Control Panel now?’ para abrir el panel de
control de XAMPP.

Nixon Waldemar Ventura Farfán 12

Entendiendo el Panel de Control de XAMPP
El panel de control de XAMPP le da un control completo sobre todos los componentes de
XAMPP instalados. Puede usar el panel de control para iniciar/parar distintos módulos, lanzar
una ventana de comandos UNIX, abrir el explorador de Windows, y ver todas las operaciones
que se ejecutan en segundo plano.
Aquí tiene una visión rápida del Panel de Control. Por ahora, lo único que necesita saber es
cómo iniciar y parar el servidor Apache.

PASOS PARA INICIAR UNA PAGINA WEB SENCILLA

Nixon Waldemar Ventura Farfán 13

 1. Ingresaremos a la unidad de Disco duro (c), luego en la carpeta Xampp y seguido
abriremos la carpeta htdocs donde crearemos nuestra carpeta raíz en la cual estarán
todos los documentos de nuestra página,

2. Nombraremos la carpeta: Mi Pagina Web

3. Abrimos la Carpeta Mi Pagina Web y creamos las siguientes carpetas y archivos.
 Carpeta img (para las imágenes de la página web)
 Carpeta css (para guardar los códigos css que le darán estilo a nuestra web)
 Archivo Index.html (será nuestra página de inicio)

4. Para crear nuestro archivo Index haremos los siguientes pasos.

 Abrimos nuestro editor de textos que puede ser Sublime o Notepad++
 Clic en File
 Elegimos la opción
Save with Encoding
(Guardar con
codificación)
 Clic en UTF-8 y
aparecerá la
siguiente ventana.

 Busquemos la
ubicación en

discolocal/Xampp/htdocs y guardamos nuestra pagina inciial.

Nixon Waldemar Ventura Farfán 14

 Figura: guardando nuestra página inicial de la web.

PROGRAMAR EN HTML5

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto
por una serie de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone
de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos
de línea, listas, tablas, etc.

PASOS PARA ESTRUCTURAR NUESTRA PAGINA WEB

1. Abrimos nuestro archivo index con sublime text
2. Escribir el símbolo < seguido de html <html y presionamos la tecla de tabulación.
3. Automáticamente aparecerá la estructura de nuestra página web.

Nixon Waldemar Ventura Farfán 15

 Figura: esta es la estructura de una página web

Nota:
<!DOCTYPE html> : Indica que estamos usando html5
El operador < y > se obtienen presionando al combinación de teclas Alt + 60 y Alt + 62
MODELO DE UNA PAGINA WEB

ACTIVIDAD No. # – Crear una página web

1. Ingrese al programa Xampp para tener acceso al Panel de control y encienda el servidor
Apache.

Nixon Waldemar Ventura Farfán 16

 2. Ingrese a la carpeta htdocs de Xampp en su disco duro y crear una carpeta con el
nombre de Pagina Web _______ y su apellido. En esta misma carpeta debemos crear
una carpeta con el nombre de images donde
guardaremos todas las imágenes usadas en
nuestra página web.

3. Abrimos nuestro editor de códigos Sublime Text

4. Procedemos a guardar nuestra página principal

dando clic en File, elegimos
la opción Save with
Encoding y damos clic en
UTF-8

5. Buscamos la ubicación
discolocal/Xampp/htdocs

6. Abrimos la carpeta donde

alojaremos nuestra pagina
web y guardamos como Index.html

7. Se visualizara un archivo de página web ya en la carpeta. Dicho archivo no contiene

absolutamente nada porque aun no hemos iniciado a programar.

8. De vuelta en sublime Tex en la

primera línea de código escribir html
y presionar la tecla tabulación.

Nixon Waldemar Ventura Farfán 17

 9. Automáticamente nos aparecerá la estructura
básica de la página web.

10. Dentro de la etiqueta title escribir el título de

nuestra página web.

<title>Programando en html5 y css3</title>

11. Procedemos a guardar los cambios dando clic en

el menú File (archivo) y luego en Save
(guardar).

NOTA: Hasta el momento solo hemos creado la página principal vacía de nuestro sitio web. Lo que
indica que aún no hemos puesto ningún contenido a nuestra página excepto el título.

CORRER PAGINA WEB DESDE NUESTRO PROPIO SERVIDOR WEB

Poder correr nuestra página web significa que vamos a abrir nuestra página usando el
navegador de nuestra elección. Debemos tomar en cuenta, que el navegador Internet Explorer
no es aconsejable utilizarlo ya que no es siempre compatible. La aplicación de servidor web
Apache de Xampp hace posible que podamos visualizar nuestra página web ya que con dicha
aplicación hemos convertido nuestra computadora en un servidor que temporalmente aloja
nuestro sitio web.

Pasos para correr sitio web alojado desde un servidor local

1. Entrar al panel de Xampp y encender el apache.
2. Entrar al navegar y digitar la siguiente dirección localhost/programación
programacion se llama la carpeta donde está alojada nuestra página web y lo que hace
el servidor es tomar el archivo index y abrirlo.

Como pueden visualizar en la imagen anterior hemos abierto ya nuestra página web pero no
aparece información en ella; eso es porque aún no hemos ingresado dicha información la cual
haremos en seguida.
HTML BASICO

Nixon Waldemar Ventura Farfán 18

Ciertas etiquetas son tan básicas, que muchas de ellas son usadas repetidas veces dentro del
código fuente de la página. En este apartado usaremos las siguientes etiquetas: h1, h2, p, br,
img para llenar de información el sitio web.
1. En sublime text ingresar las siguientes etiquetas
<h1></h1>
<h2></h2>
<p> <br /> </p>
<img src="">

Usando el editor de código Sublime Text durante programamos en html5

2. Una vez terminando de escribir las etiquetas con cada uno de sus contenidos
procedemos a guardar los cambios.
3. Vamos a la pestaña de nuestro navegador y si tenemos abierta nuestro sitio web solo
actualizamos presionando F5 o dando clic derecho
sobre la pestaña y presionar Recargar pestaña.

Nixon Waldemar Ventura Farfán 19

 Esta sería el resultado de nuestra página web hasta el momento.

En esta imagen explicamos lo que cada una de las etiquetas programadas afectó a nuestro sitio
web.

Nixon Waldemar Ventura Farfán 20

 ATRIBUTOS DE HTML
Que son los atributos: Permiten personalizar las etiquetas en HTML.

Atributo charset
El atributo charset específica la codificación de caracteres para el documento HTML. Esto
quiere decir que el atributo charset le permite a HTML leer todos aquellos caracteres que nos
son comunes en el idioma ingles como por ejemplo: las tildes, la ñ y otros símbolos.
El atributo charset se utiliza dentro de la etiqueta meta. Ejemplo.
<meta charset="utf-8">
Utf-8
Es un formato de codificación de caracteres Unicode e ISO 10646 utilizando símbolos de
longitud variable.

Agregar etiqueta meta y atributo charset al sitio web

 Vaya al editor de código (sublime o notepad+)
 Dentro de la etiqueta head agregue la etiqueta meta, atributo charset y el identificador
de caracteres utf-8.

 Guardamos cambios en
nuestro editor de código.

 Vamos a nuestra página web y recargamos con F5 o clic derecho sobre la pestaña y
posteriormente clic en Recargar pestaña.

Así es como se visualizaría nuestro sitio web ya con el atributo charset.

Nixon Waldemar Ventura Farfán 21

 INSERTAR LISTAS ENUMERADAS EN HTML

Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Su
etiqueta es <ol> </ol>.
Hay tres tipos de listas: ordenadas, desordenadas y por definición.
Listas Ordenadas Son aquellas que ordenan la lista anteponiendo números, letras o signos.
Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma,
utilizamos la etiqueta <li>.

Ejemplo:
CODIGO RESULTADO
<ol> 1. Introducción a la programación
<li>Introducción a la programación</li>
<li>diagramas de flujo en Raptor</li> 2. diagramas de flujo en Raptor
<li>Scratch</li>
<li>Visual Basic</li> 3. Scratch
<li>html5 y CSS3</li>
<li>PHP</li> 4. Visual Basic
<li>My SQL</li>
</ol> 5. html5 y CSS3
6. PHP
7. My SQL

Listas Desordenadas: Exponen la lista anteponiendo un punto, cuadrado o triángulo negro.

Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la
misma utilizamos la etiqueta <li>.
Ejemplo:
CODIGO RESULTADO
<ul>  Introducción a la programación
<li>Introducción a la programación</li>
<li>diagramas de flujo en Raptor</li>  diagramas de flujo en Raptor
<li>Scratch</li>
<li>Visual Basic</li>  Scratch
<li>html5 y CSS3</li>
<li>PHP</li>  Visual Basic
<li>My SQL</li>
</ul>  html5 y CSS3
 PHP
 My SQL

Nixon Waldemar Ventura Farfán 22

Listas de definición: Se utilizan para definir términos. Las listas de definición se representan
con la etiqueta <dl>. Los términos de las mismas con <dt>. La definición de esos términos
comienza con <dd>.

Ejercicio No. 1 – Crear un recetario web

Nixon Waldemar Ventura Farfán 23

 BIBLIOGRAFÍA

EGRAFIA

https://blog.udemy.com/tutorial-de-xampp-como-usar-xampp-para-ejecutar-su-propio-
servidor-web/
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
http://www.virtualnauta.com/html-listas

Nixon Waldemar Ventura Farfán 24