HTML el núcleo de la web

Universidad Abierta y a Distancia de México
Proceso admisión 2014 – 2015
HTML el núcleo de la web
Eje 4. Lectura y elaboración de textos académicos
Curso propedéutico para el aprendizaje autogestivo
Prof. C.P. Genaro de Jesús Soberanis Quijano
Autor: Adrián Guzmán Cruz
Cuernavaca, Morelos a 13 de noviembre, 2014.
Indice
1. Introducción………………………………………………………………………………………………………………………3
2. ¿Qué es HTML?....................................................................................................................3
3. Extensión.............................................................................................................................3
4. Estructura............................................................................................................................4
5. Un ejemplo muy básico........................................................................................................4
6. Ejecución del código HTML...................................................................................................5
7. Etiquetas básicas..................................................................................................................6
8. Conclusión............................................................................................................................6
9. Agradecimientos...................................................................................................................7
10. Referencias.........................................................................................................................7
2
1. Introducción
Junto con el surgimiento del internet y las redes de computadoras que buscaban una mejor manera
de compartir y distribuir información a cualquier parte del mundo, nacieron también las páginas
web, que no era más que información en texto plano, las cuales podían ser consultadas mediante
un navegador web a través de una computadora que tuviera una conexión a internet. Esta conexión
se realiza mediante una dirección URL que funciona sobre el protocolo de internet llamado HTTP,
que permite redireccionar nuestra solicitud hacia el servidor donde se encuentra la información a
la cual deseamos acceder.
A través del tiempo, esas páginas web se han ido transformando en grandes sitios web. Un sitio
web, es una colección de varias páginas, actualmente, estos sitios cuentan con un sin fin de
funcionalidades, el contenido es multimedia y más dinámico, permitiendo una mejor navegación
dentro del contenido para los usuarios.
HTML fue creado por la World Wide Web Consortium con la intención de facilitar el desarrollo de
las páginas web y que al mismo tiempo fuera un lenguaje universal que permitiera la compatibilidad
con distintos navegadores web y ahora también con los navegadores móviles. Este lenguaje fue
concebido y se logró bajo un esquema estructurado de etiquetas.
2. ¿Qué es HTML?
HTML por sus siglas en inglés “HyperText Markup Language” que se traduce como “Lenguaje de
marcas de hipertexto” es el soporte para el desarrollo de cualquier página web. HTML es la
estructura básica universal de todas las webs que vemos en Internet, ya que es el encargado de
soportar todos los demás elementos como el texto, los vínculos, imágenes, videos, scripts y
cualquier tipo de contenido multimedia.
Al ser un lenguaje universal, esta tecnología puede ser procesada por cualquier navegador web
existente hoy en día.
3. Extensión
Los archivos HTML tiene una extensión .HTML o .HTM estos pueden ser creados con cualquier editor
de texto que tengamos instalado en nuestra computadora, desde el blog de notas hasta alguno más
sofisticado, siempre y cuando, al momento de guardar nuestros archivos utilicemos alguna de esas
2 extensiones, que le indicaran al navegador (Explorer, Mozilla, Chrome, Safari, Opera, etc.) que
debe abrir dicho documento e interpretarlo como hipertexto y devolvernos la información de
manera estructurada.
3
4. Estructura
La sintaxis que rige a este lenguaje, está conformado por una estructura a través de etiquetas, las
cuales son de 2 tipos: de atributos y de contenido. Estas etiquetas, el navegador las procesará e
identificará para poder determinar de qué tipo de elemento estamos hablando y las representa
según sea el caso.
Las etiquetas se integran en pares, una etiqueta que abre y otra que cierra, por ejemplo:
<etiqueta> aquí va el contenido </etiqueta>
Existen algunos casos donde solo se utiliza una sola etiqueta, esto ocurre en algunas etiquetas de
formato, como por ejemplo <br> que en HTML representa un salto de línea.
Las etiquetas básicas para un documento HTML son:
<HTML> Indica el inicio de un documento HTML
<HEAD> Indica que es una cabecera
</HEAD> Toda cabecera debe cerrarse con esta etiqueta
<BODY> Indica que inicia el cuerpo del documento HTML
</BODY> Al final del cuerpo siempre debe cerrarse con esta etiqueta
</HTML> Indica el final del documento HTML
5. Un ejemplo muy básico
Tomando en cuenta le estructura básica que HTML requiere para un archivo de hipertexto,
podemos ejemplificarlo con el siguiente código:
<HTML>
<HEAD>
Bienvenido a mi blog mi blog UnADM
</HEAD>
<BODY>
Aquí puedo escribir todo el contenido que quiero que se despliegue en mi navegador web
al momento de ejecutar este archivo HTML.
</BODY>
</HTML>
Existen muchísimas más etiquetas, de formato, de estructura o contenido, pero estas son las
mínimas que se requieren para que nuestro navegador web pueda interpretar nuestra
información.
4
6. Ejecución del código HTML
Tomando como referencia el pequeño código anterior deberías:
1. Abre cualquier editor de texto que tengas disponible y pega el código.
2. Guarda el archivo con formato “.html”.
3. Abre el archivo con doble click, por la extensión, la computadora “sabe” que lo tiene que
abrir tu navegador web.
4. El resultado sería algo como esto:
No importa que todo se vea en una sola línea, pues aún no le damos formato. El navegador pudo
procesar nuestro archivo correctamente.
Si deseamos realizar un salto de línea utilizaremos la etiqueta <br>, esta etiqueta no requiere de
otra etiqueta para cerrar, ya que no encierra ningún texto, solo le indica al navegador que lo
interprete como un salto de línea.
Por ejemplo:
<HTML>
<HEAD>
Bienvenido a mi blog mi blog UnADM
</HEAD>
<br>
<BODY>
Aquí puedo escribir todo el contenido que quiero que se despliegue en mi navegador web
<br>
al momento de ejecutar este archivo HTML.
</BODY>
</HTML>
El resultado ahora sería:
5
7. Etiquetas básicas
Las etiquetas básicas que podemos encontrar para HTML son las que se refieren al formato del
texto, desde el tamaño de la fuente, la familia de la fuente, la posición, insertar imágenes, colocar
enlaces, etc.
Etiqueta
<HTML>
<head>
<title>
<body>
<h1> a <h6>
<table>
<tr>
<td>
<a>
<div>
<img>
<li>
<b>
<i>
<s>
<u>
<br>
<p>
Acción
Indica el inicio de un documento con código HTML.
Indica la cabecera del documento.
Indica un título.
Indica el inicio del cuerpo del documento.
Encabezados o títulos del documento.
Define una tabla.
Fila de una tabla.
Celda de una tabla.
Establece un enlace o vinculo.
División de página.
Manejo de imágenes, requiere más parámetros como “src”.
Insertar lista.
Texto en negritas.
Texto en cursiva.
Texto tachado.
Texto subrayado.
Salto de línea.
Define un párrafo
8. Conclusión
Gracias a los notables avances de la tecnología y grandes mentes que en su momento se
involucraron en el desarrollo de esta idea, de este proyecto que hoy en día es todo una realidad,
hoy podemos disfrutar de sitios web sorprendentes, tenemos acceso a información que alguien
público al otro lado del mundo con solo teclear una dirección web en nuestro navegador, nosotros
mismos podemos compartirla, se desarrollaron nuevos métodos de comunicación, el dinamismo de
los sitios web dio apertura a nuevas áreas como la educación a distancia, el compartir conocimiento
en foros, todo aquello de lo que necesitemos información actualmente lo podemos encontrar en
internet y lo más sorprendente de todo esto es que tal vez no nos percatamos, pero cada uno de
nosotros hacemos uso de esta tecnología día con día, tal vez muchas personas no tienen idea de
que es HTML pero día a día la utilizan.
Todo lo que vemos en internet, por donde quiera que naveguemos, ya sea un sitio web de video
juegos, el blog personal de un amigo o tu red social favorita, todo eso está “montado” a través de
un lenguaje estructurado de etiquetas llamado HTML. Si bien, no es el encargado del dinamismo y
de las sofisticadas funcionalidades de un sitio web, si es la base de todo esto.
6
9. Agradecimientos
Agradezco a mis maestros, que en la educación superior se tomaron ese interés por demostrar que
a pesar de que este lenguaje no es tan robusto como un lenguaje de programación, es una base
sólida para lo que hoy conocemos en la web. Agradezco la pasión que pusieron en la catedra
impartida en esta materia. Gran parte de este trabajo, de la información que se incluye en él, la
recibí en mi etapa como estudiante.
10. Referencias:
Texto tomado de http://es.wikipedia.org/wiki/HTML.
7