Tutorial HTML 2013 Parte 1

Material facilitado por Ing. Gerardo Josué Portillo ([email protected])

Tutorial Básico de HTML (Primera Parte)

¿Qué es el HTML?

HTML, siglas de HyperTextMarkupLanguage («lenguaje de marcado de

hipertexto»), es el lenguaje de marcado predominante para la

elaboración de páginas web. Es usado para describir la estructura y el

contenido en forma de texto, así como para complementar el texto con

objetos tales como imágenes. HTML también puede describir, hasta un

cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo

JavaScript), el cual puede afectar el comportamiento de navegadores web y otros

procesadores de HTML.

Historial del HTML

Año 1980:

El físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación

Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos, Berners-

Lee une fuerzas con el ingeniero en sistemas Robert Cailliau con quien crean la

especificación de la World Wide Web (W3).

Año 1991:

Se publica el primer documento formal con la definición del HTML bajo el nombre HTML

Tags o Etiquetas HTML.

Año 1993:

Se da la primera propuesta oficial para convertir HTML en un estándar, aquí se definen las

etiquetas para imágenes, tablas y formularios la cual es rechazada como estándar.


Año 1994:

Nace el W3C (World Wide Web Consortium) el cual fue fundado por Tim Berners-Lee en el

MIT (Instituto Tecnológico de Massachusetts) como ente regulador del HTML y la WEB.

Año 1995:

Se publica una segunda versión del HTML llamado HTML 2.0 el cual es aceptado como

estándar, convirtiéndose así como el primer estándar oficial del lenguaje.

Año 1997:

Se publica el HTML 3.2 la cual es la primera recomendación de HTML publicada por el W3C.

Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta la fecha

tales como applets de Java y texto que fluye alrededor de las imágenes.

Año 1998:

Se publica la definición del HTML 4.0 la cual supone un gran salto desde las versiones

anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la

posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la

accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

El estándar HTML 4.0 se usó por muchos años presentando cambios

poco significativos a través de los años y durante los cuales las

empresas como Apple, Oracle, Opera y el proyecto Mozilla mostraron

su preocupación por la falta de interés por parte del W3C respecto al

HTML.

Año 2004:

Se funda el WHATWG (Web Hypertext Application Technology Working Group) como una

alianza entre Apple, Oracle, Opera y el proyecto Mozilla para comenzar con la definición del

HTML 5.

Año 2005:

Se lanza el primer borrador oficial del HTML 5 por parte de la WHATWG siendo este

aceptado por la W3C quien decide retomar el proyecto del HTML.

Año 2008:

Se finaliza la primera versión del HTML 5 siendo Mozilla Firefox 3 el primer navegador

compatible con dicho estándar.

Año 2010:

Muchos sitios WEB fuertes como YouTube implementa el uso del HTML 5 para sustituir el

uso de tecnología Flash.

Año 2013:

Se siguen sumando las empresas y navegadores que usan HTML 5 como estándar gracias a

la fuerza que han ganado los dispositivos celulares y tables además del extendido uso de los

sistemas operativos iOS y Android.

Mi Primera Página en HTML

Para poder entender como funcionan las páginas WEB es necesario comenzar a escribir

páginas en HTML puro y plano, por lo tanto usaremos un editor de texto básico como el

bloc de notas de Microsoft Windows.

Cada página debe comenzar y terminar con la etiqueta (tag) HTML. Una etiqueta se cierra

agregando /. La mayoría de las etiquetas tienen una etiqueta de terminación. Con las

etiquetas se dan instrucciones a los navegadores. Lo que se acaba de decir al navegador es

"este es el inicio de un documento HTML" (<html>) y "este es el final del documento HTML"

(</html>).

<html>

</html>

Todo documento HTML requiere un par de "etiquetas de encabezado":

<html>

<head>

</head>

</html>

Por el momento contemplaremos la etiqueta "Título" (title) dentro de las "etiquetas de

encabezado" (head):

<html>

<head>

<title></title>

</head>

</html>

El resto del documento aparecerá dentro de las etiquetas "BODY":

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

El título de la página lo pones entre los Tags <TITLE> y </TITLE>:

<html>

<head>

<title>Miprimerapágina</title>

</head>

<body>

</body>

</html>

Ahora guarda tu página, no como un archivo txt, sino como un documento html. Guárdala

como pagina1.html Si no sabes cómo hacer ésto, lee lo siguiente:

1. Selecciona "Guardar como" en el bloc de notas

2. Elige el directorio en que guardarás el archivo.

3. En donde dice "Guardar como archivos de tipo" selecciona "Todos los archivos (*.*)"

4. En "Nombre de archivo" anota pagina1.html

5. Clic en "Guardar" y... listo... ¡has creado tu primera página!

Desafortunadamente, por ahora tu página no contiene nada, sólo se muestra el título de la

misma en la parte superior del navegador. Así que la siguiente tarea es agregar algo en tu

página.

Contenido y Formato de la Página

Para evitar escribir varias veces lo mismo, me enfocaré a la etiqueta "BODY" para incluir el

contenido de la página.

<body>

</body>

<body>

Lo que más se te antoje

</body>

Cada vez que agregues algo nuevo, salva tu documento, después, dá clic en el botón

"Reload" (Actualizar) del navegador (supongo que tienes abierto tu documento en la

pestaña (ventana) adicional de la lección anterior). Si no se muestran tus cambios actuales,

al momento de dar clic en el botón Reload mantén presionada la tecla "Shift"

Fondo de la Página

Lo primero que debes aprender es a cambiar los colores del fondo.

<body bgcolor="#ffffff">


</body>

* bgcolor="#ffffff" (background="blanco") es el código del color blanco.

Se puede especificar una imagen para colocarla como fondo en lugar de un color sólido.

<body background="background4.jpg">


</body>

Es obvio que la imagen se coloca en forma de mosaico para cubrir toda la página. Pero si

creas una imagen larga puedes obtener un efecto similar al que se muestra a

continuación...

<body background="fondo.jpg">


</body>

Si se usa la imágen:

Asi se mostraría la ímagen de fondo:

Regresemos a la pantalla blanca



</body>

Estilos de Texto:

Coloquemos algo en Negritas


Lo que más se te antoje

</body>

Lo que se dice al navegador es: en comenzar con negritas, y en detener

las negritas.

Lo mismo aplica para las itálicas


Lo que mas se te antoje

</body>

... y también para el subrayado


Lo que más se te antoje

</body>

Se puede usar una combinación de etiquetas si se desea.


Lo que más se te antoje

</body>

Este es un ejemplo de etiquetas combinadas. Si vas a usar etiquetas combinadas (lo que

harás dentro de poco), entonces debes evitar confundir al navegador, las etiquetas deben

ser combinadas no sobre puestas. Déjame explicarte lo que trato de decir...

<esto><aquello> </esto></aquello> Etiquetas sobre puestas... mal

<esto><aquello></aquello> </esto> Etiquetas combinadas... bien

Tipo de Letra y Tamaño de la Fuente

Puedes cambiar el tamaño de las letras... es muy sencillo

Primero agrega las etiquetas de fuente


Lo que más se te antoje

</body>

Después aplica el tamaño


Lo que más se te antoje

</body>

Existen 7 tamaños de fuente

Dos aspectos importantes que deben tenerse en cuenta...

1. Una <ETIQUETA> le dice al navegador que haga algo. Un "ATRIBUTO" va dentro de la

<ETIQUETA> y le indica al navegador "cómo" hacerlo.

2. El "VALOR POR DEFECTO" empleado por los navegadores se aplica cuando no se indica

nada al respecto. Por ejemplo, el tamaño por defecto de las fuentes en los navegadores

es 3. A menos que se establezca uno distinto seguirá siendo 3.

El valor por defecto en los navegadores (no todos) es Times New Roman 12 pt (lo cual

representa el número 3 con el cógido de html) en color negro. Intenta colocar la fuente

como Arial o Comic Sans...


Lo que más se te antoje

</body>

Sin embargo, no se recomienda emplear la etiqueta FACE debido a que se requiere tener la

fuente en la pc para poder visualizarla. Me explico, si tú tienes la fuente "XYZ" en tu pc y la

colocas en tu página web, la podrás ver sin problemas, pero cuando un visitante llega y no

tiene la fuente, no podrá ver ese tipo de letra que colocaste y será suplantada por la fuente

por defecto de su sistema.

Se puede usar una combinación de fuentes que pueden resolver este problema, tal como

en Quiero aprender HTML.

Para aquellos que no entienden qué ocurre aquí, tal como me pasó a mí, ésto es lo que

sucede ===> El navegador busca por la fuente Arial, si la encuentra la usa, si no la encuentra

buscará por Helvetica... si no la encuentra entonces buscará por Lucida Sans... y si no la

encuentra entonces usará la fuente por defecto.

Un tip sobre la sintaxis... habrás notado que uso mayúsculas y minúsculas en las etiquetas.

Hasta este punto puedes usar lo que desees, ya sea , o , pues

representan lo mismo. Lo que no debes olvidar es colocar bien las comillas y los signos de

mayor qué ">" y menor qué "<".

Personalmente te sugiero utilizar siempre los nombres de las etiquetas en minúsculas, pues

los estándares establecidos por la W3C así lo exigen para validar HTML.

Color del Texto

Se puede cambiar el color de la fuente...


Lo que más se te antoje

</body>

Se puede usar más de un ATRIBUTO en una <ETIQUETA>...

<body bgcolor="#ffffff#>

Lo que más se te antoje

</body>

Y más de una <ETIQUETA> a la misma sección...


Lo que más se te antoje 

</body>

Recuerda, nuevamente, que las etiquetas deben ser combinadas y no sobre puestas...

<ETIQUETA1><ETIQUETA2> <ETIQUETA3>@ i-Meil</ETIQUETA3>

</ETIQUETA2></ETIQUETA1>... correcto


</ETIQUETA1></ETIQUETA3>... correcto


</ETIQUETA1></ETIQUETA2>... mal

Color de los Links (Hipervínculos)

Los navegadores presentan una forma predeterminada para el color de la fuente, del link

(vínculo), del link visitado y del link actual. Estos atributos predeterminados son...

Texto Negro

Link color Azul

Link visitado Púrpura

Link activo Rojo

Puedes modificar estos atributos predeterminados en la etiqueta <BODY>...

<body bgcolor="#000000" text="#ffff00" link="#ff0000" vlink="#800000"

alink="#008000">


</body>

donde vlink es Visited Link (link visitado) y alink es Active Link (Link activo o actual).

Párrafos, Renglones y Espacios

Ahora vas a conocer la forma en que trabaja o responde el navegador al código html que

anotas. Vamos con ejemplos...



¡cualquier cosa!

</body>


Ahora...

¿qué es

lo que

ocurre

con ésto?

</body>

El navegador no reconoce el formato. A menos que se lo indiques, presentará las letras y las

palabras en forma normal. Si deseas comenzar con una nueva línea, debes usar la etiqueta

respectiva.


Ahora... 

¿qué es 

lo que 

ocurre 

con ésto?

</body>

 indica "comenzar una nueva línea". es similar a , pero da un salto de línea

y ahí comienza el texto.


Ahora...

¿qué es

lo que

ocurre

con ésto?

</body>

 es una de las pocas etiquetas que no requiren la de cierre, pero para cumplir con los

estándares de HTML, siempre debes cerrar una etiqueta con su par respectivo. no

puede emplearse para obtener varias líneas en blanco, si anotas no obtendrás 3

líneas en blanco, sólo proporcionará 1. ¿Cómo obtenerlas entonces? vamos a explicarlo.

Observa lo siguiente...



</body>

El navegador sólo reconoce 1 espacio, aunque parezca tonto, pero de

esta forma permite tener mayor control en la apariencia del

documento.

Para dar un espacio como el de la barra espaciadora del teclado, se debe utilizar

Inténtalo....

<body bgcolor="#FFFFFF">

Lo que más

se te

antoje

</body>

El signo "&" indica que se inicia un caracter especial, mientras que el signo ";" indica que

ahí termina, las letras en medio son una abreviación de lo que representa. Existen seis

caracteres especiales que son muy usados (siempre deben escribirse en minúsculas).

(espacio en blanco)

< (símbolo menor qué "<")

> (símbolo mayor qué ">")

& (signo "&")

" (comilla ")

(guión )

No se deben utilizar todos al mismo tiempo, pero con un poco de práctica se sabrá cuándo

deben ser utilizados. La mayoría de los programas para hacer páginas web del tipo

"WYSIWYG" ("Lo que ves es lo que obtienes", que proviene del inglés "What You See Is

What You Get") no requieren que les indiques código html.

Si no consigues colocarlos bien, no te preocupes, ya que "echando a perder se aprende"

Sonrisa --eso pregúntenlo a "Fatty" (mi pc) que ha recibido alrededor de 9 formateadas de

disco duro.

Regresemos a nuestro asunto... si se presiona la tecla "ENTER" (RETURN) del teclado al

tiempo que se está escribiendo, el navegador lo interpretará como un espacio. Veamos un

ejemplo más...


Lo que más

 se te antoje 

cualquier cosa!

</body>

Centrar Texto

Ahora anota lo siguiente...


<center>Lo que más se te antoje</center>

</body>

Todo lo que se encuentre dentro de las etiquetas <CENTER> estará centrado en la pantalla.

Esta etiqueta ha sido "descontinuada", cuando llegues al nivel de CSS (Cascading Style

Sheets) sabrás de qué te hablo... por el momento sigamos adelante.

Imágenes

Se especifica una imagen con la etiqueta <IMG> (imagen) y se coloca la ruta y tamaño de la

imagen.


<imr src="nombre_archivo_imagen.jpg" width="150" height="110">

</body>

Ten presente que la ruta no especifica únicamente la imagen, sino también dónde se ubica.

La ruta de arriba, "lecci3a.jpg", indica que el navegador buscará la imagen llamada "

nombre_archivo_imagen.jpg" en la misma carpeta (o directorio) en que se encuentra el

archivo html.

Otra forma de especificar la ruta es anotando el URL completo. Por ejemplo:

src="http://www.imeil.com.mx/imagenes/imeil.gif"

Supongo que te has de estar preguntando la ventaja de usar URL's relativos (parciales)

contra los URL's absolutos (completos). La respuesta es sencilla... porque tus links

funcionarán en cualquier servidor o computadora que los coloques, las páginas cargarán

más rápido y te evitarás el tener que editar para modificar todos los URL's o links de las

páginas.

Algo muy importante que debes conocer de las imágenes y su tamaño. Intenta esto...


<img src="uth.jpg">

</body>

Como puedes notar, el navegador establece el tamaño de la imagen en forma automática.

¿Por qué preocuparse entonces por las dimensiones? Sin caer en detalles... porque ayuda al

navegador a cargar las imágenes en forma más rápida.

¿Cuál es la parte importante? Checa...


<img src=" uth.jpg" widht="200" height="68">

</body>

<img src="lecci3a.jpg" width="60" height="100">

</body>

Puedes especificar las dimensiones que desees. ¿Sigues aferrado a cuál es la parte

importante? Ok, observa este pequeño punto rojo -> Imagen de ejemplo <-. Su tamaño es

de 2x2 pixeles. Ahora fijate lo que se le puede hacer al modificar sus dimensiones...


<img src="punto.gif" width="510" height="1">



<center><img src="punto.gif" width="2" height="200"></center>

</body>

Tutorial HTML 2013 Parte 1

Documents

Transcript of Tutorial HTML 2013 Parte 1