Tutorial HTML Parte 1 PDF

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.
Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

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 Parte 1 PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Tutorial HTML Parte 1 PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Tutorial Básico de HTML (Primera Parte)

HTML, siglas de HyperTextMarkupLanguage («lenguaje de marcado de

Historial del HTML

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

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

Mi Primera Página en HTML

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

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

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

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

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

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

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

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

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Asi se mostraría la ímagen de fondo:

Regresemos a la pantalla blanca

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

... y también para el subrayado

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

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

Tipo de Letra y Tamaño de la Fuente

Primero agrega las etiquetas de fuente

Después aplica el tamaño

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Dos aspectos importantes que deben tenerse en cuenta...

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

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Color del Texto

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

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

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

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

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

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

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

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

Párrafos, Renglones y Espacios

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

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

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

&nbsp; (espacio en blanco)

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

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

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

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

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

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

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Material facilitado por Ing. Gerardo Josué Portillo (gerardo.portillo@uth.hn)

Das könnte Ihnen auch gefallen

(espacio en blanco)