INTRODUCCIÓN A
HTML
--
¿Qué es HTML?
• Es el lenguaje con el que se escriben las páginas
Web.
• Una página es un archivo donde esta contenido el
código HTML.
• Éstas páginas tienen una extensión .html o .htm
(indiferente cual de los dos se use).
Anatomía de una URL
Componentes de HTML
• Elementos
– Identifican las diferentes partes de HTML a través
del uso de “etiquetas”.
• Atributos
– Información acerca de la instancia de un elemento.
• Entidades
– Caracteres no ASCII, tales como: @, letras con
acento como É…
Estructura Básica
• Delimitado del documento por las etiquetas
<html> y </html>, dentro de estas:
– El encabezado, <head> </head> Dentro de estas
etiquetas de índole informativo, por ejemplo, el
titulo de la página.
– El Cuerpo, <body> </body> Dentro de estas se
coloca todo el texto y las imágenes que conforma la
página.
Componentes de HTML
Alineación de Párrafos
• Alineado a la izquierda
<p align="left">Texto alineado a la izquierda</p>
• Centrado
<p align="center">Texto alineado al centro</p>
• Alineado a la derecha
<p align="right">Texto alineado a la
derecha</p>
Componentes HTML: Atributos
• Permiten variar en como un elemento muestra su
contenido.
• En el ejemplo de la figura el atributo src especifica la
ubicación de la imagen.
<img src=”red_grapes.jpg” width=”75”
height=”100” alt=”Red Grapes” />
• La estructura general es:
<etiqueta atributo=”valor”
atributo=”valor”>
Componentes HTML: Elementos
• Se componen de elementos llamados etiquetas (tags) y el
contenido dentro de los éstos.
• Hay dos tipos de elementos:
– Con par de etiquetas <etiqueta>…</etiqueta>
• Se usan para párrafos, títulos, tablas, listas…Por ejemplo:
“<b>Texto en
Negrilla<b/>”
– Con una sola etiqueta <etiqueta/>
• Se usan en Saltos de línea, imágenes…
• Por ejemplo, para insertar una imagen:
<img src=”red_grapes.jpg” width=”75” height=”100” alt=”Red
Grapes” >
Componentes HTML: Entidades
• El navegador reemplaza las entidades por el
carácter adecuado.
• Cada entidad comienza con un ampersand (&)
y termina con un punto y coma (;)
• Ver ejemplo en la siguiente diapositiva…Las
entidades se muestran en negrilla.
Comentarios HTML
• Los comentarios insertan texto en el
código que no se mostrará en la
página web.
–Comienzan con la cadena <!--
–Terminan con la cadena -->
Ejercicio No. 1
• Abre el Bloc de Notas
• Copia el código de la diapositiva siguiente.
• Guarda el archivo con extensión .html ó .htm
– Para esto selecciona en el menú «Archivo» la opción
«Guardar Como…»
– En la ventana que aparece selecciona el directorio y coloca
el nombre, por ejemplo, MiPagina.html
• Ve al archivo y ejecútalo en tu navegador.
Estructura Básica - Ejemplo
<html>
<head>
<tittle> Mi Primera Página </tittle>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Esta es tu primera página en <b>Programación de
Software </b>.</p>
</body>
</html>
Ejercicio No. 2
• Escriba una página que contenga:
– 2 Párrafos centrados
– 3 Párrafos alineados a la derecha
– Un salto de linea triple
– 1 párrafo alineado a la izquierda
• Tips:
– Los saltos de línea los puede hacer con la etiqueta <br>
– Puede agrupar los párrafos con una misma alineación dentro de una
etiqueta
<div align="center">…párrafos…</div>
texto justificado html
En la etiqueta body o <p> vamos a agregar este parámetro:
style=“text-align: justify;” ——> es para justificar el texto
style=“text-align: center;” ———> es para centrar el texto
style=”text-align: left;” ——> es para llevar el texto a la
izquierda
style=”text-align: right;” ———> es para llevar el texto a la
derecha.
Como agregamos este parámetro, así: <body style=”text-align:
justify;”> y el resto queda igual.
Encabezados
• Hay Etiquetas utilizadas para los títulos. Van del
nivel 1 hasta el 6, así <h1>, <h2>…<h6>.
<html>
<head>
<title>Todos los
encabezados</title>
</head>
<body>
<h1>Encabezado de nivel
1</h1>
<h2>Encabezado de nivel
2</h2>
<h3>Encabezado de nivel
3</h3>
<h4>Encabezado de nivel
Atributos de la Etiqueta <body>
• bgcolor Establece el color de fondo de toda la
pagina.
<body bgcolor="#00CC00">
• background Permite indicar una imagen de fondo
para la pagina o el color de fondo.
<body background="ruta/archivo.gif o jpg">
• text Especifica el color del texto de la pagina. Por
defecto es negro.
<body text=“#FFFFFF”>
Atributos de la Etiqueta <body>
• link Color de los enlaces (Hipervínculos).
• vlink Color de los enlaces visitados.
• alink Color de los enlaces activos. Un enlace esta activo
en el instante que se pulsa.
<html> En el ejemplo, el
<body bgcolor=“Green” color de fondo
text=“#FFFFFF”> será verde y la
letra de color
<p>COLOR E LDA LETRA</P>
blanco.
</body>
</html>
Atributos de la Etiqueta <body>
• Leftmargin para indicar el margen a los lados de la
página. Válido para iexplorer.
• Topmargin para indicar el margen arriba y debajo de la
página. Para iexplorer.
• Marginwidth Lo contrario de leftmargin para Netscape.
(Margen a los lados)
• Marginheight Igual que topmargin, pero para Netscape.
(Margen arriba y abajo)
Formato del Texto
• Texto en Negrita
<strong>Texto</strong> ó
<b>Texto</b>
• Texto en cursiva
<i>Texto</i>
• Subrayado
<u>Texto</u>
Formateo del Texto
• Subíndices
<sub>Texto</sub>
• Supra índices
<sup>Texto</sup>
• Por ejemplo:
<sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS
Color, Tamaño y Tipo de Letra
• Se utiliza la etiqueta <font></font>
<font>Texto</font>
• Atributos de la etiqueta <font>
– face Permite indicar el tipo de letra
– size Tamaño de la letra del 1 al 7
– color Color del texto
• Por ejemplo:
<font size ="4" face="Comic Sans MS,arial,verdana"
color="Blue">Texto</font>
Ejercicio No. 3
• Realice una página Web que contenga:
– Un titular con encabezado de nivel 1, en itálica y color verde
oliva (Olive).
– Un segundo titular con encabezado de nivel 2, también de
color verde oliva.
– Todo el texto de la pagina deberá presentarse con una
fuente distinta de la fuente por defecto. Por ejemplo "Comic
Sans MS" y en caso de que esta no este en el sistema que se
coloque la fuente "Arial".
Listas Desordenadas
• Delimitadas por <ul></ul> (Unordered List).
• Cada elemento con <li></li>
• Por ejemplo:
<p>Programas del
SENA</p> Programas del
<ul> El SENA
resultado • Complementarios
<li>Complementarios :
• Técnicos
</li>
<li>Tecnicos </li> • Tecnológicos
<li>Tecnologicos</li>
Listas Desordenadas
• Delimitadas por <ul></ul> (Unordered List).
• Cada elemento con <li></li>
• Por ejemplo:
<p>Programas del SENA</p>
<ul> Programas del SENA
<li>Técnicos </li> El • Técnicos
<li>Tecnológicos </li> resultado • Tecnológicos
<li>Profesionales</li> : • Profesionales
</ul>
Con <ul type="valor"> se puede cambiar el tipo de viñeta.
Los valores posibles son: circle, disc, square.
Listas Ordenadas
• Delimitadas por <ol></ol> (Ordered List).
• Cada elemento con <li></li> Posibles valores de
atributo ‘type’:
• Por ejemplo: 1, Por números
a, Letras
<p>Reglas de comportamiento en A, Letras
Mayúsculas
el trabajo</p> i, Números
<ol> romanos
<li>El jefe siempre tiene la I, Números
razón</li> romanos en
Mayúscula.
<li>En caso de duda aplicar regla El atributo ‘start’
1</li> El permite indicar
</ol> resultado desde que numero
Reglas de comportamiento en el trabajo
: comienza la lista.
1. El jefe siempre tiene la razón
2. En caso de duda aplicar regla 1
Anidado
• Los elementos se pueden anidar.
• Por ejemplo las listas utilizan dos tipos de
elementos:
– <ul> Especifica una lista desordenada.
– <li> Denotan cada elemento de la lista.
Listas Anidadas
<p>Ciudades del
mundo</p>
<ul>
<li>Argentina
<ol> • Argentina
<li>Buenos Aires 1. Buenos Aires
El
<li>Bariloche resultado: 2. Bariloche
</ol> • Uruguay
<li>Uruguay 1. Montevideo
<ol> 2. Punta del Este
<li>Montevideo
<li>Punta del Este
</ol>
</ul>
Tablas en HTML
<table> y </table> son las etiquetas donde está contenida la
tabla
<tr> y </tr> son las etiquetas que indican el comienzo y fin
de una fila (<th> y </th> si es una fila de cabecera)
<td> y </td> señalan una celda.
Atributos para celdas y filas
• Align Alineación del contenido
• Valign top, middle, bottom
• Bgcolor Color de celda
• Bordercolor Color del borde
• Background Imagen de fondo para celda
• Height Alto de la celda
• Width Ancho de la celda
• Colspan Combinar columnas
• Rowspan Combinar filas
Tablas en HTML
<table border=‘1’>
<tr>
<td>Celda 1, Fila Celda 1, Fila 1 Celda 2, Fila 1
1</td>
Celda 1, Fila 2 Celda 2, Fila 2
<td> Celda 2, Fila
1</td>
</tr>
<tr>
<td> Celda 1, Fila
2</td>
<table width="100%" border="1" cellpadding="10" cellspacing="5"
bordercolor="#000000">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este texto está alineado
al centroverticalmente y a la izquierda horizontalmente</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
<table border width="60%" align="center"
bgcolor="#ffffcc">
<caption>Alineaciones de celdas</caption>
<tr>
<td height="50">xxx</td>
<td align="center">xxx</td>
<td align="right">xxx</td>
</tr>
<tr>
<td height="50" valign="top">xxx</td>
<td align="center">xxx</td>
<td align="right" valign="bottom">xxx</td>
</tr>
</table>
Tablas en HTML
<table cellpadding="50" cellspacing="0" border="2" style="
width:500px;" align="center" >
<tr>
<td align="center"><img height="100" width="100"
src="logosena.jpg" alt="500"/></td>
</tr>
</table>
Ejercicio No. 4
• Desarrollar las siguientes Tablas , tema libre
Ejercicio No. 5
Imágenes en HTML
• Las imágenes se insertar con la etiqueta:
<img src="ruta hacia la imagen">
• Atributos:
– alt Cuando la imagen no ha sido cargada muestra un texto
alternativo.
– height y width Altura y anchura de la imagen en pixeles.
– border Tamaño en pixeles del cuadro que rodea la imagen.
– vspace y hspace Espacio libre entre la imagen y otros
elementos alrededor de ella.
– align Alineación con respecto al texto (right, left, top…)
Enlaces (Hipervínculos)
• Hay varios tipos de enlaces:
– Enlaces internos los que se dirigen a otras partes dentro de la
misma pagina.
– Enlaces locales los que se dirigen a otras paginas del mismo sitio
web.
– Enlaces remotos los dirigidos hacia paginas de otros sitios web.
– Enlaces con direcciones de correo para crear un mensaje de
correo dirigido a una dirección.
– Enlaces con archivos para que los usuarios puedan hacer descarga
de archivos.
Enlaces Internos
• Si queremos colocar un enlace que nos mande al inicio de
la página:
<a href="#arriba">Ir arriba</a>
• Luego en el inicio de la página se coloca un enlace con el
atributo ‘name’
<a name="arriba"></a>
Enlaces Locales
• Sirven para interconectar las páginas de nuestro sitio.
• Por ejemplo:
<a href="archivo.html">Titulo Enlace</a>
Para hacer un enlace desde index.html hacia
yyy.html:
<a
href="seccion1/paginas/yyy.html">contenido</a
>
Para hacer un enlace desde xxx.html hacia
yyy.html:
<a
href="../seccion1/paginas/yyy.html">contenido</
Enlaces Remotos, de Correo
• Remotos Dirigen hacia páginas fuera de tu sitio.
– Por ejemplo: <a href="http://www.sena.edu.co">Ir a Web
SENA</a>
• A Correo Abren un nuevo mensaje de correo.
– Por Ejemplo:
<a href="mailto:
[email protected]">
[email protected]</a>
• Archivos Para permitir descarga de archivos.
– Por Ejemplo:
<a href="reporte.pdf" download="Reporte Mayo 2014">Descargar
Archivo</a>
Botones Para Menú
• <div id="miMenu">
• <ul id="listaMenu">
• <li><a href="URL_enlace1">Enlace 1</a></li>
• <li><a href="URL_enlace2">Enlace 2</a></li>
• <li><a href="URL_enlace3">Enlace 3</a></li>
• <li><a href="URL_enlace4">Enlace 4</a></li>
• </ul>
• </div>
Ejercicio No. 6
• Diseño de 3 paginas Web , tema libre , temas relacionados
donde se utilice todo lo visto en sesiones anteriores.
FORMULARIOS
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post"> Ingrese su
nombre: <input type="text" name="nombre" size="20"> <br>
<input type="submit" value="enviar"> </form> </body>
</html>
Formulario - input type="text"/ input type="password"
• El elemento input nos permite definir cuadros de texto y botón para
subir los datos al servidor. Ahora veremos que también podemos definir
cuadros para el ingreso de una clave y botones para borrar el contenido
de todos los controles del formulario.
Ingrese su clave:
<form action="/registrardatos.php"
method="post"> Ingrese su Clave:<input
type="password" name="clave"
Borrar datos del formulario size="12">
<form action="/registrardatos.php"
method="post"><input type="reset"
value="borrar">
Formulario - textarea
• El elemento de tipo textarea nos permite el ingreso de
varias líneas a diferencia del cuadro de texto
(input/text)
Ingrese su comentario:
<textarea name="comentarios"
rows="5"
cols="60"></textarea>
Formulario - input type="checkbox
• El elemento checkbox es otro control que se puede
insertar en un formulario. Un checkbox es una casilla de
selección que puede tomar dos valores (seleccionado/no
seleccionado).
Seleccione los lenguajes que domina:
<input type="checkbox" name=“Java">Java<br>
<input type="checkbox" name=“C mas mas">C++<br>
<input type="checkbox" name=“Sql">Sql<br>
<input type="checkbox" name="C Sharp">C#<br>
Formulario - input type="radio"
• Cuando tenemos un conjunto de opciones pero solo una
puede ser seleccionada debemos emplear controles visuales
de tipo radio.
<input type="radio" name="estudios"
value="1">Sin estudios<br>
<input type="radio" name="estudios"
value="2">Primario<br>
<input type="radio" name="estudios"
value="3">Secundario<br>
<input type="radio" name="estudios"
value="4">Universitario<br>
Formulario - select (cuadro de selección individual)
• Este elemento HTML nos permite seleccionar una opción
entre un conjunto.
Seleccione su pais:
<select name="pais">
<option value="1">Argentina</option>
<option value="2">España</option>
<option value="3">México</option>
<option value="4">Guatemala</option>
<option value="5">Honduras</option>
<option value="7">El Salvador</option>
<option value="8">Venezuela</option>
<option value="9">Colombia</option>
<option value="10">Cuba</option>
</select>
Formulario - select (cuadro de selección múltiple)
• Una variante del cuadro de selección que vimos en el concepto anterior
es permitir que el visitante del sitio pueda seleccionar varias opciones.
Seleccione uno o varios colores
(Presione Ctrl para seleccionar varios
colores)<br>
<select name="colores[]" size="4" multiple>
<option value="1">Rojo</option>
<option value="2">Verde</option>
<option value="3">Azul</option>
<option value="4">Amarillo</option>
<option value="5">Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
Formulario - select (agrupamiento de opciones)
Seleccione una fruta o • Ahora veamos que podemos
verdura: agrupar las opciones que tiene
<select name="articulo">
el cuadro de selección, esto
<optgroup label="Frutas">
<option tiene sentido si el cuadro de
value="1">Naranjas</option> selección tiene muchos items.
<option
value="2">Manzanas</option>
<option
value="3>Sandia</option>
</optgroup>
<optgroup label="Verduras">
<option
value="4">Lechuga</option>
<option
Formulario - button
• El elemento button es un control visual que se puede utilizar
para sustituir los controles:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/htmlya/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<button type="submit">Enviar<img src="/imagenes/enviar.gif"
alt="envio"></button>
<button type="reset">Borrar<img src="/imagenes/borrar.gif"
alt="borrado"></button>
</form>
Formulario - input type="button"
<input
">
type="button" name="boton7" value=" 7 • Otro tipo de botón
<input
">
type="button" name="boton8" value=" 8
que podemos crear
<input type="button" name="boton9" value=" 9
">
<input type="button" name="botondiv" value=" /
es mediante el
elemento input y
">
<br>
<input type="button" name="boton4" value=" 4
">
<input
">
type="button" name="boton5" value=" 5 fijando en la
<input
">
type="button" name="boton6" value=" 6
propiedad type el
<input type="button" name="botondiv" value=" *
">
<br>
valor "button".
<input type="button" name="boton1" value=" 1
">
Formulario - input type="file"
• El control de tipo file permite enviar un archivo al servidor.
HTML solo indica al navegador que debe enviar el archivo al
servidor pero debe haber en el servidor un programa que lo
almacene en una carpeta del servidor. Cuando hacemos
upload de archivos al servidor es inicializar la propiedad
enctype del elemento form:
Formulario - input type="file"
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post"
enctype="multipart/form-data">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione la foto:
<input type="file" name="foto">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Formulario - input type="hidden"
• Un campo hidden se lo denomina campo oculto. Este tipo
de control no visualiza nada dentro del formulario. Su
utilidad se presenta cuando desde el servidor se genera
una página dinámica por ejemplo mediante PHP y se
almacena en un campo oculto un valor que se rescatará al
subir el formulario al servidor.
Formulario - input type="hidden"
<body>
<form action="/registrardatos.php"
method="post">
<input type="hidden" value="10:20"
name="hora">
Ingrese su nombre:
<input type="text" name="nombre"
size="30">
<br>
<input type="submit" value="Enviar">
Formulario - agrupamiento de controles.
• El HTML dispone de un elemento llamado fieldset que
solo tiene el objetivo de recuadrar y agrupar un conjunto
de controles de un formulario.
<fieldset>
<legend>Datos personales</legend>
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Documento de identidad:
<input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
Dirección:
<input type="text" name="direccionpersona" size="30"><br>
</fieldset>
Formulario - Inhabilitar controles.
• los controles que hemos visto podemos hacer que
aparezcan inhabilitados.
• Para deshabilitar el primer radio añadimos la propiedad
disabled sin asignarle valor:
<input type="radio" name="seccion"
value="1" disabled>Niños
Formulario - text/password y maxlength
• Los controles de tipo text y password pueden limitar la
cantidad de caracteres que puede ingresar el usuario a
partir de la propiedad maxlength.
Ingrese su nombre:
<input type="text" name="nombre" maxlength="20"
size="20">
<br>
Ingrese su clave:
<input type="password" name="clave" maxlength="12"
size="12">
<br>
Formulario - text/password/textarea y
readonly
<html>
<head>
<title>Prueba de formulario</title> • Otra propiedad que
</head>
<body>
<form action="/htmlya/registrardatos.php"
podemos asignarle a
method="post">
Ingrese su nombre:
los controles que
<input type="text" name="nombre" size="30"
value="Interpolacion"
creamos con el
readonly><br>
Contrato:<br>
elemento input y
<textarea name="comentarios" rows="5"
cols="60" readonly>
también el elemento
Por la presente ..............................
</textarea>
textarea es readonly.
<br>
<input type="submit" value="Enviar">
</form>
</body>
Formulario - Envío de datos mediante mail
• Inicializamos la propiedad action con el texto mailto seguido
de dos puntos y la dirección de mail a la que queremos enviar
los datos del formulario, recordemos siempre que utilizamos
mailto el emisor del mail depende como esté configurado
nuestro software de mail en nuestra computadora.
Formulario - Envío de datos mediante mail
• Además inicializamos la propiedad enctype con el valor
"text/plain" con lo que le indicamos que se trata de un
archivo de texto plano. Tengamos en cuenta que no
podemos enviar archivos adjuntos.
<formaction="mailto:[email protected]?
subject=pedido de reparación"
method="post" enctype="text/plain">
Formulario - label
• Existe en HTML un elemento que permite asociar un texto
con un control de formulario. Esto será muy útil si se
accede desde un navegador no gráfico o una persona
ciega que utiliza un programa que lee en voz alta el
contenido de la página.
• Veamos como lo hacíamos hasta ahora:
Ingrese su nombre:
<input type="text" name="nombre" size="20">
Formulario - label
• Utilizando el elemento label podemos hacer una
referencia entre el texto y el control de entrada de datos:
<label for="nombre">Ingrese su
nombre:</label>
<input type="text" name="nombre"
size="20" id="nombre">
