Marcas Estructurales HTML

Aprende cómo usar las marcas estructurales de HTML para crear un sitio web atractivo. En este episodio, Daisy te presenta los elementos HTML requeridos (html, body y doctype), así como te muestra cómo usar las etiquetas h1, h2, p, br y blockquote para formatear tu página.

  • Click here for the full video transcript

    >>UNIQUE ID: Querida Daisy, Mi amigo Garret quien es real ha estado teniendo problemas con las mujeres. Conduce coches trucados y amansa leones !he! no escriba esta parte. Yo simplemente estaba proporcionando la evolución del caracter…

    >>DAISY: Aaaa… Sigue así por un tiempo. Ah, entonces vamos.

    >>UNIQUE ID: Mi amigo quiere un perfil en linea para atraer chicas calientes robot, quiero decir algun tipo de chicas… No necesariamente tienen que ser robots Porque definitivamente no soy un robot, y tampoco es mi amigo. Intenté hacer una página HTML, pero cuando la abrí en mi navegador web no se ve bien. ¿Qué pasa? Sinceramente, el amigo de Garret. PD: Adjunta está una foto de un muy atractivo robot que puedes usar en el sitio web Como un marcador de posición, por supuesto.

    >>DAISY: ¡Oh mi! Hmmm, mm hm. Aha, como yo sospechaba. Asi, “el amigo de Garret” esta en la dirección correcta según la página web, pero… Bueno, no. La única cosa que tenías bien era el nombre de tu fichero index.html. ¿Dónde están tus etiquetas HTML? Sin ninguna etiqueta, tu navegador web es como qué basura? ¿Qué hago con esto? no te sientas mal, sin embargo. Te enseñaré cómo usar etiquetas HTML para formatear tu sitio web. En primer lugar, tienes que decirle al navegador web qué tipo de documento está examinando. Tú haces esto con el DOCTYPE. Esto especifica la versión de HTML que estás usando. Antes de que hubiera HTML5 había, píllado, HTML4. Este tipo de documento era muy largo y parecía terrorífico, pero afortunadamente para tí, el documento de HTML5 es fácil de recordar. Todo lo demás irá dentro de una etiqueta HTML, y todas las partes visibles deben ser colocados en la etiqueta tipo El principal problema con tu página es que todo el texto está metido junto en un gran párrafo. No importa cuántos espacios o saltos de líneas pongas entre dos palabras, los navegadores web lo mostrarán como un único espacio. Esto es lo que se conoce como colapso de espacios en blanco. Necesitas usar marcas estructurales de HTML para dividir tu texto. Los títulos son etiquetas útiles para diferenciar secciones de tu página. El título más grande, más fuerte en HTML es h1. Así que vamos a encerrar tu título “único robot que busca lo mismo” en una etiqueta h1. Muchos de los textos en tu página probablemente pertenecen a una etiqueta párrafo, como esta. Supongo que “seis cosas sin las que nunca podría vivir” es un nuevo título, sin embargo, lo encerraremos en una etiqueta h2. h2 es un subtítulo de h1, así sabemos que este contenido todavía pertenece al título principal, “unico robot buscando lo mismo” En caso de estar preguntandose, La tarjeta h se sigue todo hasta la h6. Cada uno consigue uno mas pequeño. Las seis cosas que tu no podrias vivir sin otro parrafo de la tarjeta Pero es un poco dificil de leer sin saltos de línea, así que use la etiqueta br para romperlos. Ahora, tu cita inspiradora es texto tomado desde otra fuente. así que debe ir dentro de una etiqueta blockquote. Por defecto, blockquotes sangra el texto ligeramente. pero ten en cuenta que aunque tu navegador va a cambiar la apariencia del contenido basado en las etiquetas usadas, Tú deberías asegurarte de que la etiqueta es apropiada para el tipo de contenido dentro de esta, Y no basar tu elección en el resultado visual. Los cambios visuales deberían ser hechos después con CSS. Finalmente, usaré una etiqueta img para incluir tu ardiente foto de robot… Y ya hemos terminado! Te ves fabuloso ;) Ve por ellos tigre!

    Usando el marcado estructural de HTML, fuimos capaces de crear una interesante página web para mi atractivo amigo robot.

    En el siguiente vídeo, descubriremos como añadir significado a nuestra página y cambiar el formato de nuestro texto con marcas semánticas de HTML .

Únete al debate

Subscribe to our Mailing List

Stay up to date on the latest videos and tutorials with our monthly newsletter

The email entered is invalid
×