Conceptos básicos de HTML

Página, Sitio y Aplicación

Página Web
Principales características de una página
Web

● Es un documento HTML (texto,

imágenes, videos, CSS, Javascript).
● Pueden ser estáticas (sólo código) o
dinámica (con, por ejemplo,
contenido extraído de una base de
datos).
Sitio Web
Principales características de un sitio Web

● Son un conjunto de páginas Web

estructuradas en un dominio.
● Se pueden crear escribiendo código
o mediante CMS o builders.
● Pertenecen a empresas,
organizaciones o personas.
Aplicación Web
Principales características de una
aplicación Web

● Es un software desarrollado con

tecnologías Web.
● Se crea mediante código, utilizando
diversos lenguajes de programación,
librerías, frameworks, etc.
● Son creadas por desarrolladores Web
profesionales.

Fuente:
[Link]
vs-sitio-web-vs-aplicacion-web
Aplicación de Escritorio

1. El usuario accede a la aplicación.

2. La aplicación accede a un repositorio de datos para pedir
información o para modificarla.
3. La aplicación muestra al usuario la información solicitada.

1
2

3
Aplicación Web
1. El usuario ingresa la URL (dirección)
en el navegador.
2. El servidor web recibe la solicitud y
envía la respuesta en HTML al
navegador.
3. En el navegador se ingresa la
información de usuario y contraseña.
4. Dicha información se traduce a
HTML.
5. Dicha información se envía al
servidor.
6. Si estos datos son válidos el usuario
es redireccionado a la página que
desea ingresar.
Ventajas de una Aplicación Web

● Se puede ejecutar desde cualquier dispositivo que cuente con navegador

y con conexión a Internet.
● No es necesario instalarlas en el dispositivo, basta con un navegador web.
● Son fáciles de actualizar y mantener.
● Su funcionalidad es independiente al Sistema Operativo instalado en la PC
del usuario.
● Permite que las aplicaciones sean multiusuarios.
● Permite separar los datos almacenados en el servidor de base datos, del
front end, donde se muestran al usuario.
● Las páginas web poseen estructuras similares que mejoran la experiencia
en el uso de las diferentes aplicaciones.
Aplicación Escritorio vs. Aplicación Web
Aplicación Escritorio Aplicación Web

● Es aquella que está instalada en el ● Es aquella que está instalada en un

dispositivo del usuario. Servidor.
● Es ejecutada directamente por el ● Su ejecución requiere que el usuario
sistema operativo del dispositivo, ya disponga de:
sea Microsoft Windows, Mac OS X, 1. Un dispositivo con conexión a
Linux, Android, etc. Internet
2. Un navegador (Google Chrome,
● Su rendimiento depende de diversas
Internet Explorer, Mozilla Firefox, etc.)
configuraciones de hardware como
● El usuario solo necesita renderizar
memoria RAM, disco duro, memoria
contenido, lo que suele ser menos
de video, etc.
demandante de poder de cálculo.
Front-End y Back-End
Concepto Cliente/Servidor
Front-End
● Es la parte visible por el usuario de
una página Web.
● Se relaciona con la creación de una
página funcional (computadora /
tablet o celular) que puede verse en
un navegador (cliente).
● HTML, CSS y JavaScript.
● Editor de texto plano y navegador de
Internet.
Back-End
● Corre en el servidor.
● Se encarga del manejo de algoritmos y
la utilización de bases de datos para
guardar o procesar información:
usuarios, productos, claves, procesos de
selección, filtros, listados y todo tipo de
consultas sobre plataformas Web.
● Parte administrativa del sitio Web.
● Bases de datos, Python y frameworks
asociados.
HTML
HyperText Markup Language: Lenguaje de marcado de hipertexto.
Define la estructura, semántica y contenido de las páginas Web.
El navegador (cliente) interpreta el HTML y lo representan en pantalla.
Permite agregar texto, imágenes, enlaces, tablas, listas, formularios, etc.
Última versión del estándar: HTML 5.
No todos los navegadores son capaces de interpretar un mismo código de una manera
unificada (siempre debemos probar que funcione en la mayoría de ellos).
Utiliza etiquetas (tags) que definen la estructura del documento.
Texto plano con extensión .html
Hipertexto:
Sistema que permite enlazar fragmentos de textos entre sí. Permite que la lectura no
sea lineal, sino que el usuario acceda a la información a través de los ítems
relacionados.
HTML: ¿Cómo funciona?
1. El navegador (cliente) le pide información al servidor.
2. El servidor devuelve la información al cliente en un archivo HTML.
3. El navegador en el cliente lee el archivo de arriba hacia abajo y de izquierda a derecha para
interpretar la información.
4. Tiene en cuenta las etiquetas que tiene el documento y las va renderizando en la pantalla (lo
que se ve en el navegador).
Editores de texto ¿qué usamos para
escribir HTML?
Necesitamos utilizar un editor de texto,
que genere archivos de “texto plano”.

Hay muchos disponibles, desde el bloc de

notas de tu sistema operativo hasta
algunos multiplataforma como Visual
Studio Code.

Nota: pueden hacer clic en las imágenes

para descargar cada software.
Página Web
Estructura
Estructura de una Página Web (ejemplo)
Estas etiquetas ayudan a definir la clase de
contenido tendrá una página Web

Describen su significado tanto para el

navegador como para el desarrollador. A
través de ellas los navegadores y
buscadores reconocen patrones y una
estructura determinada.

Debemos respetarlas porque ayudan al

navegador a entender su significado para
mostrarlo en pantalla y ayudan a los
buscadores a reconocer el contenido y la
estructura del sitio.
Estructura de una Página Web (ejemplo)
Estructura de una Página Web (código)

Tip: En VSC si escribimos html:5 y presionamos TAB este código se escribirá automáticamente.
Estructura de una Página Web (código)
<!DOCTYPE html> Indica que la versión corresponde a HTML5.

<html lang= “es”> Es la etiqueta principal que engloba al resto de las etiquetas, el atributo lang
define el tipo de lenguaje.

<head> Es la cabeza del documento que contiene los metadatos de la página web.

<meta charset="utf-8"> Indica al navegador qué tipo de caracteres contiene la página, con el
atributo charset vamos a indicar el conjunto de caracteres que vamos a usar y con el valor "utf-8"
abarcamos a la mayoría de los sistemas de escritura.

<title> Indica el título de la página Web, que se visualiza en la barra de título del navegador.

<body> Es el cuerpo del documento donde va a estar todo el contenido que vamos a mostrar.
Sintaxis
Las etiquetas
Las etiquetas
● Definen qué función cumple cada elemento dentro de la página.
● Estructura básica, tienen una apertura y un cierre que describen la información
contenida entre ellas, aunque algunos casos solamente tienen apertura, como la
etiqueta <br> (line break o salto de línea):
Etiquetas básicas
<h1>, <h2>, <h3>….<h6>: Encabezados, numerados del 1 al 6 por orden de relevancia. Es importante
respetar ese orden para que el navegador entienda la estructura de la página.

Tip: En VSC si escribimos h1 y presionamos TAB la etiqueta de cierre se escribe automáticamente

 Las etiquetas
<etiqueta atributo = “valor” > Contenido </etiqueta>

html, charset, utf-8,

body, alt, src, id, nombre
img, title, class, href, de
head, … target, … clase,
id, url,
…
Ejemplo:
Etiquetas básicas
<p>: Representa un párrafo.

Tip: En VSC con si escribimos

Lorem100 se escribirá un texto
de ejemplo de 100 palabras. Y
escribiendo p*3 se crearán 3
etiquetas <p>.
Ejemplos de páginas Web
[Link]

[Link]

[Link]

Ejemplos de lo que no hay que hacer:

[Link]

Artículo: [Link]

Cómo pensar la estructura de un Sitio Web:

[Link]
Continuando con HTML
Listas
Tipos de listas
Listas
Utilizan las etiquetas <ul>: lista
desordenada (unordered list) u <ol>: lista
ordenada (ordered list).

Cada elemento de la lista se representa

con <li> y su padre siempre tiene que ser
una etiqueta <ol> o <ul>.
Listas dependientes
También podemos crear listas
dependientes, simplemente agregando
más elementos <ul> u <ol> según
corresponda.

Nada impide utilizar una lista dentro de

otra lista. Este concepto se conoce como
“listas anidadas” o listas dependientes y
puede ser útil cuando enumeramos ítems
que contienen sub-items.
Listas de definición
Las listas de definición son otro tipo de listas interesantes:
Enlaces
Enlaces absolutos y relativos
Permiten vincular unas páginas con otras. Para hacer esto utilizamos el elemento <a> con
el atributo href (Hypertext Reference). Hay 3 tipos de enlaces:

Absoluto: es un enlace que incluye todas las partes de una URL.

Relativo: hace referencia a un recurso que se encuentra en una posición relativa a nuestra URL.

(Sigue en la diapositiva siguiente)

Enlaces internos
Enlaces internos (anclas): Se utiliza para indicar un elemento dentro de la misma
página, dirigiéndose a un sector específico. Para utilizarlo necesitamos el enlace
propiamente dicho y el nombre (name) del ancla al cual debemos dirigirlo.

Se pueden vincular a anclas dentro de la página de destino:

Al igual que en los enlaces internos marcamos la sección con un ancla:

 Enlaces (Atributos)
Dentro de los atributos principales de los enlaces podemos encontrar:

Atributo Características

download Especifica cuál es el objetivo que se descargará cuando un usuario haga clic en el hipervínculo.

href Especifica la URL de la página a la que se dirige el enlace.

Especifica dónde abrir el documento vinculado. Algunas de las opciones son:

target _blank: Abre el documento vinculado en una nueva ventana o pestaña
_self: Abre el documento vinculado en el mismo marco en el que se hizo clic (predeterminado).

Especifica información adicional sobre un elemento. La información generalmente se muestra como

title
un texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.

Si aún no tenemos definido a dónde queremos hacer un hipervínculo podemos colocar dentro del
atributo href el valor #.
 Enlaces locales
Permiten vincular nuestra página con otra página del mismo Sitio Web.

Para agregar un enlace para regresar podemos colocar lo siguiente:

Link
 Enlaces a direcciones de correo y archivos
Permiten vincular nuestra página con el cliente de correo predeterminado en la
computadora:

Se pueden agregar un “asunto”:

Los enlaces también permiten vincular nuestro documento HTML con archivos:
 Rutas
Rutas absolutas y relativas
Rutas absolutas y relativas
Cuando hablamos de ruta (o path) nos
referimos a la dirección de destino al hacer
clic en el link. Esta ruta puede ser:

● Absoluta: Nombre de dominio

(externa):
[Link]
s/[Link]
● Relativa: Directorios desde donde
estoy (interna): /img/[Link]
Rutas absolutas y relativas
Mientras desarrollamos el sitio en forma
local (desde nuestra computadora), nos
conviene tener la información dividida en
carpetas.

En general nuestro [Link] será la

página principal y las demás páginas
estarán en el directorio raíz, pero para
colocar imágenes, hojas de estilo, archivos
de JavaScript nos conviene ponerlos en
carpetas separadas.
Tipos de elemento
Elementos en bloque y en línea
Elementos block (en bloque) e inline (en línea)
HTML clasifica a todos los elementos en dos grupos: inline y block. De por defecto, los
elementos en bloque comienzan en una nueva línea y los elementos en línea pueden
comenzar en cualquier parte de una línea.

INLINE BLOCK

<br>, <a>, <img>, <span>, <b>, <div>, <p>, <h1>..<h6>, <ul>, <ol>, <li>,
<strong>, <mark>, <sub>, etc. <table>, <form>, etc.
Elementos block (en bloque) e inline (en línea)
Material extra
Formatos de texto
● Afectan al texto que se muestra en el documento.
● Han sido sustituidos en buena parte por CSS, pero su conocimiento nos permite modificar
aspectos concretos de la fuente (estilo, índices y subíndices) sin tener la necesidad de definir un
estilo específicamente para modificar solo un atributo (ejemplo: texto en negrita).

<b> vs <strong>

● Mismo efecto visual

● <b> indica negrita y <strong> indica que se debe resaltar fuertemente el texto (cada navegador lo
resalta como desea).

El formato lo define el navegador a su criterio, por eso podemos encontrarnos con presentaciones
levemente diferentes entre navegadores

Etiquetas anidadas:
Etiquetas básicas (formatos de texto)
Jsbin y Codepen
Son herramientas para probar HTML, CSS
y JS.

[Link]

[Link]
w3schools
Es un sitio web para aprender tecnologías
web en línea. Contiene tutoriales de HTML,
CSS, JavaScript, SQL, PHP, XML y otras
tecnologías.

[Link]
Mozilla Developer Network (MDN)
Si eres desarrollador, encontrarás todo lo que
necesitas en Mozilla Developer Network
(MDN). MDN ofrece documentación, demos y
un foro de preguntas y respuestas donde
puedes hacer preguntas e interactuar con
otros desarrolladores.

[Link]

Estos son algunos de los temas que

encontrarás en MDN:

● HTML
● CSS
● JavaScript
● APIs orientadas a la web
● APIs / DOM
Multimedia y Tablas
Multimedia con HTML
Imágenes, video, audio, iframes
 Imágenes
Para mostrar una imagen en una página tenemos dos formas de hacerlo. Una es usando el
elemento <img> y otras es mediante CSS (que veremos más adelante).
Esta etiqueta requiere de dos atributos obligatorios: src (de source) y alt (de alternative).

Utilizamos alt para:

● Posicionamiento en buscadores (extrayendo palabras clave).
● Personas con dificultades visuales (lectores de páginas Web).
● Cuando la imagen no se encuentra disponible.

Con height y width podemos definir el alto y el ancho de la imagen:

Podemos utilizar una imagen como enlace combinando las etiquetas <a> e <img>
 Favicon
Un favicon es la pequeña imagen que se muestra en la pestaña del navegador o en la lista
de marcadores (favoritos). El tamaño en la barra de direcciones es de 16x16 píxeles.
Para agregarlo debemos tener la imagen .png que deseamos colocar como ícono en
formato .ico, que se puede convertir desde [Link] y luego agregar en el
head de nuestro documento HTML lo siguiente:

Los pasos para colocarlo son los siguientes:

1. Buscar o crear una imagen .png
2. Ingresar en [Link]
3. Seleccionar el archivo, convertirlo y descargarlo
4. En el head colocar la referencia con: link rel="icon" href="[Link]"
Audio
La etiqueta <audio> acepta como atributos:
● preload: es usado en el elemento audio para almacenar temporalmente
(buffering) archivos de gran tamaño. + info
● src: puede ser una URL del archivo de audio o la ruta al archivo local + info
● controls: muestra los controles estándar para audio en una página web +
info
● autoplay: hace que el audio se reproduzca automáticamente + info
● loop: hace que el audio se repita automáticamente + info
● muted: especifica que la salida de audio debe estar silenciada + info
Más información: [Link]
Video
La etiqueta <video> acepta como atributos:
● controls: permite activar los controles del player + info
● poster: muestra una imagen a modo de presentación + info
● autoplay, loop, muted, preload y src: misma función que en
audio.
● height: establece la altura del reproductor de video (pixeles) + info
● width: establece el ancho del reproductor de video (pixeles) + info
Más información: [Link]
 Iframe
Se utiliza para incrustar otro documento HTML que se cargará en
forma independiente en la página actual. Podemos agregar:
contenidos de terceros, interfaces de usuario, videos de YouTube,
mapas de Google Maps y banners de publicidad desde otro sitio.

● width y height: ancho y alto.

● frameborder: 0: sin borde y 1: con borde
● scrolling: habilita las barras de desplazamiento si el contenido no cabe en el iframe.
Con “yes” aparecen siempre, con “auto” aparecen sólo si es necesario y con “no” no
aparecerán nunca.
Iframe
Mapas de Google:
1. Ingresar a [Link]
2. Buscar una dirección (ej: Pueyrredón 400).
3. Compartir – Insertar un mapa – Copiar HTML.
4. Pegar el código en nuestro editor.

Videos de YouTube:
1. Buscar un video en YouTube
2. Clic derecho en el video - Copiar código de
inserción.
3. Pegar el código en nuestro editor.

También podremos colocar otros mapas gratuitos,

contenido de Spotify, Vimeo e inclusive incrustar otras
páginas web,
Tablas
Tablas
● Las tablas se usan para representar datos.
● El ejemplo más común de tablas son los documentos de Excel.
● En HTML hay que definir una etiqueta para cada parte de la tabla.
● Las tablas no se usan para maquetar (hoy se maqueta por CSS).

<table>: Representa a todo el elemento tabla.

<tr>: Table row: representa una fila o registro.
<td>: Table data cell: representa a cada celda.
<th>: Table header: representa a una celda de
encabezado.
Tablas | Estructura básica

Tabla de 3 <tr> (filas), de las

cuales una de ellas tiene
encabezado <th> y dos
columnas, dadas por los
<td>
Tablas | Colspan y Rowspan
Son atributos que permiten que una celda
ocupe más de una columna o más de una fila.
Es lo que comúnmente llamamos “combinar
celdas”.

Las columnas (td) siempre van dentro de las

filas (tr). Si queremos agrupar celdas de una
misma celda o columna hay que agregar los
siguientes atributos:
● colspan (column span = número de
celdas a abarcar)
● rowspan (row span = número de celdas a
abarcar).
Tablas | Colspan y Rowspan
Validar código HTML

Existen sitios para validar las

páginas HTML. Ejemplo:
[Link]

Copian el contenido de la página,

la chequean, verifican los errores
y corrigen.
Ahí se usó una etiqueta <h7> que
no existe y aquí marca el error.
Las advertencias se muestran en
amarillo y los errores en rojo.
Inspeccionar páginas

Se puede inspeccionar
sitios web para corregir
errores. Para hacer eso,
se debe hacer clic con
el botón derecho en la
web y seleccionar
Inspeccionar o
presionar F12.
 Formularios
y subida al servidor
Formularios
Un formulario HTML es una sección de un documento que contiene
texto, código, elementos especiales llamados controles: casillas de
verificación (checkboxes), botones de opción (radio buttons), menúes,
etc.; y rótulos (labels) en esos controles.
Los usuarios normalmente “completan” un formulario modificando los
valores de sus controles (introduciendo texto, seleccionando objetos de
un menú, etc.), antes de enviar el formulario a un agente para que lo
procese (por ej.: a un servidor web, a un servidor de correo, etc.)
Formularios: <form>
Se utiliza la etiqueta contenedora <form>,
que incluye todos los campos necesarios
para su funcionamiento.

Hay tipos de campos adecuados para cada

tipo de dato.

Existe un control especial, el botón, que

puede enviar los datos del formulario al
servidor o limpiar el contenido de sus
campos.
Formularios: atributos action y method
La etiqueta <form> admite diversos atributos.
Entre ellos:

● action: define el tipo de acción que se

llevará a cabo (enviar a un mail o
procesar su contenido con un script).
También podemos indicar la URL a la
que se enviará la petición HTTP con toda
la información del formulario.
● method: indica si la petición HTTP será
GET o POST.

Ejemplo:
[Link]
[Link]
Formularios: <label>

<label>: se usa para especificar la etiqueta (o nombre) del campo del

formulario. Es información para el usuario.

Admite el atributo for, que debe tener el mismo valor que el atributo id del
campo (input, select o textarea) al que hace referencia la etiqueta.
Formularios: <input>
Atributos del tag <input>:
● type: este valor puede tener muchos valores: text, email, checkbox, color,
date, file, hidden, etc. en función del tipo de campo que queramos.
● id: este atributo es obligatorio si en el elemento label tiene un atributo for,
en tal caso deberá contener un identificador único en la página.
● name: representa el nombre asignado al campo cuando se envía la
petición HTTP.
● size: define el tamaño de la caja de texto en número de caracteres visibles.
● maxlength: indica el tamaño máximo del texto, en número de caracteres,
que puede ser escrito en el campo.
● value: representa el valor que se asignará al campo cuando se envíe la
petición HTTP. Permite asignar un valor por defecto al campo.
Formularios: atributo type
El atributo type de la etiqueta <input> valida el tipo de dato de entrada:

● text: permite ingresar una cadena alfanumérica.

● number: sólo permite seleccionar un número.
● date: ofrece un calendario para cargar la fecha.
● password: oculta el texto que se está ingresando en el campo.
● email: valida que sea un mail.
● url: valida que sea una url.
● image: define una imagen como botón de envío.
● tel: define un campo para ingresar un número de teléfono.
● file: define un campo de selección de archivo.
● button: activa código JavaScript cuando se hace clic en él.
● checkbox: permite elegir varias opciones.
● radio: permite elegir una opción entre varias posibles.
● range: define un control de rango (como un control deslizante).
● submit: botón enviar.
Formularios: <input type=”password”>

Ocultar texto para contraseñas:

Utilizamos el atributo type con el valor “password” para
generar un campo input que oculte el texto que se está
ingresando.
Se utiliza, por ejemplo, para el ingreso de contraseñas.
Reemplaza cada caracter ingresado por un asterisco.

Clave: <input type="password" name="clave" size="25">

Formularios: <input type=”checkbox”
Los checkboxes permiten seleccionar
algunas opciones de una lista.
Se crean utilizando en un input el
atributo type con el valor “checkbox”
Para que funcionen como una unidad,
cada uno de estos input deben tener
su atributo name con el mismo valor.
El atributo value contiene el valor que
contendrá ese campo cuando la
opción correspondiente esté
seleccionada.
Formularios: <input type=”radio”
Los radiobutton o simplemente radio, <h2>Radio</h2>
<input type="radio" name=“opcion" value="1">Opción 1
permiten seleccionar una opción de una
<input type="radio" name="opcion" value="2">Opción 2
lista. <input type="radio" name="opcion" value="3">Opción 3
<input type="radio" name="opcion" value="4">Opción 4
Se crean utilizando en un input el atributo
type con el valor “radio”.

Para que funcionen como una unidad, cada

uno de estos input deben tener su atributo
name con el mismo valor.

El atributo value contiene el valor que

contendrá ese campo cuando la opción
correspondiente esté seleccionada.
Formularios: botones
Los botones que vemos en los
formularios también son un input. Se
crean configurando el atributo type
con el valor “submit” o “reset”.
Un input del tipo “submit” permite, al
ser pulsado, que el formulario envíe los
datos de sus campos a la dirección
determinada por el atributo target de
la etiqueta form.
Un input del tipo “reset” borra el
contenido de todos los campos del
formulario al ser pulsado.
Formularios: <fieldset>
<fieldset>: define una sección en un
formulario y permite agrupar sus campos.

El elemento <legend> puede contener a

otros elementos o se puede utilizar para
definir un título.

● id: igual que el elemento input.

● name: igual que el campo input.
● value: igual que el atributo value del
campo input.

Ejemplo:
[Link]
name=tryhtml_fieldset
Formularios: <textarea>

Los campos de texto amplios, que permiten el ingreso de

varias líneas de texto, también son un input.
Utilizado para comentarios multilínea o consultas, tienen el
atributo type con el valor “textarea”. Nos permiten definir
rows (filas), columns (columnas). En lugar de utilizar value
escribimos entre las etiquetas textarea.
Consulta: <textarea name="comentario" rows="10"
cols="40">Escribe tu consulta...</textarea>
Formularios: <select> y <option>
Las listas desplegables crean una
lista de opciones, cada una contenida
dentro de un elemento <option>.
Se crean como un input con su
atributo type fijado en “select”.
● size: indica el número de valores
mostrados a la vez en la lista.
● multiple: permite la selección
simultánea de varios elementos
de la lista.
● id, value y name se comportan
igual que el resto de los tipos de
input vistos.
Formularios: atributos opcionales
En muchos de los campos definidos en un formulario
podemos añadir otros atributos que modifican su
comportamiento:

● required: el formulario no se podrá enviar hasta

que ese campo tenga contenido.
● placeholder: si queremos que aparezca un
texto de ayuda para rellenar el campo.
● value: para introducir un valor por defecto en el
campo.
● readonly: si queremos que sea de sólo lectura.

Ejemplos:

● [Link]
ame=tryhtml5_input_required
● [Link]
ame=tryhtml_input_readonly
Formularios - Ejemplos
Subida a un servidor
Netlify

Hosting gratuito que permite probar rápidamente nuestro sitio

web. Requiere registro.
Para agregar el sitio basta con arrastrar la carpeta que contiene el
sitio.
[Link]
Tutoriales sobre cómo subir a Netlify:
● Netlify Drop. Introduction: [Link]
● Netlify Tutorial. Deploy a new site just by Drag and Dropping:
[Link]
GitHub Pages
● Cómo publicar un sitio web gratis
con Github Pages:
[Link]
TURNAUqY&feature=[Link]
● Curso Git y GitHub:
[Link]
tXiQwE535s&list=PLoCpUTIZIYORkDz
YwdunkVf-
KIqGjyoot&ab_channel=ProgramarD
esdeCero
¿Cómo pensar un proyecto
web?
¿Cómo pensar un proyecto web?

A nivel conceptual, tenemos que tener clara la idea de

negocio. Se trata “simplemente” de hacer un ejercicio de
análisis y reflexión.
1) ¿Cuál es el objetivo a cumplir con este proyecto?
2) ¿Quién es tu público objetivo? ¿Quién eres tú para
merecerlos?
3) ¿Cuáles son tus palabras clave?
¿Cuál es el objetivo a cumplir con este
proyecto?

En ello está basado todo tu negocio. Si vas

a montar una tienda de calzado, seguro
que tienes clarísimo que tu objetivo es
vender calzado. Sin embargo, la gente
piensa que su objetivo es tener miles de
visitas, o posicionarse en el primer lugar
de Google. Sí, eso está muy bien, pero sólo
para vender zapatos.
¿Quién es tu público objetivo?
Es clave saber quién es tu audiencia para
dirigirte a ella. Ahí radica la diferencia: recibir
tráfico cualificado, interesado realmente en lo
que ofreces. De lo contrario, podrás conseguir
miles de visitas, pero muy pocos clientes
interesados.

¿Quién eres tú para merecerlos? Es

importante reflexionar sobre qué tienes tú o
tu producto o tu servicio que te haga
diferente del resto: ¿por qué habría yo de
elegirte a ti y no al de al lado?

Identificar los beneficios que obtendrá la

persona que te compre, contrate o lo que sea
que ofrezcas.
¿Cuáles son tus palabras clave?
Las palabras clave son el alimento del que
se nutre tu blog y tu sitio web. Tienes que
tenerlas claras.

Algo que haga referencia, a tu cliente

ideal, a tu especialidad o lo que te hace
diferente, o a algún beneficio que posea tu
producto. Esto último es fruto de
identificar beneficios y nichos de mercado.
Estructura genérica de un sitio web
Tipos de estructura de un sitio web
1. Pensar el número de páginas en la
estructura del sitio web.
2. Pensar los niveles de estructura de
un sitio web.
3. Definir la estructura del sitio web a
nivel conceptual.
4. Definir la estructura del sitio web a
nivel técnico (Maquetar):
1. Hacer el árbol de la estructura de un
sitio web.
2. Hacer estructura de un sitio web
amigable para SEO.
3. Utilizar enlaces internos para mejorar
la estructura del sitio web.
Etiquetas semánticas
Etiquetas semánticas
En versiones anteriores a HTML5, al crear la estructura de una página,
normalmente se utilizaban etiquetas <div> para ir agrupando secciones de la
página. En HTML4 se utilizaban etiquetas div diferenciadas por clases.
Etiquetas semánticas
Son etiquetas dedicadas para cierto tipo
de contenido.

Describen su significado tanto para el

navegador como para el desarrollador.

Debemos respetarlas porque ayudan al

navegador a entender su significado para
mostrarlo en pantalla y ayudan a los
buscadores a reconocer el contenido y la
estructura del sitio.
Etiquetas semánticas
● <header> Se coloca en el body y es la cabecera visual de la página o de una
sección (logotipo, título, etc.). No confundir con <head>, que es el encabezado
del documento HTML.
● <nav> Apartado de navegación (enlaces de secciones, categorías, etc...).
También permite dividir en categorías una sección.
● <main> Contenido principal del body
● <footer> Pie de página (del documento completo) o de una sección.
● <section> Define una sección en un documento
● <aside> Agrupación de contenido no relacionado con el tema principal del
documento. Suele usarse para agregar publicidad.
● <article> Artículo. Parte principal de un escrito (posts en blogs, artículos en
diarios, mensajes en foros, comentarios, etc.)
● <address> Agrupación con la información de contacto del autor del artículo o
documento.
¡Pongamos en práctica lo visto en HTML en clase!

● Recrear el boceto en código HTML

según los temas vistos.
● Debe quedar así
Material extra
Artículos de interés
Cuál es "la peor página web del mundo" y para qué sirve:
[Link]
Las 8 reglas de una buena página web:
[Link]
buena-pagina-web
10 Consejos para Construir una Buena Página de Inicio:
[Link]
de-inicio/
¿Qué es la Arquitectura de la información y por qué es tan importante para tu
proyecto Web?: [Link]