Scribd
Cargar
85 vistas11 páginas

Maquetación en HTML5 y CSS3

Bases fundamentales para la maquetación de páginas web, en relación al lenguaje html5 como etiquetas.

Cargado por

esfmamjbiblioteca
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
85 vistas11 páginas

Maquetación en HTML5 y CSS3

Bases fundamentales para la maquetación de páginas web, en relación al lenguaje html5 como etiquetas.

Cargado por

esfmamjbiblioteca
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

DISEÑO Y PROGRAMACIÓN WEB – LIC.

ALEX CALLE FERNANDEZ

TEMA Nº1 MAQUETACIÓN EN HTML5 Y CSS3


1. Nociones generales
1.1. Concepto de diseño web
1.2. Programación de páginas web
2. Maquetación web
La maquetación web consiste en el proceso de traducir a código HTML y CSS todo el diseño que
previamente habrá generado o tomando como punto de partida un diseño previo, intentando optimizar lo
más posible el código, reutilizar el código y cuidando las estructuras para que el sitio pueda tener un
diseño responsivo (Responsive Design), es decir, se ajuste a cualquier dispositivo.
Las nuevas formas de maquetación web mediante div o contenedores, que si bien, aún siguen en uso, es
importante que te comente que a partir de HTML5 se intentó generar una web más semántica.
3. Estructura de una página web
Son todos los elementos o funcionalidades que la componen como, por ejemplo, las secciones o menús,
que hacen que se pueda navegar por ella y sea funcional.
Lo que sí está claro es que existen cientos, por no decir miles, tipos de páginas web. Por tanto, te podrás
imaginar que las partes de una página web no son las mismas en un ecommerce que en una página web
corporativa o un blog de repostería, aunque sí es cierto que comparten una estructura y muchos
elementos en común.
Generalmente, si hablamos de las partes de una página web, nos referimos a su estructura. Eso sí,
muchas veces también se habla de partes de una web en función de su contenido. Así que, teniendo esto
en cuenta, distingamos entre:
 Partes de una página web en función de su estructura (estructura web): Cabecera o header, cuerpo
o body y pie de página o footer.
 Partes de una página web en función de la distribución del contenido: Inicio o home, contacto,
productos y servicios, blog, política de privacidad.
En la estructura de una página web tenemos tres partes diferenciadas: cabecera, cuerpo y pie de página. O,
por sus términos en inglés: header, body y footer.
Cabecera o header
La cabecera es la parte superior de la página web. Aquí suele incluirse la información básica de la empresa o
marca y es consistente en todo el sitio, es decir, se repite en cada página de la web por la que navegas.

Los elementos que se incluyen en la cabecera son:

 Logo de la empresa
 El menú de navegación
 Un cuadro de búsqueda
 Una pequeña descripción de la web
Si hablamos en lenguaje HTML, verás que todo el contenido de la cabecera aparece entre las siguientes
etiquetas:

1
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ
<header>Contenido de la cabecera</header>
Nota: Cuando creas una página web, es recomendable fijar la cabecera. ¿Qué quiere decir esto? Pues que a
medida que un usuario hace scroll y navega a través de tu sitio, la cabecera se mantenga fija y tu marca y los
accesos más importantes de tu página, como el menú, estén siempre visibles y accesibles.

Cuerpo o body
Esta es la parte de la web que alberga el contenido principal de tu página. Esta parte sí es diferente en cada
página de tu sitio. Es decir, no será el mismo contenido el que incluyes en tu página de contacto que en la
página principal.

En HTML puedes identificar rápidamente este contenido, ya que se encuentra dentro de las siguientes
etiquetas:

<body>Contenido del cuerpo</body>


Pie de página o footer
El pie de página o footer es la parte inferior de una página web. Al igual que la cabecera, se repite y es
consistente en cada página. En el footer podemos encontrar los siguientes elementos:
 Menú simplificado
 Información de contacto
 Botones de redes sociales
 Logo de la empresa
 Enlace a la política de privacidad
Tal y como vimos en las partes anteriores, en HTML el pie de página se encuentra entre estas etiquetas:

<footer>El contenido del pie de página</footer>


¿Vemos un ejemplo real?
Para no quede ni un resquicio de duda, veamos un ejemplo real con nuestra página web www.lucushost.com.
2
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ
Su estructura sería la siguiente:

 Color verde: aquí tenemos la cabecera o header. Como ves, en ella incluimos el logotipo de la marca
y el menú de navegación. Esta parte se mantiene siempre estática, aunque estés navegando por otras
páginas o hagas scroll.
 Color magenta: sería el cuerpo o body. Esta información es diferente en cada página del sitio web.
 Color amarillo: es el footer de la web. Siempre se encuentra al final de cada página de la web y el
contenido es siempre el mismo. Nosotros incluimos el logo, información de contacto, métodos de
pago disponibles y también los iconos de redes sociales.

Partes de una página web en función de su contenido


Acabamos de ver las partes de una página web en función de su estructura, ahora veamos cómo se divide
una página web en función de la distribución de su contenido.

Inicio o home
Si hablamos de las partes de una web, la página principal, de inicio o la home es la más importante de todas.
Aquí se incluye la información más relevante de tu empresa, ya que es en la que tienes que proyectar tu
marca y mostrar a tus visitas a qué te dedicas, en qué te diferencias de tu competencia y por qué deberían
elegirte a ti.

Además de los elementos propios de la cabecera y el footer (que ya sabes que son iguales en todas las
páginas), en la página de inicio sueles encontrar:

 CTA o llamada a la acción: imprescindibles para lograr que tus visitas realicen la acción que tú
sugieres: comprar/suscribirse…
 Resumen de tus productos y servicios: generalmente se suele hacer mención a tus productos
mediante una buena imagen o un eslogan, con el objetivo de que tus visitas en solo 3 segundos sepan
a qué te dedicas. Sin entrar en mucho detalle, para eso tendrás tu propia página.
 Ofertas: si tienes una oferta importante y que quieres destacar, la página de inicio suele ser la parte
de la web más adecuada para anunciarla.
 Indicadores de éxito: número de clientes, número de empleados, países en los que operas, años de
experiencia… Todo vale para mostrar que tú eres el mejor.
 Testimonios o colaboraciones: Es muy habitual encontrar también en página principal algún
testimonio, reseñas de Google o los logos de las empresas para las que has trabajado.
La página de inicio está alojada siempre en el dominio principal, no en un directorio. Para que me entiendas,
la página de inicio o hombre de tu web será tudominio.com y no tudominio.com/servicios.

Contacto
Una página web no sirve únicamente para vender online.

Si tienes un negocio pequeño como, por ejemplo, una peluquería, tener una página web te ayudará a ganar
visibilidad en tu zona y mostrar a tus clientes potenciales la forma de contactar contigo.

3
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ
El teléfono, la dirección y los horarios son tres elementos básicos que deben estar sí o sí en todas las páginas
de contacto y, como no, también en la cabecera y en el footer. Pero, además de ello es muy recomendable
incluir los siguientes elementos:

 Formulario de contacto: Darás a tus clientes la posibilidad de contactar contigo las 24 horas del día
y esto transmite muy buena imagen. ¿Quieres crear el tuyo? En este post tienes una recopilación con
los mejores plugins de formulario para WordPress. ¡Toma nota!
 Dirección de correo profesional: Aunque cada vez es algo más habitual, tampoco es nada raro
encontrarte con emails del tipo [email protected]. Así que, crea las direcciones de correo
personalizadas con tu dominio y transmite que eres todo un profesional.
Productos y servicios
Cuando creas el contenido de una web, lo ideal es que la información más detallada de los productos que
vendes o los servicios que ofreces la incluyas en una página específica.

En esta parte de la página web debes incluir todo lo relacionado con tus productos o servicios: ventajas de
tus productos, principales características, a quién están dirigidos, el precio, gastos de envío…

Por supuesto, no te olvides de la importancia de una buena llamada a la acción en esta parte de tu web.
Textos como «¡Lo quiero!», «Añadir a la cesta» o «Reserva ya» ayudarán a conducir a tus visitas hacia el
objetivo final.
Blog
Si hay una parte fundamental en cualquier tipo de página web, esa es la sección del blog.

Crear un blog puede hacer que tu negocio despegue de una vez por todas. Es indispensable para tu
estrategia de contenidos y una pieza clave si quieres mejorar tu posicionamiento orgánico en Google y ganar
visitas a tu sitio.
Los elementos web más comunes que encontrarás en casi cualquier blog son:

 Buscador: No todas las plantillas de una página web incluyen la función de buscador, pero las
plantillas de blog casi todas lo tienen.
 Formulario de suscripción: Incluir una caja de suscripción en un blog es una forma de generar
leads de calidad. Aunque no sean clientes, ya tienes su cuenta de correo electrónico para enviarle el
contenido que publicas y, poco a poco, puedes ir acercándolos al proceso de compra.
 Categorías y etiquetas: Otro de los elementos que es recomendable incluir en esta parte de tu
página web es una sección con las categorías y etiquetas de los contenidos de tu blog. Es una buena
forma de estructurar el contenido y mejorar la usabilidad de tu sitio.

Generalmente cuando hablamos de las partes de una web nos referimos a la estructura web, es decir,
al encabezado (header), al cuerpo (body) y al pie de página (footer). Tampoco es extraño hablar de
partes de una web para referimos a las diferentes páginas que existen dentro de un sitio web. Es por
ello, que también hemos visto en qué consiste cada una de estas páginas y los elementos más comunes
que las componen.

4
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ

5
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ

4. Creación de página web


HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language ) es el componente
más básico de la Web. Definir el significado y la estructura del contenido web. Además de HTML,
generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web
( CSS ) o la funcionalidad/comportamiento ( JavaScript ).
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar
una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas,
o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de
HTML y cúal es su función.

"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único
sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a
Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en
la « World Wide Web » (Red Informática Mundial).

HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador
web. Las marcas HTML incluyen "elementos" especiales como <head>, <title>, <body>, <header>,
<footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>,
<details>, <embed>, <nav>, <output>, , <progress>, <video>, <ul>, <ol>, <li>y muchos otros.

Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consiste en el
nombre del elemento rodeado por " <" y " >". El nombre de un elemento dentro de una etiqueta no
distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una
mezcla. Por ejemplo, la etiqueta <title>se puede escribir como <Title>, <TITLE>o de cualquier otra
forma.

Las partes principales del elemento son:

La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis
angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —
en este caso, dónde es el comienzo del párrafo—.
La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/)
antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el
párrafo—.
El contenido: este es el contenido del elemento, que en este caso es sólo texto.
El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.
Los elementos pueden también tener atributos, que se ven así:

atributo html
Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el
contenido real del elemento. Aquí class es el nombre del atributo y editor-note el valor del atributo. En

6
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ
este caso, el atributo class permite darle al elemento un nombre identificativo, que se puede utilizar
luego para apuntarle al elemento información de estilo y demás cosas.

Un atributo debe tener siempre:

Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más
atributos).
El nombre del atributo, seguido por un signo de igual (=).
Comillas de apertura y de cierre, encerrando el valor del atributo.

Etiquetas de html5
Las etiquetas HTML5 funcionan como parte de un código que cumple con una función sencilla. Dicha
función se basa en ayudar a los navegadores a entender el contenido que contiene cada una de las
etiquetas utilizadas.

Además, es importante resaltar que cada etiqueta posee distintos atributos que determinan cómo
funciona cada una. Todas inician con el símbolo “<” y terminan con el símbolo contrario, “>”. Entre
dichos símbolos debe ir el nombre correspondiente a la etiqueta para que el navegador lo pueda asimilar
como es debido.

También es importante conocer que las etiquetas HTML5 se componen por una versión de apertura y
una de cierre. Sin embargo, hay etiquetas que no llevan la versión de cierre como las que se usan para
cargar imágenes. Las etiquetas de cierre utilizan el símbolo “/” antes del nombre de la etiqueta.

Todas las etiquetas HTML5 y sus funciones


Con una gran cantidad de etiquetas HTML5 disponibles hoy en día, es posible englobarlas de una manera
más sencilla. Por lo que hemos creado una lista de todas las etiquetas HTML5 que son más comunes y la
función que poseen. De manera que puedas utilizarla según sea necesario.
Elementos iniciales
Entre los elementos iniciales podemos encontrar etiquetas HTML5 como:
1. <!DOCTYPE html>, la cual permite que los navegadores comprendan que un documento se basa en
HTML5.
2. <html></html>, que indican la etiqueta de apertura y cierre de un documento HTML. Si se desea agregar
cualquier tipo de elementos, deben estar dentro de dichas etiquetas.
Elementos para metadatos
En el caso de los elementos para metadatos es posible utilizar las siguientes etiquetas:
 <head> </head>, que indican los metadatos respecto a un documento como los enlaces. Esta clase de
información brindada sólo es visible para los navegadores.
 <title> </title>, la etiqueta que define el título de una web.
 <link>, utilizada para afiliar recursos que son externos a dicho documento.

7
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ
 <meta>, utilizada para poder colocar metadatos como el autor de la web o hasta su descripción. Siempre es
usada para datos que no poseen una etiqueta específica.
 <style></style>, funciona como medio para ingresar código CSS en el documento.
Elementos de secciones
Dividir una página por secciones es más que necesario para que sean visualmente atractivas y posean
una estructura que los navegadores comprendan. Es por ello que, mencionamos las versiones más
comunes de etiquetas para poder crear secciones dentro de una web:
 <body> </body>. Incluye todo el contenido que se desee mostrar dentro de la página web.
 <nav> </nav>. Define el contenido que estará ubicado dentro de la sección de navegación de la página.
 <main> </main>. Permite elegir el contenido principal que posee un documento, siendo único.
 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Permiten crear una estructura para el contenido de una página web.
Son esenciales para cumplir con la correcta organización de dicho contenido.
 <section> </section>. Indica la sección de un documento HTML.
 <article> </article>. Incluye el contenido de una página que es independiente.
 <aside> </aside>. Todo el contenido extra de una página web se incluye en estas etiquetas, pues posee poca
relevancia, pero coincide con la web.
 <footer> </footer>. Incluye el contenido que irá en el pie de página.
 <header> </header>. Define la parte superior o cabecera de una web. En ella mayormente se encuentra el
logotipo y nombre de la web, así como el menú.
Elementos semánticos o estructurales
 <a> </a>. Ayuda a la creación de hiperenlaces dentro del documento HTML.
 <strong> </strong>. Con esta etiqueta se puede definir la importancia de una o más palabras, ayudando a
mantener un mejor SEO. Dado que las define como más importantes.
 <small> </small>. Cuando se necesita dejar un comentario dentro del contenido, entonces se utiliza este
tipo de etiqueta. Aunque no influye en la comprensión de un usuario por el documento, aporta información
relevante.
 <cite> </cite>. Esta etiqueta define el título de una obra.
 <sub> </sub> y <sup> </sup>. Si se desea definir un subíndice, se utiliza <sub>. Mientras que los
superíndices se definen con la etiqueta <sup>.
 <mark> </mark>. Si deseas resaltar un texto dentro de la web, esta es la etiqueta funcional.
 <span> </span>. Es utilizada en combinación con atributos como “class” o “id”, permitiendo definir una
serie de características en ellos.
 <br>. Cualquier salto de línea dentro de una página web requiere de esta etiqueta.
Elementos para creación de tablas
Si deseas organizar mejor el contenido de una página web, las tablas siempre son una buena
opción. Por lo que hemos recolectado las etiquetas HTML5 de mayor relevancia para la creación de tablas
en una página web.

8
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ
 <table> </table>. Si quieres crear una tabla para tu página web, entonces necesitas utilizar estas etiquetas y
dentro de ellas encerrar al resto de etiquetas necesarias.
 <caption> </caption>. Indica el título que posee la tabla de tu web.
 <colgroup> </colgroup>. Si quieres agrupar una serie de columnas se utiliza dicha etiqueta.
 <tbody> </tbody>. Etiquetas HTML5 para indicar los datos que corresponden a la tabla.
 <thead> </thead>. Define las filas de una tabla, encargadas de categorizar a las columnas que la
conforman.
 <tfoot> </tfoot>. Define cuáles son los bloques de filas encargados de describir todas las etiquetas que
conforman las columnas.
 <tr> </tr>. Define toda la fila de celdas que posee una tabla.
 <td> </td>. Etiqueta que define una celda en específico de una tabla.
 <th> </th>. Tiene la función de definir cuál será el encabezado que posee una celda específica.
Elementos de formularios
Las páginas web buscan interactuar con el tráfico de manera constante, por lo que necesitan de etiquetas
HTML5 para formular los formularios. En este caso, te presentamos las opciones más comunes para
poder implementarlas en una web.
 <form> </form> Esta es la etiqueta de apertura y cierre que incluye un formulario para una web. Todas las
etiquetas que definen dicho formulario deben estar encerradas entre estas dos etiquetas.
 <fieldset> </fieldset>. Esta opción es utilizada para poder definir a un conjunto de elementos que posee un
formulario web. Lo mejor es identificar a las etiquetas que puedan estar contenidas dentro de esta.
 <legend> </legend>. Etiqueta que se encarga de definir el título correspondiente a la etiqueta <fieldset>.
 <label> </label>. Etiqueta que define el título de un control que conforma el formulario.
 <input> Gracias a esta etiqueta los usuarios poseen una introducción al formulario y resulta ser una de las
más esenciales.
 <button> </button>. Define cualquier botón de un formulario web.
 <select> </select>. Etiqueta que permite la selección entre una serie de opciones que se encuentran en dicho
formulario.
 <option> </option>. Esta etiqueta se encuentra ligada a la anterior y permite definir las opciones que
estarán dentro del campo de <select>.
 <textarea> </textarea>. En este caso, define un campo para que el usuario ingrese un texto con una
cantidad máxima de contenido especificado por el desarrollador.
Elementos multimedia
Dada la creciente necesidad de contar con una mayor cantidad de contenido multimedia dentro de las
páginas web, estas etiquetas HTML5 te servirán. Cada una de ellas te permite implementar un tipo de
elemento multimedia a una web, funcionando de manera distinta.
 <audio>. Encierra toda la música y sonido de una página web.
 <embed>. Encierra las aplicaciones externas que mayormente pueden incluir un reproductor.
9
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ
 <fuente>. Se encarga de definir la fuente para las etiquetas de audio y vídeo.
 <track>. Incluye las pistas para las etiquetas de audio y vídeo respectivamente.
 <video>. Esta etiqueta incluye un vídeo o película.

Etiquetas de texto

Las etiquetas de texto son las que dan significado a los textos que contienen.

Elemento Descripción

<a> Representa un hiperenlace.

<em> Especifica un texto enfatizado.

<strong> Establece un texto importante.

Define un comentario aparte, es decir, textos de


políticas de responsabilidad o una nota de derechos de
<small>
autoría, que no son esenciales para la comprensión del
documento.

Representa contenido que no es exacto, tiene el estilo


<s>
tachado.

<cite> Indica el título de una obra.

<q> Representa una cita textual entre comillas.

<dfn> Sirve para marcar el término que se quiere definir.

Envuelve un texto que al pasar el puntero por encima


<abbr> despliega un tooltip. El contenido del tooltip se detalla
mediante el atributo title.

<time> Determina un valor de fecha y hora.

<code> Establece un código de programación.

Establece un subíndice y un superíndice


<sub><sup>
respectivamente.

Muestra el texto marcado con un estilo en cursiva o


<i>
itálica.

10
DISEÑO Y PROGRAMACIÓN WEB – LIC. ALEX CALLE FERNANDEZ
Elemento Descripción

<b> Representa el texto marcado con un estilo en negrita.

<u> Muestra el texto subrayado.

<mark> Representa un texto marcado o resaltado.

Especifica texto en línea. Sirve para aplicar estilo al


<span>
texto o agrupar elementos en línea.

<br> Inserta un salto de línea.

Indica una oportunidad de salto de línea, es decir, un


<wbr> punto sugerido donde el texto puede ser dividido para
mejorar su legibilidad.

11

También podría gustarte