Vous êtes sur la page 1sur 26

INTRODUCCIÓN

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.

Una página web está compuesta por:

 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>

Ahora vamos a analizar algunas de las instrucciones más comunes:

• <HTML> .- Es la instrucción que le indica al explorador que estamos creando una


página web.
• <HEAD> .- En esta sección podremos meter los códigos de diseño para la página
• <TITLE> .- Nos indica la sección en donde podremos poner el título de la página.
• <BODY> .- En esta sección es donde meteremos todo el contenido de la página.

El contenido básico que cualquier página necesita es el siguiente:

<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

El documento va a aparecer como un documento de internet

Ejercicio: Crear y guardar una página web básica

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

Para visualizar la página abrimos el documento de internet y el resultado se muestra a


continuación:
MODIFICANDO NUESTRA PÁGINA WEB
Regresemos a la carpeta en donde guardamos index.html y para poder modificar la página es
necesario abrirla con el block de notas.

Entonces:

• nos posicionamos sobre el documento,


• dar click derecho
• abrir con block de notas

Otra opción sería abrir primero el block de notas y abrir la página desde ahí́.

** TIP: si cuando busquemos el documento, no lo encontramos, seleccionar la opción, mostrar:


“todos los archivos” o “todas las páginas web”.
TÍTULOS o HEADERS
Existen 6 estilos o formatos predeterminados en HTML, para aplicar a títulos dentro del texto.
Como lo explicamos anteriormente, al aplicar un estilo este se seguirá aplicando al texto hasta
que se cierre (*por eso es importante determinar hasta donde queremos que se siga utilizando
el estilo y cerrar la etiqueta).

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.

Ejercicio: Copia las líneas de código y visualízalo en el explorador

NEGRITAS, CURSIVA Y SUBRAYADO


Así como en Word, Excel o Power Point tenemos opciones para aplicar efectos en los textos, como

son negritas, cursiva o subrayado.

En HTML tenemos las mismas opciones pero con líneas de código, para esto utilizaremos las
siguientes instrucciones:

<B> NEGRITAS </B>

<I> CURSIVA </I>

<U> SUBRAYADO </U>

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.

** No es necesario cerrar esta instrucción ya que su trabajo es simplemente dar un salto de


línea.

Ejercicio: Escribir un texto que contenga todos los elementos.


PÁRRAFOS
Cuando el salto de línea no es suficiente (<BR>) tenemos una instrucción que nos sirve para
separar el texto en párrafos, esto para darle más orden a nuestra página web.

La instrucción utilizada es <P>.

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

** Seguidas de estas instrucciones es necesario poner la cantidad de espacio que requerimos


para la sangría por ejemplo: 20 puntos
Instrucción para indicar sangría
Instrucción para iniciar un párrafo

<p style="text-indent:20"> aquí empezamos a escribir </p>

Instrucción para indicar que vamos a


cambiar el estilo normal Tamaño de la sangría Nuestro texto Cierre de instrucción inicial
Ejercicio: Escribe 2 partes de texto divididas en párrafos

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.

<body bgcolor=cyan Text=Red Link=Yellow Vlink=Gray> (estamos indicando que el


fondo de pantalla será color “cyan” y modifica el texto de toda la página a “rojo” y
agregamos la instrucción LINK, para indicar que los enlaces o hipervínculos serán de color
“amarillo” y una vez que sean visitados cambiaran a “gris”)

Glosario de colores

Por nombre: http://es.kioskea.net/contents/html/htmlcouleurs.php3

Por RGB: http://www.w3schools.com/html/html_colors.asp


Hipervínculos externos: enlace a otra página de internet

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:

<a target="_blank" href="http://www.google.com/">Google</a>

<a target="_self" href="contacto.html">Contacto</a>

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>

Además podemos aplicar combinaciones a estos modificadores (con el signo +) a cada


constante de color o bien puede utilizar 2 modificadores con el signo /.
Ejemplo: <BODY bgcolor=blue/red>

Ejemplo: <BODY bgcolor=blue+red>

** 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).

Ejemplo: <BODY bgcolor=”#0FFFFF”>

Ejercicio: Determinar que color es #11550 __________________


IMAGEN DE FONDO
No sólo podemos aplicar colores para el fondo de nuestra página web, también podemos insertar
una imagen de nuestra preferencia con el modificador “img background”.

**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.

Ejemplo: <body img background=background.jpg>

“background.jpg” es el nombre de nuestra imagen de fondo

Ejercicio: Buscar en Google una imagen y ponerla como fondo

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">

En esta instrucción se da por defecto que la imagen que se inserta tiene la


extensión “.JPG”. Para insertar otro tipo de imagen sólo deberá́ especificar la el nombre y
extensión correspondiente.
Si es necesario controlar la dimensión o tamaño de la imagen insertada, sea para aumentarla
o para disminuirla, contamos con instrucciones para poder manipularla.
Si queremos modificar su posición, contamos con:
<align =left =right =center>

Para controlar el tamaño de las imágenes, use las instrucciones:


- para controlar la altura <height=#>
- la anchura de la imagen<Width=#>

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.

<a href="contacto.htm"><img src="contacto.jpg" ></a>

- La primera instrucción indica el nombre de la página a la que se desee acceder


cuando se haga clic en el hipervínculo.
- La segunda instrucción inserta la imagen en la página Web.

Ejercicio: Repaso general!

 Debemos de tener hasta el momento, 1


carpeta para las imágenes y por lo menos 5
páginas web diferentes.
Numeración y viñetas
Al igual que en un procesador de textos u otros programas, el lenguaje HTML permite aplicar
viñetas; a excepción de que se cuenta sólo con tres tipos diferentes de viñetas.

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>.

Podemos modificar la forma de contar con el modificador “type” dándole la instrucción “ I ”, “


i ”, “ A “, “ a ”.

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>

<title> EXAMEN </title>

</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>

<dd>Ciencia que estudia el procesamiento, organización, almacenamiento y


transferencia de la información de a través de una computadora.

<dt>
<b>Computadora</b>
</dt>

<dd>Máquina electrónica capaz de realizar cualquier actividad con la ayuda del


software.
<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>

<dd>Es la parte inteligente de la computadora. Esta capacidad de la computadora


de interpretar, calcular y analizar datos la obtiene mediante los programas diseñados
para este fin. Por ejemplo, para cálculos financieros se utiliza Microsoft Excel; para
películas Studio 3DMax y para animaciones, Flash, etc.

</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.

<table> ….. </table>

Estas dos instrucciones indican al explorador de Internet que en este lugar de la página se va
a crear una tabla.

Uso de encabezados de tabla


Después de que se haya indicado al explorador de Internet que se va a crear una tabla, es
necesario definir cuántas columnas de tabla se desean utilizar. Para ello se deben utilizar
las instrucciones <TH>, las cuales indican los encabezados de tabla. TH = Table Header

<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.

Definición de filas y bordes


Para utilizar filas en una tabla, se debe usar la instrucción TR y TD.
TR = Table Row - identifica la fila de datos, y TD = Tabla Data - es la fila de los datos.
Si se desea mostrar la cuadrícula de la tabla, sólo debe usar el modificar “Border”,

<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.

<Table Border=1 Width=50%>

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:

<table Border=1 Width=100% bgcolor=cyan>

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.

<table border=1 width=100% img background="imagen.jpg">

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>

<td bgcolor="yellow"> Ana Mariela Domínguez Vázquez </td>

<td bgcolor="magenta"> Paulina Romero Domínguez </td>

</table>
Combinación de celdas
La expresión ColSpan indica cuántas columnas se van a combinar.

Estas celdas están combinadas ¡!

Si se desean combinar filas se debe utilizar la expresión RowSpan.

<td width="100%" colspan="3" height="34">Fila combinada</td>

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.

Ejemplo: si quisiéramos recibir el nombre, dirección y


teléfono de las personas que nos visitan, los usuarios
al entrar a la página llenan el cuestionario de
y pulsan la tecla: ENVIAR.
Estructura de un formulario
La estructura general de un formulario:

1. Instrucción de inicio
Método POST = enviar correo, postear información
Instrucción de inicio para formularios

Indica la acción que debe efectuar el formulario


La acción a realizar es MAILTO = enviar correo

<FORM ACTION="mailto:tucorreo@correo.com.mx" METHOD="POST" ENCTYPE="TEXT/PLAIN">

Indica que vamos a utilizar “cierto” método

El correo a donde queremos que se envíe la información

** ENCRYPTATION TYPE : tipo de encriptación – la forma en que se va a enviar la información .


Estamos indicando que la información sea enviada en texto y sin codificación alguna, que
sea perfectamente legible al momento de obtener este correo.

** Existe 2 tipos de métodos el “POST” y el “GET” la diferencia esencial es que el método


POST obtiene la información y la agrega como el cuerpo del correo y con el método GET
podemos enviar la información obtenida a una base de datos en SQL por ejemplo.

2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos. (ejemplo:
nombre, teléfono, dirección …)

3. Botones de envió y de borrado.

4. Etiqueta de cierre </FORM>

Elementos para introducir los datos


La introducción de los datos se consigue por medio de la etiqueta:

<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">

En donde:

Xxx - es la palabra que indica el tipo de introducción.


Yyy - es el nombre que le asignamos nosotros a la variable de introducción del dato.

Zzz - es la palabra asociada a un elemento.

Ejemplo:

<FORM ACTION="mailto:correo@correo.com.mx" METHOD="POST" ENCTYPE="TEXT/PLAIN">

Escribe tu apellido:

<BR><INPUT TYPE="text" NAME="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.

La longitud de este campo es por defecto de 20 caracteres. Se puede modificar dicha


longitud incluyendo en la etiqueta el atributo SIZE="número".

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".

<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">

Esta instrucción limita el campo a 10 caracteres visibles y 12 caracteres de entrada


máxima.

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.

<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">


Áreas de texto
Cuando se necesite utilizar grandes áreas de texto como comentarios, explicaciones de
registro, contratos, licencias, etc., se debe utilizar un control de área de texto. Esto se
consigue con la etiqueta de inicio:

<TEXTAREA NAME="yyy" ROWS="número" COLS="número">

ROWS representa el número de filas, y COLS el número de columnas. Se debe finalizar con la
etiqueta de cierre </TEXTAREA>

Botones de envió y borrado


Un elemento muy importante que permiten manipular la información de los formularios son los
botones de Envío y Borrado. Para aplica a un formulario un botón de envío, se deberá́
introducir la siguiente instrucción.

<INPUT TYPE="submit" VALUE="Texto del botón">

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:

<INPUT TYPE="reset" VALUE="Texto del botón">


Ejemplo de formulario
Para ilustrar lo dicho hasta ahora, haremos un formulario que permita al usuario introducir
alguna información mediante cajas de texto, áreas de texto y botones.

Vous aimerez peut-être aussi