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