Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es...
Transcript of Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es...
![Page 1: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/1.jpg)
INTRODUCCIÓN A LA
MAQUETACIÓN WEB(HTML & CSS)
about.me/davideguizabal@davideguizabal
![Page 2: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/2.jpg)
![Page 3: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/3.jpg)
¿Qué perseguimos con estas sesiones?
![Page 4: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/4.jpg)
Qué es una página web
![Page 5: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/5.jpg)
Qué es una página web
![Page 6: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/6.jpg)
¿Cómo funciona Internet?
![Page 7: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/7.jpg)
¿Cómo funciona Internet?
![Page 8: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/8.jpg)
¿Cómo funciona Internet?
![Page 9: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/9.jpg)
¿Cómo funciona Internet?
![Page 10: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/10.jpg)
¿Cómo funciona Internet?
![Page 11: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/11.jpg)
¿Cómo funciona Internet?
![Page 12: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/12.jpg)
¿Cómo funciona Internet?
![Page 13: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/13.jpg)
¿Cómo funciona Internet?
![Page 14: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/14.jpg)
¿Cómo funciona Internet?
![Page 15: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/15.jpg)
¿Cómo funciona Internet?
![Page 16: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/16.jpg)
… incluso la más sencilla
![Page 17: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/17.jpg)
HTML
Lenguaje de programación que se utiliza para el desarrollo de páginas de Internet.
Se trata de la sigla que corresponde a HyperText MarkupLanguage, es decir, Lenguaje de Marcas de Hipertexto.
![Page 18: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/18.jpg)
HTML
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un
organismo sin ánimo de lucro llamado WorldWide Web Consortium, más conocido como W3C.
![Page 19: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/19.jpg)
Comentarios
<!-- Esto es un comentario -->
![Page 20: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/20.jpg)
¿Qué es una marca/etiqueta?
Hola, <strong>¿qué tal?</strong>
![Page 21: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/21.jpg)
¿Qué es una marca/etiqueta?
<p>Hola, <strong>¿qué tal?</strong></p>
Puedo poner una etiqueta dentro de otra (anidamientos).
![Page 22: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/22.jpg)
¿Qué es una marca/etiqueta?
<p>Hola, <strong>¿qué tal?</strong></p>
Toda etiqueta que se abre tiene que cerrarse. Siempre tiene que quedar una dentro de otra.
Bien
<p>Hola, <strong>¿qué tal? </p></strong>
Mal
![Page 23: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/23.jpg)
Anidamiento de las etiquetas
![Page 24: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/24.jpg)
Tipo de documento
<!DOCTYPE html>
html5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
html4
Qué tipo de documento es y cuál es su versión
![Page 25: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/25.jpg)
<head>
Aporta información para conocer mejor la página.
![Page 26: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/26.jpg)
<title>
Titula el contenido que estamos viendo
El usuario no ve en ningún momento lo que contiene el apartado <head> (a excepción de la etiqueta <title>).
El usuario puede ver esta etiqueta en la barra superior de su navegador o bien en los resultados de búsqueda de Google&cía.
![Page 27: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/27.jpg)
<meta>
Información para navegadores, robots de rastreo, etc.
![Page 28: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/28.jpg)
<body>
El contenido “en sí”. Lo que ve el usuario dentro del navegador.
![Page 29: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/29.jpg)
¿Cómo sé que lo hago bien?
Puedes acudir al validador de la W3C:https://validator.w3.org
Nos permitirá conocer si las etiquetas están bien estructuradas y organizadas, si los anidamientos son correctos, si no existen errores
de sintaxis de acuerdo al estándar, etc.
![Page 30: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/30.jpg)
<a>
La parte fundamental de HTML son los enlaces (links).
<p>Puedes descargar mi documento <a>aquí</a>.</p>
![Page 31: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/31.jpg)
Atributos
Muchas de las etiquetas HTML requieren del uso de atributos para poder concretar su comportamiento.
<a href=“documento.pdf”>aquí</a>
Nombre del atributoValor del atributo
![Page 32: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/32.jpg)
<a>
Deberemos de prestar mucha atención al uso de rutas relativas y/o absolutas para evitar enlaces rotos.
<a href=“documento.pdf”>aquí</a>
URL relativa
<a href=“/documento.pdf”>aquí</a>
URL absoluta
<a href=“http://midominio.com/documento.pdf”>aquí</a>
![Page 33: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/33.jpg)
<a>
También podemos enlazar correos electrónicos.
<a href=“mailto:direcció[email protected]”>aquí</a>
![Page 34: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/34.jpg)
<a>
Debemos prestar atención al título contextual del enlace.
<a title=“Documento PDF (300Kb)”href=“documento.pdf”>aquí</a>
![Page 35: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/35.jpg)
<a>
Para abrir un enlace en una nueva ventana/pestaña…
<a target=“_blank” href=“documento.pdf”>aquí</a>
![Page 36: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/36.jpg)
<img>
No enlazamos el recurso sino que lo incluimos en el contenido.
<img src=“logo.png” />
![Page 37: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/37.jpg)
<img>
En una imagen también podemos utilizar atributos para personalizarla y “mejorar” su apariencia.
<img src=“logo.png” width=“200” height=“75” />
![Page 38: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/38.jpg)
<img>
Los robots de búsqueda, los lectores de pantalla, etc. no son capaces de saber lo que contiene una imagen …
<img src=“logo.png” alt=“Logotipo de mi empresa” />
Debiéramos utilizar siempre que podamos un texto alternativo que describa lo mejor posible el contenido de la
imagen (salvo el elementos decorativos o redundantes).
![Page 39: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/39.jpg)
Cierre de las etiquetas
Etiqueta con contenido
<img src=“logo.png” alt=“Logotipo de mi empresa” />
Etiqueta sin contenido
<p>Este párrafo es muy importante.</p>
![Page 40: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/40.jpg)
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>
Estructuran jerárquicamente un contenido.
![Page 41: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/41.jpg)
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>
Estructuran jerárquicamente un contenido.
![Page 42: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/42.jpg)
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>
Estructuran jerárquicamente un contenido.
![Page 43: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/43.jpg)
<br />
Salto de línea sin generar un párrafo nuevo.
![Page 44: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/44.jpg)
<ul>, <ol>, <li>
Listas ordenadas y sin ordenar.
<ul><li>Ejemplo</li><li>De</li><li>Listado</li><li>Correcto</li>
</ul>
<ol><li>Buen</li><li>Listado</li><li>Ordenado</li>
</ol>
Bien Mal- Ejemplo<br />- De<br< />- Listado<br />- Mal<br />- Trabajado
1. Peor<br />2. Todavía
![Page 45: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/45.jpg)
<ul>, <ol>, <li>
Es recomendable emplear listas para los menús de navegación, los selectores de idioma, navegación por pestañas, etc.
Puedes anidar listas hasta el nivel que necesites.
![Page 46: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/46.jpg)
<strong>, <b>, <em> e <i>
Empleadas para marcar semánticamente el contenido y enfatizarlo visualmente.
Fragmento importante
<p><strong>¡Cuidado!</strong> Debes andar sin prisa.</p>
Destacado visualmente, pero sin afectar a significado
<p><b>Es recomendable</b> que andes sin prisa.</p>
Cambio de tono afectando a significado
<p><em>”Andando que es gerundio”</em> me lo repetía mucho.</p>
Términos técnicos, fragmentos en otro idioma, …
<p>Me encanta hacer <i>jogging</i> todas las tardes.</p>
![Page 47: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/47.jpg)
<acronym> y <abbr>
Empleadas para marcar semánticamente el contenido y enfatizarlo visualmente.
Abreviatura o acrónimo
<p>Ayer en la <abbr title=“National BasketballAsociation”>NBA</abbr> se marcaron muchos puntos.</p>
<abbr> es la correspondencia en html5 a <acronym>
![Page 48: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/48.jpg)
<strong>, <b>, <em>, <i> y <abbr>
Empleadas para marcar semánticamente el contenido y enfatizarlo visualmente.
El marcado semántico tiene mucho sentido para:
Posicionamiento en buscadoresAccesibilidad
Web semántica
![Page 49: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/49.jpg)
<div>
Etiqueta genérica (contenedor) para enmarcar un bloque de contenido dentro del HTML completo de una página.
![Page 50: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/50.jpg)
<span>
Etiqueta genérica para enmarcar un fragmento de contenido dentro de un párrafo, una lista, etc.
![Page 51: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/51.jpg)
<table>, <thead>, <tbody>, <tfoot>, <tr>, <th> y <td>
Maquetación de tablas de datos e información.
![Page 52: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/52.jpg)
<table>, <thead>, <tbody>, <tfoot>, <tr>, <th> y <td>
Para juntar filas y columnas y crear tablas más complejas utilizaremos los atributos rowspan y colspan respectivamente.
![Page 53: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/53.jpg)
html4 vs. html5
![Page 54: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/54.jpg)
<header>, <nav>, <section>, <article>, <aside> y <footer>
Estructuración semántica del contenido de una página.
![Page 55: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/55.jpg)
Diseño visual
ObjetivoSeparar los contenidos de la apariencia visual de
los mismos.
Para eso nacen las hojas de estilos en cascada(conocidas como CSS).
![Page 56: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/56.jpg)
Diseño visual
![Page 57: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/57.jpg)
CSS
Una hoja de estilo en cascada o CSS es un lenguaje utilizado para definir y crear la presentación visual de
un documento estructurado (como puede ser por ejemplo un documento HTML).
El W3C es el organismo encargado de concretar la especificación de las hojas de estilo como estándar web.
![Page 58: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/58.jpg)
Reglas CSS
h1 {color: #000;
}
a {background: #ff0000;
}
selector CSS
declaración CSS en formato <propiedad>: <valor>;
![Page 59: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/59.jpg)
Propiedades CSS
![Page 60: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/60.jpg)
Modelo de caja CSS
margin: área invisible que rodea el elemento y permite separarlo de otros elementos.padding: espacio entre el contenido del elemento y sus límites.border: límites del elemento.
![Page 61: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/61.jpg)
Selectores CSS
Etiquetas HTML
h1 {color: #000;
}
a {background: #ff0000;
}
![Page 62: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/62.jpg)
Selectores CSS
Clases
Necesarias cuando no quiero hacer lo mismo con todas las apariciones de una etiqueta HTML concreta. Me permite además agrupar etiquetas por una clase dada.
<a class=“boton”>Leer más</a>
.boton {color: #fff;background: #ffff00;
}
Emplea nombres de clase semánticos y en ningún caso descriptivos
![Page 63: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/63.jpg)
Selectores CSS
Identificadores
Son elementos únicos dentro de un documento HTML.
<p id=“introduccion”>Esta es una introducción al texto que vendrá luego …</p>
#intro {color: #fff;background: #ffff00;
}
Emplea nombres de clase semánticos y en ningún caso descriptivos
![Page 64: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/64.jpg)
Reglas CSS (II)
.boton {color: #000;
}
#pie {color: #000;text-transform: uppercase;
}
- Una regla CSS puede referirse a más de un selector.- Un selector puede aparecer en tantas reglas como sea necesario.
.botón,#pie {
color: #000;}
#pie {text-transform: uppercase;
}
![Page 65: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/65.jpg)
Reglas CSS (III)
h2 {font-family: Verdana;
}
p {font-family: Verdana;
}
.boton {font-family: Verdana;
}
- La herencia del valor ante una propiedad entre elementos y sus contenedores constituye la cascada.
body {font-family: Verdana;
}
![Page 66: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/66.jpg)
Reglas CSS (IV)
.texto {font-family: Verdana;
}
<p class=“texto”>Hola, qué tal</p><p class=“texto”>¿Cómo estás?</p><p class=“texto”>Yo bien.</p>
- Cuando algo se repite, podemos generalizar.
.texto {font-family: Verdana;
}
<div class=“texto”><p>Hola, qué tal</p><p>¿Cómo estás?</p><p>Yo bien.</p>
</div>
![Page 67: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/67.jpg)
Selectores CSS (II)
![Page 68: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/68.jpg)
Posicionamiento
![Page 69: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/69.jpg)
Posicionamiento (II)
![Page 70: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/70.jpg)
Elementos flotantes
https://css-tricks.com/all-about-floats/
![Page 71: Presentación de PowerPointmeba.aprendiendomarketingonline.com/materiales/... · Language, es decir, Lenguaje de Marcas de Hipertexto. HTML. El lenguaje HTML es un estándar reconocido](https://reader034.fdocuments.mx/reader034/viewer/2022042622/5fab3ec1ce76d758b2072373/html5/thumbnails/71.jpg)
Posicionamiento vs. elementos flotantes
https://css-tricks.com/all-about-floats/