Html
María Fernanda Rivera
Created on August 29, 2024
More creations to inspire you
NORMANDY 1944
Horizontal infographics
BEYONCÉ
Horizontal infographics
DEMOCRATIC CANDIDATES NOV DEBATE
Horizontal infographics
ONE MINUTE ON THE INTERNET
Horizontal infographics
SITTING BULL
Horizontal infographics
RUGBY WORLD CUP 2019
Horizontal infographics
GRETA THUNBERG
Horizontal infographics
Transcript
DOCUMENTOS QUE PREDOMINAN
relacionados
Sintáxis
Elementos
Atributos
motivación
Comentarios
Entidades
HTML
Estricto
Transitorio
Frameset
HTML5
Necesidades
¿Qué son?
¿Qué es?
Deseos
Ejemplos
Carácteres reservados
compatible con la definición del estándar HTML 4.01.
No es un documento 100% estricto
En el caso de que la página esté compuesta por frames
Reducido a la máxima expresión
Un elemento HTML comienza con una etiqueta de apertura o inicial, por ejemplo, <h1>.Un elemento HTML termina con una etiqueta de cierre o final, por ejemplo, </h1>. El contenido de un elemento HTML está encerrado dentro de las etiquetas de inicio y final, por ejemplo, <h1> Este es el contenido del elemento. </h1>. También puede contener atributos
Interactividad
Animación
Raíz
Head
Style
Body
Address
Title
Meta
Link
Base
Article
Aside
Footer
Main
Hnum
Header
Atributos universales clásicos
Atributos específicos
Nuevos atributos desde HTML5
Atributos de evento
Atributos de datos
Contexto ¿Qué situación o condición desencadena el trabajo? Rol ¿Qué persona o ejecutor realiza este trabajo? Etapa ¿De qué parte del recorrido del cliente se trata?
Trabajo superior ¿De qué trabajo (más aspiracional) forma parte? Trabajo menor ¿Qué trabajos (más funcionales) son parte de esto? Otros trabajos ¿Qué otros trabajos vienen antes y después de este?
Actividades
Resultados ¿Qué consigue el cliente? ¿Qué resultados extrínsecos son estables a lo largo del tiempo y son independientes de la solución? ¿Cómo va a cerrar la brecha de la felicidad?
Necesidades ¿Qué dolores, problemas y frustraciones. empujan al cliente hacia el nuevo producto? Deseos ¿Qué ganancias, oportunidades y triunfos atraen al cliente hacia el nuevo producto?
Inercia ¿Qué hábitos impiden al cliente cambiar al nuevo producto? Ansiedad ¿Qué dudas tiene el cliente que le impiden cambiar al nuevo producto?
Sentidos ¿Se consigue un Momento Wow activando algunos de los cinco sentidos? Emociones ¿Se consigue un Momento Wow provocando ciertos sentimientos?
El elemento HTML <base> especifica la dirección URL base que se utilizará para todas las direcciones URL relativas contenidas dentro de un documento. Sólo puede haber un elemento <base> en un documento.
El elemento HTML <head> provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.
El elemento HTML <link> especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos.
Sus etiquetas son: <meta> (solo tiene una).
Sus etiquetas son: <style> y </style> (ambas obligatorias).
El elemento <title> HTML define el título del documento que se muestra en un browser la barra de título o la pestaña de una página. Solo contiene texto; las etiquetas dentro del elemento se ignoran.
El elemento <body> de HTML representa el contenido de un documento HTML. Solo puede haber un elemento <body> en un documento.
Seleccionamiento del contenido: El elemento HTML <address> aporta información de contacto para su <article> más cercano o ancestro <body>; en el último caso lo aplica a todo el documento.
Todos los elementos que utilicemos en el documento tienes que estar dentro de la definición. Este modo es interpretado correctamente por todos los navegadores y es compatible con el estándar CSS. Además que conseguiremos tener documentos accesibles. Aunque no contempla las reglas del estándar XHTML sobre anidación, escritura,… es un punto sencillo para hacer una migración hacia XHTML. La cabecera que utilizaremos en este caso será: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> Hay que tener cuidado con el modo estricto ya que algunos navegadores antiguos pueden no interpretar este tipo de documentos.
Estricto
Crea una nueva capa de contenido con todas las funcionalidades de Genially.
En el caso de que nuestra página esté compuesta por frames deberemos de utilizar un tipo de DOCTYPE frameset. La cabecera que utilicemos en estos casos será: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">
Frameset
- Genera experiencias con tu contenido.
- Tiene efecto WOW. Muy WOW.
- Logra que tu público recuerde el mensaje.
- Activa y sorprende a tu audiencia.
Crea una nueva capa de contenido con todas las funcionalidades de Genially.
Plásmala en una ventana
¿Tienes una idea?
No llega a ser un documento 100% estricto, pero está en camino o en transición a conseguirlo. De igual manera que en el modo estricto los elementos deben de ser de la especificación HTML 4.01, si bien se permiten elementos que estén obsoletos o deprecados. La cabecera que utilizaremos en estos casos será: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Transitorio
Una entidad HTML es un conjunto de caracteres ("string") que comienza con un ampersand (&) y termina con un punto y coma (;) . Las entidades son utilizadas frecuentemente para imprimir en pantalla caracteres reservados (aquellos que serían interpretados como HTML por el navegador) o invisibles (cómo tabulaciones). También pueden usarse para representar caracteres que no existan en algunos teclados, por ejemplo caracterés con tilde o diéresis.
¿Qué es una entidad?
En HTML5 han dado un giro a la cabecera ya que han visto que era demasiado compleja para los desarrolladores. Así que lo han reducido a la máxima expresión. La cabecera que utilizaremos en los documentos HTML5 será: <!DOCTYPE html> Una de las cosas que vemos en este DOCTYPE es que ya no existe una dependencia del DTD del lenguaje.
HTML5
Los comentarios en HTML son unos trocitos de código que nos permiten introducir en nuestra página web contenidos que no se van a ver en el navegador. Si quieres verlos, vas a tener que meterte en el código fuente de la web (“botón derecho->ver código fuente" o algo similar, depende del navegador).Los comentarios en HMTL comienzan con el símbolo de "menor que", una admiración y dos guiones, y terminan con dos guiones y el símbolo de "mayor que". O más sencillo: es una etiqueta HTML que empieza con una admiración y dos guiones y termina con dos guiones: <!-- Esto es un comentario --> <p>Esto es un párrafo HTML</p> <!-- Esto es otro comentario -->
- Genera experiencias con tu contenido.
- Tiene efecto WOW. Muy WOW.
- Logra que tu público recuerde el mensaje.
- Activa y sorprende a tu audiencia.
Crea una nueva capa de contenido con todas las funcionalidades de Genially.
Plásmala en una ventana
¿Tienes una idea?
Algunos caracteres son reservados para uso en HTML, es decir que no pueden utilizarse sin que el navegador los interprete como parte del código HTML. Por ejemplo, al utilizar el simbolo para "menor a" (<), el navegador interpretara cualquier texto que siga como parte de una etiqueta. Para utilizar estos caracteres como texto, deben reemplazarse por la entidad que les corresponda, a saber:
El Elemento HTML Footer (<footer>) representa un pie de página para el contenido de sección más cercano o el elemento raíz de sección (p.e, su ancestro mas cercano <article>, <aside>, <nav>, <section>,<blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.
El elemento de HTML Header (<header>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.
Los elementos de encabezado implementan seis niveles de encabezado del documento, <h1> es el más importante, y <h6>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.
El elemento HTML <main> representa el contenido principal del <body> de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación. Este contenido debe ser único al documento, excluyendo cualquier contenido que se repita a través de un conjunto de documentos como barras laterales, enlaces de navegación, información de derechos de autor, logos del sitio y formularios de búsqueda (a menos, claro, que la función principal del documento sea un formulario de búsqueda).
Los atributos HTML se utilizan para almacenar más información sobre los elementos de una etiqueta HTML. Constan de un nombre y un valor. Los atributos HTML se encuentran en la etiqueta de apertura y son case insensitive (no distinguen entre mayúsculas y minúsculas). Se recomienda encarecidamente escribir sus valores entre comillas para evitar errores, aunque no es de obligado cumplimiento. Así es como se insertan los atributos HTML en el código: <elemento nombre="" del="" atributo="Valor del atributo"></elemento>
Además de los atributos HTML mencionados anteriormente, existen otra serie de atributos que solo pueden evaluarse a través de un script o utilizarse con CSS. De esta manera se puede proporcionar información que no se va a mostrar de forma visual. Estos atributos HTML siempre comienzan con data-. Puedes definirlos con setAttribute y leerlos con getAttribute. Los motores de búsqueda tampoco analizan estos atributos HTML. Para los atributos de datos solo se permiten letras minúsculas, números, guiones, puntos y dobles puntos. id="Elementos de ejemplo" data-colums="5" data-index-number="1385" data-parent="html5"> </article>