HTML.pdf
- 1. ¿Qué es HTML? { } <Por="Daniel Torres"/> <!--boot-->
- 2. ¿Qué es HTML? { } HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript). "Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen "elementos" especiales como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output> (en-US), <progress>, <video>, <ul>, <ol>, <li> y muchos otros.
- 3. ¿Cómo insertar una imagen en HTML? { } Para insertar una imagen necesitamos usar la marca <img> y para facilitar el proceso, se pone la imagen en la misma carpeta en la que esté guardada el archivo .html que contiene nuestra página. "src" hace referencia a la ruta de donde proviene la imagen, al ponerla en la misma carpeta que el archivo .html solo hace falta escribir el nombre de la imagen con su respectiva extensión, en este caso .jpg en el ejemplo. Ejemplo: <img src="funny_cat.jpg">
- 4. ¿Cómo se coloca una imagen de fondo en HTML? { } Si queremos poner un fondo en nuestra página necesitaremos crear un archivo .CSS que contendrá las funciones backgrund-image, background-size y background-repeat, las cuales nos sirven para seleccionar la imagen, ajustar el tamaño y quitar el modo mozaico predeterminado respectivamente. Luego en nuestro archivo .HTML usaremos la marca <link> y dentro de esta usaremos href para especificar la ruta del archivo .CSS para poder usar el código del archivo .CSS que creamos, en este ejemplo se llama "background.css". Ejemplo: .CSS body{ background-image: url('heman_back ground.jpg'); background-size: cover; background-repeat: no-repeat; } .HTML <link rel="stylesheet" href="background.css">
- 5. ¿Cómo insertar un texto en HTML? { } Cuando queremos poner texto en nuestra página, usamos las marcas <h1> que corresponden a un titulo y solo se puede usar una vez, mientras que <h2>, <h3>, etc. se pueden usar indefinidamente. Si queremos escribir un párrafo, utilizamos <p>, una característica especial es que HTML diferencia los párrafos y hace un espaciado predeterminado entre estos Ejemplo: <h1>Soy un titulo</h1> <p>y yo soy un parrafo</p> <p>hay un espacio predeterminado entre parrafos</p>
- 6. ¿Cómo se inserta un video en HTML? { } Cuando queremos insertar un video en nuestra página usamos la marca <video> la cual nos permite incorporar un video de la extensión que soporte el navegador, hoy en día los navegadores soportan la mayoría de formatos de video comerciales, pero para asegurarse de que el video se muestre en todos los dispositivos, se suele poner 2 o más videos iguales con diferente formato y si finalmente no se reproduce, este informa con un mensaje que el navegador no es compatible y da paso a la descarga del video. Ejemplo: <video> <source src="nyan_cat.mp4" type="video/mp4"> <source src="nyan_cat.ogg" type="video/ogg"> Tu navegador no soporta el formato de video </video>
- 7. ¿Cómo se crea un hipervínculo en HTML? { } Para esto requerimos de la marca <a> para darle el atributo de hipervínculo a un bloque de texto y para especificar el enlace usaremos href Ejemplo: <p> <a href="https://www.google.com">la página de inicio de búsqueda de google</a>. </p>
- 8. ¿Cómo crea una tabla en HTML? { } Se crean usando las etiquetas <table> y </table>. En ella se incluyen dos etiquetas importantes: <tr>, que es para crear filas de tablas y <td>, para crear celdas de datos. Todo lo que esté dentro de ambas etiquetas es el contenido de la celda de la tabla. Ejemplo: <table> <tr> <td>servicio 1</td> <td>servicio 2</td> <td>servicio 3</td> <td>servicio 4</td> </tr> <tr> <td>costos</td> <td>produccion</td> <td>diseño</td> <td>fotografia</td> </tr> </table>
- 9. ¿Cómo se crea un menú de opciones en HTML? { } Para poder crear un menú de opciones tendremos que usar las marcas <ul> que calcificaremos como menú para la lista, <li> que serán los elementos de la lista y <a> para con la función href para anclar una dirección y que este texto tenga una función, lo que conocemos como hipervínculo. nota: en el ejemplo, en el espacio donde va "#", se refiere a una dirección o enlace de nuestra página, en este caso se pone "#" ya que está sin especificar para hacer el ejemplo. Ejemplo: <ul class="menu"> <li><a href="#">inicio</a></li> <li><a href="#">productos</a></li> <li><a href="#">servicios</a></li> <li><a href="#">acerca de</a></li> </ul>
- 10. Gracias por leer{ } <Por="Daniel Torres"/> <!--shutdown-->