Complejo Educativo “Pedro F.

Cantor”
Calle Unión #6, Bo. Santa Cruz, Izalco
Código de Infraestructura 10635
Tel. 2453-5101 cantor10635@yahoo.com

AGENDA DE CLASE
Tema (Saber-Saber): Fundamentos HTML.
Asignatura: _INFORMÁTICA EDUCATIVA. UNIDAD: _______2_______
PERÍODO I
FECHA: DEL 6 AL 17 DE JUNIO.
.

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.

Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el
resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o
htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Los
navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web
resultantes del código interpretado.

En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de páginas web. Se creó con objetivos
divulgativos, orientado a la actividad académica, en el que el contenido de las páginas era más importante que el diseño.
Pero esta versión del HTML carecía de muchas herramientas que permitieran controlar el diseño de las páginas y añadir
contenido multimedia, por lo que Netscape (cuyos navegadores eran los más utilizados por aquellos años) comenzó a
incluir nuevas etiquetas que no existían en el estándar.

El comité encargado de establecer los estándares dentro de Internet, comenzó a trabajar en el borrador de una nueva versión
de HTML, el borrador de HTML 3.0.
Pero este borrador resultó demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes,
y la creación de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compañías se
unieron para formar un nuevo comité encargado de establecer los estándares del HTML. Este comité pasó a llamarse W3C.

En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar incluía las mejoras proporcionadas por los
navegadores Internet Explorer y Netscape Navigator, que ya habían realizado extensiones sobre el estándar HTML 2.0.
En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y
los scripts. En septiembre de 2001 se aprobó el estándar HTML 4.01. Las etiquetas o marcas delimitan cada uno de los
elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o
cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la
etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es:
<identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden
tomar cualquier valor propio del usuario, o valores HTML predefinidos.

La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta,
y no contiene atributos. Su sintaxis es: </identificador>. Cada uno de los elementos de la página se encontrará entre una
etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta
de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.
A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a
www.cantor.com</font></p>

Este código daría como resultado el siguiente texto:

Bienvenidos a www.cantor.com
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la
etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos
cerrar la etiqueta <font..>.
 Complejo Educativo “Pedro F. Cantor”
Calle Unión #6, Bo. Santa Cruz, Izalco
Código de Infraestructura 10635
Tel. 2453-5101 cantor10635@yahoo.com
Crear una página web.
Lo primero que hacemos es abrir el Bloc de notas. Para abrirlo,
menú Inicio, Programas, Accesorios, opción Bloc de notas.
Seguidamente introducimos, en el documento en blanco, el
texto siguiente:
<html>
<head>
<title>MI PRIMERA PAGINA</title>
<body bgcolor="#FFCC99">55555555555w
<font color="#CC3300" size="5">Hola, estoy haciendo
pruebas.</font>
</body>
</html>

Guardamos el documento con la

extensión html, con el nombre
“miprimpag.html”.
Pulsando dos veces sobre el icono del
archivo miprimpag.html, éste debería
abrirse automáticamente en el navegador
que tengas instalado en tu ordenador. El
navegador deberá mostrar una página
como la de la izquierda.

Si observamos la barra de título del

navegador, veremos que el título de la página es
MI PRIMERA PAGINA.
Este título ha sido establecido por la línea <title>MI PRIMERA PAGINA</title>.
El color de fondo de la página ha sido establecido por la línea <body bgcolor="#FFCC99">.
El texto “Hola, estoy haciendo pruebas”, se ha insertado a través de línea <font color="#CC3300" size="5">Hola, estoy
haciendo pruebas.</font>.

La estructura básica de una página es:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

ETIQUETAS

Etiqueta Descripción
<!-- --> Etiqueta para escribir comentarios en HTML.
<!DOCTYPE> Declaración del tipo de documento.
<a> Etiqueta para incluir enlaces (links) hacia otras páginas o documentos.
<abbr> Indicar una abreviación o acrónimo.
<acronym> Indicar un acrónimo.
<address> Etiqueta para incluir información de contacto.
<applet> Insertar un applet en la página html.
<area> Define un área de una imagen en donde se puede hacer clic.
<article> Etiqueta semántica de HTML5 que indica la ubicación de un artículo.
<aside> Etiqueta semántica de HTML5 para indicar una barra lateral
<audio> Insertar audio.
<b> Convierte el texto a negritas.
<base> Definir una URL raíz para los enlaces relativos de nuestra página.
<basefont> Especifica tamaño, color y fuente por defecto de la página.
<bdi> Aísla parte de un texto que podría estar en otro idioma o formato.
<bdo> Cambia la dirección del texto.
<big> Aumenta el tamaño del texto.
<blockquote> Citar contenido de otro sitio web dentro de un bloque.
 Complejo Educativo “Pedro F. Cantor”
Calle Unión #6, Bo. Santa Cruz, Izalco
Código de Infraestructura 10635
Tel. 2453-5101 cantor10635@yahoo.com
<body> Etiqueta que define el cuerpo de un documento HTML.
<br> Indica un salto de línea.
<button> Crear un botón en donde se puede hacer clic.
<canvas> Etiqueta para definir un contenedor o lienzo para crear gráficos.
<caption> Define el título de una tabla.
<center> Centra el contenido.
<cite> Cita o referencia de algún libro, película, artículo o algún trabajo de otro autor.
<code> Indica que el texto es código fuente de algún lenguaje informático.
<col> Especifica propiedades de atributos de las columnas de una tabla.
<colgroup> Define un grupo de columnas de una tabla para darles formato.
<datalist> Crea una lista de opciones para una caja de texto input.
<dd> Define un término en una lista de definiciones.
<del> Indica invalidez a un fragmento de texto tachándolo con una línea horizontal.
<details> Especifica detalles que el usuario puede desplegar u ocultar.
<dfn> Marca un término o definición.
<dialog> Mostrar una caja de diálogo.
<dir> Define una lista de directorios.
<div> Crea un bloque.
<dl> Define una lista de definiciones.
<dt> Define un término en una lista de definiciones.
<em> Enfatizar parte del texto.
<embed> Crea un contenedor para una aplicación externa.
<fieldset> Agrupa campos de un formulario relacionados entre sí.
<figcaption> Escribir una leyenda o texto asociado a una figura o imagen.
<figure> Define un contenedor de figuras como imágenes, fotos, diagramas, etc.
<font> Da formato al texto (fuente, tamaño, color, etc.).
<footer> Define el pie de página.
<form> Para definir un formulario.
<frame> Define una ventana o frame de una página externa dentro de un frameset.
<frameset> Define un frameset dentro del cual puede haber varios frames.
<h1> ... <h6> Encabezados de HTML
<head> Etiqueta que define la cabecera de un documento HTML.
<header> Para indicar el encabezado de una página.
<hr> Indica un cambio en la temática de la página y queda señalado con una línea horizontal.
<html> Etiqueta que indica el inicio y final de un documento HTML.
<i> Muestra el texto en itálica.
<iframe> Define una ventana o frame interno.
<img> Etiqueta para insertar imágenes.
<input> Añade un cuadro de entrada de texto a un formulario.
<ins> Indica que el texto ha sido insertado en lugar de otro.
<kbd> Indica texto introducido por medio del teclado.
<keygen> Encriptar datos de un formulario.
<label> Define una etiqueta relacionada a un elemento <input> de un formulario.
<legend> Escribe un nombre o leyenda en un cuadro generado por la etiqueta <fieldset>.
<li> Define un elemento de una lista.
<link> Realiza un enlace entre la página y un elemento o recurso externo.
<main> Indica el contenido principal de una página.
<map> Permite dividir una imagen para hacer clic en distintas áreas de la misma.
<mark> Remarca un texto de un color.
<menu> Permite crear un menú personalizado al hacer clic derecho con el mouse.
<menuitem> Define un elemento de un menú creado con la etiqueta <menu>.
<meta> Define los metadatos que van dentro de la etiqueta <heaad>
<meter> Indica una medida dentro de un rango representada por una barra progresiva.
<nav> Define un grupo de enlaces de navegación.
<noframes> Muestra un contenido alterno en caso de que los frames no sean soportados.
<noscript> Muestra un contenido altero en caso de que un script no sea soportado.
<object> Insertar objetos embebidos como audio, video o aplets.
<ol> Define una lista ordenada numéricamente o alfabéticamente.
<optgroup> Agrupa opciones relacionadas en una lista desplegable.
<option> Define una opción en una lista desplegable.
<output> Indica el resultado de salida de una operación.
<p> Para escribir un párrafo.
<param> Define parámetros de un objeto de la etiqueta <object>.
 Complejo Educativo “Pedro F. Cantor”
Calle Unión #6, Bo. Santa Cruz, Izalco
Código de Infraestructura 10635
Tel. 2453-5101 cantor10635@yahoo.com
<pre> Etiqueta para escribir texto pre-formateado.
<progress> Etiqueta para insertar una barra progresiva.
<q> Encierra un segmento de texto entre comillas.
<s> Tacha texto con una línea horizontal.
<samp> Indica que el texto es un ejemplo de salida de un programa de computadora.
<script> Etiqueta para insertar un script.
<section> Define una sección de la página.
<select> Define una lista desplegable en un formulario.
<small> Etiqueta que cambia el texto a un tamaño más pequeño.
<source> Indica la dirección de un recurso de audio o video.
<span> Define una sección de un texto.
<strike> Indica invalidez a un fragmento de texto tachándolo con una línea horizontal.
<strong> Marca texto importante del documento en negrita.
<style> Etiqueta para agregar un estilo CSS dentro del documento HTML.
<sub> Indicar un subíndice.
<summary> Define un encabezado visible dentro de una etiqueta <details>
<sup> Indicar un superíndice.
<table> Inserta una tabla en la página.
<tbody> Define el cuerpo de una tabla.
<td> Agregar una columna en una tabla
<textarea> Define un área de texto para ingresar texto desde un formulario.
<tfoot> Indica el contenido que forma el pie de una tabla.
<th> Agrega una "columna encabezado" a una tabla.
<thead> Define el encabezado de una tabla.
<time> Indica una hora o fecha.
<title> Indica el título de la página.
<tr> Inserta una fila o renglón en una tabla.
<track> Especifica tracks de texto para elementos multimedia de audio o video.
<tt> Texto teletipo.
<u> Definir texto subrayado.
<ul> Define una lista
<var> Indica que el texto es una variable.
<video> Insertar un video.
<wbr> Indica un posible cambio de línea en el texto según el tamaño del contenedor.

Colores para html.

En esta dirección podemos encontrar el código de color que estamos buscando.

https://htmlcolorcodes.com/es/

Colores RGB
Los colores en HTML se especifican mediante el estándar RGB (Red Green and Blue). Este estándar indica que una
combinación de los tres colores básicos: rojo, verde y azul puede dar lugar a cualquier otro color.
Los valores que se les da al RGB son valores hexadecimales que van desde el 00 hasta el FF. Al valor del color se le
antepone una almohadilla.
De esta forma un color rojo sería aquel que solo tiene activado el Red, el verde solo la parte del Green y el azul la parte
del Blue. Así los colores básicos en HTML serán:
Rojo #FF0000
Verde #00FF00
Azul #0000FF

Otras combinaciones generales de colores serían el negro (activando todos los colores), el blanco (desactivando todos los
colores), amarillo (combinando Red y Blue), fucsia (combinando todo el rojo y todo el azul).

Negro #FFFFFF
Blanco #000000
Amarillo #FFFF00
Fucsia #FF00FF
 Complejo Educativo “Pedro F. Cantor”
Calle Unión #6, Bo. Santa Cruz, Izalco
Código de Infraestructura 10635
Tel. 2453-5101 cantor10635@yahoo.com

Actividad:
1. Copiar agenda a la computadora.
2. Crear un sitio Web con un mínimo de 3 páginas web.

Siguiente tema: Creación Web