presentación de powerpointmeba.aprendiendomarketingonline.com/materiales/... · language, es...

INTRODUCCIÓN A LA

MAQUETACIÓN WEB(HTML & CSS)

about.me/davideguizabal@davideguizabal

¿Qué perseguimos con estas sesiones?

Qué es una página web

¿Cómo funciona Internet?

… incluso la más sencilla

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.

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.

Comentarios

¿Qué es una marca/etiqueta?

Hola, <strong>¿qué tal?</strong>


<p>Hola, <strong>¿qué tal?</strong></p>

Puedo poner una etiqueta dentro de otra (anidamientos).


<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

Anidamiento de las etiquetas

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

<head>

Aporta información para conocer mejor la página.

<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.

<body>

El contenido “en sí”. Lo que ve el usuario dentro del navegador.

¿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.

<a>

La parte fundamental de HTML son los enlaces (links).

<p>Puedes descargar mi documento <a>aquí</a>.</p>

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

<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>

<a>

También podemos enlazar correos electrónicos.

<a href=“mailto:direcció[email protected]”>aquí</a>

<a>

Debemos prestar atención al título contextual del enlace.

<a title=“Documento PDF (300Kb)”href=“documento.pdf”>aquí</a>

<a>

Para abrir un enlace en una nueva ventana/pestaña…

<a target=“_blank” href=“documento.pdf”>aquí</a>

<img>

No enlazamos el recurso sino que lo incluimos en el contenido.

<img src=“logo.png” />

<img>

En una imagen también podemos utilizar atributos para personalizarla y “mejorar” su apariencia.

<img src=“logo.png” width=“200” height=“75” />

<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).

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>

<h1>, <h2>, <h3>, <h4>, <h5> y <h6>

Estructuran jerárquicamente un contenido.

<br />

Salto de línea sin generar un párrafo nuevo.

<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

<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.

<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>

<acronym> y <abbr>


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>

<strong>, <b>, <em>, <i> y <abbr>


El marcado semántico tiene mucho sentido para:

Posicionamiento en buscadoresAccesibilidad

Web semántica

<div>

Etiqueta genérica (contenedor) para enmarcar un bloque de contenido dentro del HTML completo de una página.

<span>

Etiqueta genérica para enmarcar un fragmento de contenido dentro de un párrafo, una lista, etc.

<table>, <thead>, <tbody>, <tfoot>, <tr>, <th> y <td>

Maquetación de tablas de datos e información.

<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.

html4 vs. html5

<header>, <nav>, <section>, <article>, <aside> y <footer>

Estructuración semántica del contenido de una página.

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).

Diseño visual

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.

Reglas CSS

h1 {color: #000;

}

a {background: #ff0000;

}

selector CSS

declaración CSS en formato <propiedad>: <valor>;

Propiedades CSS

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.

Selectores CSS

Etiquetas HTML

h1 {color: #000;

}

a {background: #ff0000;

}

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

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

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;

}

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;

}

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>

Selectores CSS (II)

Posicionamiento

Posicionamiento (II)

Elementos flotantes

https://css-tricks.com/all-about-floats/

Posicionamiento vs. elementos flotantes

https://css-tricks.com/all-about-floats/

presentación de powerpointmeba.aprendiendomarketingonline.com/materiales/... · language, es...

Documents