Want to make creations as awesome as this one?
Register now
Report content

More creations to inspire you

BIDEN’S CABINET

Presentation

YURI GAGARIN IN DENMARK

Presentation

C2C VOLUNTEER ORIENTATION

Presentation

TALK ABOUT DYS WITH TEACHER

Presentation

CIRQUE DU SOLEIL

Presentation

LAYOUT ORGANIZATION

Presentation

TALK ABOUT DYS TEACHER-TEACHER

Presentation

Discover more incredible creations here

Transcript

Empezar

PRESENTAción

PARTES DEL HTML

SINTAXIS DEL HTML

Etiquetas: Los elementos HTML están encerrados entre corchetes angulares, por ejemplo, <p>. Las etiquetas están emparejadas para indicar el inicio y el final del texto que se marca. Etiqueta de apertura: Comienza con un símbolo < >. Por ejemplo, <h1>. Contenido: Contiene instrucciones sobre cómo mostrar el elemento en la página. Etiqueta de cierre: Termina con un símbolo </ >. Por ejemplo, </h1>. Las etiquetas se deben cerrar de acuerdo a como se abren. Atributos: El valor de los atributos siempre se encierra con comillas. Los atributos no se pueden comprimir. La estructura básica de una página web en HTML se compone de las etiquetas <html>, <head> y <body>: <html>: Indica el comienzo de la página. <head>: Contiene información descriptiva sobre el sitio. <body>: Abarca todos los elementos visibles dentro de la págin

ELEMENTOS DE UN HTML

Los elementos HTML son una serie de etiquetas que le dicen al navegador cómo mostrar el contenido de una página web. Estos elementos añaden semántica y formato a partes del documento, como texto en negrita, listas, tablas, hiperenlaces e imágenes embebidas. Las etiquetas HTML están compuestas por tres partes: Etiqueta de apertura: Comienza con un símbolo < > Contenido: Breves instrucciones sobre cómo mostrar el elemento en la página Etiqueta de cierre: Cierra con un símbolo </ > Algunos ejemplos de elementos HTML son: <hr/>: Solo tiene una etiqueta <li> y </li>: La etiqueta de cierre es opcional <menu> y </menu>: Ambas etiquetas son obligatorias <ol> y </ol>: Ambas etiquetas son obligatorias <p> y </p>: La etiqueta de cierre es opcional <pre>: Representa texto preformateado que se muestra en una fuente fija, no proporcional, exactamente como es mostrado en el archivo <ul> y </ul>: Ambas etiquetas son obligatorias Otra parte fundamental de un elemento HTML son los atributos, que tienen dos secciones: Nombre: Identifica la información adicional que un usuario quiere agregar Valor del atributo: Da más detalles que el anterior

Atributos universales clásicos Los atributos universales clásicos están contemplados en la mayoría de las etiquetas HTML. Estos son los más conocidos: Atributo HTML Descripción Ejemplo id Sirve para identificar de forma individual a cada elemento HTML. id="ejemplo" class Permite asignar un elemento a una o varias clases. class="coches" style Define el estilo de un elemento HTML y puede determinar, por ejemplo, su color, fuente o tamaño. style="color: blue; font-size: 2em" title Contiene información adicional sobre el contenido de un elemento; se muestra, por ejemplo, en una ventana separada cuando se pasa el ratón por encima del elemento en cuestión. title="texto de ejemplo" lang Establece el idioma base de un documento. <html lang="es"> dir Define el sentido de lectura de un texto, bien sea de izquierda a derecha o viceversa. <html dir="ltr">ejemplo</html> Atributos HTML específicos Existen numerosos atributos HTML específicos para definir elementos concretos. Estos son los más utilizados: Atributo HTML Descripción Ejemplo alt Muestra un texto alternativo si no se puede cargar o mostrar una imagen. <img src="https://www.ionos.mx/digitalguide/cocherojo.jpg" alt="Coche deportivo rojo en un semáforo."> height Establece la altura de un elemento en px. <img alt="el coche rojo" height="220"> width Establece el ancho de un elemento en px. <img alt="el coche rojo" width="220"> href Define la URL de un enlace. <a href="https://www.paginaejemplo.es" title="Más información"> hreflang Establece el idioma del documento vinculado. <a href="https://www.paginaejemplo.es" lang="es" hreflang="en">Información en inglés</a> target Define dónde se debe abrir un enlace. <a href="https://www.paginaejemplo.es" target="_blank"> rel Define la relación entre el documento target y su vínculo. <a rel="nofollow" href="https://www.paginaejemplo.es/">pagina de ejemplo</a> src Define el origen de un elemento. <img src="https://www.ionos.mx/digitalguide/cocherojo.jpg" alt="el coche rojo"> autoplay Garantiza que un determinado contenido multimedia se reproduzca automáticamente; sin embargo, la mayoría de los navegadores pueden anular esta configuración. <reproducción automática de vídeo> poster Define una imagen que previsualizar cuando se inserta un vídeo en HTML. <video controls poster="previsualización.png">

ENTIDADES EN HTML

COMENTARIOS EN HTMNL

¿Cómo insertar comentarios en HTML 5? Ahora que ya sabemos qué son los comentarios HTML, vamos a ver cómo agregarlos a nuestro código de manera fácil y rápida. Para hacer comentarios en HTML se utiliza la etiqueta <!– y –>, “<!– COMENTARIO –>”. Al principio y al final del comentario. Ejemplo de comentario en HTML: <!DOCTYPE html> <html> <head> <title>Mi página web</title> </head> <body> <!– Este es un comentario –> <h1>Bienvenido a mi página web</h1> <p>Esta es una página de ejemplo</p> </body> </html> Este código ejecutaría toda la parte HTML excepto la parte resaltada en rojo, que es el comentario HTML incluido en este código. Por lo que este comentario sólo tendrá relevancia para los desarrolladores que se paren a leerlo y entender el código.

COMENTARIOS

¿Cómo comentar varias líneas de código en HTML? Ahora puedes preguntarte: ¿Esto funciona para comentarios multilínea? La respuesta es Sí, y ahora te lo explicamos mejor con un ejemplo. Para comentar varias líneas de código en HTML5 se utilizan las etiquetas HTML que hemos mencionado antes “<!–” “–>” con el comentario entre las dos etiquetas. Ejemplo de comentario HTML en varias líneas de código: <!DOCTYPE html> <html> <head> <title>Mi página web</title> </head> <body> <!– <h1>Bienvenido a mi página web</h1> <p>Esta es una página de ejemplo</p> –> </body> </html> En este ejemplo, la etiqueta <h1> y la etiqueta <p> estarían dentro del comentario. Estas serían dos líneas de código dentro de un comentario. Puedes comentar todas las líneas de código que necesites, mientras todo el comentario esté dentro de las etiquetas correspondientes. No importa si quieres comentar una línea de código o 200, el método es el mismo, todo el comentario debe ir incluido dentro de las etiquetas de abrir y cerrar comentario.

Normas de codificación de un documento HTML.

Las normas de codificación son un conjunto de directrices y reglas que los equipos de desarrollo siguen al escribir código. Estas normas establecen convenciones sobre la estructura del código, el estilo de escritura, la nomenclatura y otros aspectos que afectan la legibilidad y mantenibilidad del código. Aquí algunas normas de codificación para documentos HTML: Las etiquetas HTML se escriben encerradas entre ángulos, normalmente con una etiqueta de inicio y otra de fin. La etiqueta de cierre lleva una barra inclinada "/" antes del código. Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas, pero es una buena práctica escribir todas las etiquetas en minúsculas para mayor coherencia y legibilidad. Para evitar la confusión con el comienzo de una referencia de caracteres, los autores deberían usar "&" (ASCII decimal 38) en lugar de "&". Los autores también deberían usar "&" en valores de atributos, ya que las referencias de caracteres están permitidas dentro de valores de atributos CDATA.