Introducción a HTML5: guía completa para principiantes
•
0 recomendaciones•113 vistas
Este documento introduce los conceptos básicos de HTML5, incluyendo qué es HTML, las etiquetas básicas como <html>, <head>, <title> y <body>, cómo usar caracteres especiales mediante códigos, los diferentes tipos de elementos como de bloque y en línea, y cómo estructurar el contenido usando etiquetas como <div>.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Introducción a HTML5: guía completa para principiantes
Similar a Introducción a HTML5: guía completa para principiantes (20)
Más de Ericka Zavala
Más de Ericka Zavala (13)
Último
Último (20)
Introducción a HTML5: guía completa para principiantes
- 1. INTRODUCCIÓN A HTML5. ELABORADO POR: ING. ERICKA ZAVALA ezavalar https://www.ezavalar.com
- 2. ¿QUÉ ES HTML? HTML es un lenguaje de marcas que sirve para estructurar y dar formato a un documento para que pueda ser leído e interpretado por un navegador (Mozilla Firefox, Chrome, Opera, Safari). Para poder hacer uso de este lenguaje es necesaria su codificación mediante las llamadas etiquetas HTML la mayoría de estas tienen una apertura y un cierre (Tienen una diagonal antes del nombre) que indican el inicio y fin de la funcionalidad de la misma. Un documento básico de HTML contiene 4 etiquetas básicas que describen su estructura y son: <html>, <head>, <title> y <body>. Todas las etiquetas pueden escribirse tanto mayúsculas como en minúsculas, pero se recomienda su uso en minúsculas. La primera instrucción (y la más importante) siempre debe ser <!DOCTYPE html> pues es la que permite tanto al navegador como al editor de texto interpretar y entender que se trata de un archivo con lenguaje HTML5.
- 3. ETIQUETA <META>. La etiqueta <meta> se coloca dentro de la etiqueta <head> y contiene información de metadatos de nuestra página web. Los metadatos son elementos de HTML que muestran información relevante sobre nuestra página web y son usados por buscadores para definir la información principal de nuestra web (Como lista de caracteres de idioma, temática y/o descripción) y que también se usan para posicionar nuestro sitio, por lo tanto es de suma importancia aprenderlos a configurar. Un metadato importante es el Charset utf-8 pues es el Unicode Transformation Format 8-bit y representa el código de caracteres UNICODE que es compatible con el ASCII y permite visualizar los caracteres especiales de todos los idiomas, si no se coloca no se visualizarán en el navegador. En la página https://gist.github.com/kevinSuttle/1997924 encontrará otros usos de la etiqueta <meta> de HTML.
- 4. CARACTERES ESPECIALES EN HTML5. En HTML5 se pueden visualizar caracteres que son propios del lenguaje como menor que ( < ), mayor que ( > ), ampersand ( & ), comillas ( “ ) o apóstrofe ( ‘ ) y que si se ponen directamente se interpretan como parte del código y no como un carácter de texto, para ello se coloca una serie de códigos que son interpretados en el navegador como su versión en texto. El siguiente recuadro muestra como se colocan dichos códigos, también puede visitar la página web https://dev.w3.org/html5/html-author/charref para conocer que otros caracteres especiales puede colocar como texto en un sitio web. Carácter Especial Significado Código Espacio > Menor que < < Mayor que > & Ampersand & “ Comillas " ‘ Apóstrofe '
- 5. ELEMENTOS BLOQUEY LÍNEA. Los elementos de HTML pueden visualizarse por defecto como bloque o en línea y existen algunas etiquetas que proporcionan dicha funcionalidad. Elementos de Bloque. Los elementos de bloque (block) son aquellos que ocupan todo el ancho de la página y forzan a una nueva línea antes y después. Algunas etiquetas de bloque son: <article>, <aside>, <canvas>, <div>, <footer>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <p>, <pre>, <section>, <ul>. Elementos en línea. Los elementos en línea (inline) sólo ocupan el ancho necesario y no forzan a nuevas líneas.Algunas etiquetas en línea son: <em>, <a>, <br>, <img>, <span>, <button>, <input>, <select>, <textarea>. Para más información acerca de los elementos de bloque o en línea puede consultar las siguientes páginas: https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements https://developer.mozilla.org/en-US/docs/HTML/Inline_elements
- 6. MARCAS DE TEXTO. Las marcas de texto en HTML se usan principalmente para el estructurado semántico del contenido de una página web. Los textos habitualmente están formados por: Titulares: Para los cuales se ocupan las etiquetas <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>. Párrafos: Para los cuales se ocupan las etiquetas <p></p>. Para resaltar texto: Para los cuales usamos las siguientes etiquetas: ➢ <strong></strong> Para textos en negrita. ➢ <em></em> Para textos en cursiva. ➢ <u></u> Para textos subrayados. ➢ <del></del> Para textos tachados.
- 7. EJEMPLO DE MARCAS DE TEXTO. El siguiente ejemplo ilustra el uso de las marcas de texto que pueden usarse de forma combinada y anidada.
- 8. ETIQUETA <DIV>. La etiqueta <div> es un elemento de bloque que se emplea para contener en su interior otros elementos HTML. Por si solo no tiene ningún significado ya que es semánticamente neutro pero ayuda a estructurar una página web, es invisible a menos que se le aplique algún estilo de relleno o contorno. Bloque <div> sin estilo Bloque <div> con estilo
- 9. ESTRUCTURA HTML. Los bloques <div> se pueden usar para estructurar nuestro sitio web, sin embargo en HTML5 se substituyen por otros bloques llamados etiquetas estructurales que son mucho más fácil de entender y que se verán posteriormente.
- 10. COMENTARIOS EN HTML. Como todo lenguaje, HTML nos permite comentar nuestro código para organizarlo de manera que sea más entendible. Para comentar un código se inicia con <!-- y se termina con --> como se muestra en el siguiente ejemplo:
- 11. AGRADECIMIENTOS ESPECIALES. Quiero agradecer públicamente a la excelente plantilla de profesores de la Universidad Politécnica de Madrid, muy especialmente al profesor Juan Quemada, pues gracias a sus MOOC este material ha sido posible. http://www.upm.es/ https://www.facebook.com/universidadpolitecnicademadrid https://twitter.com/La_UPM/ https://www.youtube.com/user/UPM https://www.instagram.com/somosupm/