Importancia del diseño en el desarrollo web

Importancia del diseño en el Desarrollo Web

Cómo desarrolladores, posiblemente sea nuestra tarea leer e interpretar archivos de

diseño para conocer y reflejar todas las partes del sitio web a desarrollar.Por
otra parte, cuando trabajamos de forma independiente o durante el proceso de
práctica y aprendizaje crear un sitio web desde cero puede resultar frustrante,
sobre todo si lo imaginamos mientras en nuestra mente mientra desarrollamos.

User Experience

Tiene como propósito la investigación y análisis previo al diseño y desarrollo de

un producto, colocando el foco en la experiencia del usuario final.
Dentro de las competencias de la “User Experience” se encuentran diversas
responsabilidades o tareas como:

Análisis o “Research” del público objetivo incluyendo segmento etario, género,

cultura, intereses, entre otros.
Establecer un perfil de usuario ideal a partir del análisis previo.
Investigación y análisis de la competencia.
Crear moodboards o tableros de inspiración con el fin de representar ideas y
conceptos en un formato más gráfico.
Establecer un flujo de usuario y estructura de la información.
Definir un MVP (mínimo producto viable) y realizar pruebas de usabilidad.

El ejercicio de estas tareas tiene como propósito garantizar que aquellos usuarios
que naveguen un sitio o utilicen una aplicación o programa tengan una agradable
experiencia de usuario, pensada y desarrollada teniendo en cuenta sus intereses y
necesidades.

User Interface

Hace referencia a la “Interfaz de Usuario” de un sitio web, aplicación o programa

en general.Abarca cuestiones como el diseño estructural del sitio (layout), la
paleta de colores, la disposición y el orden de determinados elementos, la
facilidad de uso e interpretación de una web por parte del usuario; todo ello
mediante el análisis e implementación de diferentes herramientas o escenarios
realizado en las etapas de “User Experience”.

Es responsabilidad del “User Interface” llevar adelante el diseño de los wireframes

y prototipos del sitio, aplicación o programa teniendo como referencia los estudios
y reportes realizados previamente, en un proceso “iterativo” donde se miden
resultados y se ajustan detalles. Además, al momento de crear los diseños se toman
en cuenta conceptos y teorías referentes a la psicología y comportamientos de los
usuarios, como por ejemplo el color de un botón para incentivar o no cierta acción.
Para realizar estos diseños, se utilizan programas específicos. Entre ellos se
destacan algunos como FIGMA, Adobe XD, Sketch y Zeplin que poseen herramientas
dedicadas para facilitar el proceso de diseño y también la lectura del mismo por
parte de los desarrolladores.

Layout

Este término hace referencia a la disposición de los elementos en un sitio

web.Teniendo en cuenta la siguiente imagen, podremos observar que no existe una
única distribución de contenidos, si no que dependiendo cada caso puede variar.

Existen distintos tipos de layouts y si bien no todas las distribuciones tienen

nombre, podremos encontrar algunos patrones reconocidos como los que se encuentran
en el siguiente artículo:

https://www.wix.com/blog/2020/02/website-layouts/

Wireframe

Entrando directamente a los formatos de diseño, el wireframe corresponde a una

representación de “baja fidelidad” de un sitio o aplicación.En él encontraremos el
layout o distribución de elementos donde en la mayoría de los casos posea texto de
relleno e imágenes de stock o placeholders para ocupar el lugar que tendría dicha
imagen.Es común que un wireframe sea el resultado de un boceto a mano alzada o
dibujo previo realizado como exploración inicial.

Prototipo

Por otra parte, en contraposición de los wireframes nos encontramos con los
prototipos, que son representaciones de “alta fidelidad” de un diseño.
Aquí encontraremos la información real del sitio y las imágenes y recursos gráficos
definitivos a incluir en el desarrollo, así como también el color, tamaño,
tipografías y peso de los textos, los colores de fondo y hasta incluso las
distancias, márgenes y rellenos entre cada elemento del sitio.
Este tipo de representaciones, son la evolución del wireframe a su etapa final y
ambos formatos son de suma utilidad e importancia al momento de llevar un diseño a
código.

Conclusión

En este apartado, si bien conocimos algunos conceptos de diseño orientado a la web

y las aplicaciones, mencionando que son perfiles que escapan a las tareas de un
desarrollador, vale la pena destacar que conocer sobre estas temáticas y adentrarse
en el uso de herramientas de diseño como FIGMA, puede ser de mucha utilidad en
nuestro proceso de práctica y aprendizaje.
No es lo mismo crear un sitio web con una idea en la cabeza, que bajar esa idea
previamente a un wireframe o prototipo y empezar a desarrollar el sitio desde ahí.
Te invito a hacer la prueba y verás cómo diseñar antes de ir al código te ayudará a
ahorrar muchísimo tiempo en el proceso de desarrollo.
Finalmente, debes saber que estas herramientas son muy utilizadas en el mercado
laboral y tener la capacidad de leer un archivo de diseño para analizar las
propiedades que necesita el sitio, es una habilidad que sin dudas te ayudará a
destacar en el desempeño de tus tareas.

HAY 2 VIDEOS PARA VER: IR A DISEÑO(INTRO A FIGMA, ANALIIS DE DISEÑOS)

. INTERNET
Acerca de ...

Internet (el internet o, también, la internet) es un conjunto descentralizado de

redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP,
lo cual garantiza que las redes físicas heterogéneas que la componen constituyan
una red lógica única de alcance mundial. Sus orígenes se remontan a 1969, cuando se
estableció la primera conexión de computadoras, conocida como ARPANET, entre tres
universidades en California (Estados Unidos). Uno de los servicios que más éxito ha
tenido en internet ha sido la World Wide Web (WWW o la Web), hasta tal punto que es
habitual la confusión entre ambos términos.

La WWW es un conjunto de protocolos que permite, de forma sencilla, la consulta

remota de archivos de hipertexto. Esta fue un desarrollo posterior (1990) y utiliza
internet como medio de transmisión. Existen, por tanto, muchos otros servicios y
protocolos en internet, aparte de la Web: el envío de correo electrónico (SMTP), la
transmisión de archivos (FTP y P2P), las conversaciones en línea (IRC), la
mensajería instantánea y presencia, la transmisión de contenido y comunicación
multimedia —telefonía (VoIP), televisión (IPTV)—, los boletines electrónicos
(NNTP), el acceso remoto a otros dispositivos (SSH y Telnet) o los juegos en línea.
El uso de internet creció rápidamente en el hemisferio occidental desde la mitad de
la década de 1990 y desde la década de 2000 en el resto del mundo.
Internet se define como una gran “red de redes”, es decir, una red conectada a otra
de manera continua y simultánea, pero para entenderlo mejor veamos primero qué es
una red:
Cada uno de estos gráficos representa una especie de red: de computadoras, de
puntos o de pesca. Lo que define a estas redes como tales es que existe
“interconexión” entre sus componentes, aún cuando no se encuentren la totalidad de
los puntos conectados entre sí. Desde cualquier punto de la red podremos llegar a
otro, con más o menos vueltas, pero todos los destinos son alcanzables. Internet es
justamente eso: una gran red donde todos los dispositivos están conectados entre
sí.

¿Cómo se comunican las redes de Internet?

Para que una interconexión sea realmente global, todas las redes que se conectan a
la gran red de redes deben hacerlo a través de un mismo protocolo o “lenguaje en
común”. Es decir, el protocolo de comunicación de Internet debe ser una
implementación estándar que garantice la conexión desde cualquier origen hasta
cualquier destino.
Interconexión

Probablemente la computadora que utilizamos a diario en la oficina esté conectada a

una red de computadoras. En nuestra casa, la computadora portátil, tablet y
celulares los vinculamos a un dispositivo inalámbrico que luego se conecta a la red
de fibra óptica de la empresa que nos brinda servicio de Internet y de televisión
por cable o telefonía. Éste se comunica a la red de otro Proveedor de Servicios de
Internet o ISP (por sus siglas en inglés) más grande, que llega a un número mayor
de hogares y empresas, y así sucesivamente. A su vez, estos proveedores de acceso
internacional se interconectan con otros más grandes, denominados Carriers, a
través de fibras ópticas transcontinentales y satélites, entre otros.
Protocolo TCP-IP
¿Qué es un protocolo TCP/IP y cómo funciona?

Como sucede con las personas, es importante que los equipos tengan un modo común de
comunicarse entre ellos. Para la mayoría de los equipos actuales, este modo es
TCP/IP. TCP/IP suele venir integrado en los equipos y está automatizado en buena
medida, aunque puede ser útil comprender el modelo TCP/IP, en especial si va a
configurar un equipo para conectarlo a otro sistema. Este artículo explica cómo
funciona TCP/IP.

¿Qué significa TCP/IP?

TCP/IP son las siglas de Transmission Control Protocol/Internet Protocol (Protocolo

de control de transmisión/Protocolo de Internet). TCP/IP es un conjunto de reglas
estandarizadas que permiten a los equipos comunicarse en una red como Internet.

¿Qué hace exactamente TCP/IP? ¿Y cómo funciona?

Por sí mismo, un equipo puede realizar determinadas tareas. Pero su potencia se

multiplica cuando es capaz de comunicarse con otros. Muchas de las cosas para las
que utilizamos los equipos (enviar mensajes de correo electrónico, ver Netflix u
obtener indicaciones para llegar a un sitio) dependen de la comunicación entre
ellos. Pueden ser equipos de distintas marcas o incluso encontrarse en zonas del
mundo diferentes. Y las personas y programas que los utilizan pueden hablar
distintos lenguajes humanos e informáticos.

Una interacción determinada puede darse entre dos sistemas informáticos o

involucrar cientos de sistemas. Sin embargo, como sucede al pasar una carta o un
paquete de mano en mano, cada transacción se produce entre solo dos equipos cada
vez.

Para que esto suceda, los dos equipos deben saber, por adelantado, cómo se espera
que se comuniquen.

¿Cómo inician la conversación?

¿A quién le toca comunicarse?

¿Cómo sabe un equipo si su mensaje se ha transmitido correctamente?

¿Cómo terminan la conversación?

Los equipos lo resuelven mediante protocolos. Un protocolo es un conjunto de reglas

convenido. En términos humanos, utilizamos protocolos sociales para saber cómo
comportarnos y comunicarnos con otras personas. Las tecnologías tienen su propia
forma de establecer reglas de comunicación, como el telégrafo cuando empleaba el
código Morse o una radio CB en la que se utilizan códigos como “10-4”.

Con los equipos sucede lo mismo, aunque las reglas son más estrictas. Cuando todos
los equipos emplean el mismo protocolo, es posible transferir información. Cuando
no es así, cunde el caos.

La comunicación era más complicada cuando la gente comenzaba a intercambiar

información entre equipos. Cada fabricante tenía un sistema de comunicación propio
entre sus máquinas, pero dichos sistemas no permitían la comunicación con los
equipos de los demás fabricantes. Pronto quedó claro que era necesario un estándar
convenido que permitiera a los equipos de todos los fabricantes comunicarse entre
ellos. Ese estándar es TCP/IP.

¿En qué se diferencian TCP e IP?

TCP e IP son dos protocolos distintos para redes informáticas.

IP es la parte que obtiene la dirección a la que se envían los datos. TCP se

encarga de la entrega de los datos una vez hallada dicha dirección IP.

Es posible separarlos, pero lo cierto es que no tiene mucho sentido diferenciar

entre TCP e IP. Como se usan juntos tan habitualmente, “TCP/IP” y “modelo TCP/IP”
son ya terminología reconocida.

Mírelo de esta forma: La dirección IP es como el número de teléfono que se asigna a

su smartphone. TCP es toda la tecnología que hace que el teléfono emita un timbre
al recibir una llamada y que le permite hablar con alguien al otro lado de la
línea. Son cosas diferentes, pero tampoco tienen sentido la una sin la otra.

¿Qué hace exactamente TCP/IP? ¿Y cómo funciona?

TCP/IP fue desarrollado por el Departamento de Defensa de EE. UU. para especificar
el modo en que los equipos transfieren datos de un dispositivo a otro. TCP/IP
incide mucho en la precisión y dispone de varios pasos para garantizar la correcta
transmisión de los datos entre ambos equipos.
Este es uno de los mecanismos que emplea para ello. Si el sistema enviará un
mensaje entero en una pieza y se encontrara cualquier problema, sería necesario
enviar de nuevo el mensaje completo. Lo que hace TCP/IP es descomponer cada mensaje
en paquetes que se vuelven a ensamblar en el otro extremo. De hecho, cada paquete
podría tomar una ruta distinta hasta el equipo de destino si la ruta deja de estar
disponible o está muy congestionada.

Además, TCP/IP divide las distintas tareas de comunicación en capas. Cada capa
tiene una función distinta. Los datos pasan por cuatro capas independientes antes
de recibirse en el otro extremo (como se explica en la sección siguiente). A
continuación, TCP/IP recorre estas capas en orden inverso para reensamblar los
datos y presentarlos al destinatario.

El propósito de las capas es crear un sistema estandarizado, sin que los distintos
fabricantes de hardware y software tengan que gestionar la comunicación por su
cuenta. Es como conducir un coche: todos los fabricantes convienen en la posición
de los pedales, así que no tenemos que tener eso en cuenta al cambiar de coche.
También significa que es posible actualizar determinadas capas, por ejemplo, para
mejorar el rendimiento o la seguridad, sin tener que actualizar todo el sistema.

Las cuatro capas del modelo TCP/IP

TCP/IP es un protocolo de enlace de datos que se utiliza en Internet. Su modelo se

divide en cuatro capas diferenciadas. Cuando se emplean juntas, es posible
referirse a ellas como un paquete de protocolos.

Capa de enlace de datos

La capa de enlace de datos (también denominada capa de enlace, capa de interfaz de
red o capa física) es la que maneja las partes físicas del envío y recepción de
datos mediante el cable Ethernet, la red inalámbrica, la tarjeta de interfaz de
red, el controlador del dispositivo en el equipo, etcétera.

Capa de Internet
La capa de Internet (también denominada capa de red) controla el movimiento de los
paquetes alrededor de la red.

Capa de transporte
La capa de transporte es la que proporciona una conexión de datos fiable entre dos
dispositivos. Divide los datos en paquetes, hace acuse de recibo de los paquetes
que recibe del otro dispositivo y se asegura de que el otro dispositivo haga acuse
de recibo de los paquetes que recibe a su vez.

Capa de aplicaciones
La capa de aplicaciones es el grupo de aplicaciones que requiere comunicación de
red. Es con lo que el usuario suele interactuar, como el correo electrónico y la
mensajería. Como la capa inferior gestiona los detalles de la comunicación, las
aplicaciones no tienen que preocuparse por ello.

¿Mis paquetes de datos se mantienen privados?

No. Cuando los paquetes se transmiten entre equipos, son vulnerables y otros pueden
verlos. Esa es una de las razones por las que se aconseja evitar las redes Wi-Fi
públicas para enviar datos que deban mantenerse privados, así como utilizar
cifrado.
Si esto es algo que le preocupa (por ejemplo, si va a enviar información de
identificación personal o datos financieros), puede cifrar los datos empleando una
red privada virtual (VPN) o trabajando con páginas web con seguridad https.

¿TCP/IP funciona con toda clase de direcciones IP?

Hay varios tipos de direcciones IP. No obstante, todas ellas utilizan TCP/IP.
Las diferencias entre los tipos de direcciones IP son transparentes para el usuario
esporádico, y el hecho de que no necesite saber mucho al respecto es una de las
ventajas de TCP/IP. Normalmente, estos asuntos los administra quien haya
configurado el sistema operativo del equipo o el dispositivo móvil. En cualquier
caso, a modo de aclaración:

Las direcciones IP estáticas no cambian en ningún momento. Son como la dirección

fija de su domicilio, un dato inalterable.
Las direcciones IP dinámicas cambian, o al menos están diseñadas para cambiar.
Cuando un sistema informático utiliza una dirección IP dinámica, anuncia “¡aquí es
donde puedes encontrarme!” a la red local.

Tal vez haya oído hablar de ciudades en las que la población crece tan rápido que
se han tenido que crear nuevos códigos de área para que los recién llegados puedan
tener un número de teléfono. Con el número siempre creciente de dispositivos
conectados, TCP/IP ha tenido un problema similar. Básicamente, Internet se estaba
quedando sin direcciones IP. Por eso se desarrolló una nueva versión de dirección
IP denominada IPv6, una alternativa a las direcciones IPv4 existentes.

De hecho, TCP/IP se incluye como estándar

TCP/IP es el paquete de protocolos más utilizado en la web. Millones de personas lo
emplean cada día, aunque no sean conscientes de ello.
En la inmensa mayoría de los equipos, TCP/IP se integra como estándar. No tiene que
hacer nada para configurarlo de manera manual. En ocasiones, tal vez tenga que
decirle a una aplicación cuál es su dirección TCP/IP.
En algunas circunstancias puede querer ocultar su dirección IP, normalmente por
motivos de seguridad.

¿Cómo puedo saber cuál es mi dirección TCP/IP?

Cada dispositivo tiene su propia dirección TCP/IP. Por lo general, el dispositivo
puede comunicarse automáticamente, pero a veces es necesario proporcionar su
dirección TCP/IP de forma manual. El modo de encontrar su dirección IP depende del
sistema operativo.
Podés consultar tu IP pública desde una página web como https://www.cual-es-mi-
ip.net/
Conceptualmente, el número obtenido se puede asemejar a la “dirección” de una
habitación de hotel, en la que la gerencia del mismo sabe que puede encontrarlo o
el número de teléfono de tu celular.

HTML

UNIDAD 1

HAY 2 VIDEOS (VS CODE)

HTML es un lenguaje que sirve para construir páginas web. Es el primer paso que
debería completar cualquier persona que quiera dedicarse al desarrollo de web en
general y un conocimiento recomendado para cualquier persona que trabaje en el
medio Internet.

Ingresando al mundo HTML

Bienvenidos, vamos a descubrir el principal lenguaje utilizado para la creación de
páginas web: Hyper Text Markup Language, más conocido mediante sus siglas HTML.
Puede que en un principio, el hecho de hablar de un lenguaje “informático” de un
poco de nervios, sin embargo, HTML no deja de ser más que una forma sencilla de
especificar el contenido de las páginas, indicando el texto y otros elementos como
imágenes, tablas, listas, etc.
Al final es de suma importancia ya que es el medio con el cual se suministra el
contenido a los navegadores y por tanto, si queremos comenzar a aprender a crear
páginas web, necesariamente debemos comenzar por aquí.
Verás también como HTML dentro del contexto de la creación de una página web, se
apoya en editores, programas para subir archivos al servidor, etc.

Es necesario leer este texto para cualquier persona, que con conocimientos de
informática, desean hacer proyectos front-end en cualquier lenguaje.
Con ganas y realizando los ejercicios al final, tendrás las habilidades y
conocimientos como para realizar una página web por tu cuenta que esté lista para
publicar. Además podrás:
Identificar qué se debe hacer con HTML y qué no.
Capacidad para crear y publicar vuestro propio sitio web con un mínimo de calidad.
Conocimientos de todo tipo sobre las tecnologías y herramientas empleadas en el
ámbito de la Red.
Las primeras cosas que debes saber sobre HTML: historia, objetivos y demás
conocimientos...

HTML es el lenguaje con el que se escribe el contenido de las páginas web.

Las páginas web pueden ser vistas por el usuario mediante un tipo de aplicación
llamada cliente web o más comúnmente "navegador". Podemos decir por lo tanto que el
HTML es el lenguaje usado por para especificar el contenido que los navegadores
deben representar a la hora de mostrar una página web.
Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y combinarlos a
nuestro gusto. La ventaja del HTML a la hora de representar el contenido en un
navegador, con respecto a otros formatos físicos como libros o revistas, es
justamente la posibilidad de colocar referencias a otras páginas, por medio de los
enlaces hipertexto.
Los navegadores y sus problemas

El conflicto generado por los navegadores es debido a su diversidad. Existen

multitud de navegadores o clientes web presentes en el mercado los cuales muchas
veces no son capaces de interpretar un mismo código de una manera unificada. Esto
obliga al desarrollador a, una vez creada su página, comprobar que esta puede ser
leída satisfactoriamente por todos los navegadores, o al menos, los más utilizados.
Cuando surgen problemas de interpretación, queda de parte del desarrollador
resolver el problema tirando de técnicas o conocimientos que él disponga.

Afortunadamente, en la actualidad las diferencias de interpretación de los

navegadores con respecto a un mismo código HTML son mínimos, pero en el pasado los
desarrolladores tenían que emplear mucho tiempo en remar contracorriente para
solucionarlos. Sin embargo, quedan todavía muchos usuarios que navegan con sistemas
anticuados, ya sea por falta de interés para actualizarse, conocimientos, o por
disponer ordenadores muy antiguos.

Pero no todo ha sido malo por parte de los navegadores. Ellos también son los
responsables de introducir nuevas etiquetas en el uso común del día a día, que se
han ido incorporando al estándar HTML en sucesivas versiones. Aunque antes de
estandarizarse esas etiquetas era común que cada navegador crease su etiqueta
propietaria para resolver la misma necesidad, lo que obligaba a los desarrolladores
a repetir código o incluso a hacer versiones de páginas diferentes para
navegadores. Con todo esto no queremos asustar a nadie y volvemos a repetir que las
diferencias en la actualidad son mínimas, pero sí deseamos que quede clara la
necesidad de la estandarización creada por el W3C, responsable de marcar una pauta
que actualmente cumplen todos los navegadores modernos de manera bastante fiel.
Los lenguajes de la web

HTML no está solo como único lenguaje para crear la web, aunque en un principio sí
que era así. Su evolución tan anárquica ha supuesto toda una serie de
inconvenientes y deficiencias que han debido ser superados con la introducción de
otras tecnologías accesorias capaces de organizar, optimizar y automatizar el
funcionamiento de las webs. Algunos ejemplos son CSS o JavaScript. Veremos más
adelante en qué consisten estas tecnologías.

Lo que es importante para el desarrollador es conocer el enfoque de cada lenguaje,

para saber cuál es la manera correcta de utilizarlo y cómo se complementan los unos
a los otros. No es necesario que se sea experto en todos ellos, pero sí saber qué
cosas se deberían hacer con cada cual, para no cometer errores que deriven en una
mala interpretación por parte de los navegadores. Así mismo tenemos que pensar que
no todas las personas van a acceder a una web a través de un ordenador, sino
también de un teléfono o de navegadores especializados en donde la accesibilidad
debe ser diferente. Es por ello que es importante escribir correctamente los
lenguajes, respetando los estándares y así cada navegador podrá hacer su mejor
papel para representar la página lo más correctamente posible.

Deseamos incidir mucho en este detalle, la correcta utilización del HTML: escribir
el contenido, para que nuestro trabajo sea lo más adecuado y de elevada calidad.

Los editores de HTML

Además del navegador necesario para ver los resultados de nuestro trabajo,
necesitamos evidentemente otra herramienta capaz de crear la página en sí.
Un archivo HTML (una página) no es más que un texto plano (sin forma estética) al
que le colocamos extensión ".html". Es por ello que para programar en HTML
necesitamos un editor de texto.
Es recomendable usar un editor de textos sencillo, de texto plano
Queremos remarcar que nunca se debe usar el tipo de editor de textos que se usan
para escribir documentos, cartas, trabajos para el colegio, como Wordpad o
Microsoft Word, pues colocan su propio código especial al guardar los documentos y
HTML es únicamente texto plano, con lo que podremos tener problemas.
Aunque para aprender es recomendable que se use un programa que te permita escribir
el código plano, podés comenzar tus primeros pasos con algún editor que genera el
código mientras escribís en un procesador de texto al estilo Word. Te recomendaría
el uso de Kompozer, un sistema gratuito y que puede ayudarte a iniciar en el código
HTML, posteriormente, creo que se puede continuar con Geany, como para iniciar las
etapas de creación de páginas web profesionales.

El tipo de editores que recomendamos son aquellos específicos para la edición de

código, los cuales están pensados para facilitar los procesos de la programación y
de la escritura de código plano como el del lenguaje HTML. Existen infinidad de
editores de código interesantes, que nos aportan más o menos facilidades y que nos
permiten aumentar nuestra productividad. No obstante, es aconsejable en un
principio utilizar una herramienta lo más sencilla posible para poder prestar la
máxima atención a nuestro código y familiarizarnos lo antes posible con él. Siempre
tendremos tiempo más adelante para pasarnos a editores más versátiles con la
consiguiente ganancia de tiempo.
No es posible decir a nadie el editor que debe de usar, porque cada uno tendrá sus
preferencias. Igualmente para quienes están comenzando nosotros recomendamos:

https://code.visualstudio.com/

En resumen, HTML sirve para decir qué contenido debe tener una página y CSS sirve
para decir cómo se debe representar tal contenido, con qué estilo, color, imágenes
etc... Es fácil saltarse esta regla, porque en HTML existen diversas etiquetas (y
atributos, de los que ya hablaremos) que realmente están pensados para definir la
presentación. Es una herencia de versiones pasadas del HTML y aunque comenzaremos
de esa forma debemos recordar que usar HTML para definir cómo debe de representarse
un elemento en la página no es técnicamente correcto.

Como has visto, una página es un archivo donde está contenido el código HTML en
forma de texto. Estos archivos tienen extensión .html o .htm (es indiferente cuál
utilizar). De modo que cuando programemos en HTML lo haremos con un editor de
textos y guardaremos nuestros trabajos con extensión .html, por ejemplo
mipágina.html
Consejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso evitará que
te confundas al escribir los nombres de tus archivos unas veces con .htm y otras
con .html. Cabe remarcar que hoy todo el mundo usa la extensión ".html" y no ".htm"

SINTAXIS
Como lo mencionan sus siglas HTML (Hyper Text Markup Language), este lenguaje nos
va a permitir “marcar” (definir, colocar) contenido de “hipertexto” (lo que
queremos mostrar) en un navegador mediante el uso de “etiquetas” (palabras clave
que me ayudan a dar estructura a ese contenido).
las etiquetas definen no solo el contenido sino la estructura interna de nuestros
elementos.
De esta manera, se genera una estructura a modo de árbol o “cuadro de relación” que
contendrá todo el contenido textual y multimedia que llevará nuestro sitio web.
Luego, como hemos visto anteriormente, haremos uso de CSS para modificar
visualmente esa estructura.

Luego con CSS daremos estilos para que cada cosa tenga color, posición, tamaño,
etc.

ETIQUETAS

Lo primero que debemos saber, es que existen 2 tipos de etiquetas HTML: Abiertas y
Cerradas. Las etiquetas abiertas son únicas, como por ejemplo <img /> o <br />
mientras que las etiquetas cerradas son un juego de pares, como por ejemplo
<section></section> o <div></div>.
La principal, pero no única razón es que las abiertas no tienen contenido mientras
que las cerradas pueden tener desde texto hasta otras etiquetas.

Asimismo, independientemente de esta condición, cada etiqueta además puede ser del
tipo en bloque o en línea. Lo cual define su comportamiento en el cuerpo del
navegador, por ejemplo, las etiquetas que nativamente son en bloque siempre
intentan ocupar el 100% de ancho de su contenedor, mientras que las etiquetas en
línea sólo adoptan el ancho de su contenido, dejando el espacio de alrededor libre
para ser ocupado por otra etiqueta en línea.

HTML

ESTRUCTURA
Todo documento escrito en lenguaje HTML, debe conservar una estructura básica
estándar y obligatoria.
DOCTYPE
<!DOCTYPE> informa al navegador que versión de HTML (o XML) se usó para escribir el
documento.

HTML
<html> (o elemento HTML raíz) representa la raíz de un documento HTML. El resto de
elementos descienden de este elemento.

HEAD
El elemento HTML <head> provee información general (metadatos) acerca del
documento, incluyendo su título y enlaces a scripts y hojas de estilos.

TITLE
El elemento <title> HTML define el título del documento que se muestra en un
browser la barra de título o la pestaña de una página. Solo contiene texto; las
etiquetas dentro del elemento se ignoran.

BODY
El elemento <body> de HTML representa el contenido de un documento HTML. Solo puede
haber un elemento <body> en un documento.

ETIQUETAS SEMÁNTICAS
A diferencia de otras versiones donde para separar o estructurar contenido se
utilizaba casi por defecto la etiqueta <div>, en HTML5 se han incorporado muchas
etiquetas que sirven para indicar qué son y cuál es el significado de los elementos
que contienen dentro.
Esas son las etiquetas semánticas, que ganan mucha importancia en el marco del HTML
y de la composición de un documento web por ayudar a motores de búsqueda como
Google a indexar más correctamente los contenidos de un sitio.
Como vemos en la imagen, esas etiquetas son <header>, <nav>, <section>, <article>,
<aside>, <footer> y <main>, entre otras. Esto nos introduce dentro del concepto de
web semántica donde se busca que el código HTML que escribimos posea sentido
semántico literal a fin de facilitar la comprensión estructural de nuestro sitio
entre desarrolladores y el entendimiento de los motores de búsqueda sobre nuestro
código.

Si te interesa profundizar sobre este tema, podés hacerlo en el siguiente enlace:

https://www.w3schools.com/html/html5_semantic_elements.asp

ENCABEZADOS
Los encabezados HTML o “HTML Header Tags” son las etiquetas que conocemos como
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Un encabezado HTML, es una etiqueta de título que utilizamos dentro de una página
web para resaltar la temática y sub-temáticas del contenido. En SEO (Optimización
de Motores de Búsqueda), estos encabezados, son importantes tanto para los usuarios
como para Google, ya que les ayuda a entender mejor la estructura temática de una
página.
Desde la perspectiva de las personas y los motores de búsqueda, estas etiquetas
funcionan como guía y resumen del texto. Brinda a los lectores y rastreadores la
esencia del contenido, al transmitir de manera concisa y visual su mensaje
principal.
Las etiquetas de encabezado proporcionan a las páginas web dos grandes beneficios:
claridad y jerarquía. Donde esta última es de vital importancia a la hora de
utilizar nuestros encabezados ya que serán utilizados por los motores de búsqueda a
través de la jerarquía utilizada, pudiendo elegir Google, nuestro texto definido en
un <h1> como el texto a mostrar cuando ofrezca nuestro sitio como resultado. Además
que los encabezados jerarquizados ordenan visualmente el contenidos.

Box Modeling

Para entender el modelo de caja, debemos comenzar por la premisa de que en la web o
mejor dicho, dentro de un navegador, todo es una caja. Al principio este concepto
puede parecer un poco raro, pero si analizamos cada elemento de nuestra web y cómo
interactúan las etiquetas HTML entre sí, entonces esta idea toma mucho más sentido.

Por ejemplo, si seleccionamos una imagen con transparencia o aplicamos un border-

radius a un elemento e inspeccionamos con el inspector de código, veremos que dicho
elemento no tendrá los límites en su contorno si no que será cuadrado o
rectangular.
Como vemos en las imágenes anteriores, si bien la foto es transparente, al
seleccionar la etiqueta img, esta nos marca su forma como un rectángulo y vemos que
el inspector de código nos muestra las propiedades de la caja (margen, relleno,
borde y contenido) de la misma manera.
Otro ejemplo es colocar un borde de color a todos los elementos de una web a través
del selector universal * y veremos todas las cajas que componen cada elemento de
ese sitio, revelando también contenedores padre y sus estructuras.

Esta práctica nos ayuda a entender el modelo de caja y cómo se arman los layouts de
los sitios webs a través de su anidado de etiquetas padres e hijas.

Displays
Como vimos en HTML, las etiquetas poseen un comportamiento nativo que puede ser de
dos tipos: en bloque o en línea.
Ahora que sabemos lo que es el “Box Modeling”, podemos comprender que estos
comportamientos son formas de mostrar (display) una caja y que cada una tiene un
comportamiento en particular.

Cajas con display =”block”;

Las cajas de bloque, por defecto, ocupan todo el espacio a lo ancho del contenedor
y aceptan modificaciones en su morfología a través de las propiedades width,
height, margin y padding.

Cajas con display=”inline”;

Las cajas en línea, por defecto, toman el tamaño de contenido y no aceptan
modificaciones en su morfología salvo por el margin y padding pero únicamente a los
costados de su contenido.

Si bien estas son las opciones pueden adoptar las etiquetas por defecto, existen
otros valores posibles para la propiedad display, de los cuales nos concentraremos
por el momento en: inline-block y none.

Cajas con display=”inline-block”;

Con este valor, tomamos lo mejor de los anteriores y obtenemos un display que ocupa
solo el tamaño de su contenido pero donde podemos modificar la morfología del
elemento a través de las propiedades width, height, margin y padding.

Cajas con display=”none”;

Estas cajas no serán mostradas en nuestro sitio ni ocuparán espacio en el lugar
donde deberían ir ubicadas.

¿Qué compone al Modelo de Cajas?

Cada elemento HTML es una caja que posee un ancho (width) y alto (height), cuatro
lados y se compone de cuatro áreas: content, padding, border y margin.

Contenido (Content)
El contenido de la caja, donde aparecen texto, imágenes, etc.
El área del content (como su nombre lo dice) es el “contenido” principal a mostrar,
es decir, un texto, una imagen, un video, etc. El contenido siempre es lo que
queremos mostrarle al usuario. Esta área en muchas ocasiones tiene un color o
imagen de fondo para hacerla más atractiva.

Propiedades que se pueden aplicar al content:

width: modifica el ancho de la caja y su contenido.
max-width: establece un valor de ancho máximo.
min-width: establece un valor de ancho mínimo.
height: modifica el alto de la caja y su contenido.
max-height: establece un valor de alto máximo.
min-height: establece un valor de alto mínimo.

Márgenes (Margin)
Es la separación entre una caja y las cajas adyacentes.
El margen es la última área del Box Model y se puede ver como una separación
invisible o transparente que ayuda a separar un elemento de otro. Cuando definimos
un color o imagen de fondo, este no se propaga a esta sección.

Los márgenes siempre quedan fuera del modelo de caja, por lo que pueden utilizarse
para crear espacio entre los elementos y sus propiedades aceptan valores negativos
en caso de ser necesario.

Rellenos (padding)
Es el área de relleno del contenido y también es transparente al igual que el
margin.El padding es una separación o espacio interior que existe entre el
contenido y el borde de la caja, el cual se utiliza para dar una apariencia
estética más atractiva y que el contenido no esté pegado al borde.

Cabe mencionar que el padding sigue siendo parte de los límites de la caja, por
ende se tendrá en cuenta para calcular el ancho y alto de la misma junto con el
contenido.

Es importante mencionar que NO se permiten valores negativos.

Bordes (border)
El borde es la línea que rodea la caja, es como la frontera que rodea al elemento y
se utiliza para darle una apariencia estética a la caja ya que permite dibujar una
línea con colores y estilos diferentes.Podemos manejar los bordes con las
siguientes propiedades:
border-style: el estilo del borde, los valores posibles son los de la imagen
superior.
border-width: define el ancho de la línea del borde.
border-color: nos permite elegir el color de ese borde.

Box-sizing
La propiedad box-sizing establece cómo se calcula el ancho y alto total de un
elemento o caja en HTML/CSS.
Tiene dos valores posibles: content-box y border-box y la diferencia principal
entre ellas radica en que una calcula el ancho de la caja.

box-sizing: content-box;
Este valor de propiedad calcula el tamaño total de la caja (con padding y border)
SIN modificar el ancho y alto asignado al elemento a través de las propiedades
width y height.

box-sizing: border-box;
En cambio, esta propiedad calcula el tamaño total de la caja SIN exceder del ancho
y alto asignado a través de las propiedades width y height, es decir incluyendo en
su tamaño total padding y bordes.

Overflow (desbordamiento)
Esta propiedad nos permite determinar cómo se verá todo el contenido que se
desborde de una caja. Normalmente, estas situaciones se dan en casos donde nuestra
caja tiene un ancho o alto explícito y el contenido interno es más grande que
estos.

Las valores de la propiedad overflow para manejar estos casos son:

auto: se colocan barras de desplazamiento sólo cuando sean necesarias.
hidden: oculta el contenido que sobresale.
visible: muestra el contenido que sobresale (comportamiento por defecto)
scroll: se colocan barras de desplazamiento (horizontales y verticales).

UNIDAD 2

HTML RECARGADO: HTML 5

LISTAS
Las listas en HTML nos permiten definir semánticamente un conjunto de elementos que
tienen mejor sentido juntos que separados. Un ejemplo de esto puede ser una serie
de pasos para realizar algo o la descripción de propiedades de un objeto.
Actualmente existen 3 tipos de listas: ordenadas, no ordenadas y descriptivas.

TIPO, DE LISTAS:
<ol> lista ordenada.
Define un conjunto de elementos con jerarquía.
<ul> lista no ordenada.
Define un conjunto de elementos relacionados pero sin jerarquía.

ETIQUETAS DE ITEM:
<li> elemento de lista.
Se usa en listas ordenadas y no ordenadas para definir un elemento de lista.

LISTAS ORDENADAS: PASOS PARA PREPARAR UN TE

<h2>Pasos para preparar un té</h2>

<ol>
<li>Calentar agua</li>
<li>Colocar un saquito de té en una taza</li>
<li>Colocar el agua caliente en la taza</li>
<li>Esperar 3m que se propague el té</li>
<li>Endulzar a gusto</li>
<li>Disfrutar!</li>
</ol>

LISTAS NO ORDENADAS: PERIFERICOS DE UNA PC

<h2>Periféricos de PC</h2>
<ul>
<li>Teclado</li>
<li>Mouse</li>
<li>Parlantes</li>
<li>Monitor</li>
<li>Micrófono</li>
<li>Impresora</li>
</ul>

ESTILOS DE LISTA:
Estos funcionan solamente en listas ordenadas y no ordenadas y se aplican
modificando sus estilos con CSS por eso los veremos más adelante.

ENLACES
Los enlaces o hipervínculos son los que permiten que la web se conozca como tal, ya
que nos permiten vincular distintos tipos de contenido en nuestro sitio web. Estos
vínculos pueden ser internos, externos o de referencia.
Los enlaces se pueden relacionar a un recurso de manera absoluta o relativa
definido por el acceso que le queramos dar a ese recurso. Prácticamente cualquier
contenido puede convertirse en un enlace a un otro recurso o documento.

ETIQUETA DE ENLACE
La etiqueta utilizada para definir un enlace es <a></a> que deriva de anchor o
ancla en inglés.

<a href= “https://www.google.com” target= “_blank” > Google </a>

<a href =Dirección a la que debe redirigir el enlace

target = Define si el enlace debe ser abierto en una nueva pestaña o no.

TIPOS DE RELACION

Interna
Son enlaces a las páginas o documentos dentro de un mismo sitio web.
<a href="./pages/nosotros.html">Nosotros</a>

Externa.
Son enlaces que nos redirigen a otros sitios web.
<a href="https:///google.com.ar">Google</a>

De referencia
Estos enlaces se usan para vincular a un elemento con una sección dentro de la
misma página a través de un ID, por ejemplo cuando queremos scrollear el sitio
hasta una parte específica de contenido.
<a href="#contacto">Contacto</a>

TIPOS DE ENLACE

Absolutos
Estos enlaces hacen referencia a un elemento indicando un ruta que podrá ser
accesible desde cualquier lugar donde se la llame, es decir, una ruta con valor
absoluto.

https://www.google.com.ar
C:\Users\user\desktop\carrito.html

Relativos
Estos enlaces son relativos a la ubicación de ambos elementos a vincular, es decir,
debo tener en cuenta la posición del archivo que enlaza y la posición del archivo
enlazado.

TABLAS
Las tablas son elementos rígidos y poco adaptables utilizados para contener datos
tabulados en filas y columnas, como en una planilla excel.
Anteriormente se utilizaban para maquetar ya que por su rigidez, mantenían la
estructura del sitio. Hoy en día contamos con mejores opciones para esto que además
permiten que el sitio sea adaptable a distintos dispositivos.

ETIQUETAS DE TABLA

<table> tabla
Etiqueta raíz para definir el inicio de una tabla.
<tr> fila de tabla.
Se utiliza para establecer una fila.
<th> encabezado de tabla.
Usada dentro de <tr> para definir el encabezado de esa fila.
<td> celda de tabla.
Usada dentro de <tr> para definir una celda de esa fila.
<thead> cabecera de tabla.
Contiene las <tr> de la cabecera de la tabla.
<tbody> cuerpo de tabla.
Contiene las <tr> del cuerpo de la tabla.
<tfoot> pie de tabla.
Contiene las <tr> del pie de la tabla.

TABLAS EN ACCION

FISRT NAME: JHON

LAST NAME: DOE
FIRST NAME: JANE
LAST NAME: DOE

<table border="1px solid #2b2b2b" cellpadding="5px" cellspacing="0">

<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Cosme</td>
<td>Fulanito</td>
</tr>
<tr>
<td>Tony</td>
<td>Stark</td>
</tr>
</table>

ATRIBUTOS DE TABLAS
cellpadding
Es el espaciado interno de cada celda.

cellspacing.
Es la distancia entre celdas.

colspan
Para combinar 2 o más columnas.

rowspan.
Para combinar 2 o más filas.

border.
Define tamaño | estilo| color de borde de una tabla.

bgcolor
Color de fondo de las celdas de una tabla.

width.
Ancho total de la tabla.

HTML 5: HTML REVOLUCIONES

MULTIMEDIA
El contenido multimedia es el complemento perfecto para que nuestros sitios puedan
transmitir información, ideas, conceptos más allá de los textos.
“Una imágen, vale más que mil palabras” y en HTML podemos contar con distintos
tipos de multimedia para llevar nuestros sitios a otro nivel.

IMAGENES
La etiqueta utilizada para definir una imágen es <img />.

<img src= “./img/remeraCali.jpg” alt= “Foto de remera con estampa” />

<img src:Source: el valor indica la ruta donde se encuentra la imágen

alt:Descripción de la imagen para accesibilidad.

OTRAS ETIQUETAS PARA IMAGENES

<picture>
Nos da flexibilidad a la hora de trabajar con imágenes de distintos tamaños.
https://www.w3schools.com/tags/tag_picture.asp
<figure>
Funciona como etiqueta contenedora de una imagen o foto.
https://www.w3schools.com/tags/tag_figure.asp
<figcaption>
Coloca un caption debajo de la imagen como información adicional.

VIDEOS
Atributos de la etiqueta video:

controls
Atributo que habilita los controles de video.

autoplay
El video se comenzará a reproducir solo (deshabilitado por algunos navegadores).

<video controls autoplay>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
El navegador no soporta el video
</video>

AUDIO:
Atributos de la etiqueta audio:
controls (obligatoria)
Atributo que habilita los controles de audio.

autoplay
El audio se comenzará a reproducir solo (deshabilitado por algunos navegadores).

preload
Indica si el audio debe ser precargado o no al cargar la página.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
El navegador no soporta el archivo.
</audio>

IFRAME

El elemento HTML <iframe> (de inline frame) representa un contexto de navegación

anidado, el cual permite incrustar otra página HTML en la página actual.
Por ejemplo mapas, videos o porciones de otros sitios web.
<iframe width="1280" height="720" src="https://www.youtube.com/embed/XqFR2lqBYPs"
title="Aprende HTML y CSS - Curso Desde Cero" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

ETIQUETA FORM
Esta etiqueta contiene todas las etiquetas internas de un formulario.

<form action=“” method=“” enctype=“” >

<!-- Entrada de datos a través de etiquetas -->
</form>

action
Indica el archivo que manejará la información enviada.

method
Puede ser POST o GET e indica si los datos se enviarán por URL u ocultos en la
consulta.

enctype
Su valor contiene el tipo de información que se va a enviar:
text/plain: texto plano (no recomendado)

application/x-www-form-urlencoded: convierte caracteres especiales a ASCII para

evitar inyecciones SQL.

multipart/form-data: necesario cuando además de texto enviamos archivos adjuntos.

ETIQUETAS DE FORMULARIO
<input>
Es la más genérica de todas. Acepta un atributo type que indica el tipo de dato que
recibirá esa etiqueta, un name donde se asigna el nombre que llevará ese dato al
viajar y un id con el fin de identificar esa etiqueta de forma única.

<label>
Etiqueta que contiene un texto asociado a un input vinculado a través del atributo
for.

<form action="index.js" method="GET">

<label for="user">Usuario:</label>
<input type="text" name="user" id="user">

<label for="password">Contraseña:</label>
<input type="password" name="password" id="password">

<input type="submit" value="Ingresar a mi cuenta">

</form>

Etiquetas de formulario:
<input type=“text”>
Entrada de texto en una sola línea.

<input type=“password”>
Entrada de texto oculto.

<input type=“email”>
Entrada de correos electrónicos, al enviar solicita que su value contenga un @.

<input type=“number”>
Entrada de datos numéricos.

<input type=“date”>
Despliega un calendario para seleccionar una fecha.

<input type=“file”>
Permite cargar un archivo.

<input type=“color”>
Brinda color picker para seleccionar un color.

<textarea>
Representa un campo que nos permite introducir textos multilínea.

<button>
Es igual que los input de los tipos submit, button y reset solo que este posee
etiqueta de apertura y cierre para colocarle contenido adicional que no sea texto.

Etiqueta <input type=“radio”>

Elementos de selección simple o única, por ejemplo cuando creamos encuestas con
preguntas de una sola respuesta posible.

EJEMPLO: QUE LENGUAJE DE PROGRAMACION SE USA DEL LADO FRONTEND? (JAVASCRIPT)

<h2>¿Qué lenguaje de programación se usa del lado Frontend?</h2>

<form action="index.js" method="GET">
<input type="radio" name="preguntaUno" id="preguntaUno" value="python">
<label for="">Python</label>
<input type="radio" name="preguntaUno" id="preguntaUno" value="ruby">
<label for="">Ruby</label>
<input type="radio" name="preguntaUno" id="preguntaUno" value="javascript">
<label for="">Javascript</label>
<input type="radio" name="preguntaUno" id="preguntaUno" value="java">
<label for="">Java</label>
<input type="radio" name="preguntaUno" id="preguntaUno" value="elixir">
<label for="">Elixir</label>
</form>

Etiqueta <input type=“checkbox”>:

Elementos de selección múltiple, por ejemplo cuando una misma pregunta tiene varias
opciones posibles de respuesta.
EJEMPLO: QUE LENGUAJE DE PROGRAMACION SE USA DEL LADO BACKEND? (PHYTON,RUBY,C#,JAVA
ELIXIR)

<h2>¿Qué lenguaje de programación se usa para el Backend?</h2>

<form action="index.js" method="GET">
<input type="checkbox" name="preguntaUno" id="preguntaUno" value="python">
<label for="">Python</label>
<input type="checkbox" name="preguntaUno" id="preguntaUno" value="ruby">
<label for="">Ruby</label>
<input type="checkbox" name="preguntaUno" id="preguntaUno" value="csharp">
<label for="">C#</label>
<input type="checkbox" name="preguntaUno" id="preguntaUno" value="java">
<label for="">Java</label>
<input type="checkbox" name="preguntaUno" id="preguntaUno" value="elixir">
 <label for="">Elixir</label>
</form>

Etiqueta <select>:
Nos permite crear una lista desplegable de opciones, cada opción estará contenida
como hija dentro de un elemento <option> donde vamos a encapsular cada opción de
la lista.
EJEMPLO: FERRARI, DODGE, CHEVROLET, FORD

<form action="index.js" method="GET">

<select name="brands" id="brands">
<option value="ferrari">Ferrari</option>
<option value="dodge">Dodge</option>
<option value="chevrolet">Chevrolet</option>
<option value="volkswagen">Volkswagen</option>
<option value="alfaRomeo">Alfa Romeo</option>
</select>
</form>

Atributos de las etiquetas de formulario:

En muchos de los elementos podemos añadir (opcionalmente) otros atributos como:
required: Valida que el campo esté completo antes de enviar la información.
placeholder: Texto soporte que aparece dentro de un input e indica un ejemplo de
cómo llenar ese campo.
value: Para introducir un valor por defecto en el campo.
readonly: Si queremos que sea de sólo lectura.

Botones de formulario:
Estos elementos son los que nos van a permitir enviar, limpiar o accionar sobre
nuestros formularios.
Existen 3 tipos: submit, reset y button que pueden agregarse mediante una etiqueta
<input> o una etiqueta <button>, la diferencia radica en que en la primera el texto
se coloca en el atributo value mientras que en la segunda, el texto va dentro de la
etiqueta.
submit: Ejecuta la acción de enviar los datos al archivo indicado en action
reset: Limpia todos los campos del formulario.
button: Carece de efecto, sirve para darle un comportamiento propio desde
javascript.

<form action="index.js">
<input type="submit" value="Enviar">
<button type="submit">Enviar</button>
</form>

Contenidos teóricos

Formateando el texto en HTML

En esta sección de la unidad trabajaremos en colocar negritas, itálicas,

subrayados, subíndices y superíndices.
Además de todo lo relativo a la organización de los párrafos, uno de los aspectos
primordiales del formateo de un texto es el de la propia letra. Resulta muy común y
práctico presentar texto resaltado en negrita, itálica y otros. Paralelamente el
uso de índices, subíndices resulta vital para la publicación de textos científicos.
Todo esto y mucho más es posible por medio del HTML a partir de multitud de
etiquetas entre las cuales vamos a destacar algunas.
Pero antes de comenzar cabe hacer una reflexión sobre por qué son interesantes
estas etiquetas y se siguen usando, a pesar que están entrando prácticamente en el
terreno de CSS, ya que en la práctica están directamente formateando el aspecto de
las fuentes. Son importantes porque las etiquetas en si no están para definir un
estilo en concreto, sino una función de ciertas palabras dentro de un contenido.
Por ejemplo, las negritas quieren decir que algo tiene más fuerza o importancia
dentro de un texto y una itálica se puede usar para un texto que está citado o
algún énfasis particular. En cuanto a subíndices y superíndices todavía es más
claro, ya que éstos especifican cosas que tiene que ver con el contenido y no con
la presentación.
En conclusión, el uso de estas etiquetas refuerza el concepto de web semántica y el
sentido que le damos a nuestro HTML.

NEGRITA:
Podemos escribir texto en negrita incluyéndose dentro de las etiquetas <b></b> o
<strong></strong>.

Escribiendo un código de este tipo:

<b>Este texto esta en negrita</b>

Obtenemos este resultado:

Este texto esta en negrita(resaltar en negrita esta oracion)
Este texto no

Nota: ¿Qué diferencia hay entre B y STRONG? Aunque las dos etiquetas hacen el mismo
efecto, tienen una peculiaridad que las hace distintas. La etiqueta B indica
negrita, mientras que la etiqueta STRONG indica que se debe escribir con fuerza.

ITALICA:
También en este caso existen dos posibilidades, <i></i> o <em></em>.

He aquí un ejemplo de texto en itálica:

<i>Este texto esta en italica</i>

Que da el siguiente efecto:

Este texto esta en italica(poner esta oracion en cursiva)

Subrayado:
El HTML nos propone también para el subrayado el par de etiquetas:
<u></u>(underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha
precaución dado que los enlaces hipertexto van, a no ser que se indique lo
contrario, subrayados con lo que podemos confundir al lector y apartarlo del
verdadero interés de nuestro texto.
:
Subíndices y superíndices
Este tipo de formato resulta de extrema utilidad para textos científicos. Las
etiquetas empleadas son:

 para los superíndices

<sub></sup> para los subíndices

Anidar etiquetas:
Todas estas etiquetas y por supuesto el resto de las vistas y que veremos más
adelante pueden ser anidadas unas dentro de otras de manera a conseguir resultados
diferentes. Así, podemos sin ningún problema crear texto en negrita e itálica
embebiendo una etiqueta dentro de la otra:
<b>Esto solo esta en negrita<i>y esto en negrita e italica( aca va <b>o <i>, no se
ve en el powerpoim
s.