INSTITUTO SUPERIOR

TECNOLÓGICO GUARANDA
LCDO.: ANGELITO REMACHE
MATERIA: LIBRE OPCIÓN
 INTRODUCCIÓN AL DISEÑO WEB

• El diseño es fundamental para el éxito de un sitio web. Se entiende por

diseño la forma y el estilo de la página, es decir, no basta con crear una
página mediante HTML y CSS.
 PANORAMA ACTUAL DEL DISEÑO WEB

• El diseño web es una actividad que consiste

en la planificación, diseño e implementación
de sitios web y páginas web. No es
simplemente una aplicación del diseño
convencional, ya que requiere tener en
cuenta cuestiones tales como navegabilidad,
interactividad, usabilidad, arquitectura de la
información y la interacción de medios como
el audio, texto, imagen y vídeo.
• La unión de un buen diseño con una jerarquía bien elaborada de contenidos
aumenta la eficiencia de la web como canal de comunicación e intercambio
de datos, que brinda posibilidades como el contacto directo entre el productor
y el consumidor de contenidos, característica destacable del medio.
• El objetivo del diseño web es realzar la imagen de una compañía u
organización a través de elementos gráficos con el objeto de reforzar su
identidad visual y despertar una sensación de confianza en el usuario.Los
diseñadores todavía necesitan comprender los requerimientos, darse cuenta
técnicamente de las ventajas y desventajas de los diseños, crear
composiciones, guardar las imágenes utilizando el tipo de archivo correcto y
testear los sitios de manera similar a la forma en que se ha hecho durante más
de una década.
• Probablemente el cambio más significativo que ha ocurrido durante este
tiempo es como el marco de trabajo de los sitios está construido. Diseños
basados en Tablas HTML (Hypertext Markup Language), hora diseños
XHTML (Extensible Hypertext Markup Language), han sido el elemento
esencial para los sitios Web durante muchos años. Este método, sin embargo,
ha cambiado, en favor de los diseños basados en Hojas de Estilo en Cascada
(CSS). En otras palabras, el contenido es principalmente diseñado utilizando
hojas de estilo, lo que proporciona un control más global utilizando menos
código.
• Esta unidad didáctica presenta al estudiante el panorama actual del diseño
web así como los fundamentos del mismo. Se exponen los conceptos básicos
y se presentan las técnicas y herramientas necesarias para estructurar y
manipular los elementos de las páginas de un sitio web de manera estética y
dotarlas de la interactividad característica de los sitios web actuales.
• Entendiendo los aspectos estéticos del diseño web Para garantizar el éxito de
nuestro sitio web, este debe ser capaz de atraer al usuario, captar su atención
y conservarlo en el tiempo. Si bien para este último punto es necesaria una
buena programación del sitio, para conseguir atraer y captar la atención del
usuario es fundamental que la página guste visualmente, es decir, que sea
estéticamente agradable.
• Disposición de los elementos. La armonía en la composición de elementos es
clave para crear un efecto visualmente agradable, sin embargo, se puede
romper esta armonía para centrar la atención del usuario en algún elemento
de la página, siempre llevando cuidado, ya que es conveniente destacar sólo
aquello que realmente merezca la pena.
• Colores. A la hora de elegir los colores, es imprescindible que pensemos en el
tipo de usuario al que va dirigida la página. Por ejemplo, no se nos ocurrirá
hacer una web dirigida a niños en tonos negros o grises, porque esto no
llamaría su atención. Tampoco se debe abusar de los colores, poner una gran
variedad de colores puede resultar estresante, dar sensación de desorden y
además sería muy complicado destacar algo. Sin embargo, en una web con
pocos tonos, los cambios de tamaños de fuente o contraste entre colores
pueden resultar decorativos a la vez que destacan la información que
queremos.
• Imágenes, gráficos. La carencia de imágenes no es útil ya que los elementos
visuales ayudan a mantener la atención del usuario, pero el abuso de las
mismas es contraproducente, ya que pueden aturdir al usuario además de que
aumentan el tiempo de carga de la página. Es conveniente conseguir
imágenes o gráficos que se integren bien con el diseño haciéndolo más
atractivo, pero sin molestar al usuario. Por ejemplo, los fondos demasiado
vistosos o muy oscuros dificultan bastante la lectura del texto y pueden llegar
a resultar muy molestos.
• La Composición Esla disposición de los distintos elementos dentro del
espacio visual de manera equilibrada y ordenada, con el fin de transmitir un
mensaje al público objetivo. El éxito de un proyecto gráfico reside
fundamentalmente en una composición perfecta que sea capaz de transmitir
una idea de manera sencilla y directa.
• La Tipografía las tipografías son uno de los aspectos más importantes en
cualquier rama de las artes visuales y, en el caso del diseño web, uno de los
factores que más inciden en la forma en que los usuarios procesan la
información.
 QUE CONSTITUYE UNA PAGINA WEB
• Una página web, o página electrónica, página
digital, o ciberpágina es un documento o
información electrónica capaz de contener
texto, sonido, vídeo, programas, enlaces,
imágenes y muchas otras cosas, adaptada para la
llamada World Wide Web (WWW) y que puede
ser accedida mediante un navegador web. Esta
información se encuentra generalmente en
formato HTML o XHTML, y puede
proporcionar acceso a otras páginas web
mediante enlaces de hipertexto.
• Una página web está compuesta principalmente
por información de un tema factible (solo texto
y/o módulos multimedia) así como por
hiperenlaces; además puede contener o asociar
hoja de estilo, datos de estilo para especificar
cómo debe visualizarse, y también aplicaciones
embebidas para así permitir interacción.
• Las páginas web son escritas en un lenguaje
de marcado que provee la capacidad de
manejar e insertar hiperenlaces,
generalmente HTML.
• Respecto a la estructura de las páginas web,
algunos organismos, en especial el World
Wide Web Consortium (W3C), suelen
establecer directivas con la intención de
normalizar el diseño, y para así facilitar y
simplificar la visualización e interpretación
del contenido.
• Una página web es en esencia una tarjeta de
presentación digital, ya sea para empresas,
organizaciones, o personas, así como una manera
de comunicar ideas, pensamientos, conocimientos,
informaciones o teorías. Así mismo, la nueva
tendencia orienta a que las páginas web no sean
solo atractivas para los internautas, sino también
optimizadas (preparadas), para los buscadores a
través del código fuente. Forzar esta doble función
puede, sin embargo, crear conflictos respecto de la
calidad del contenido.
• El contenido de una página web puede ser
predeterminado (página web estática) o generado al
momento de visualizarla, o solicitarla a un servidor
web (página web dinámica).
• En el caso de las páginas estáticas, al acceder el
usuario, el servidor descarga simplemente un simple
fichero con un contenido codificado en HTML que
se visualiza a continuación en su navegador. Un
proceso muy similar a la descarga de cualquier
fichero, por ejemplo un documento PDF.
• El principal problema de estas páginas es que
no permiten la interacción con el usuario,
equivalente a una colección de documentos
invariables, como un libro, en la web.
• Las páginas dinámicas que se generan al
momento de la visualización. No son un
simple documento HTML, sino que se están
creadas en algún lenguaje interpretado. El
ejemplo más popular es PHP, el lenguaje en
el que están programadas aplicaciones muy
populares como WordPress o Media Wiki,
el software en el que está implementado la
propia Wikipedia.
NAVEGADORES Y OTRAS TECNOLOGÍAS WEB

• Un navegador web puede tener una interfaz

gráfica de usuario, como Internet Explorer /
Microsoft Edge, Mozilla Firefox, Google
Chrome, Safari y Opera, o puede estar
basado en texto, como Lynx o Links.
• Los usuarios web con discapacidades a
menudo usan tecnologías de asistencia y
estrategias adaptativas para acceder a las
páginas web.
 SISTEMAS CMS

• Este enfoque "artesanal" es poco productivo por la

gran cantidad de codificación de HTML que implica y,
además, sirve solo para webs completamente estáticas.
• Por ese motivo surgieron los sistemas CMS como, por
ejemplo, Wordpress y Joomla que evitan al usuario la
codificación en HTML y ofrecen herramientas como
editores visuales que convierten la tarea de la creación
de páginas web a algo parecido a la edición de un
documento en una aplicación de ofimática como Open
Office o Word.
 LA EVOLUCIÓN DEL DISEÑO WEB
• (1989) El inicio. La época oscura del diseño web
• Todo comienza en la década de los 90, conocida como la época
oscura para el diseño web. En sus inicios, el diseño web se basaba
en pantallas negras con píxeles monocromáticos que le daban el
toque de color. En pocas palabras, no existía el diseño web, ya que
el texto dominaba la pantalla.
• Diseño con tablas. A partir de 1995
• La invención de los navegadores que permitían mostrar imágenes
representa el primer paso en la evolución del diseño web en sí
mismo. Las tablas llegaron para otorgarle orden al contenido,
siendo la forma que permitía mezclar diseños estáticos y fluidos, a
través de tablas dentro de tablas.
• JavaScript. 1995
• JavaScript llegó para resolver varias de las limitaciones
del HTML. Y fué con su aparición que el diseño web ganó
dinamismo. Sin embargo, una de las cuestiones más
comentadas como punto en contra es que hace más lenta la
carga de la página.
• El auge del CSS. 1998
• Cascading Style Sheets – Hojas de Estilo en Cascada
• Este lenguaje se hizo popular con una propuesta que
separa el contenido de la forma de presentación. Es decir,
que en HTML de trabaja el contenido, mientras que en
CSS se define el formato y la apariencia.
• La web 2.0. 2003
• Comienza la era de la información basada en los usuarios,
y la web 2.0 se hace popular junto con las redes sociales y
blogs.
• Con interfaces visualmente más agradables y con alta
usabilidad, entramos en una fase más evolucionada del
diseño web.
• Diseño de grilla y framework. 2007
• La llegada del diseño para móviles.
• El diseño web se vio en la necesidad de evolucionar con la
llegada de los Smartphone. A partir de este momento era
necesario generar versiones del sitio basadas en el tamaño
de la pantalla
• Diseño de grilla y framework. 2007
• La llegada del diseño para móviles.
• El diseño web se vio en la necesidad de
evolucionar con la llegada de los Smartphone. A
partir de este momento era necesario generar
versiones del sitio basadas en el tamaño de la
pantalla. Y esto era posible a través del uso de
grillas y framework. Fue un reto muy
importante.
• La primer mejora fue con la idea de columnas,
hasta que se definió el sistema de rejilla con una
división en 12 columnas como sistema que se
utiliza hasta la actualidad.
• Diseño responsivo. 2010
• Desde del año 2010 en adelante, llegando
hacia el año 2012 aparece el último gran
cambio en el diseño web. El diseño
responsivo o adaptable llegó para resolver el
conflicto de tamaño de las diferentes
pantallas de los dispositivos inteligentes.
• Con un mismo contenido (un sólo sitio web), pero
con diferentes diseños según el tamaño del
dispositivo, se encontró una forma de presentar de
manera más amigable la información al usuario. De
esta manera es posible utilizar imágenes que ocupan
el ancho completo de pantalla, y se abre el camino
hacia el diseño web minimalista con apariencia más
sencilla y limpia. Es decir, que el contenido vuelve a
ganar protagonismo.
• Con estos cambios se ha privilegiado un diseño más plano, regresando a las
raíces que colocan al contenido en primer lugar, dejando atrás los efectos de
sombra y regresando a la fotografía, tipografía y los detalles de líneas. La
simplicidad de la mano de la practicidad.
• Mobile First
• Es común confundir Mobile first con el diseño
responsivo. Aunque tienen el objetivo de
mejorar la experiencia de navegación en los
dispositivos móviles, no significan lo mismo.
De hecho su estructura y forma de creación es
bien diferente.
• Cuando hablamos de Mobile First nos
referimos a que la creación del sitio web se
piensa y realiza primero para dispositivos
Mobile, y después se adapta para desktop.
HERRAMIENTAS ESENCIALES DEL DISEÑO
WEB
• El mundo de las herramientas del
diseño web es cada vez más amplio,
pero hay algunas que destacan por las
facilidades, optimización y el ahorro de
tiempo que brindan.
• Tal vez no sabes con cuáles empezar o
cuáles son más adecuadas para la
función que buscas, pero aquí
resolverás tus dudas.
• Adobe Color CC
• Google Fonts
• WhatFontIs
• Mockflow
• CSS3 Button Generator
• Proto.io
• Administrador de Diseño HubSpot
• Tinypng
• Adobe Edge Reflow
• Notepad++
• Pixabay
 ADOBE COLOR CC

• La aplicación de Adobe Color CC mejora el

color de tus fotografías, ya que analiza el tono
de las ilustraciones y busca soluciones
armónicas. Así, ayuda a la combinación de
paletas cromáticas de forma armoniosa para
cada uno de tus proyectos.
• No importa qué tipo de sitio web
diseñes: Adobe Color CC logrará hacerlo ver
atractivo con imágenes perfectamente
equilibradas.
 GOOGLE FONTS
• Una página web completa, además de ser
agradable y estar optimizada, debe contar con
diversos elementos que la hagan resaltar. Uno de
los más importantes es la tipografía.
• Google Fonts te garantiza que tu fuente será
original y adecuada para la imagen corporativa o el
estilo que imaginas, en tanto que aquí encuentras
un catálogo gratuito con más de 800 opciones.
• Ventaja destacada: es muy intuitiva y
visual. Dentro de su aplicación
encontrarás filtros de búsquedas que
puedes determinar por categorías y
opciones de prueba para elegir la que
mejor se adapte a tu proyecto.
 WHATFONTIIS

• Esta herramienta es la más potente del mercado

gracias a su sencillez, rapidez y capacidad de
reconocimiento. ¿Qué tan rápida puede ser? En
menos de 10 segundos te da una amplia lista de
fuentes parecidas a la que estás buscando.
• Su sistema es muy simple, ya que solo basta con
que subas una imagen o URL a su sitio. Si la
imagen que guardaste no tiene una resolución
baja, podrás editarla rápidamente y obtener
mejores resultados.
• Ventaja destacada: reconoce hasta 460 mil tipografías diferentes.
Además, dentro de su sitio encontrarás una comunidad de
usuarios a la que podrás acudir cuando quieras.
 MOCKFLOW

• La herramienta Mockflow es perfecta para

construir esquemas de diseño de forma más
rápida.
• Lo único que tienes que hacer es arrastrar y
soltar para colocar los elementos con iconos
preconfigurados. Te apoyará en la creación de
una página web funcional y en la planificación
de interfaces de usuario.
• Ventaja destacada: cuenta con una tienda de plantillas para que encuentres
inspiración por medio del trabajo de otros diseñadores. Puedes utilizarla
también desde la aplicación móvil.
 CSS3 BUTTON GENERATOR

• Si quieres crear botones personalizados en un dos por tres, CSS3

Button Generator es la mejor forma de lograrlo. Elige el texto que
contendrá y la tipografía, así como varias opciones para la caja,
los bordes y el fondo.
• Ventaja destacada: visualiza los cambios fácilmente; también
puedes añadir un efecto hover que invita a la interacción del
usuario con el botón.
DISEÑO PARA EL PASADO, PRESENTE Y
FUTURO
Pasado: En el principio
El diseño web como lo conocemos nació en el año 1993 cuando los primeros
navegadores web comenzaban a mostrar imágenes con texto.
Desarrollo del diseño web
la www creada en 1994 estableció el HTML como el estándar de internet. En 1996,
las páginas web estaban por lo tanto enfocadas y centradas en estos elementos:
el diseño basado en tablas crea adicionales opciones para levantar una estructura de
múltiples columnas mas compleja que la que el HTML.
PRESENTE
Dispositivos móviles
Con el aumento del numero de dispositivos móviles y
el crecimiento del acceso a internet y a la web desde
ellos, el diseño web ya no esta limitado a los PC de
escritorio o a la compatibilidad de los navegadores.
La gran popularidad de los teléfonos móviles
inteligentes, el diseño claro y limpio, el no soportar la
tecnología FLASH .
FUTURO

• Huella dactilar biométrica

los nuevos teléfonos móviles traen incorporada el lector de huella dactilar
como un sistema de acceso seguro al dispositivo
 DISEÑA PARA DIFERENTES TIPOS DE SITIOS
WEB

• No es un secreto para nadie que cada vez más aumenta el acceso a internet desde
diferentes tipos de dispositivos: computadoras, móviles, tabletas, televisores…
Tampoco es secreto que la experiencia de usuario cambia según el dispositivo
que utilice el usuario para acceder a tu sitio.
• Pero, no te preocupes, existen diversas técnicas de diseño y maquetación que
usarán los profesionales que contrates para la creación de tu sitio. Se trata de
estrategias que dan un resultado visual muy distinto, ofrecen un nivel diferente de
usabilidad y accesibilidad, y tienen costos variados en su producción e
implementación.
 BLOGGING Y SOCIAL MEDIA
• TRECEBITS
• Se trata de un medio de comunicación sobre
Internet, redes sociales y tecnología. De él
resalta su constante actualización, además su
segmentación hace que el acceso al contenido
directo y saber qué es lo que está ocurriendo
sea más rápido. Por ello y por la variedad de
contenidos se posiciona como uno de los
mejores blogs de Social Media.
• HOOTSUITE
• Si entendemos las Social Media como una herramienta profesional
no podemos dejar de lado este espacio. Ofrece facilidades de
búsqueda, programación, gestión y análisis; y cuenta con un blog
que brinda una información variada y tratada con un buen
cuidado.
• MARKETING DE GUERRILLA
• Como apunte, el marketing de guerrilla se refiere a estrategias e iniciativas
que logran su objetivo a través de métodos originales y no convencionales.
• Una visión personal que nos acerca de manera natural al mundo Social
Media que está en constante cambio y evolución, ofreciendo soluciones
mediante noticias cortas y atractivas.
• JEFF BULLAS
• Se trata de una de las personas con más influencia en el ámbito de Social
Media, con gran especialización en SEO. Además de la rapidez, nos encanta
porque ofrece gran calidad debido a su buena combinación de curiosidad,
información y ser didáctico.
• SOCIAL MEDIA EXAMINER
• Nos encontramos con uno de los blogs sobre Marketing Online
más leídos. Aporta secciones didácticas así como publicaciones
prácticas que ofrecen una gran calidad en su contenido, por lo que
es una opción buenísima para crecer en el mundo Social Media y
en el del Blogging.
• SOCIAL MEDIA TODAY
• Debido a su variedad de contenido, así como a su organización,
presentamos uno de los blogs de Social Media que encabezan la
lista. Trata los últimos temas de los que se hablan y se actualiza
con rapidez.
• BUFFER
• Es un blog que ofrece información que puede ser comprendida de manera
sencilla. Es fácil de consumir, debido a su multitud de listados y el formato
atractivo en el que se presentan las noticias. Esto es lo que le posiciona como
uno de los mejores espacios para recabar información sobre Social Media.
• IEBS
• Dentro de nuestro blog contamos con una categoría exclusiva de Social
Media. Aquí podéis encontrar las últimas novedades y tendencias. Y así
poder aprender los términos y contenidos que aplicaréis en vuestro día a día.
• Si te interesa el mundo de las Redes Sociales y quieres aprender a sacarles el
máximo partido, échale un vistazo al Máster en Marketing Digital y Social
Media donde gestionarás las redes sociales junto a los mejores expertos en la
materia.
 LAS 7 REGLAS DEL DISEÑO WEB

• Ten un concepto claro. Si no tienes claro lo que quieres

transmitir… no transmitirás nada. Cada diseño cuenta una
historia, una idea, una experiencia y esto es lo primero que
debes de tener ¿qué quiero comunicar?
• 2.- Reúne información. Reúne toda la información que
puedas sobre el producto, servicio o empresa para la que
tengas que hacer el diseño. Cuanto más a fondo conozcas
tu producto, más fácil te resultará extraer sus valores y
publicitarlos de una forma adecuada.
• 3.- Déjate influenciar “lo justo”. En todos los sentidos, en lo que se refiere
a tu cliente, deja que te cuente su historia, sus deseos, sus inquietudes, pero
mantén las distancias, te ayudará a poner en su justo punto toda la
información que antes has recopilado
• Además recuerda, tu eres el profesional, el que sabe que se trae entre manos,
haz que tu cliente confíe en ti, si no para qué te ha contratado?
• 4.- Utiliza los espacios en blanco. Los espacios en blanco ayudan a
estructurar la información, a dar relevancia a los mensajes principales y
además consiguen que el mensaje llegue de una forma más clara, directa,
sencilla y cómoda para el cliente final.
• 5.- Utiliza como mucho 2 tipografías, si puedes reducirlo a 1
mejor. Además la tipografía tiene que estar estrechamente
relacionada con el objetivo del diseño, no puedes estar por
ejemplo hablando de un producto intuitivo y sencillo de manejar y
meter una tipografía complicada y llena de curvas, además, tiene
que ser clara y legible.
• 6.- Se coherente. Cada elemento gráfico tiene que encajar
perfectamente con los demás, tienes que conseguir que el usuario
perciba que cada elemento está ahí por qué sería imposible que
funcionara en ningún otro sitio
• 7.- Piensa en el futuro. Tu diseño seguramente no terminará en
esa primera pieza que has realizado, seguramente tendrá que
adaptarse a diferentes usos y necesidades, por lo tanto …
preveerlas es parte de tu trabajo.
QUÉ ES LA COMPOSICIÓN

• Una de las partes más importantes y decisivas a la hora de crear un nuevo

proyecto de diseño gráfico es el estudio de la composición. Esto es, la
disposición de los distintos elementos dentro del espacio visual de manera
equilibrada y ordenada, con el fin de transmitir un mensaje al público
objetivo.
• Dentro de la composición entran en juego aspectos como el tamaño, las
texturas, colores, pesos
TIPOGRAFÍA

• Latipografía en el diseño web es tan importante como lo es las

imágenes, los colores, la disposición etc.
COLOR

• Para utilizar los colores y generar el objetivo deseado, es fundamental

conocer cómo utilizar el color y el efecto que este produce en las
personas, los sentimientos que provocan los distintos colores y la
combinación de los mismos.
PAUTAS PARA ELABORACIÓN DEL BRIEFING
DEL PROYECTO DE DISEÑO WEB
• Descripción del proyecto
• Empezaremos nuestro briefing haciendo una descripción del proyecto en
líneas generales, de la empresas u organización que lo respalda y del
contexto del mismo.
• Datos de contacto
• Datos de contacto de las personas implicadas en el proceso de desarrollo así
como de sus departamentos.
PAUTAS PARA ELABORACIÓN DEL BRIEFING
DEL PROYECTO DE DISEÑO WEB

• Público objetivo
• Aquí presentaremos la audiencia y el público objetivo al que irá dirigido el sitio
web.
Edad, zona geográfica, nivel socioeconómico, sexo, profesiones, estudios,
aficiones, etc.
• Productos o servicios ofrecidos
• Descripción de los productos o servicios que ofrece la empresa de una forma
esquemática y sin profundizar.
• Competencia
• Definición de los principales competidores tanto a nivel nacional como
internacional.
• Referencias
• Ejemplos de webs que gustan y a las que hay que parecerse o superar. Este
apartado es muy útil a la hora de dar a entender los gustos y el nivel de
diseño.
• Presupuesto
• Es muy importante definir un presupuesto y exponerlo abiertamente. De
igual forma que hacemos cuando vamos a comprarnos un portátil o un coche,
es muy conveniente ser claros con esto.
OBJETIVOS

• Empezaremos por definir los objetivos más intangibles, aquellos que ayudan
a entender en términos generales.
• Algunos ejemplos serían:
· Dar a conocer la marca
· Promocionar los servicios de la empresa
· Mejorar la presencia online
· Mejorar la usabilidad
OBJETIVO PRINCIPAL

• Ejemplos de objetivos principales típicos serían:

· Vender determinado producto.
· Conseguir potenciales clientes (leads).
· Obtener donativos.
• Objetivos secundarios
Ejemplos de objetivos secundarios serían:
· Conseguir suscriptores a la newsletters.
· Conseguir usuarios registrados.
· Conseguir comentarios en los post.
· Conseguir reviews de productos.
MAPA DE SITIO

• Idiomas
• Definir en qué idiomas deberá estar disponible el sitio. También indicar si el
cliente proveerá los textos traducidos o la empresa de desarrollo.
• Tiempos
• Plazos de entrega final y entregas parciales.
• Imagen corporativa y diseños
• Si la empresa u organización dispone de logo es conveniente adjuntarlo al
briefing.
¿QUÉ ES HTML?
• “HTML es un lenguaje de marcado que se utiliza para
el desarrollo de páginas de internet. Se trata de la
siglas que corresponden a hypertext markup
language, es decir, lenguaje de marcas de hipertexto”
básicamente se trata de un conjunto de etiquetas que
sirven para definir el texto y otros elementos que
compondrán una página web, como imágenes, listas,
vídeos, etc.
ELEMENTOS DE HTML

• Un elemento HTML es mucho más que una etiqueta, ya que está formado
por:

1. Una etiqueta de apertura.

2. Cero o más atributos.
3. Texto encerrado por la etiqueta.
4. Una etiqueta de cierre.
ATRIBUTOS DE HTML

1. Atributos básicos
2. Atributos de internacionalización
3. Atributos de eventos
4. Atributos de foco
EVENTOS DE HTML

• 1. Eventos sobre el documento de HTML

2. Eventos sobre la carga de un recurso
3. Eventos de foco en elementos
4. Eventos de ratón
5. Eventos de entrada de datos
6. Eventos multimedia (Audio, Video)
ESTRUCTURA BÁSICA DE UN HTML

Información
técnica para el
navegador
HEAD

Lenguaje HEAD
HTML
Contenido que
BODY aparecerá en la
pagina web
PÁRRAFOS EN HTML

• En un documento HTML, para escribir un párrafo se usa el elemento "p",

cuyas etiquetas de inicio y fin son, respectivamente: <p> y </p>.
• EJEMPLO Para que en un navegador web se visualice:
ENCABEZADOS EN HTML

• Un encabezado indicando el título del artículo, categoría, etc. Pues bien, para
escribir encabezados disponemos de las etiquetas <h>.
• Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6,
predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado
más grande mientras que <h6> sería el más pequeño.
FORMATEO HTML

• El elemento HTML <b> define un texto en negrita.

• El elemento HTML <strong> define un texto fuerte, con un agregado

semántico fuerte.
CITANDO TEXTOS EN HTML
• Las citas han sido algo muy bien asentado en HTML,
probablemente el ámbito del conocimiento humano
dónde más se utilizan las citas y referencias.
• Los tres elementos principales para representar una cita
y su fuente son:
• <blockquote>: para reproducir una cita en bloque.
• <q>: para reproducir una cita en línea.
• <cite>: para representar la referencia a un trabajo
creativo.
FORMATEO DEL TEXTO EN HTML: ETIQUETA
SPAN
• La etiqueta <spam> también funciona como un
contenedor pero en este caso será un contenedor en
línea. Por ejemplo para destacar una palabra o
expresión dentro de un párrafo utilizaremos la etiqueta
<span>.
• Las herramientas de formateo HTML se encuentran
en la segunda barra de herramientas de debajo e la
línea del Asunto, después de activar el formato
HTML.
CARACTERES ESPECIALES EN HTML

• Los caracteres especiales HTML forman parte de un conjunto de caracteres,

una codificación, que va más allá de los caracteres disponibles que se pueden
grabar con un teclado normal. Incluyen letras griegas, símbolos matemáticos,
flechas, monedas, dingbats (adornos) y gráficos, así como marcas de
verificación y símbolos de derechos de autor y marcas registradas.
IMÁGENES EN HTML

• Las imágenes podrán ser elementos representativos de página web o

elementos decorativos. Si bien, en el caso de ser elementos decorativos
deberíamos de utilizar CSS para insertarlos en nuestra página web.
• El uso de imágenes dentro de una página web tiene que hacerse con cautela,
ya que cada imagen que pongamos en nuestra web incrementará el tamaño
(peso) de la página.
USANDO IMÁGENES EN EL HTML

• Para insertar una imagen en un documento HTML se utiliza el

elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC
ALT ISMAP ALIGN WIDTH HEIGHT BORDER VSPACE HSPACE.
Con las nuevas implementaciones que Netscape hace del elemento, se
consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar
al elemento <BR> del atributo CLEAR.
ETIQUETAS DE IMAGEN EN HTML

• Para incluir imágenes en el contenido de una página utilizaremos la etiqueta

<img>, que es una etiqueta muy sencilla, que dispone de varios atributos para
modificar como se verá la imagen (los atributos src y alt son siempre
obligatorios).
• Src: Indica el nombre o la URL de la imagen a mostrar.
• Alt: Establece un texto alternativo para mostrar en el caso que la imagen no
se pueda mostrar.
ETIQUETA PICTURE EN HTML.

• El elemento HTML <picture> es un contenedor usado para especificar

múltiples elementos <source> y un elemento <img> contenido en él para
proveer versiones de una imagen para diferentes escenarios de dispositivos.
• Si no hay coincidencias con los elementos <source>, el archivo especificado
en los atributos src del elemento <img> es utilizado.
USO DE FUENTES COMO ICONOS EN
HTML: FONT AWESOME

• Para incluir un icono puedes usar la etiqueta i con dos clases; la primera: la
clase fa, carga reglas generales para todos los iconos, mientras que la
segunda clase: fa-phone, carga el contenido a mostrar en el pseudo
elemento :before. Los pseudo-elementos :before y :after se utilizan en
combinación con la propiedad content de CSS para añadir contenidos antes o
después del contenido original de un elemento.
MAPAS DE IMAGEN EN HTML

• Los mapas de imágenes nos permiten crear un conjunto de enlaces dentro de

una imagen o bien enlazar una parte en concreto de una imagen.
• La estructura del elemento map es la siguiente:
• <map name="nombreMapa">
• <area/>
• <area/>
• </map>
ENLACES HTML

• En el HTML los enlaces se marcan con la etiqueta <a></a> y el atributo

principal es href="" donde se escribe la ubicación del archivo de destino que
puede estar en la misma carpeta que el archivo que lo está llamando, en otra
carpeta del mismo sitio o en otro sitio web.
ENLACES A ARCHIVOS- ATRIBUTO
TARGET

• El atributo TARGET es, al igual que los frames, una extensión introducida
por Netscape y adoptada posteriormente por Explorer y Opera. El principal
uso de este atributo es cuando se usa en la etiqueta A para crear enlaces y su
función es indicar el objetivo (TARGET significa objetivo) en el que se debe
cargar la página a la que saltamos tras seleccionar el texto o imagen de ese
enlace.