Scribd
Cargar
22 vistas48 páginas

Introducción Al Diseño Web y Programación

Cargado por

qadrianc21
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 PDF, TXT o lee en línea desde Scribd
22 vistas48 páginas

Introducción Al Diseño Web y Programación

Cargado por

qadrianc21
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 PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 48

Introducción:

El mundo de la programación es tan apasionante como extenso. En este módulo veremos


los primeros acercamientos a nuestro camino para programar. ¡Exitos!

Material complementario
Tutorial HTML: https://www.w3schools.com/html/
Tutorial CSS : https://www.w3schools.com/css/
Tutorial descarga VScode: https://code.visualstudio.com/
Tutorial uso desde cero VScode: https://www.youtube.com/watch?v=TbzrOz8HbFM

Introducción al desarrollo web con código


En primer lugar nos preguntamos… ¿Qué es programar? Programar es darle instrucciones
a una computadora para que realice tareas específicas. Es como escribir una receta, pero
en lugar de decirle a una persona qué hacer, le dices a la computadora qué hacer paso a
paso. Estas instrucciones se escriben en un lenguaje que la computadora entiende.

Para empezar a programar es sumamente necesario contar con un editor de código, si bien
existen muchos, te recomendamos Visual Studio Code, pero.. que es?

Visual Studio Code (VS Code) es un editor de código. Es una herramienta que te ayuda a
escribir y editar código de manera más fácil y eficiente. Puedes usarlo para trabajar con
diferentes lenguajes de programación, como JavaScript, Python, y muchos más.

¡Ahora a trabajar! Vamos a seguir los siguientes pasos:

1. Descargar e Instalar VS Code

● Descarga: Ve a la página oficial de Visual Studio Code y descarga el instalador


adecuado para tu sistema operativo (Windows, macOS, Linux).
● Instala: Ejecuta el archivo descargado y sigue las instrucciones del instalador para
completar la instalación.

Te dejamos un video instructivo de como descargarlo


https://www.youtube.com/watch?v=8dUEhG45f9M
Tené en cuenta :

● Buscando la lupita encontrás un link explicativo de todo lo teórico.


● En cada foto de código vas a poder copiar y pegar el código en tu editor

Vamos a empezar con un tema fundamental en el desarrollo web: "Frontend" . Se refiere a la


parte de una aplicación o sitio web con la que los usuarios interactúan directamente. Es el
"lado del cliente" de la tecnología web y se centra en todo lo que los usuarios experimentan
visualmente: diseño, estructura, contenido, interactividad y navegabilidad.

El desarrollo frontend abarca varios aspectos, incluyendo:

1. HTML (HyperText Markup Language): Define la estructura básica y el contenido de


la página web.
2. CSS (Cascading Style Sheets): Controla la presentación visual, incluyendo estilos,
colores, y diseño de la página.
3. JavaScript: Añade interactividad y dinamismo, permitiendo a los usuarios
interactuar con la página de formas más complejas, como a través de formularios,
botones y otros elementos interactivos.

Los desarrolladores frontend se aseguran de que un sitio web sea accesible, atractivo, y
fácil de usar en diferentes dispositivos y navegadores.
¿Qué es HTML?

Por sus siglas en inglés HTML (Hypertext Markup Language) y se lo define como un
lenguaje de marcado estándar que nos permite crear y presentar páginas web de una
manera versátil y eficiente.

HTML es un lenguaje y como tal tiene su propio vocabulario (palabras) y su propia


gramática (reglas).

Reglas gramaticales

● Las etiquetas siempre se tienen que cerrar. (E. pares y huérfanas)


● Los documentos anidados deben tener el correcto orden de apertura y cierre.
(último en abrir, primero en cerrar)
● Si bien HTML5 permite el uso de mayúsculas, es recomendable que los nombres
de las etiquetas estén en minúsculas.
● Los valores de los atributos siempre tienen que estar entre comillas (es indistinto
si son simples o dobles).
● Los nombres de los archivos html deben contener caracteres alfanuméricos, - y _
(no ñ, ni acentos).
● La extensión de las páginas web debe ser .html

Estructura básica
La estructura básica de una página web se divide en una cabecera <head> ... </head> y
un cuerpo <body> ... </body>. El esqueleto básico de una página web es:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Mi Página Web</title>
</head>
<body>
<h1>Bienvenido a Mi Página Web</h1>
<p>Este es un párrafo de ejemplo en la página web.</p>
</body>
</html>
Doctype
La primera línea se denomina el doctype. Es fundamental porque indica que esto es
efectivamente una página web HTML.

No es realmente una etiqueta como las otras (empieza con un signo de exclamación) y
se puede considerar como una excepción que confirma la regla.

El elemento </html>
Este es el elemento principal del código. Incluye el contenido completo de la página.
¡Como ven la etiqueta </html> de cierre está situada a la derecha del final del código!

La cabecera <head> y el cuerpo <body>


Una página web se compone de dos partes:

● La cabecera <head>: esta sección proporciona información general sobre la


página como su título, la codificación (para la gestión de caracteres especiales),
etc. Esta sección suele ser bastante corta. La información que contiene la
cabecera no se muestra en la página y es simplemente información general
concebida para el ordenador. ¡Sin embargo, es muy importante!
● El cuerpo<body>: es aquí donde se encuentra la parte principal de la página. Todo
lo que tecleamos aquí se mostrará en la pantalla. La mayor parte de nuestro
código se escribirá en el cuerpo.

La codificación (charset)

<meta charset="UTF-8">

Esta etiqueta indica la codificación que se usa en el archivo .html.

Es lo que determina la forma en la que se van a mostrar los caracteres especiales


(acentos, caracteres japoneses y chinos, caracteres arábigos, etc.)

El título principal de la página

<title>Mi Página Web</title>

Este es el título de la página, ¡lo cual es probablemente el elemento más importante!


Todas las páginas tienen que tener un título que describa lo que contienen.

Es aconsejable que el título se mantenga bastante corto (normalmente menos de 100


caracteres).

El título no se muestra en la página sino en su parte superior (habitualmente en la


pestaña del navegador). Guardar la página web y abrirla en el navegador. Verán que el
título se muestra en la pestaña como se ve en la figura siguiente.

El título de la página figura en la parte superior del navegador

Consejos:
● Prestar atención al cerrar etiquetas porque éstas tienen un orden. Ej. No se puede
cerrar la etiqueta de </html> antes que la de </body>
● Poner títulos a todos los documentos web procurando que sean lo más
descriptivos posibles dado que si algún usuario decide incluir dicha página en su
lista de marcadores, será el título el que quede almacenado en dicha lista (junto a
la URL)
● En cualquier parte del html, se pueden incluir comentarios de la siguiente
manera: <!-- Comentario -->. Los comentarios no se procesan y no producen
salida visible de la página.
● Los saltos de línea y espacios en blanco son irrelevantes para el navegador.

Elementos y Etiquetas HTML


Las etiquetas HTML, las cuales están rodeadas por los signos menor que < y mayor que
>, estas etiquetas también son llamadas o conocidas por el nombre tag (inglés) y son
palabras clave para el navegador web. Por medio de las etiquetas podremos estructurar
la información a presentar en pantalla.

Generalmente las etiquetas vienen de a pares, como la de párrafo <p> y </p>

La primera etiqueta del par se llama etiqueta de apertura <etiqueta>. El tag o etiqueta de
cierre se escribe igual que el de apertura pero con la barra de división "</etiqueta>".

Elementos HTML
En la siguiente figura se observan los componentes de un elemento HTML. Los
elementos HTML están formados por etiquetas de apertura <etiqueta>, etiqueta de
cierre </etiqueta> y el texto contenido entre ellas.
Figura Elemento HTML
En el ejemplo que sigue a continuación se observan 4 elementos, el elemento <body>, el
elemento <h1> y dos elementos <p>. Vale destacar que los elementos <h1>, <p> y <p>,
están contenidos dentro del elemento <body>, de esta manera podemos observar cierta
estructura y podríamos hacer una analogía con una estructura de cajas de cartón, donde
hay ciertas cajas que van dentro de otras y ciertas cajas que van una al lado de otra. Con
la totalidad de las cajas, analógicamente armaremos la totalidad de información que se
va a presentar en pantalla.

En este punto es importante aclarar que, los elementos y las etiquetas no son las
mismas cosas. Las etiquetas comienzan o terminan un elemento en el código fuente,
mientras que los elementos son parte del DOM (Document Object Model), el modelo de
documento para mostrar la página en el explorador web
(https://developer.mozilla.org/es/docs/Glossary/Element).

Elementos de bloque y de línea


Todos los elementos HTML tienen un valor de display por defecto dependiendo del tipo
de elemento que sea.

La mayoría de los elementos tienen valor de display de bloque (block) o de línea (inline).

Desafío: Investiga ¿Cuál es la diferencia entre los elementos inline y block? Enumera
ejemplos de cada uno.

Anidar elementos
Se puede colocar elementos dentro de otros elementos, esto se denomina anidamiento.
Si quisiéramos resaltar una palabra dentro de un párrafo, la podríamos encerrar dentro
de un elemento <strong>, que significa que dicha palabra se debe enfatizar.

https://www.youtube.com/watch?v=J-6K1aWFtX0&t=125s

Atributos
Como vemos en el siguiente ejemplo, el atributo class contiene información adicional
acerca del elemento <p> pero esta información no aparecerá dentro del contenido del
elemento. En este caso “class” es el nombre del atributo e “importante” el valor del
atributo. El atributo “class” permitirá darle al elemento un nombre identificativo, que se
puede utilizar luego para aportar a ese elemento información de estilo. En otras
unidades aprenderemos sobre CSS.

Un atributo debe tener las siguientes características:


1. Un espacio entre este y el nombre del elemento (o del atributo previo, si el
elemento ya posee uno o más atributos).
2. Un atributo debe estar definido por el par nombre/valor, como por ejemplo
nombre = "valor".
3. Comillas de apertura y de cierre, encerrando el valor del atributo.
4. Un atributo siempre se especifica en la etiqueta de apertura del elemento HTML.

Organizar el texto
Para organizar el texto HTML nos provee:

Párrafos
El texto en una página web se escribe habitualmente en párrafos. En el lenguaje HTML la
etiqueta <p> se usa para delimitar los párrafos.

Títulos

En HTML podemos seleccionar seis niveles de títulos diferentes. Niveles que le pueden
decir al navegador: «este es un título muy importante», «este es un título un poco menos
importante», «este es un título mucho menos importante», etc. Por consiguiente, tienes
seis etiquetas de título diferentes:

● <h1> </h1>: significa «título muy importante". En general se usa para mostrar el
título de la página al comienzo de la página.
● <h2> </h2>: significa "título importante".
● <h3> </h3>: asimismo, esto significa un título un poco menos importante
(subtítulo).
● <h4> </h4>: el título es incluso menos importante.
● <h5> </h5>: el título no es importante.
● <h6> </h6>: el título no es nada importante.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Ejemplos de Encabezados</title>
</head>
<body>
<h1>Título muy importante</h1>
<p>El <code>;h1;</code> se usa para mostrar el título principal de
la página o el tema más importante.</p>

<h2>Título importante</h2>
<p>El <code>;h2;</code> se usa para subtítulos o secciones
principales dentro de la página.</p>

<h3>Subtítulo</h3>
<p>El <code>;h3;</code> se usa para subtítulos de nivel inferior o
secciones dentro de las secciones principales.</p>

<h4>Título menos importante</h4>


<p>El <code>;h4;</code> se usa para subdividir secciones aún más
dentro de los <code>;h3;</code>.</p>

<h5>Título no importante</h5>
<p>El <code>;h5;</code> se usa para subdividir aún más secciones
dentro de los <code>;h4;</code>.</p>

<h6>Título no nada importante</h6>


<p>El <code>;h6;</code> se usa para el nivel más bajo de títulos,
con menos importancia.</p>
</body>
</html>

Explicación de cada parte del código:

● <h1> a <h6>: Estas etiquetas representan diferentes niveles de encabezado en


HTML, desde el más importante (<h1>) hasta el menos importante (<h6>).
● <p>: Elemento de párrafo que describe la función de cada nivel de encabezado.
● <code>: Se usa para mostrar el código HTML de las etiquetas en un formato de
texto monoespaciado.

Este código es útil para mostrar en un curso cómo se utilizan diferentes niveles de
encabezados en HTML y cuál es su propósito.
Desafío: ¿Te animas a crear tu primera página web?. Puedes comenzar con el ejemplo
mostrado arriba o bien, crear una nueva página web a partir de una temática que te guste.

Listas
Las listas normalmente nos permiten organizar el texto y ordenar la información.
Vamos a descubrir dos tipos de listas aquí:

● listas no ordenadas o listas con viñetas;


● listas ordenadas o listas numeradas.

Listas no ordenadas
Una lista no ordenada tiene esta apariencia:

● Fresas
● Frambuesas
● Cerezas

Es un sistema que nos permite crear una lista sin ningún concepto de orden (no hay
«primero» o «último»). Crear una lista no ordenada es muy sencillo. Simplemente usar la
etiqueta <ul> cerrada posteriormente con </ul>.

Entonces, empezar introduciendo esto:

<ul>
<li>Manzana</li>
<li>Banana</li>
<li>Cereza</li>
</ul>
Listas ordenadas

Una lista ordenada funciona de la misma forma únicamente cambia la etiqueta: tienes
que sustituir <ul></ul> por <ol></ol>.

No cambies nada dentro de la lista: siempre tienes que usar las etiquetas <li></li> para
delimitar los elementos de la lista.
Cómo es especialmente intuitivo este ejemplo (los resultados se muestran en la figura
de abajo):

<ol>
<li>Preparar los ingredientes</li>
<li>Mezclar la masa</li>
<li>Hornear</li>
<li>Dejar enfriar</li>
</ol>

Código completo :

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Lista Ordenada</title>
</head>
<body>
<h1>Pasos para Hacer una Tarta</h1>
<ol>
<li>Preparar los ingredientes</li>
<li>Mezclar la masa</li>
<li>Hornear</li>
<li>Dejar enfriar</li>
</ol>
</body>
</html>

https://www.youtube.com/watch?v=YtlC2fhpqpU
Desafío: Accede al siguiente
enlace:https://stackblitz.com/edit/web-platform-cschrv?file=index.html e intenta
modificar la lista "Mí día" a fin de:

● ordenar en base a letras en orden alfabético


● ordenar en base a letras pero en orden inverso al alfabético
● ordenar en base a letras pero comenzando por la letra c
● convertir en lista no ordenada.
● convertir en lista no ordenada con una viñeta diferente a la predefinida "disc"

Resaltar
Algunas palabras en los párrafos son algunas veces más importantes que otras y por lo
que, es posible que deseemos resaltarlas. HTML proporciona varias formas para
resaltar el texto de la página.
Enfatizar
Para enfatizar el texto, debemos usar el elemento <em> </em>.

Es muy simple de usar, ¡todo lo que tienes que hacer es encerrar las palabras a enfatizar
dentro de estas etiquetas!

Enfatizar considerablemente
Para enfatizar considerablemente un texto, puedes usar la etiqueta <strong> que
significa «énfasis fuerte» o si prefieres «importante». Se usa exactamente de la misma
forma que <em>:

Marcado de Texto
La etiqueta <mark> se usa para resaltar visualmente una parte del texto. El extracto no
se tiene que considerar necesariamente importante, pero queréis que destaque del resto
del texto. Esto puede ser útil para resaltar texto que sea relevante, por ejemplo después
de buscar en vuestra página web.
Veamos en ejemplo lo visto:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Ejemplos de Resaltado y Enfasis</title>
</head>
<body>
<h1>Ejemplos de Resaltado y Enfasis en HTML</h1>

<p>
En HTML, puedes <strong>resaltar</strong> ciertas partes del
texto para darles más <strong>importancia</strong>. Por ejemplo, si
tienes una palabra o frase que es crucial para el mensaje que estás
transmitiendo, puedes usar la etiqueta <strong> para hacer que el
texto se vea <strong>más destacado</strong> y así captar la atención
del lector de inmediato.
</p>

<p>
Por otro lado, si deseas <em>enfatizar</em> un texto sin
darle tanta importancia como lo hace la etiqueta <strong>, puedes
usar la etiqueta <em>. Esto suele representar que el texto tiene un
<em>énfasis</em> menor pero aún así es relevante en el contexto. El
texto dentro de esta etiqueta se renderiza en cursiva.
</p>

<p>
La etiqueta <mark> se utiliza para <mark>resaltar
visualmente</mark> partes del texto que deben destacarse
temporalmente. Esto es útil, por ejemplo, para mostrar
<mark>resultados de búsqueda</mark> o información que necesita
atención inmediata, pero no necesariamente es importante en el
contexto general del texto.
</p>
<p>
Aquí está un <strong>ejemplo</strong> para que puedas ver
cómo funciona cada etiqueta en acción:
</p>

<ul>
<li><strong>Importante:</strong> Esta palabra está resaltada
con <strong>negrita</strong> para mostrar su
<strong>importancia</strong>.</li>
<li><em>Enfatizado:</em> Este texto está en <em>cursiva</em>
para indicar que tiene un <em>énfasis</em> en el contexto.</li>
<li><mark>Marcado:</mark> Este texto está
<mark>resaltado</mark> con un fondo amarillo para que se destaque
visualmente.</li>
</ul>
</body>
</html>

Desafío: ¡Poné en práctica lo aprendido!

Enlaces
Como sabemos un sitio web está formado por varias páginas. ¿Cómo se va de una
página a otra? ¡Usando enlaces por supuesto!

Los enlaces se reconocen fácilmente en una página dado que están escritos de una
forma diferente (de forma predeterminada en azul y subrayados) y un cursor que se
parece a una mano aparece cuando se pone el mouse sobre ellos.

El elemento HTML <a> permite crear un enlace a otras páginas de la web, archivos o
ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL que
especifiquemos en sus atributos.

Ejemplo:

<a href="https://www.google.com>Google</a>
https://www.youtube.com/watch?v=d7t6mbfCS9E

Imágenes
Insertar una imagen
¿Cuál es la famosa etiqueta que utilizamos para insertar una imagen? ¡Es…<img />!

Es una etiqueta huérfana (como<br />). Esto quiere decir que no tienes que introducir
dos etiquetas como en el caso de la mayoría de etiquetas que hemos visto hasta ahora.
De hecho, no tenemos que definir una porción de texto; lo único que queremos es colocar
una imagen en un punto específico.

La etiqueta debe ir acompañada de dos atributos obligatorios:

● src: indica la ubicación en la que quieres insertar la imagen. Puedes incluir una
ruta absoluta (e.g.http://www.website.com/flor.png) o una ruta relativa (que es lo
que suele hacerse). Así que si la imagen está en la subcarpeta imagenes, tienes
que introducir: src="imagenes/flor.png"
● alt: qué significa "texto alternativo". Un texto alternativo a la imagen, en otras
palabras, un texto corto que describe lo que contiene la imagen, debe indicarse
siempre. Este texto se mostrará en lugar de la imagen si esta última no se puede
descargar (esto ocurre), o en los navegadores de personas con discapacidad
visual que lamentablemente no pueden "ver" la imagen. También ayuda a los
robots de motores de búsqueda a buscar imágenes. Para la flor, por ejemplo, se
debería escribir lo siguiente: alt="Una flor"..

Explicación de los Enlaces:


Enlace a una página externa:

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

1.
○ href: Especifica la URL a la que se enlaza.
○ target="_blank": Hace que el enlace se abra en una nueva pestaña o
ventana del navegador.

Enlace a una sección específica dentro de la misma página:

<a href="#aqui">Regresar al principio</a>


<p id="aqui">Aquí está el lugar al que puedes volver usando el enlace
anterior.</p>

○ href="#aqui": Enlaza a un elemento con el id="aqui".


○ id="aqui": El identificador del elemento de destino.

Enlace para enviar un correo electrónico:

<a href="mailto:[email protected]">[email protected]</a>

2.
○ href="mailto:[email protected]": Abre el cliente de correo
predeterminado para enviar un correo a la dirección especificada.

Enlace para descargar un archivo:

<a href="documento.pdf" download>Descargar Documento</a>

3.
○ href="documento.pdf": Enlaza al archivo que se desea descargar.
○ Download: Sugiere que el archivo debe descargarse en lugar de abrirse
en el navegador.

https://www.youtube.com/watch?v=iHGfGJt0vLo
Formularios
Crear un formulario
Para insertar un formulario en tu página HTML, necesitas empezar escribiendo una
etiqueta <form> </form>. Esta es la etiqueta principal de los formularios, y especifica su
comienzo y su fin.

<p>Texto antes del formulario</p>

<form>
<p>Texto dentro del formulario</p>
</form>

<p>Texto después del formulario</p>

Agregar Texto dentro del Formulario:

● Puedes usar etiquetas como <p> (párrafo) para incluir texto explicativo dentro
del formulario.

<form>
<p>Por favor, completa el siguiente formulario:</p>
</form>

Métodos de Envío de Datos (method):

● GET: Envia los datos en la URL. Tiene una limitación de 255 caracteres y se usa
generalmente para obtener datos.
● POST: Envia los datos de forma oculta y sin límite de tamaño. Es el método más
usado para enviar formularios.

<form method="post">...</form>

Destino del Envío (action):


● Define la página o programa que procesará los datos enviados. Puede ser una
página PHP, Python, etc.

<form method="post" action="procesar.php">...</form>

Campos de Entrada Básicos:

● Campo de Texto de Una Línea: Se usa para datos cortos, como nombres

<input type="text" name="nombre">

● Campo de Contraseña: Oculta los caracteres escritos

<input type="password" name="password">

Etiquetas <label>:

● Se usan para describir los campos del formulario. Ayudan a los usuarios a
entender qué deben ingresar.

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

Botones:

● Enviar (<input type="submit">): Envía el formulario

<input type="submit" value="Enviar">

Restablecer (<input type="reset">): Resetea todos los campos del formulario

<input type="reset" value="Restablecer">

Ejemplo de Formulario Básico


<form method="post" action="procesar.php">
<p>Por favor, ingresa tu información:</p>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"
placeholder="Tu nombre" required><br><br>

<label for="email">Correo Electrónico:</label>


<input type="email" id="email" name="email"
placeholder="Tu correo" required><br><br>

<label for="comentario">Comentario:</label>
<textarea id="comentario" name="comentario" rows="4"
cols="50"></textarea><br><br>

<input type="submit" value="Enviar">


<input type="reset" value="Restablecer">
</form>

https://www.youtube.com/watch?v=sv4jFEOloh0&t=2s

HTML5
HTML5 es la versión más reciente de HTML aprobada por la W3C, que introduce elementos
semánticos para mejorar la organización y comprensión del contenido web. Estos
elementos permiten a los navegadores y desarrolladores entender mejor la estructura de
una página.
Elementos Semánticos:

● <section>: Define una sección temática dentro de un documento, como una parte
específica del contenido.
● <article>: Representa contenido independiente y autónomo, como publicaciones de
blog o artículos de noticias.
● <header>: Se utiliza para contener elementos de introducción y navegación, como
títulos y menús.
● <footer>: Define el pie de página de un documento o sección, incluyendo información
de contacto, autoría, etc.
● <nav>: Indica un bloque de enlaces de navegación, como menús o índices de
contenido.
● <aside>: Contiene contenido relacionado indirectamente con el contenido principal,
como barras laterales o anuncios.

Beneficios de los Elementos Semánticos:


1. Claridad: Facilitan la comprensión del contenido tanto para los desarrolladores como
para los navegadores.
2. SEO Mejorado: Ayudan a los motores de búsqueda a identificar y categorizar el
contenido correctamente.
3. Accesibilidad: Herramientas como lectores de pantalla pueden utilizar estos
elementos para mejorar la experiencia del usuario.

Web Semántica:

Es un concepto promovido por la W3C que permite compartir y reutilizar datos a través de
diferentes aplicaciones y comunidades. Los elementos semánticos son cruciales para esta
visión, ya que aportan un significado claro y estandarizado a las diferentes partes de una
página web.

Desafío: Investiga ¿Qué es la web semántica? ¿por qué será importante utilizar
elementos semánticos?

Te proponemos hacer una pequeña evaluación interactiva para reforzar


conceptos

https://quizizz.com/join/quiz/66a7d9013474f6df71fbcfa4/start?from=admin&preview=t
rue

¿Qué es CSS?
Hojas de estilo en cascada o CSS por sus siglas en inglés, Cascading Style Sheets, es un
lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos de un
documento web.

Características:

● Ahorra trabajo. Se puede controlar el diseño de varias páginas HTML a la vez.


● Se pueden almacenar en archivos *.css

¿Para qué utilizar CSS?

Los estilos en documentos web, como el diseño y la disposición de elementos, permiten


adaptarse a diferentes tamaños de pantalla y dispositivos.

Ventajas:

● Control centralizado de la presentación de un sitio web, facilitando su actualización y


mantenimiento.
● Los usuarios pueden aplicar sus propias hojas de estilo locales, mejorando la
accesibilidad, como aumentar el tamaño del texto para personas con deficiencias
visuales.
● Es posible utilizar diferentes hojas de estilo según el dispositivo o preferencia del
usuario, como para impresión o lectura por sintetizador de voz.
● Los documentos HTML son más claros y reducen su tamaño, siempre que no se
utilice estilo en línea.

Reglas CSS

Figura: Sintaxis CSS

● Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
● Declaración: especifica los estilos que se aplican a los elementos.
● Propiedad: permite modificar el aspecto de una característica del elemento.
● Valor: indica el nuevo valor de la característica modificada en el elemento.
Nos indican a qué elemento HTML hay que aplicar el estilo.

Una misma regla puede aplicarse a varios selectores y, a un mismo selector se le


pueden aplicar varias reglas.
Para mayor información referirse a
https://www.w3.org/wiki/CSS_/_Selectores_CSS#Lista_de_selectores_css ;

https://www.youtube.com/watch?v=o4srpChv-eg

Selectores

Selector universal: Se utiliza para seleccionar todos los elementos de la página.


*
{
}

Selector de tipo o etiqueta: Selecciona todos los elementos de la página cuya etiqueta
HTML coincide con el valor del selector.

p
{
}

Selectores
Selecciona los elementos que se encuentran dentro de otros elementos. Se encuentra
entre las etiquetas de apertura y de cierre del otro elemento.

p span {
color: red;
}
h1 span {
color: blue;
}

La sintaxis formal del selector descendente se muestra a continuación:

elemento1 elemento2 elemento3 ... elementoN

Ejemplo:

Si el código HTML de la página es el siguiente:

<p>
Ejemplo...<span>texto1</span>...
<a href="https://www.../">Ejemplo...<span>texto2</span></a>
</p>

El selector p span selecciona tanto texto1 como texto2 porque es un selector


descendente. Esto significa que el elemento seleccionado no tiene que ser un
descendiente directo, solo necesita estar dentro del otro elemento, sin importar la
profundidad.

Los selectores descendentes permiten aumentar la precisión al seleccionar elementos


del mismo tipo, aplicando diferentes estilos según su contexto dentro de otros
elementos.

Selector de clase

Para aplicar estilos a un solo elemento en una página HTML, se utiliza el atributo class
y se define una regla CSS con un punto (.) seguido del nombre de la clase. Por ejemplo,
.destacado se aplica a cualquier elemento con class="destacado".

Los selectores de clase son esenciales para diseñar páginas web complejas,
permitiendo reutilizar estilos en varios elementos. Además, se pueden combinar con
otros selectores para mayor precisión, como p.destacado, que selecciona solo los
párrafos con class="destacado". Es posible aplicar múltiples clases a un elemento,
combinando sus estilos. Por ejemplo, class="especial destacado error" aplica
todas esas clases al elemento. También se pueden usar selectores de clase múltiple,
como .error.destacado, para aplicar estilos solo a elementos que tienen ambas
clases.

Ejemplos

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Ejemplos de Selectores de Clase</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="destacado">Este es el primer párrafo con la clase
destacado.</p>
<p>Este es un párrafo sin clase.</p>
<p class="especial destacado error">Este es un párrafo con
múltiples clases: especial, destacado y error.</p>
<span class="error">Texto con clase error.</span>
<div class="aviso">Este es un div con la clase aviso.</div>
<a href="#" class="destacado">Este es un enlace con la clase
destacado.</a>
</body>
</html>

CSS

/* Definiendo estilos para clases individuales */


.destacado {
background-color: yellow;
font-weight: bold;
}

.especial {
font-size: 20px;
}

.error {
color: red;
}

.aviso {
border: 1px solid black;
padding: 10px;
}

/* Combinando selectores de tipo y de clase */


p.destacado {
color: green;
}

/* Selector de clase múltiple */


.error.destacado {
color: blue;
}

1. HTML:
○ <p class="destacado">: Un párrafo con la clase destacado.
○ <p class="especial destacado error">: Un párrafo con
múltiples clases (especial, destacado, error).
○ <span class="error">: Un span con la clase error.
○ <div class="aviso">: Un div con la clase aviso.
○ <a href="#" class="destacado">: Un enlace (a) con la clase
destacado.
2. CSS:
○ .destacado: Aplica estilos a cualquier elemento con la clase
destacado.
○ .especial: Aplica estilos a cualquier elemento con la clase especial.
○ .error: Aplica estilos a cualquier elemento con la clase error.
○ .aviso: Aplica estilos a cualquier elemento con la clase aviso.
○ p.destacado: Aplica estilos a los párrafos (p) que tienen la clase
destacado.
○ .error.destacado: Aplica estilos a cualquier elemento que tenga
ambas clases error y destacado.

Estos ejemplos ilustran cómo se pueden usar los selectores de clase para aplicar estilos
específicos a elementos individuales o combinaciones de elementos en una página
HTML.

Selectores de ID

Los selectores de ID se utilizan para aplicar estilos CSS a un único elemento en una
página, ya que el atributo id debe ser único. La sintaxis usa el símbolo de la almohadilla
(#) seguido del nombre del ID. Por ejemplo, #destacado selecciona el elemento con
id="destacado".

A diferencia de los selectores de clase, el valor del atributo id no puede repetirse en una
misma página. Por lo tanto, se recomienda usar selectores de ID para aplicar estilos a
elementos específicos y selectores de clase para aplicar estilos a varios elementos.

También se pueden combinar con otros selectores para restringir el alcance, como
p#aviso, que aplica estilos solo al párrafo con id="aviso". Esto es útil en archivos
CSS aplicados a múltiples páginas HTML.

Ejemplos:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Ejemplo de Selector de ID</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p id="destacado">Este es un párrafo con el ID "destacado".</p>
<p>Este es un párrafo sin ID.</p>
<p id="aviso">Este es otro párrafo con el ID "aviso".</p>
<div id="aviso">Este es un div con el ID "aviso".</div>
</body>
</html>
CSS

/* Estilo para un elemento con ID "destacado" */


#destacado {
background-color: yellow;
font-weight: bold;
font-size: 20px;
}

/* Estilo para un elemento con ID "aviso" */


#aviso {
color: red;
}

/* Estilo específico para un párrafo con ID "aviso" */


p#aviso {
text-decoration: underline;
}

Explicación:

1. HTML:
○ <p id="destacado">: Un párrafo con el ID destacado.
○ <p id="aviso">: Un párrafo con el ID aviso.
○ <div id="aviso">: Un div con el ID aviso.
2. CSS:
○ #destacado: Aplica estilos al elemento con el ID destacado.
○ #aviso: Aplica estilos a cualquier elemento con el ID aviso.
○ p#aviso: Aplica estilos específicamente a los párrafos con el ID aviso.

Este ejemplo muestra cómo los selectores de ID pueden ser utilizados para aplicar
estilos a elementos específicos en una página HTML y cómo combinarlos con otros
selectores para mayor precisión.

Selectores avanzados

Los selectores de hijos directos (>) seleccionan elementos que son hijos directos de
otro elemento, a diferencia de los selectores descendentes que seleccionan todos los
descendientes. Por ejemplo, p > span selecciona solo los span que son hijos directos
de un p, no los que son descendientes a cualquier nivel.

Ejemplo:

● p > span: Selecciona span que son hijos directos de p.


● p span: Selecciona todos los span que son descendientes de p.

En el caso de p a (selector descendente), se aplican estilos a todos los a dentro de p,


mientras que p > a (selector de hijos directos) solo aplica estilos a los a que son hijos
directos de p.

¡A JUGAR! https://flukeout.github.io/

Herencia
Cuando se establece el valor de alguna propiedad en un elemento, todos sus
descendientes heredan inicialmente ese mismo valor.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Párrafo de texto.</p>
</body>
</html>
Agrupar reglas
CSS permite agrupar todas las reglas individuales en una sola regla con un selector
múltiple.

En CSS es habitual agrupar las propiedades comunes de varios elementos en una única
regla CSS y posteriormente definir las propiedades específicas

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

Formas de insertar CSS

En CSS existen tres formas para insertar los estilos en el documento HTML:

● En línea.
● Interna.
● Externa.

Formas de insertar CSS en un documento HTML:

1. CSS en línea:
○ Se aplican estilos directamente a los elementos HTML usando el atributo
style.
<p style="color: red; font-size: 20px;">Este es un párrafo con
estilos en línea.</p>

CSS interno:

● Se utilizan estilos dentro de la misma página HTML, dentro de una etiqueta


<style> en la sección <head>.

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Este es un párrafo con estilos internos.</p>
</body>
</html>

CSS externo:

● Se utilizan estilos definidos en un archivo CSS separado y se enlazan al


documento HTML mediante la etiqueta <link>.

<!-- HTML -->


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Este es un párrafo con estilos externos.</p>
</body>
</html>
/* styles.css */
p {
color: green;
font-size: 16px;
}

Estas son las tres formas de insertar CSS en un documento HTML: en línea, interna y
externa.

Modelo de Cajas

El modelo de cajas es fundamental en CSS y determina el diseño de las páginas web.


Cada elemento HTML se representa como una caja rectangular.

Componentes del Modelo de Cajas:

1. Content (contenido): El contenido del elemento HTML, como texto o imágenes.


2. Padding (relleno): Espacio opcional entre el contenido y el borde.
3. Border (borde): Línea que rodea el contenido y el relleno.
4. Background image (imagen de fondo): Imagen que se muestra detrás del
contenido y el relleno.
5. Background color (color de fondo): Color que se muestra detrás del contenido y
el relleno.
6. Margin (margen): Espacio opcional entre la caja y otras cajas adyacentes.

Este modelo asegura que todos los elementos de una página web se representen como
cajas rectangulares, facilitando así el diseño y el control del layout.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Ejemplo del Modelo de Cajas</title>
<style>
.box {
width: 300px;
padding: 20px;
border: 5px solid #000;
background-color: #f0f0f0;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>Este es un ejemplo de cómo funciona el modelo de cajas en
CSS.</p>
</div>
</body>
</html>

Explicación del código:

1. HTML:
○ Creamos una estructura HTML básica con un <div> que contiene un
párrafo <p>.
2. CSS:
○ .box: Selecciona el <div> con la clase box.
■ width: 300px;: Establece el ancho del contenido a 300 píxeles.
■ padding: 20px;: Agrega un relleno de 20 píxeles alrededor del
contenido.
■ border: 5px solid #000;: Añade un borde de 5 píxeles de
ancho, sólido y de color negro alrededor del relleno.
■ background-color: #f0f0f0;: Establece un color de fondo
gris claro.
■ margin: 20px;: Añade un margen de 20 píxeles alrededor de la
caja, separándola de otros elementos.

En este ejemplo, puedes ver cómo se aplican los diferentes componentes del modelo de
cajas: contenido, relleno, borde y margen, utilizando CSS para definir el estilo y el layout
del elemento <div>.
Páginas Web sin código y gratuitas

Ahora veremos cómo hacer una página web ¡sin código! Y de la manera más simple y
rápida con WordPress.

Pero primero… ¿Qué entendemos por sitio web?

Un sitio web es un conjunto de páginas web relacionadas que están interconectadas


y se encuentran bajo un mismo dominio en Internet. Cada página dentro del sitio web
se accede a través de una URL específica, pero todas comparten el mismo nombre de
dominio y estructura general. Los sitios web pueden variar en tamaño y complejidad,
desde unas pocas páginas hasta miles.
Componentes clave de un sitio web incluyen:
1. Páginas Web: Documentos individuales accesibles mediante URLs, cada uno
con su propio contenido y propósito.
2. Dominio: La dirección única que identifica al sitio web en la red (por ejemplo,
www.ejemplo.com).
3. Servidor Web: El hardware o software que almacena las páginas web y las
entrega a los navegadores de los usuarios cuando se solicitan.
4. Navegación: Un sistema de enlaces y menús que permite a los usuarios
moverse entre las diferentes páginas del sitio.

En este curso usaremos WordPress.com para la realización de nuestro sitio web.

¿Qué es WordPress.com?

Es una plataforma de alojamiento, WordPress.com es una plataforma de alojamiento web


que permite a los usuarios crear y gestionar sitios web sin necesidad de preocuparse por el
alojamiento, la configuración del servidor, o las actualizaciones de software. Automattic, la
empresa detrás de WordPress.com, se encarga de todos estos aspectos técnicos

Tiene diferentes planes de servicio, WordPress.com ofrece varios planes de servicio,


que van desde gratuitos hasta planes premium y empresariales. Los planes pagos incluyen
características adicionales como dominios personalizados, mayor almacenamiento,
herramientas avanzadas de diseño y opciones de monetización.

Tiene mucha facilidad facilidad de uso, WordPress.com está diseñado para ser muy fácil de
usar, permitiendo a los usuarios configurar un sitio web en pocos minutos con una interfaz
intuitiva y opciones de personalización simplificadas.
¡Manos a la obra!

¿Qué necesitamos para empezar? Sólo entrar al link de WordPress.com

https://wordpress.com/es/

Como segundo paso vamos a iniciar sesión :

Ahora vamos a loguearnos con la cuenta de Google de nuestra preferencia :


Listo! Ya ingresamos a WordPress.com:

Ahora vamos a empezar a configurar nuestro sitio web, sigue los pasos de
configuración del sitio web hasta que la ruedita este en 4/6

Para configurar nuestro dominio de una manera gratuita vamos a seguir los pasos a
continuación :
Nos fijamos que el dominio que estemos eligiendo este disponible y que lo podemos
usar de una manera gratuita, en el siguiente ejemplo tenemos dos posibilidades,
podemos elegir tener el dominio protagonistasdigitales.com de manera gratuita por
un año o podemos elegir tener el dominio protagonistasdigitales.wordpress.com de
manera gratuita :
Elegimos trabajar con el plan gratuito

Contestamos las preguntas que nos presentan a continuación:


Para elegir la plantilla de nuestra página de manera gratuita vamos a tener que elegir
una que no tenga el cartel de - Mejorar el plan - como se muestra en el siguiente
ejemplo, las plantillas subrayadas en amarillo serian las disponibles de manera
gratuita:
Una vez elegida nuestra plantilla podemos empezar a distinguir nuestro estilo
predeterminado y los premium, también se puede observar en la parte superior los
iconos de celular, computadora y tablet en el que presionando cada uno podemos
ver como se vería nuestra página en los diferentes dispositivos. Una vez visto esto
presionamos en continuar .
Seguimos los pasos que nos indican:

Actualizamos el diseño de nuestro sitio y seguimos los pasos de la visita guiada:


Ahora solo queda empezar a editar nuestra página, es sumamente importante que le
prestemos atención a cada icono para entender como funciona wordpress y cómo
podemos seguir modificando

Sin importar el tipo de plantilla que elijas la pagina de inicio se divide en bloques,
cada vez que toques un bloque se mostrara como podemos modificarlo a la derecha
Te compartimos el siguiente tutorial sobre como usar el editor:
Cómo usar el editor | WordPress.com/es
https://www.youtube.com/watch?v=ljCdqCsCR_w&t=66s

A tener en cuenta: si queremos ir al escritorio o visitar nuestro sitio web, tenemos


que hacer Click en la casita!
Para cargar todas las imágenes que queramos usar tenemos que ir al escritorio y
seleccionar Medios en la barra de la izquierda
En esta instancia ya te habrás dado cuenta que con Wordpress Online se pueden
realizar muchas variantes de páginas web, te invitamos a seguir estudiando todas
las acciones disponibles y te invitamos a realizar ¡ tu propia página web !

También podría gustarte