Want to create interactive content? It’s easy in Genially!

Get started free

PRESENTACIÓN HTML

Marisa Yague Cuenca

Created on June 25, 2023

Start designing with a free template

Discover more than 1500 professional designs like these:

Psychedelic Presentation

Chalkboard Presentation

Witchcraft Presentation

Sketchbook Presentation

Genial Storytale Presentation

Vaporwave presentation

Animated Sketch Presentation

Explore all templates

Transcript

Tecnología

HTML

Introducción a la estructura básica de toda página web

índice

1. Que es el HTML

7. Body: Bloques Genéricos

2. Herramientas para trabajarlo

8. Body: Listas

3. Estructura básica

9. Body: Tablas

4. Atributos

10. Body: Formularios

11. Quiz

5. Comentarios

12. Otros elementos

6. Elementos en la cabezera

¿Qué es el HTML?

HTML, siglas en inglés de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un lenguaje de lectura secuencial, es decir, interpreta el código escrito en el documento desde arriba hacia abajo, de izquierda a derecha.

Herramientas para trabajar con HTML

A la hora de crear y editar código existen muchas alternativas para trabajar. Primero, hay editores adaptados a cualquier necesidad como Visual Studio Code. También existen editores online que te permiten trabajar con distintos lenguajes de programacion sin necesidad de descargar nada, como Repplit. En nuestro caso, utilizaremos lo más sencillo al alcanze de cualquier ordenador: el blog de notas.

Para aquellos curiosos, si pulsáis el botón derecho del ratón en cualquier página web y seleccionáis la opción Inspeccionar ¡podréis ver y modificar de forma local el html de cualquier dirección!

(Para más información sobre qué opciones están disponibles, ver el video de la página siguiente)

VÍDEO

Estructura básica del html

El HTML es un lenguaje basado en etiquetas con distintos atributos que deben abrirse con los siguientes símbolos <> , y en la mayoría de casos, cerrarse de la siguiente forma </>. Para construir una página web hay ciertos elementos indispensables, que son el Doctype, el html, el head y el body.

Elementos básicos del HTML

<body>

<head>

<html>

Este es el elemento más importante en lo referente al contenido del documento ya que aquí es donde se añadirá todo lo que verá en el navegador el usuario cuando cargue la página. Este elemento está después del elemento <head> y dentro de él se añaden el resto de elementos que se van a ver en la presentación. Todos estos elementos son los que contendrán los contenidos que harán ser la página lo que se quiera.

<!DOCTYPE>

Dentro del elemento <head> vamos a definir la configuración de la página. Dentro estarán definidos los elementos que nos indican cómo es la página a nivel de configuración, qué estilos tiene, qué tipo de codificación lingüística tiene que usar el navegador, donde están los archivos cargar, la información descriptiva y palabras clave que definen la página para que los buscadores puedan encontrarla y clasificarla. Es siempre lo primero que se lee dentro del elemento <html>

El <html> siempre va a continuación del <!DOCTYPE>. Todos los elementos de la página web estarán siempre contenidos dentro del <html>. El elemento está constituido por una etiqueta de apertura <html>, y una etiqueta de cerrado </html> en la última línea del archivo. El contenido del elemento html es toda la página web.

El <!doctype> es un elemento de configuración que indica la versión del lenguaje con el que está hecha la página. Es muy importante que esta información esté en la primera línea del documento que generamos, para que sea lo primero que encuentre el navegador al leer el archivo.

Atributos

Las etiquetas que se usan en el HTML tienen atributos, que ayudan a ampliar la información que estas proporcionan. Estos se declaran a través de una sintaxis clave-valor, donde se expresa el atributo seguido de un signo igual (=) con su valor elegido correspondiente entre comillas (""). Algunos atributos son únicos y pertenecen solo a una etiqueta concreta, mientras que otros son generales y pueden usarse siempre.

atributos generales más utilizados

Comentarios

Todo tipo de código tiene una forma de implementar expresiones escritas o indicaciones sin que la máquina las intente leer o interpretar. Esto son los comentarios. En HTML un comentario se escribe de la siguiente forma: <!-- --> Muy importante saber que los comentrios no pueden anidarse, es decir, no se deben meter unos dentro de otros.

ELEMENTOS DE CABEZERA

<script>

<title></title>

<link>

<meta>

Permite añadir información en forma de código

Proporciona a la página la información necesaria para el navegador

Pemite cargar otras páginas o documentos

Otorga un nombre a la página web

BLOQUES GENÉRICOS

<div></div>

Agrupa en un bloque una sección de código. Muy útil cuando se quiere organizar y decorar la página con estilos.

Headings

Son seis elementos h1, h2, h3, h4, h5 y h6 ordenados por importancia donde h1 es el más importante y h6 el menos importante. Sirven para indicar la cabezera de los textos

<p></p>

Indican el uso de un párrafo de texto. Es interesante saber que sólo permitirá un espacio entre dos caracteres, y que para meter más se ha de usar &nbsp.

<hr>

CÓDIGO

Realiza una separación horizontal entre contenidos con una línea.

¡Listas!

En html existen 3 tipos de listas, las de definicion, las ordenadas y las no ordenadas

LISTAS

No Ordenada

Ordenada

De Definición

<ul> <!--Así se inicia--> <li>Aquí va un elemento de la lista</li> <li>Aquí va otro elemento de la lista</li> </ul>

<ol> <!--Así se inicia--> <li>Aquí va un elemento de la lista</li> <li>Aquí va otro elemento de la lista</li> </ol>

<dl> <!--Así se inicia--> <dt>Aquí va el término</dt> <dd>Aquí va la definición</dd> </dl>

¡TABLAS!

<table> <!--Así se inicia--><caption>Esto es la cabezera de la tabla</caption><th>Cabezera de columna1</th> <th>Cabezera de columna2</th> <tr> <!--Esta etiqueta define una fila--> <td>Columna1.1</td> <!--Esta etiqueta define una columna--> <td>Columna1.2</td> </tr> <tr> <td>Columna2.1</td> <td>Columna2.2</td> </tr> </table>

Atributos de las tablas

Atributos de las cabezeras de columnas <th>: colspan = "(número)" (indica cuantas columnas se quieren ocupar con el elemento) scope = "" (indica si es cabezera de fila o de columna. Puede ser entre otros "col" o "row") sorted = "" (indica la en que lugar aparece la columna. Puede ser "reversed", "middle", "bottom" o "baseline") Atributos de las columnas <td>: colspan = ""

Formularios

<form> <!--Así se inicia un formulario--><label>Esto es una Etiqueta</label><br><input type="text" placeholder="Soy el texto que sale si no se ha escrito nada todavía"><br> <input type="date"><br> <input type="checkbox" disabled value="Opción">Casilla<br><button>Soy un botón</button><select><option>Opcion1</option><option>Opcion2</option><option>Opcion3</option></select><br> <textarea placeholder="Soy un área para meter texto" cols="20" rows="5"></textarea><br> <input type="submit"> </form>

Mini Quiz Listas, Tablas y Formularios

Empezar

Mini-Quiz HTML

Pregunta 1/3

<!DOCTYPE hmtl> <html lang="es"> <head> <title>QUIZ</title> </head> <body> <ol type="I"> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol> </body> </html>

Mini-Quiz HTML

Pregunta 2/3

Mini-Quiz HTML

Pregunta 3/3

<table> <caption>Tabla</caption> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table>

🎉

¡Prueba superada!

¡Ya dominamos lo más esencial de las listas, tablas y formularios! ¡Solo queda aprender unos cuentos elementos más!

Continuar aprendiendo

Otros elementos ÚTILES

<span></span>

<a></a>

<i></i>

Enlace

Texto en cursiva

Forma grupos como la etiqueta <div>

<br>

<img>

<b></b>

Salto de línea

Imagen

Texto en negrita

¡Hasta aquí la lección!

En esta presentación se ha expuesto lo más básico que hay que saber del HTML, ¡pero todavía hay mucho más! Te invito a investigar todos los atributos y etiquetas que no se han explicado, además de juguetear con el código que encuentres por Internet. ¡El HTML es un mundo de posibilidades!
Código ejemplo:

<body> <p>Esto son dos inputs sin salto de línea</p> <input type="button" disabled value="1"> <input type="button" disabled value="2"> <p>Esto son dos input con salto de línea</p> <input type="button" disabled value="1"> <br> <input type="button" disabled value="2"> </body>

Código ejemplo:

<body> <p>Este oración no está en negrita. <b>Esta frase sí</b></p> <p><b>Todo este texto está en negrita</b></p> </body>

Hay muchos más tipos de input diferentes con condiciones y efectos especiales como: type = "" (color, email, button, datetime, image, file, month, number, password, reset, search, url...) Ahora vamos a explicar los atributos que se han usado en el código de ejempo: disabled (deshabilita el campo) placeholder="" (Pone un texto por defecto que se elimina al escribir en el campo) value="" (pone un valor al campo que es el que se enviará si este se selecciona cuando se envía el formulario) cols="(número)" (define el número de filas que ocupará el textarea) rows="(número)" (define el número de columnas que ocupará el textarea)

Código ejemplo:

<body> <p>Vamos a insertar una imagen</p> <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Ejemplo.png" alt="imagen" height="200px" width="200px"> </body>

Cuando se inserta una imagen se debe definir su ruta/dirección con el atributo src. Los otros atributos son alt, que carga el texto introducido si la imagen falla al cargar, width y height, que definen el ancho y alto de la imagen en píxeles respectivamente.

Código ejemplo:

<body> <p>Este oración no está en cursiva. <i>Esta frase sí</i></p> <p><i>Todo este texto está en cursiva</i></p> </body>

Código ejemplo:

<body> <a href="">Esto es un enlace</a> </body>

En los enlaces el atributo href="(enlace)" es esencial, ya que es el que indica a la página hacia dónde te tiene que llevar cuando lo pulses.