CURSO DE HTML, CSS Y JAVASCRIPT

Hola, te saluda Ubaldo Acosta. A nombre de Global Mentoring les damos

la más cordial bienvenida al curso de HTML, CSS y JavaScript.

En esta primera lección vamos a revisar una introducción a HTML

(HyperText Markup Language), así como su sintaxis básica. Más adelante
también estudiaremos los temas de CSS (Cascade Style Sheets), así como
una introducción a JavaScript.

HTML, Hojas de Estilo CSS y JavaScript, son las tecnologías que nos
permitirán crear páginas web, y por medio de ejemplos prácticos
revisaremos los componentes, las funciones y los estilos CSS que
podremos aplicar a nuestras páginas web. Cabe aclarar que no es un
curso orientado al diseño web, si no el conocimiento de las tecnologías
que nos permitirán visualizar aplicaciones web creadas con lenguajes
como son Java, PHP, .Net, entre otro tipo de lenguajes de programación.
En cursos posteriores veremos la manera de utilizar estas tecnologías
para realizar aplicaciones web dinámicas con tecnología como puede ser
JSPs y Servlets de Java.

Así, que si estás listo, nosotros también. Comencemos de inmediato.

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 2
 CURSO DE HTML, CSS Y JAVASCRIPT

HTML es un lenguaje que se volvió muy popular en la década de los 90’s. Al día de hoy es
un lenguaje estándar en el desarrollo de aplicaciones Web. Casi cualquier aplicación
desea que la información pueda ser accedida por medio de una intranet o en internet, y
por lo tanto HTML se ha convertido en el estándar para mostrar esta información.

HTML significa Lenguaje de Marcas de Hipertexto. El concepto inicial de HTML es crear

documentos y por medio de lo que se conoce como hipervínculos se podían ligar los
distintos documentos de un sitio web. Al día de hoy este concepto ha evolucionado hasta
llegar a la tecnología conocida como AJAX (Asynchronous JavaScript + XML), entre miles de
frameworks y soluciones para el manejo de HTML. Esta tecnología la veremos en cursos
posteriores.

HTML es un lenguaje que se apoya del protocolo de información HTTP (HiperText

Transfer Protocol). Este protocolo es el protocolo utilizado en internet para enviar y
recibir información desde y hacia cualquier computadora conectada a internet, y
actualmente ya se está comenzando a manejar la version http la cual incluye mejoras
entre la comunicación entre cliente-servidor.

El lenguaje HTML se basa en lo que se conoce como etiquetas (tags), por lo que veremos
posteriomente los tags más comúnmente utilizados en el desarrollo de aplicaciones web,
y esto aplica a muchos lenguajes, y también será la base para crear aplicaciones Web
dinámicas con Java.
© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 3
CURSO DE HTML, CSS Y JAVASCRIPT

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 4
CURSO DE HTML, CSS Y JAVASCRIPT

En Global Mentoring promovemos la Pasión por la Tecnología Java. Te invitamos a visitar nuestro
sitio Web donde encontrarás cursos Java Online desde Niveles Básicos, Intermedios y Avanzados,
y así te conviertas en un experto programador Java.

A continuación te presentamos nuestro listado de cursos:

Lógica de Programación Hibernate Framework

Fundamentos de Java Spring Framework
Programación con Java JavaServer Faces
Java con JDBC Java EE (EJB, JPA y Web Services)
HTML, CSS y JavaScript JBoss Administration
Servlets y JSP’s Android con Java
Struts Framework HTML5 y CSS3
Datos de Contacto:

Sitio Web: www.globalmentoring.com.mx

Email: [email protected]

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 5
Por el experto: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

Crear nuestro primer ejercicio de HolaMundo con HTML. Al
finalizar veremos:

www.gl obal mentoring.com .mx

Abrimos el software de Netbeans y creamos un nuevo proyecto:

www.gl obal mentoring.com .mx

 ( )
Seleccionamos la opción de HTML5, y damos siguiente:

www.gl obal mentoring.com .mx

 ( )
Proporcionamos el nombre del proyecto y la ubicación del mismo, ya deben
estar creada la carpeta donde se depositará el proyecto:

www.gl obal mentoring.com .mx

 ( )
Dejamos la opción por default y damos siguiente:

www.gl obal mentoring.com .mx

 ( )
Dejamos la opción por default, y damos click en finalizar:

www.gl obal mentoring.com .mx

 ( )
El resultado es el siguiente:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<title>Hola con HTML</title>
<meta charset="UTF-8">
<!--Elimina un warning de Netbeans-->
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
Hola Mundo con HTML
</body>
</html>

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
 ( )

www.gl obal mentoring.com .mx

Con este ejercicio hemos creado nuestro primer proyecto de
HTML.

Cabe señalar que no es necesario utilizar un IDE como

Netbeans, ya que podemos utilizar cualquier editor de texto.
Sin embargo para continuar familiarizándonos con nuestro
ambiente de desarrollo es que desarrollaremos nuestros
ejercicios con este IDE, sin embargo puede utilizar cualquier
editor de texto o IDE de su preferencia.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

CURSO DE HTML, CSS Y JAVASCRIPT

Hola, te saluda nuevamente Ubaldo Acosta. Espero que estés listo para comenzar con esta
lección.

Vamos a estudiar los componentes básicos de HTML.

¿Estás listo? ¡Vamos!

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 2
CURSO DE HTML, CSS Y JAVASCRIPT

Los componentes HTML son muy extensos y variados, en esta lección veremos los componentes más
utilizados con sus propiedades más comunes. Debido a que es muy extenso este tema, veremos ejercicios
para poner en práctica el código HTML necesario para generar los componentes mostrados.

Podemos dividir los componentes HTML en las siguientes clasificaciones:

Componentes de hipervínculos, como son Links; botones los cuales son utilizados en formularios HTML que
veremos más adelante, y también podemos tener botones pero que tienen una imagen en lugar de un
botón. En todos los casos debemos especificar cual es el documento o la acción que queremos que ejecute
dicho botón.

Componentes que normalmente se incluyen en un formulario. Dentro de estos componentes se incluyen

las etiquetas de un formulario, y su objetivo es tener varios componentes para enviar información a un
servidor Web, este componente no se visualiza, ya que solo agrupa más componentes HTML. A su vez un
formulario captura y muestra la información por medio de componentes como pueden ser los checkboxes
los cuales nos sirven para seleccionar una o varias opciones de un conjunto de elementos, también
tenemos las listas para seleccionar una o varias opciones de las mostradas, radiobuttons para seleccionar
solamente una de varias opciones, y cajas de texto y de área, para captura información en texto. Existen
varios componentes más que se pueden incluir en un formulario HTML pero estos son los más comunes.

Existen varios componentes más, como la inclusión de gráficos, frames, divs, objetos embebidos como
puede ser audio, video, animaciones flash, etc. Estos componentes los estaremos revisando a lo largo de
las practicas.

A continuación vamos a crear un ejercicio para observar el código HTML de varios de estos elementos, y
poco a poco nos iremos familiarizando con cada uno de los componentes.

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 3
CURSO DE HTML, CSS Y JAVASCRIPT

En la figura podemos observar los elementos que componen a un URL.

URL significa Uniform Resource Locator, o en español Localizador Uniforme de Recursos. Esta es una
manera única de encontrar elementos en internet o en nuestra intranet. Los elementos son: scheme, el
cual es el protocolo que se va a utilizar, como puede ser: HTTP, FTP, etc.

Posteriormente se colocan dos puntos, seguido de doble diagonal, y a continuación el host, este host es el
equipo que contiene los recursos HTML que estamos buscando. Este host puede escribirse con el nombre
del equipo, con su DNS o con su IP con la cual identificamos al equipo, ya sea en una intranet o en internet.

Posterior al host, especificamos el puerto donde se encuentra el sitio web, por lo común los servidores
como Apache, los cuales almacenan las páginas Web se configurar con el puerto 80, y si es este el caso,
entonces se puede omitir el puerto y continuar con los siguientes elementos.

El siguiente elemento es opcional, y es el path de la página o subcarpetas donde está almacenada nuestra
página web.

Posterior al path, de manera opcional, se pueden especificar los parámetros que necesita la página web
para ser llamada. Si se especifican parámetros van después de un signo de interrogación y tienen la forma
de nombre=valor, y pueden ser varios parámetros, los cuales se separan con un símbolo de &. Este tema
de parámetros lo estudiaremos en el curso de Servlets y JSPs.

Finalmente se puede especificar un ancla que lleve a alguna parte específica dentro de la misma página.
Veremos a continuación varios ejemplos, incluyendo el manejo de anclas. De igual manera, conforme
vayamos avanzando en el curso y en los siguientes cursos iremos profundizando en más ejemplos del uso
de las URLs.

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 4
CURSO DE HTML, CSS Y JAVASCRIPT

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 5
CURSO DE HTML, CSS Y JAVASCRIPT

En Global Mentoring promovemos la Pasión por la Tecnología Java. Te invitamos a visitar nuestro
sitio Web donde encontrarás cursos Java Online desde Niveles Básicos, Intermedios y Avanzados,
y así te conviertas en un experto programador Java.

Además agregamos nuevos cursos para que continúes con tu preparación como programador Java
profesional. A continuación te presentamos nuestro listado de cursos:

Programación con Java Hibernate Framework

Fundamentos de Java Spring Framework
Programación con Java JavaServer Faces
Java con JDBC Java EE (EJB, JPA y Web Services)
HTML, CSS y JavaScript JBoss Administration
Servlets y JSP’s Android con Java
Struts Framework Datos de Contacto:HTML5 y CSS3

Sitio Web: www.globalmentoring.com.mx

Email: [email protected]

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 6
www.gl obal mentoring.com .mx
Poner en práctica varios de los componentes más comunes de
HTML. Al finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Componentes HTML</title>
</head>
<body>
<h1>Algunos Componentes HTML</h1>
<p>
Nuevo parrafo
</p>
Creación de una tabla
<table width="200" border="1" bgcolor="white">
<tr>
<th>
Titulo1
</th>
<th>
Titulo2
</th>
</tr>
<tr>
<td>
Dato1
</td>
<td>
Dato2
</td>
</tr>
</table>
<p>
</p> www.gl obal mentoring.com .mx
 ( )
Archivo index.html:
<a href="http://www.icursos.net">Link a iCursos de Global Mentoring</a>
<p>
</p>
Lista:
<select name="lista1">
<option>Valor1</option>
<option>Valor2</option>
<option>Valor3</option>
</select>
<!-- Agregamos un parrafo-->
<p>
</p>
Inclusón de imagen: <img src="http://globalmentoring.com.mx/images/logo-top.png" alt="Logotipo Global Mentoring" />
<p>
</p>
<form name="formulario1" action="/recursoEnServidor">
<fieldset>
<legend>
Persona:
</legend>
Name: <input type = "text" size="30" name="nombre" />
<br/>
Email: <input type ="text" size="30" name="email"/>
<br/>
<button type="submit">
Enviar Datos
</button>
</fieldset>
</form>
</body>
</html>
www.gl obal mentoring.com .mx
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica algunos
componentes HTML, los cuales iremos estudiando a más
detalle conforme avancemos en el curso.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica los componentes de texto de HTML. Al
finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Abrimos el proyecto ComponentesHTML. Agregamos lo
siguiente:

www.gl obal mentoring.com .mx

 ( )
Agregamos el archivo componentesTexto.html

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Componentes HTML</title>
</head>
<body>
<h1>Algunos Componentes HTML</h1>
<p>
Liga a componentes de texto
<a href="componentesTexto.html">Liga a Componentes de Texto</a>
<p>
Nuevo parrafo
</p>
Creación de una tabla
<table width="200" border="1" bgcolor="white">
<tr>
<th>
Titulo1
</th>
<th>
Titulo2
</th>
</tr>
<tr>
<td>
Dato1
</td>
<td>
Dato2
</td>
</tr>
</table>
<p>
</p>
www.gl obal mentoring.com .mx
 ( )
Archivo index.html:
<a href="http://www.icursos.net">Link a iCursos de Global Mentoring</a>
<p>
</p>
Lista:
<select name="lista1">
<option>Valor1</option>
<option>Valor2</option>
<option>Valor3</option>
</select>
<!-- Agregamos un parrafo-->
<p>
</p>
Inclusón de imagen: <img src="http://globalmentoring.com.mx/images/logo-top.png" alt="Logotipo Global Mentoring" />
<p>
</p>
<form name="formulario1" action="/recursoEnServidor">
<fieldset>
<legend>
Persona:
</legend>
Name: <input type = "text" size="30" name="nombre" />
<br/>
Email: <input type ="text" size="30" name="email"/>
<br/>
<button type="submit">
Enviar Datos
</button>
</fieldset>
</form>
</body>
</html>
www.gl obal mentoring.com .mx
Archivo componentesTexto.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Componentes Texto</title>
</head>
<body>
<p>&nbsp;&nbsp;&nbsp;&nbsp;Agregamos un parrafo nuevo</p>
<p>Segundo parrafo <br/> texto en la siguiente linea </p>
</body>
</html>

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica los elementos
de texto que podemos manejar con HTML.

• También vimos cómo ligar los documentos y así empezar a

entrelazarlos, con el uso de hipervínculos, los cuales
estudiaremos más a detalle posteriormente.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica las frases en HTML. Al finalizar deberemos
observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frases HTML</title>
</head>
<body>
<h1>Frases HTML</h1>
<p>
EM: Se utiliza para dar <em>significado</em>
a una parte de un texto
</p>
<p>
STRONG: Se utiliza para <strong>resaltar</strong>
elementos
</p>
<p>
Q: Se utiliza para poner <q>comillas</q>
</p>
<p>
CODE: Se utiliza para poner el texto como si fuera
codigo de algun <code>lenguaje de programacion</code>
</p>

www.gl obal mentoring.com .mx

 ( )
Archivo index.html:
<p>
ABBR: Se utiliza para poner <abbr>Abreviaciones</abbr>
</p>
<p>
ACRONYM: Se utiliza para poner
<acronym>acr&oacute;nimos</acronym>
</p>
<p>
DFN: Se utiliza para poner <dfn>definiciones</dfn>
</p>
<p>
KBD: Significa texto que debe ser introducido por
<kbd>el usuario</kbd>
</p>
<p>
SAMP: Se utiliza para mostrar un ejemplo
de una <samp>salida de un programa</samp>
</p>
<p>
VAR: Se utiliza para mostrar que el texto es una
<var>variable</var>
</p>
</body>
</html>
www.gl obal mentoring.com .mx
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica en concepto de
frases en HTML, las cuales nos servirán para modificar
nuestro texto según aplique el caso según hemos visto en los
ejemplos.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica los Marcadores de Fuentes en HTML. Al
finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<title>Marcadores de Fuentes</title>
<meta charset="UTF-8">

</head>
<body>
<h1>Marcadores de Fuentes</h1>
<p>
B: Se utiliza para poner en <b>negritas</b> al texto
</p>
<p>
BIG: Se utiliza para convertir a una
<big>fuente m&aacute;s grande</big>
esto es interpretado por el navegador web
</p>
<p>
I: Se utiliza para convertir el texto a <i>cursiva</i>
</p>

www.gl obal mentoring.com .mx

 ( )
Archivo index.html:
<p>
S: Se utiliza para poner una <s>raya</s> en el texto
</p>
<p>
SMALL: Se utiliza para hacer el texto m&aacute;s
<small>peque&ntilde;o</small>
</p>
<p>
STRIKE: Es el mismo resultado que s, pone una raya
en el <strike>texto</strike>
</p>
<p>
TT: Se utiliza para dar formato de <tt>teletipo</tt>
como se utiliza en los monitores o impresoras antiguas
</p>
<p>
U: Se utiliza para <u>subrayar</u> una palabra
</p>
</body>
</html>

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica en concepto de
Marcadores de Fuentes en HTML, las cuales nos servirán
para dar cierto formato a nuestras fuentes según
necesitemos en nuestras páginas HTML.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica el preformato en HTML. Al finalizar
deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Preformato</title>
</head>
<body>
<h1>Preformato</h1>
<!-- Asi ponemos comentarios en HTML-->
<!-- El tag pre, se utiliza para dar un preformato a nuestro
texto, la idea es que tal como se escriba el texto
asi se visualizara uestro codigo-->
<pre>
Este texto, se va a visualizar con todo
y los espacios
los tabuladores
y la informaci&oacute;n tal como se muestra
aqui
<em>tambien reconoce tags para dar formato</em>
<!--
<bold>algunos no los reconoce debido a que es un formato basico</bold>
-->
<u>otros si los reconoce</u>
</pre>
</body>
</html> www.gl obal mentoring.com .mx
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica en concepto de
Preformato en HTML, el cual nos permite visualizar la
información tal como la hemos escrito, respetando
tabuladores y espacios que de otra manera HTML no
respetaría.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica el manejo de Listas en HTML. Al finalizar
deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Vamos a crear un archivo html:

www.gl obal mentoring.com .mx

 ( )
Vamos a crear un archivo html:

www.gl obal mentoring.com .mx

Vamos a crear un archivo html:

www.gl obal mentoring.com .mx

Vamos a crear un archivo html:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<title>Listas HTML</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Listas HTML</h1>
<p>
Listas ordenadas
<a href="listasOrdenadas.html">Listas Ordenadas</a>
</p>
<p>
Listas no ordenadas
<a href="listasNoOrdenadas.html">Listas No Ordenadas</a>
</p>
<p>
Listas de definici&oacute;n de datos
<a href="listasDefinicion.html">Listas Definici&oacute;n</a>
</p>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo listasOrdenadas.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Listas Ordenadas</title>
</head>
<body>
<h1>Listas Ordenadas</h1>

<ol type="1" start="3">

<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>

<ol>
<li>Juan</li>
<li>Susana</li>
</ol>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo listasNoOrdenadas.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Listas No Ordenadas</title>
</head>
<body>
<h1>Listas No Ordenadas</h1>

<ul type="square">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>

<ul>
<li>Dato1</li>
<li>Dato2</li>
</ul>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo listasDefinicion.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Listas de Definiciones</title>
</head>
<body>
<h1>Listas de Definiciones</h1>

<dl>
<dt>Uno</dt>
<dd>Es el primer elemento, sin contar el cero</dd>

<dt>Dos</dt>
<dd>Es el numero despues del uno</dd>

<dt>Tres</dt>
<dd>Numero despues del dos</dd>
</dl>
</body>
</html>

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

 ( )
El resultado es como sigue:

www.gl obal mentoring.com .mx

 ( )
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica el concepto de
Listas en HTML, las cuales nos permiten mostrar nuestros
datos de manera de lista ordenada, no ordenada y en forma
de definición de palabras.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica fuentes en HTML. Al finalizar deberemos
observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fuentes en HTML</title>
</head>
<body>
<h1>Fuentes en HTML</h1>
<p>
<font face="Arial, Georgia, times" size="5">
Este es un texto en el que vamos
a aplicar una fuente distinta a la que
se tenga configurado en el navegador web
</font>
</p>
<p>
<font face="Courier" size="-2">
Este es un texto en el que vamos
a aplicar una fuente distinta a la que
se tenga configurado en el navegador web
</font>
</p>
<p>
<font face="Times">
Este es un texto en el que vamos
a aplicar una fuente distinta a la que
se tenga configurado en el navegador web
</font>
</p>
</body>
</html>
www.gl obal mentoring.com .mx
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica en concepto de
Fuentes en HTML, el cual nos permite visualizar nuestra
información con distintas fuentes aplicadas. Este concepto
veremos más adelante que también es recomendable
aplicando con hojas de estilo CSS.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica los hipervínculos en HTML. Al finalizar
deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Vamos a crear un nuevo archivo:

www.gl obal mentoring.com .mx

Vamos a crear un nuevo archivo:

www.gl obal mentoring.com .mx

Vamos a crear un nuevo archivo:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de Hipervinculos</title>
</head>
<body>
<h1>Ejemplo Hipervinculos</h1>
<p>
<a href="http://www.globalmentoring.com.mx"
title="Sitio de Global Mentoring" target="_blank">Link a Global Mentoring</a>
</p>
<p>
Link ruta relativa, misma carpeta o ruta
<a href="index2.html">Index 2</a>
</p>
<p>
Link a subcarpeta
<a href="links/link1.html">Link1</a>
</p>
<p>
Link a <a href="links/cursos/html/cursoHtml.html">sub/subcarpeta</a>
</p>
</body>
</html>
www.gl obal mentoring.com .mx
Archivo index2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index 2</title>
</head>
<body>
<h1>Index 2</h1>
Regresar a <a href="index.html">index</a>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo link1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Link 1</title>
</head>
<body>
<h1>Link 1</h1>
<!--Con la notacion (..)
subimos un nivel respecto de la carpeta actual-->
Regresamos a <a href="../index.html">index</a>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo cursoHTML.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Curso HTML</title>
</head>
<body>
<h1>Curso HTML</h1>
<!-- agregamos el link de regreso-->
<!-- el primer .. sube de html a la carpeta de cursos-->
<!-- el segundo .. sube de cursos a la carpeta de links-->
<!-- el tercer .. sube de la carpeta de links a la raiz-->
Regresar a <a href="../../../index.html">Index</a>
</body>
</html>

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

 ( )
El resultado es como sigue:

www.gl obal mentoring.com .mx

 ( )
El resultado es como sigue:

www.gl obal mentoring.com .mx

 ( )
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica el concepto de
Hipervínculos en HTML, el cual nos permite enlazar archivos
html y de esta manera establecer un flujo de navegación
entre los distintos archivos o páginas web de nuestros
proyectos.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica el concepto de anclas en HTML. Al finalizar
deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anclas en HTML</title>
</head>
<body>
<h1>Uso de Anclas en HTML</h1>
<!-- marcamos los lugares donde los links van a llegar-->
<!--Estas marcas no son visibles en el documento HTML
solo son referencias para que los links se detengan
en el documento html-->
<a name="inicio"></a>
<h2>Lista de Libros de Tecnolog&iacute;a Java</h2>
<!--Agregamos los links relativos a esta pagina,
son conocidos como anclas de la pagina -->
<p> Indice:
[
<a href="#L1">Libro 1</a> |
<a href="#L2">Libro 2</a> |
<a href="#L3">Libro 3</a> |
<a href="#L4">Libro 4</a> |
<a href="#L5">Libro 5</a> |
<a href="#L6">Libro 6</a> |
<a href="#L7">Libro 7</a> |
<a href="#L8">Libro 8</a> |
<a href="#L9">Libro 9</a>
]
</p>
www.gl obal mentoring.com .mx
Archivo index.html:
<!-- Agregamos los links a los que hacen referencia <p>
cada uno de las anclas--> Libro 4 de Java
<p> </p>
<a name="L1"></a> <p>
<h2>Libro 1</h2> <a name="L5"></a>
[ <a href="#inicio">Regresar &Iacute;ndice</a> ] <h2>Libro 5</h2>
</p> [ <a href="#inicio">Regresar &Iacute;ndice</a> ]
<p> </p>
Libro 1 de Java <p>
</p> Libro 5 de Java
<p> </p>
<a name="L2"></a> <p>
<h2>Libro 2</h2> <a name="L6"></a>
[ <a href="#inicio">Regresar &Iacute;ndice</a> ] <h2>Libro 6</h2>
</p> [ <a href="#inicio">Regresar &Iacute;ndice</a> ]
<p> </p>
Libro 2 de Java <p>
</p> Libro 6 de Java
<p> </p>
<a name="L3"></a> <p>
<h2>Libro 3</h2> <a name="L7"></a>
[ <a href="#inicio">Regresar &Iacute;ndice</a> ] <h2>Libro 7</h2>
</p> [ <a href="#inicio">Regresar &Iacute;ndice</a> ]
<p> </p>
Libro 3 de Java <p>
</p> Libro 7 de Java
<p> </p>
<a name="L4"></a> <p>
<h2>Libro 4</h2> <a name="L8"></a>
[ <a href="#inicio">Regresar &Iacute;ndice</a> ] <h2>Libro 8</h2>
</p> [ <a href="#inicio">Regresar &Iacute;ndice</a> ]
www.gl obal mentoring.com
</p> .mx
Archivo index.html:
<p>
Libro 8 de Java
</p>
<p>
<a name="L9"></a>
<h2>Libro 9</h2>
[ <a href="#inicio">Regresar &Iacute;ndice</a> ]
</p>
<p>
Libro 9 de Java
</p>
</body>
</html>

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica el concepto de
Anclas en HTML, el cual nos permite enlazar secciones de
nuestra página Web, sin necesidad de cambiar de página,
sino todas son llamadas en la misma página web.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Poner en práctica el concepto de imágenes en HTML. Al
finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Manejo de Im&aacute;genes</title>
</head>
<body>
<h1>Manejo de Im&aacute;genes</h1>
<p>
Este p&aacute;rrafo es una imagen
<img src="http://icursos.net/cursos/HTML/Leccion02/10-ImagenesHTML/renacer.jpg" alt="Renacer Foto"
width="40" height="42" title="Renacer Foto">
en esta linea
</p>

<p>
<img src="http://icursos.net/cursos/HTML/Leccion02/10-ImagenesHTML/GlobalMentoringLogo.jpg"
alt="Logo Global Mentoring" width="120" height="70"
align="left" hspace="10"
title="Logo Global Mentoring"/>
Inclusi&oacute;n de una imagen en un p&aacute;rrafo.
</p>

<br/>
<br/>
www.gl obal mentoring.com .mx
Archivo index.html:
<p>
<a href="http://www.globalmentoring.com.mx" target="_blank">
<img src="http://icursos.net/cursos/HTML/Leccion02/10-ImagenesHTML/boton.png"
alt="Boton Enviar" width="120" height="70"
align="left" hspace="10" border="0"
title="Boton Enviar"/>
</a>
Imagen que es un link y al dar click te lleva a Global Mentoring
</p>
</body>

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica el uso de
imágenes en HTML, incluso hemos visto cómo podemos
crear links a otras páginas utilizando como link una imagen.

• También es posible utilizar una imagen como un botón, o

cualquier otra imagen que sea representativa de la acción
que queremos convertir en un link.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

CURSO DE HTML, CSS Y JAVASCRIPT

Hola, te saluda Ubaldo Acosta. Bienvenida o bienvenido nuevamente. Espero que estés listo para
comenzar con esta lección.

Vamos a estudiar el tema de Introducción a CSS.

¿Estás listo? Ok, ¡Vamos!

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 2
 CURSO DE HTML, CSS Y JAVASCRIPT

En esta lección vamos a estudiar una introducción a CSS.

CSS significa Cascade Style Sheet o en español Hojas de Estilo en Cascada. La idea de combinar las
tecnologías de HTML y CSS surge de la necesidad de que cada uno se dedique a realizar su función, por
un lado HTML se encarga de mostrar la información en el navegador Web, pero CSS se encarga de
mejorar la presentación de dicha información, mejorando el diseño, colores, efectos, y todo lo
necesario para que la información no solamente parezca un texto plano en el navegador Web, sino
tenga una apariencia agradable al usuario.

Vamos a realizar varios ejemplos, pero antes mencionaremos algunos puntos importantes respecto a
CSS.

Los estilos CSS se utilizan para dar formato a las páginas HTML de una manera centralizada, si ya
tenemos cierta experiencia creando páginas de HTML seguramente hemos tenido el problema de que al
crecer nuestro sitio web lo que sucede es que los estilos, ya sea a nuestros textos, nuestras imágenes o
nuestras cajas de texto, etc. empiezan a tener formatos distintos, y para poder aplicar un mismo
formato a todos estos elementos HTML, se van a concentrar en estilos los cuales conocemos como CSS.
La idea es crear estilos CSS y estos estilos los vamos a ir aplicando a nuestros elementos HTML.

Se conoce como un lenguaje en cascada debido a que se van aplicando de esta manera, en forma de
cascada o de manera heredada, por ejemplo un estilo que se define en un archivo .css puede ser
sobreescrito por un estilo definido directamente en la página HTML. De esta manera es que los estilos
se van sobreescribiendo según sean más internos o más externos, prevaleciendo siempre el elemento
css más interno (ejemplo un estilo definido dentro de la página web y no en un archivo externo).

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 3
 CURSO DE HTML, CSS Y JAVASCRIPT

Cuando una página Web se carga en el navegador Web se crea lo que se

conoce como Document Object Model (DOM). El DOM se construye como un
árbol de objetos.

Como podemos observar en la figura cada uno de estos elementos es creado

y cada elemento depende de otro elemento dentro del árbol.

Es a través de este árbol que podemos aplicar estilos a cada uno de los
elementos de nuestra página HTML y a través de CSS aplicar un diseño
específico a cada elemento. Esto lo haremos a través de selectores que
estudiaremos a continuación.

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 4
 CURSO DE HTML, CSS Y JAVASCRIPT

Vamos a revisar a continuación el tema de selectores.

Un selector en CSS como su nombre lo dice, se utilizan para seleccionar elementos de

nuestra página HTML. A través del DOM (Document Object Model) es posible ver la
página HTML como un árbol de elementos HTML anidados según hemos visto. Y es a
través de este árbol de elementos que podemos

Existen los siguientes selectores en CSS, por un lado tenemos los selectores que se
conocen como ID y por otro lado los que se conocen como Class.

Los selectores de tipo ID nos van a permitir aplicar un estilo definido para un elemento
de manera única en la página web actual, por lo que se deben aplicar solo a un elemento
en nuestra página web. Para definir un selector ID se utiliza el signo de numero # esto
para definir el estilo, pero para poder utilizarlo dentro de nuestro elemento HMTL se
debe de utilizar el atributo ID del elemento HTML. Más adelante veremos un ejemplo de
este tipo de estilos.

Por otro lado tenemos el selector CLASS. Este tipo de selectores se utilizan para
especificar el estilo de un grupo de elementos. Para definir una selector css de tipo
CLASS se utiliza el operador punto (.) y para utilizar estos selectores utilizamos el atributo
class en el elemento HTML donde queramos aplicar este estilo. De igual manera veremos
un ejemplo de cómo aplicar estos estilos CSS.
© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 5
CURSO DE HTML, CSS Y JAVASCRIPT

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 6
CURSO DE HTML, CSS Y JAVASCRIPT

En Global Mentoring promovemos la Pasión por la Tecnología Java. Te invitamos a visitar nuestro
sitio Web donde encontrarás cursos Java Online desde Niveles Básicos, Intermedios y Avanzados,
y así te conviertas en un experto programador Java.

Además agregamos nuevos cursos para que continúes con tu preparación como programador Java
profesional. A continuación te presentamos nuestro listado de cursos:

Lógica de Programación Hibernate Framework

Fundamentos de Java Spring Framework
Programación con Java JavaServer Faces
Java con JDBC Java EE (EJB, JPA y Web Services)
HTML, CSS y JavaScript JBoss Administration
Servlets y JSP’s Android con Java
Struts Framework HTML5 y CSS3
Datos de Contacto:

Sitio Web: www.globalmentoring.com.mx

Email: [email protected]

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 7
www.gl obal mentoring.com .mx
Crear un programa para practicar lo básico de estilos CSS. Al
finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Archivo index.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo CSS 1</title>
</head>
<body style="background:#ffffcc; color:#551100;font-family:Comic Sans MS;">
<h1>Ejemplo CSS 1</h1>
<p style="font-family:Arial Black;">
Este es el contenido del <span style="font-size:xx-large;">parrafo</span> 1
</p>
<br>
<p style="color:#ff0000;">
Este es el contenido del parrafo 2
</p>
<br>
<p style="color:#f8d077">
Este es el contenido del parrafo 3
</p>
</body>
</html>

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica lo básico de los
estilos CSS, definiendo los estilos directamente sobre el
atributo style de los elementos HTML seleccionados.

• A continuación veremos más ejemplos de cómo ir mejorando

la aplicación de estilos a nuestros elementos HTML.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Crear un programa para continuar practicando lo básico de
estilos CSS. Al finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Vamos a crear el archivo estilos.css

www.gl obal mentoring.com .mx

 ( )
Vamos a crear el archivo estilos.css

www.gl obal mentoring.com .mx

Archivo index.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<!-- Prioridad 2: este es el segundo el prioridad -->
<style>
<!--
body{
font-family:"Bodoni MT Black";
color:#ff0000;
}
-->
</style>
<title>CSS Ejemplo 2</title>
</head>
<!-- el tag de body hereda las propiedades del archivo estilos.css -->
<body>
<h1>CSS Ejemplo 2</h1>
<!--Prioridad 1: estilo mas interno-->
<p style="font-family:Agency FB">
Este es un parrafo de ejemplo
</p>
</body>
</html>
www.gl obal mentoring.com .mx
Archivo estilos.css: Dar click para ir al código
/*
Se definen las propiedades de estilos.
Prioridad 3: Los estilos definidos en un archivo
aplican despues que los estilos definidos en el documento HTML
y tambien despues de los elementos definidos en un elemento HTML
*/
body {
background:#c0c0c0;
color:#000080;
font-family:"Century Gothic";
}

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

Inspeccionamos el párrafo de ejemplo y vemos como se
sobreescriben los estilos:

www.gl obal mentoring.com .mx

 ( )

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica la definición de
estilos tanto dentro de un atributo html, en el archivo html, y
en un archivo externo de tipo css.

• Con esto tenemos las bases para ir avanzando más respecto

al tema de hojas de estilos CSS.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Crear un programa para continuar practicando lo básico de
estilos CSS. Al finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Vamos a crear el archivo estilos.css

www.gl obal mentoring.com .mx

 ( )
Vamos a crear el archivo estilos.css

www.gl obal mentoring.com .mx

Archivo index.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>CSS Ejemplo 3</title>
</head>
<body>
<h1>CSS Ejemplo 3</h1>
<p>
P&aacute;rrafo de Ejemplo 1
</p>

<p>
P&aacute;rrafo de Ejemplo 2
</p>

<div class="resaltado">
Agregamos una nueva
divisi&oacute;n
</div>
<br>
<div class="nuevaClaseCss">
Agregamos una
segunda divisi&oacute;n
</div>

</body>
</html>
www.gl obal mentoring.com .mx
Archivo estilos.css: Dar click para ir al código
body {
background:#256F5B;
font-family:"Arial Narrow";
color:white;
}

h1{
font-size:xx-large;
font-style:italic;
}

p{
font-weight:bolder;
background:#468B78;
}

/*
Agregamos una nueva clase
aplicable a cualquier elemento html
*/
.resaltado{
background:#9E354A;
font-weight:bold;
}

.nuevaClaseCss{
font-family:"Century Gothic";
font-weight:bold;
background:#4F0010;
}

www.gl obal mentoring.com .mx

El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica varios
conceptos más de estilos CSS.

• La combinación de colores la obtuvimos con la ayuda del

siguiente sitio web:

• http://paletton.com/#uid=c5v2G0l390kllllaFw0g0qFqFg0w0aF

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

www.gl obal mentoring.com .mx
Se solicita analizar el proyecto Laboratorio CSS, el cual
contiene la siguiente salida. El objetivo es entender cómo se
crearon los tabuladores y analizar los estilos que es aplicaron:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Vamos a crear el archivo contenido1.html

www.gl obal mentoring.com .mx

Vamos a crear el archivo contenido2.html

www.gl obal mentoring.com .mx

Vamos a crear el archivo contenido3.html

www.gl obal mentoring.com .mx

Vamos a crear el archivo estilos.css

www.gl obal mentoring.com .mx

Archivo index.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>Laboratorio CSS</title>
</head>
<body>
<h1>Laboratorio CSS</h1>
<a href="paginas/contenido1.html">P&aacute;gina de Contenido</a>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo contenido1.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
<title>Contenido 1</title>
</head>
<body>
<h1>Sitio Web con Tabuladores</h1>
<div class="tab" id="actual">
<div>
<a href="contenido1.html">Contenido</a>
</div>
</div>
<div class="tab">
<div>
<a href="contenido2.html">Contenido 2</a>
</div>
</div>
<div class="tab">
<div>
<a href="contenido3.html">Contenido 3</a>
</div>
</div>
<br/>
<p>
Contenido de la página 1
</p>
<br>
<a href="../index.html">Regresar</a>
</body>
</html> www.gl obal mentoring.com .mx
Archivo contenido2.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
<title>Contenido 2</title>
</head>
<body>
<h1>Sitio Web con Tabuladores</h1>
<div class="tab">
<div>
<a href="contenido1.html">Contenido</a>
</div>
</div>
<div class="tab" id="actual">
<div>
<a href="contenido2.html">Contenido 2</a>
</div>
</div>
<div class="tab">
<div>
<a href="contenido3.html">Contenido 3</a>
</div>
</div>
<br/>
<p>
Contenido de la página 2
</p>
<br>
<a href="../index.html">Regresar</a>
</body>
</html> www.gl obal mentoring.com .mx
Archivo contenido3.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
<title>Contenido 3</title>
</head>
<body>
<h1>Sitio Web con Tabuladores</h1>
<div class="tab">
<div>
<a href="contenido1.html">Contenido</a>
</div>
</div>
<div class="tab">
<div>
<a href="contenido2.html">Contenido 2</a>
</div>
</div>
<div class="tab" id="actual">
<div>
<a href="contenido3.html">Contenido 3</a>
</div>
</div>
<br/>
<p>
Contenido de la página 3
</p>
<br>
<a href="../index.html">Regresar</a>
</body>
</html> www.gl obal mentoring.com .mx
Archivo estilos.css: Dar click para ir al código
/*Nota: Se pueden descargar las imagenes a la carpeta de css
y solo poner el nombre de la imagen, ya sin el URL completo*/
body {
background:#ffffff;
}

img{border:0;}

h1{
padding:5px 5px 0 5px;
margin:0 0 15px 0;
color:#2b7c92;
font-size:2em;
}

/**
* Para crear los tabuladores, se aplica una
* tecnica, la cual por medio de 3 bloques
* de tipo div, vamos a ir agregando
* de manera anidada las imagenes, hasta formar
* todos los elementos de la imagen
*/

div.tab{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/izqTab.gif);
display:block;
float:left;
/*Es el alto de la imagen*/
height:21px;
padding:0;
/* Separacion entre tabuladores*/
margin:0 1px 0 0; www.gl obal mentoring.com .mx
Archivo estilos.css: Dar click para ir al código
/*La imagen de la izquierda no se repite
* Por defualt una imagen se repite
* en todo el espacio que tenga para
* desplazarse */
background-repeat:no-repeat;
}

div.tab div{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/derTab.gif);
background-repeat:no-repeat;
background-position:top right;
height:21px;
float:left;
margin:0;
}

div.tab div a{
/*
* Las imagenes de la izq y der
* tienen un ancho de 8px, por lo tanto
* dejamos esta espacio para que se completen
* las esquinas
*/
margin:0 8px;
/* Las imagenes tiene un alto de 21px */
height:21px;
line-height:21px;
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/centroTab.gif);
display:block;
text-decoration:none;
vertical-align:middle;
float:left; www.gl obal mentoring.com .mx
Archivo estilos.css: Dar click para ir al código
/* Por default se repite la imagen
* pero lo hacemos explicito
*/
background-repeat:repeat;
}

/**
* Solamente hay un elemento activo
* en la pagina, por lo tanto
* se utiliza un ID ( # ), en lugar
* de una clase ( . )
*/
#actual{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/actIzqTab.gif);
}

#actual div{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/actDerTab.gif);
}

#actual div a{
background-image:url(http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/LaboratorioCSS1/img/actCentroTab.gif);
}

a:link,a:visited{
color:#226275;
text-decoration:underline;
}

a:active,a:hover{
color:#39a5c4;
} www.gl obal mentoring.com .mx
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Con este laboratorio CSS hemos puesto en práctica más
ejemplos del uso de CSS, incluso les invitamos a probar el
ejercicio sin el archivo estilos.css para que vean la diferencia
entre usar únicamente etiquetas HTML, y agregar estilos css
y así lograr una diferencia sustancial en la forma en que se
presenta la información al usuario.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

CURSO DE HTML, CSS Y JAVASCRIPT

Hola, te saluda nuevamente Ubaldo Acosta. Espero que estés listo para comenzar con esta
lección..

Vamos a estudiar el tema de tablas con HTML.

¿Estás listo? ¡Vamos!

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 2
CURSO DE HTML, CSS Y JAVASCRIPT

El manejo de tablas HTML es muy común para mostrar nuestra información. Para declarar
una tabla en HTML, tenemos que definir y entender varias etiquetas, como son:

table: Define el elemento que indica el inicio de una tabla html.

tr: table row. Este elemento define un renglón, el cual contendrá columnas.
th: table header. Este elemento define un dato pero que es un cabecero de nuestra tabla
html. Usar este elemento es opcional.
td: table data. Este elemento define un dato de nuestra tabla html.

Un ejemplo de una tabla html:

<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Carlos</td>
<td>Suarez</td>
</tr>
</table>

A continuación vamos a ver un ejemplo del manejo de tablas en html.

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 3
CURSO DE HTML, CSS Y JAVASCRIPT

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 4
CURSO DE HTML, CSS Y JAVASCRIPT

En Global Mentoring promovemos la Pasión por la Tecnología Java. Te invitamos a visitar nuestro
sitio Web donde encontrarás cursos Java Online desde Niveles Básicos, Intermedios y Avanzados,
y así te conviertas en un experto programador Java.

Además agregamos nuevos cursos para que continúes con tu preparación como programador Java
profesional. A continuación te presentamos nuestro listado de cursos:

Lógica de Programación Hibernate Framework

Fundamentos de Java Spring Framework
Programación con Java JavaServer Faces
Java con JDBC Java EE (EJB, JPA y Web Services)
HTML, CSS y JavaScript JBoss Administration
Servlets y JSP’s Android con Java
Struts Framework HTML5 y CSS3
Datos de Contacto:

Sitio Web: www.globalmentoring.com.mx

Email: [email protected]

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 5
www.gl obal mentoring.com .mx
Crear un proyecto para practicar el concepto de tablas con
HTML. Al finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Vamos a crear el archivo estilos.css:

www.gl obal mentoring.com .mx

Archivo index.html Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>Ejercicio Tablas HTML</title>
</head>
<body>
<h1>Ejercicio Tablas HTML</h1>
<table width="500" border="1">
<caption>
Tabla Lenguajes Programaci&oacute;n
</caption>
<tr>
<th>
Nombre
</th>
<th>
Descripci&oacute;n
</th>
<th>
Creador
</th>
</tr>
<tr class="row1">
<td>
Java
</td>
www.gl obal mentoring.com .mx
Archivo index.html Dar click para ir al código
<td>
Desarrollo de aplicaciones generales, su fuerte está en las aplicaciones empresariales
</td>
<td>
James Gosling
</td>
</tr>
<tr class="row2">
<td>
JavaScript
</td>
<td>
Desarrollo aplicaciones para Internet, mayormente enfocadas en el front end de las aplicaciones Web
</td>
<td>
Brendan Eich
</td>
</tr>
<tr class="row1">
<td>
PHP
</td>
<td>
Lenguaje para crear aplicaciones Web de rápido desarrollo
</td>
<td>
Rasmus Lerdorf
</td>
</tr>
</table>
</body>
</html> www.gl obal mentoring.com .mx
Archivo estilos.css Dar click para ir al código
body {
background:#f1f3fe;;
font-family:"Comic Sans MS";
}

caption{
height:30pt;
font-weight:bold;
color:#004080;
}

th{
text-align:center;
color:#4d4d4d;
background:#a8d3ff;
}
td{
text-align:justify;
color:#5b5b5b;
/*background:#f5f5f5;*/
font-size:small;
vertical-align:middle;
}

.row1{
background:#ffffff;
}

.row2{
background:#e5e5e5;
}
www.gl obal mentoring.com .mx
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Realizar la inspección con el navegador Web y entender
cada uno de los elementos que componen la página Web,
además revisar los estilos CSS aplicados a cada elemento de
la tabla HTML.

• Recordar que la inspección del código HTML consiste en

seleccionar una parte del código desde el navegador Web,
dar click derecho y seleccionar inspeccionar.

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica el concepto de
tablas con HTML. Hemos visto cada uno de sus elementos,
así como aplicamos algunos estilos para mejorar la
apariencia visual de nuestra tabla HTML.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

CURSO DE HTML, CSS Y JAVASCRIPT

Hola, te saluda Ubaldo Acosta. Bienvenida o bienvenido nuevamente. Espero que estés listo para
comenzar con esta lección.

Vamos a estudiar el tema de frames con HTML.

¿Estás listo? Ok, ¡Vamos!

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 2
 CURSO DE HTML, CSS Y JAVASCRIPT

En esta lección vamos a estudiar los Frames o Marcos con HTML.

Aunque en la versión 5 de HTML ya ha quedado obsoletos, es muy
probable que encontremos aún proyectos Web que contengan este
tipo de elementos, es por esto que vamos a revisar las características
principales del manejo de Frames.

Un Frame o Marco, como observamos en la figura, básicamente se

compone de varias páginas Web, que al ser unidas por una página que
coordina las acciones del contenido a mostrar, forma precisamente un
Frame o Marco, con el cual podremos interactuar e ir mostrando el
contenido de las distintas páginas HTML asociadas con el Marco.

A continuación vamos a crear un ejercicio con el cual pondremos en

práctica este concepto.

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 3
CURSO DE HTML, CSS Y JAVASCRIPT

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 4
CURSO DE HTML, CSS Y JAVASCRIPT

En Global Mentoring promovemos la Pasión por la Tecnología Java. Te invitamos a visitar nuestro
sitio Web donde encontrarás cursos Java Online desde Niveles Básicos, Intermedios y Avanzados,
y así te conviertas en un experto programador Java.

Además agregamos nuevos cursos para que continúes con tu preparación como programador Java
profesional. A continuación te presentamos nuestro listado de cursos:

Lógica de Programación Hibernate Framework

Fundamentos de Java Spring Framework
Programación con Java JavaServer Faces
Java con JDBC Java EE (EJB, JPA y Web Services)
HTML, CSS y JavaScript JBoss Administration
Servlets y JSP’s Android con Java
Struts Framework HTML5 y CSS3
Datos de Contacto:

Sitio Web: www.globalmentoring.com.mx

Email: [email protected]

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 5
www.gl obal mentoring.com .mx
Crear un proyecto para poner en práctica los frames con
HTML. Al finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Vamos a crear un nuevo archivo:

www.gl obal mentoring.com .mx

Vamos a crear un nuevo archivo:

www.gl obal mentoring.com .mx

Vamos a crear un nuevo archivo:

www.gl obal mentoring.com .mx

Vamos a crear un nuevo archivo:

www.gl obal mentoring.com .mx

Vamos a crear un nuevo archivo:

www.gl obal mentoring.com .mx

Archivo index.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio Frames </title>
</head>
<!--frame externo-->
<!-- creamos un frame externo de dos columnas -->
<frameset cols="25%,*" frameborder="0" framespacing="0" border="0">
<!-- frame izquierda -->
<frame src="navegacion.html" name="navegacion"><!-- frame derecha, es otro frameset-->
<!-- tiene dos renglones este frame -->
<frameset rows="30%,*">
<!--frame superior-->
<frame src="titulo.html" name="titulo" scrolling="no">
<!--frame inferior-->
<frame src="contenidoInicial.html" name="contenido">
</frameset>
<noframes>
Este es una pagina que no pudo mostrar los frames
</noframes>
</frameset>
</html> www.gl obal mentoring.com .mx
Archivo navegacion.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navegacion-Menus</title>
<style>
<!--
body {
background:#e8f2fe;
}
-->
</style>
</head>
<body>
<h1>Men&uacute;</h1>
<ul>
<li><a href="informacion.html" target="contenido" >Informaci&oacute;n</a> </li>
<li><a href="contacto.html" target="contenido">Contacto</a> </li>
</ul>
</body>
</html>
www.gl obal mentoring.com .mx
Archivo titulo.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>T&iacute;tulo</title>
<style>
<!--
body{
background:#d6d8da;
}
-->
</style>
</head>
<body>
<h1>T&iacute;tulo P&aacute;gina</h1>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo contenidoInicial.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contenido por default</title>
<style>
<!--
body{
background:#1d2f70;
color:#fdfdfd;
}
-->
</style>
</head>
<body>
<h1> Contenido por default</h1>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo contacto.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contacto</title>
<style>
<!--
body{
background:#5782ad;
color:#fefefe;
}
-->
</style>
</head>
<body>
<h1>Contacto</h1>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo informacion.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Informaci&oacute;n</title>
<style>
<!--
body{
background:#2b557d;
color:#FDFDFD;
}
-->
</style>
</head>
<body>
<h1>Informaci&oacute;n</h1>
</body>
</html>

www.gl obal mentoring.com .mx

Ejecutamos nuestro proyecto:

www.gl obal mentoring.com .mx

• Con este ejercicio hemos puesto en práctica el concepto de
Frames con HTML. Hemos creado varias páginas HTML con
el objetivo de administrarlas desde el Frame inicial.

• Si bien este concepto se considera obsoleto en la versión

más reciente de HTML, es posible que encontremos este
concepto aplicado en nuestras aplicaciones legadas o
heredadas con HTML.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

CURSO DE HTML, CSS Y JAVASCRIPT

Hola, te saluda nuevamente Ubaldo Acosta. Espero que estés listo para comenzar con esta
lección..

Vamos a estudiar el tema de formularios con HTML.

¿Estás listo? ¡Vamos!

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 2
CURSO DE HTML, CSS Y JAVASCRIPT

En esta lección vamos a estudiar el tema de formularios con HTML. Este es uno de los temas más
importantes cuando estamos hablando de crear aplicaciones Web dinámicas, y que no sólo mostrarán
texto HTML. La diferencia es que para el tratamiento de formularios se requiere de una aplicación creada
del lado del servidor. En este curso sólo veremos cómo crear el formulario, y en el siguiente curso de
Servlets y JSPs veremos cómo procesar la información enviada por el usuario al servidor Java.

Para crear un formulario HTML utilizamos varias etiquetas y componentes HTML que nos permitirán
capturar y procesar la información de interés de los usuarios que utilicen nuestras aplicaciones Web.

Como podemos observar en la figura vamos a utilizar distintos tipos de componentes, desde cajas de texto
para capturar valores simples, o combo boxes de varios tipos, listas, y áreas de texto que nos permitirán
capturar todo aquello que nos interese de parte del usuario.

Finalmente esta información normalmente es enviada a una aplicación creada del lado del servidor.
Existen muchos lenguajes que pueden recibir y procesar esta información de un formulario HTML. Algunos
ejemplos de estos lenguajes son Java, PHP, .Net, entre varios más.

JavaScript es un lenguaje que usaremos más para validar precisamente la información de este tipo de
formularios, pero antes de ser enviada al servidor, por ello veremos cómo validar nuestros formularios a
enviar a un servidor Web. Sin embargo JavaScript no lo usaremos como un lenguaje del lado del servidor,
aunque actualmente existen lenguajes e implementaciones de JavaScript que están permitiendo que cada
vez sea un lenguaje que está en evolución e incluso pueda comenzar a tomarse en cuanta de manera seria
como un lenguaje que permite procesar formularios HTML, y no solo validarlos.

Vamos a ver a continuación un ejercicio acerca del uso y creación de componentes HTML para la creación
de formularios.

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 3
CURSO DE HTML, CSS Y JAVASCRIPT

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 4
CURSO DE HTML, CSS Y JAVASCRIPT

En Global Mentoring promovemos la Pasión por la Tecnología Java. Te invitamos a visitar nuestro
sitio Web donde encontrarás cursos Java Online desde Niveles Básicos, Intermedios y Avanzados,
y así te conviertas en un experto programador Java.

Además agregamos nuevos cursos para que continúes con tu preparación como programador Java
profesional. A continuación te presentamos nuestro listado de cursos:

Lógica de Programación Hibernate Framework

Fundamentos de Java Spring Framework
Programación con Java JavaServer Faces
Java con JDBC Java EE (EJB, JPA y Web Services)
HTML, CSS y JavaScript JBoss Administration
Servlets y JSP’s Android con Java
Struts Framework HTML5 y CSS3
Datos de Contacto:

Sitio Web: www.globalmentoring.com.mx

Email: [email protected]

© Todos los Derechos Reservados Global Mentoring Experiencia y Conocimiento para tu Vida 5
www.gl obal mentoring.com .mx
Crear un proyecto para poner en práctica el manejo de formularios
con HTML. Al finalizar deberemos observar lo siguiente:

www.gl obal mentoring.com .mx

Vamos a crear el proyecto:

www.gl obal mentoring.com .mx

Vamos a crear un archivo css:

www.gl obal mentoring.com .mx

Archivo index.html: Dar click para ir al código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio Formulario</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<form name="form1" action="/recursoEnServidor" method="post">

<input type="hidden" name="oculto" value="valorOculto">

<table width="200" id="one-column-emphasis">

<caption>
Formulario Registro de Datos
</caption>
<tr>
<td class="oce-first">
Usuario:
</td>
<td>
<input class="default" type="text" name="usuario" value="Escribir usuario"/>
</td>
</tr>
<tr>
<td class="oce-first">
Password:
</td>
www.gl obal mentoring.com .mx
 ( )
Archivo index.html: Dar click para ir al código
<td>
<input class="default" type="password" name="password">
</td>
</tr>
<tr>
<td class="oce-first">
Tecnolog&iacute;as de Inter&eacute;s
</td>
<td>
Java <input type="checkbox" name="tecnologia" value="java">
&nbsp;&nbsp;&nbsp;
.Net <input type="checkbox" name="tecnologia" value="net">
&nbsp;&nbsp;&nbsp;
Php <input type="checkbox" name="tecnologia" value="php">
</td>
</tr>
<tr>
<td class="oce-first">
G&eacute;nero
</td>
<td>
Hombre<input type="radio" name="genero" value="H">
&nbsp;&nbsp;&nbsp;<!--genera espacios entre los elementos de manera horizontal -->
Mujer <input type="radio" name="genero" value="M">
</td>
</tr>

www.gl obal mentoring.com .mx

 ( )
Archivo index.html: Dar click para ir al código
<tr>
<td class="oce-first">
Ocupaci&oacute;n
</td>
<td>
<select name="ocupacion" class="default">
<option value="1">Profesor</option>
<option value="2">Ingeniero</option>
<option value="3">Jubilado</option>
<option value="4" selected>Otro</option>
</select>
</td>
</tr>
<tr>
<td class="oce-first">
M&uacute;sica Favorita
</td>
<td>
<select name="musica" multiple class="default">
<option value="rock">Rock</option>
<option value="pop">Pop</option>
<option value="salsa">Salsa</option>
</select>
</td>
</tr>

www.gl obal mentoring.com .mx

 ( )
Archivo index.html: Dar click para ir al código
<tr>
<td class="oce-first">
Comentarios
</td>
<td>
<textarea name="comentarios" cols="30" rows="2" class="default">
Escribir un texto
</textarea>
</td>
</tr>
<tr style="text-align:center;">
<td>
<input type="reset" value="Limpiar" class="default">
</td>
<td>
<input type="submit" value="Enviar" class="default">
</td>
</tr>
</table>
</form>
</body>
</html>

www.gl obal mentoring.com .mx

Archivo estilos.css: Dar click para ir al código
body, .default {
line-height: 1.6em;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
color:#669;
}

#one-column-emphasis
{
margin: 45px;
/*Especificamos el ancho de la tabla*/
width: 480px;
text-align: left;
/*No deja espacio entre los renglones y columnas de la tabla*/
border-collapse: collapse;
}
#one-column-emphasis caption
{
font-size: 20px;
}

#one-column-emphasis th
{
font-size: 14px;
font-weight: normal;
padding: 12px 15px;
color: #039;
}
www.gl obal mentoring.com .mx
 ( )
Archivo estilos.css: Dar click para ir al código
#one-column-emphasis td
{
padding: 10px 15px;
color: #669;
border-top: 1px solid #e8edff;
}

.oce-first
{
background: #d0dafd;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
#one-column-emphasis tr:hover td
{
color: #339;
background: #eff2ff;
}

www.gl obal mentoring.com .mx

 ( )
El resultado es como sigue:

www.gl obal mentoring.com .mx

• Probar con distintos valores.

• En este ejemplo no se está enviando la información a ningún

servidor, eso lo estudiaremos en el siguiente curso. Pero ya
tenemos listo el formulario que trabajaremos en el siguiente
curso. Lo importante aquí es entender e inspeccionar los
elementos HTML que utilizamos para crear el formulario.

www.gl obal mentoring.com .mx

• Con este ejercicio hemos creado un formulario HTML con
varios de los componentes que utilizaremos más
comúnmente en nuestras aplicaciones Web.

• En el siguiente capitulo, veremos cómo validar un formulario

utilizando JavaScript.

• Finalmente, en el siguiente curso veremos cómo procesar

esta información de un servidor Java utilizando Servlets y
JSPs.

www.gl obal mentoring.com .mx

Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx