Académique Documents
Professionnel Documents
Culture Documents
HTML es un lenguaje de programación que nos permite presentar texto de forma estructurada
y agradable, dándonos la oportunidad de exhibir imágenes, videos y música en una página
web. Las páginas web se componen por medio de códigos preestablecidos. Este tipo de lenguaje
es utilizado para poder visualizar contenido en la web de manera gráfica.
Básicamente lo que vamos a aprender en este curso es a estructurar, por medio del lenguaje,
el contenido de nuestra página y darle diseño.
HERRAMIENTAS
- Procesador de Texto Notepad (Windows) y TextWrangler (Mac)
- USB mínimo 512Mb
- Domino (www.tunombre.com)
- Servidor (almacenamiento de archivos en línea)
ESTRUCTURA BÁSICA
La estructura básica que estaremos estudiando, nos ayuda a establecer los límites de dónde
y cómo podremos poner el contenido de nuestra página. Una de las ventajas que tenemos es
que al momento de darle mantenimiento y/o modificar el contenido de nuestra página, será
más sencillo encontrar errores o el contenido a modificar.
Instrucciones – Le llamamos instrucciones a los enunciados entre los símbolos de “<” y “>”
Cada instrucción tiene un principio y fin. Es importante marcar el fin de cada
instrucción para que esta, sea llevada a cabo.
Para terminar una instrucción, usamos el mismo enunciado pero con una diagonal
“/” antes del enunciado
o Por ejemplo:
Inicio de la instrucción <body>
Cuerpo de la instrucción
Fin de la instrucción </body>
<HTML>
<HEAD>
<TITLE> Primera página </TITLE> </HEAD>
<BODY>
...
</BODY>
</HTML>
A cada línea de texto, le llamamos línea de código; estas líneas son las más básicas que
pueden existir en una página web no importando que tan sencilla o que tan compleja sea.
COMO GUARDAR UNA PÁGINA WEB
Una vez que hayamos terminado de escribir las líneas de código para nuestra página web es
necesario guardarlo con el formato correspondiente. Esto se hace especificando la
terminación del documento como ¨.html¨ para indicar que es una página web. Ejemplo:
index.html
Abre el Bloc de notas (lo puedes encontrar en: Inicio / Todos los programas / Accesorios / Block
de notas) y copia el siguiente código que se muestra. Cuando termines de capturar el código,
guárdalo como index.html
Entonces:
Otra opción sería abrir primero el block de notas y abrir la página desde ahí́.
Los estilos de títulos se enumeran de H1 a H6, teniendo que H1 es el más grande y H6 el más
pequeño; más adelante veremos que también existe la opción de “FontSize” para modificar el
tamaño de los textos.
A continuación se muestra el código y el resultado de la utilización de títulos en una página
Web.
En HTML tenemos las mismas opciones pero con líneas de código, para esto utilizaremos las
siguientes instrucciones:
También contamos con la instrucción <BR> la cual nos ayudara a insertar un salto de línea,
sin esta instrucción nuestro texto quedaría todo corrido y perdería el sentido.
Podemos combinar esta instrucción con otras instrucciones, por ejemplo para hacer que nuestro
párrafo este alineado a la izquierda (<LEFT>), centrado (<CENTER>), a la
derecha (<RIGHT>) o justificado (<JUSTIFY>). Esto nos va a indicar la posición que va
a tomar el texto en nuestra pantalla.
Otra forma de hacer separaciones en nuestro texto es el comando <HR>, esta instrucción
trazara una línea horizontal. A esta línea le podemos hacer algunas modificaciones, por
ejemplo cambiar el color, con la instrucción:
<HR COLOR = ________ >
(*Escribimos en la línea el nombre del color que queremos, por ejemplo: “blue”)
Para aplicar sangría en la primera línea se usa el modificar text-indent y para aplicar
sangría en párrafo se usa el comando Blockquote.
** Utilizamos la instrucción style para indicar que vamos a modificar el estilo del parrafo
HIPERVÍNCULOS
Los hipervínculos son ligas que nos permiten direccionar a otra página web, archivos, descargas
y más. Este hipervínculo puede estar presentado en forma de texto o en forma de imagen.
Glosario de colores
Dentro de nuestra página podemos crear enlaces para visitar otras páginas. Entonces podemos
crear un hipervínculo que le permita dirigirse a esa página de la siguiente manera:
Cuando accede a una página relacionada, puede controlar la ventana donde se mostrará el
contenido de esta. Por ejemplo, puede mostrar la siguiente página en una ventana diferente o
en la misma venta.
_blank - Esta instrucción indica a HTML que la siguiente página que se abrirá́ utilizará una
ventana nueva para su contenido.
_self – Esta instrucción indica a HTML que la página se abrirá en la misma ventana.
Hipervínculos locales con marcadores
Este tipo de hipervínculos son utilizados para moverse dentro de la misma página, es decir si
tenemos una página que tiene varias secciones dentro de la misma. La instrucción con la que
debemos indicar es:
<a href=”#Navega1”>
Siempre recordando que este marcador debe ser exactamente el mismo en la sección en
donde encontramos el texto para que funcione correctamente.
<a name=”#Navega1”>
COLOR DE FONDO
Podemos modificar el color de fondo en nuestra página utilizando la instrucción: “bgcolor”
dentro de la instrucción principal <BODY>.
Ejemplo: <BODY bgcolor=blue>
** Estos colores son muchas veces limitados, ya que puede ser que no conozcamos el nombre en
inglés del color que queremos usar.
Para esto, contamos con la opción de poner el “nombre” del color en código hexadecimal,
generalmente este número hexadecimal es sacado de tablas en donde encontramos más de
10 millones de colores. Estas combinaciones van desde “#000000” (negro) hasta “#FFFFFF”
(blanco).
**Antes de poder aplicar este modificador es necesario tener la imagen que vamos a poner de
fondo dentro de la carpeta, en donde tenemos guardada la página.
**Es recomendable crear una carpeta extra con el nombre de “imágenes” para mantener una
organización y no perder el orden mientras avanzamos con más páginas.
COLOR DE TEXTOS
Para darle una mejor vista a nuestra página podemos modificar el color del texto y/o
hipervínculos que existan dentro de nuestro sitio. Existen distintas formas de hacerlo, a
continuación explicamos algunas:
<body bgcolor=cyan Text=Blue> (estamos indicando que el fondo de pantalla será color
“cyan” y modifica el texto de toda la página a “azul”)
Ejercicio: Modificar el color del texto de tu página
Inserción de imágenes
En una página Web puede insertar cualquier imagen. Para insertar una imagen, debe utilizar
la siguiente sintaxis:
<img src="imagen.jpg">
También puede usar la instrucción <Border> con un valor mayor que 0, para aplicar un marco
alrededor de la imagen. Además, se utiliza el modificador ALT para poder especificar un
mensaje o pista, cuando señale con el mouse a la imagen.
Para utilizar imágenes como hipervínculos (que cuando demos click en la imagen nos lleve a
otro lugar), se debe usar la misma instrucción que para los hipervínculos de texto, a excepción
de que a continuación de la instrucción se debe incluir la instrucción de inserción de
imágenes.
Viñetas
Para aplicar viñetas debe hacerse uso de la instrucción <ul>.
Esta instrucción indica al explorador que vamos a crear una lista con viñetas. Por cada
símbolo o punto utilizado debe usar la instrucción <li>, la cual se corresponde con cada línea
de dato de la lista.
** No olvidemos cerrar la instrucción. </li>
Finalmente debe cerrar la lista de viñetas con la instrucción </ul>. Podemos modificar la lista
con el modificador “type” e indicar opciones como “circle” (circulo), “square” (cuadrado); y el
color con “style” donde tenemos que indicar “color:blue”
Numeración
Además de aplicar viñetas a una lista, puede hacer sub-listas dentro una lista si usa una
instrucción <UL> dentro de otra. Asimismo, puede usar numeración automática para genera
listas de datos numeradas a partir de un valor.
Para usar numeración debe aplicar la instrucción <OL> al principio de la lista y las
instrucciones, igual que la anterior, <li> para cada línea de dato; finalmente, debe cerrar la
numeración con la instrucción </OL>.
Para que la página pueda mostrar acentos se usa éste código <meta charset=”UTF-8”>
Términos y definiciones
Para facilitar el diseño de índices, vocabularios, diccionarios, enciclopedias y temas afines,
HTML cuenta con instrucciones que permiten utilizar una palabra como término definido y una
sección asociada que es la definición del término. Es ideal para generar vocabularios, tablas
de contenido, diccionarios, etc.
<DL>
<DT>Termino</DT>
<DD>Definición del término que puede ser tan largo como el usuario
desee.</DD> </DL>
Ejercicio
<html>
<head>
</head>
<body bgcolor=blue/red>
<h1>Diccionario de informática</h1>
<center>
<img src="http://bit.ly/udygD4" width=150 height=150/>
</center>
<hr>
<dl>
<dt>
<b>
<a href="http://bit.ly/jr2Xjd"/>Informática</a>
</b>
</dt>
<dt>
<b>Computadora</b>
</dt>
<b>Hardware</b>
</dt>
<dd>Son todos los componentes físicos de una computadora, como el CPU, el Mouse, la
impresora, los componentes internos, como la memoria, el microprocesador, etc.
<dt>
<b>Software</b>
</dt>
</body>
</html>
Tablas
Una tabla está formada por filas y columnas de celdas en las que se puede insertar texto y
gráficos. Se pueden utilizar y personalizar las tablas de varias formas con el fin de hacerlas
más atractivas y fáciles de leer. Se debe utilizar una tabla para presentar la información en
formato de cuadrícula, por ejemplo horarios, información acerca de productos, tarifas,
calificaciones de alumnos, etc.
Filas
columnas
Creación de una tabla
Para crear una tabla se debe usar la instrucción “Table”, seguida de medidas que indican
la anchura, el color o imagen de fondo, etc.
Estas dos instrucciones indican al explorador de Internet que en este lugar de la página se va
a crear una tabla.
<Table>
<TH>Columna 1</TH>
<TH>Columna 2</TH>
<TH>Columna 3</TH>
</Table>
Estas líneas de código le indican al explorador que usaremos una tabla de tres columnas.
Cada identificador TH que utilice indica una columna de dato que desee representar en la
tabla.
<Table Border=2>
Control del ancho de la tabla
Cuando se crea una tabla sin parámetros, ésta se ajusta, automáticamente, al ancho de los
campos escritos en los encabezados. Si se desea crear una tabla más amplia, se debe usar el
modificador “Width” con un valor de porcentaje.
Para aplicar color de fondo a la tabla use el modificar “bgcolor” seguido de una constante
de color. Por ejemplo, para aplicar color de fondo cyan a la tabla, use la siguiente instrucción:
Para aplicar una imagen de fondo a una tabla, deberá́ usar la instrucción “Img Background”
que usamos en el fondo de la página. La siguiente línea de código muestra la forma correcta
de aplicar todos los modificadores mencionados.
Control de celdas
Digamos que la celda es en sí, una instrucción TD de la tabla. Es decir cada celda es un
campo en particular dentro la tabla. Para ello, si queremos aplicar un color distinto a la celda
de los nombres de los alumnos, la instrucción debe estar mencionada, dentro de esa
instrucción:
<table border=3>
</table>
Combinación de celdas
La expresión ColSpan indica cuántas columnas se van a combinar.
Formularios
Una manera para que los visitantes de nuestra página se puedan comunicar con nosotros es por
medio de un enlace a nuestra dirección de e-mail, con lo que recibiríamos los mensajes vía e-
mail.
Los formularios son campos a llenar por los visitantes; la información capturada en los campos se
nos envían directamente a nuestro correo electrónico.
1. Instrucción de inicio
Método POST = enviar correo, postear información
Instrucción de inicio para formularios
2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos. (ejemplo:
nombre, teléfono, dirección …)
En donde:
Ejemplo:
Escribe tu apellido:
</FORM>
Este segmento de código permite al usuario escribir su apellido mediante un cuadro de texto.
Si el usuario introduce su apellido, recibiremos en nuestro e-mail, algo como esto:
Apellido=González, en lugar de sólo el apellido.
Por otra parte, cualquiera que sea la longitud del formulario, si no se indica nada, el usuario
puede introducir el número de caracteres que desee. Se puede limitar la longitud máxima,
incluyendo en la etiqueta el atributo MAXLENGTH="número".
Puede también convertir el texto introducido a caracteres comodines para simular una
contraseña, ello convierte la expresión del cuadro de texto en una serie de asteriscos.
ROWS representa el número de filas, y COLS el número de columnas. Se debe finalizar con la
etiqueta de cierre </TEXTAREA>
En donde Texto del botón es el texto que queremos que aparezca en el botón.
Sin embargo, además de colocar en nuestro formulario un botón de envió, deberá aplicarse un
botón que permita restablecer los cuadros de texto así́ como las opciones predeterminadas
del formulario. Generalmente esto se consigue con la siguiente instrucción: