Conviértete en el experto que quieres ser con esta oferta especial
¡Inscríbete hoy!
¿Cómo crear una página web? con Leonel Morales
Descubre como crear una página web y empieza a desarrollarlas desde cero. Sigue el video y de la mano de Leonel Morales – Desarrollador de Email para Next U, descubre con un ejercicio práctico todo lo relacionado a su composición, desarrollo y puesta en práctica.
Cursos de Desarrollo Web que te pueden interesar
Aprenderás sobre:
✓ ¿Qué es una página web?
✓ ¿Cómo crear una página web?
✓ Composición
✓ Qué es un código HTML
✓ Etiquetas de una página web
✓ ¿Cómo ejecutar una página web?
✓ Estructura
✓ Herramientas y Software
Sumérgete en el mundo del desarrollo web, un mundo de oportunidades esperan por ti. Amplía tus conocimientos inscribiéndote en los cursos online de Next U.
Base – Transcripción del vídeo – (generalidades):
¡Hola!
Mi nombre es Leonel Morales, Desarrollador de Email para Next U, y el día de hoy les voy a hablar acerca de qué es, y cómo crear una página web.
¡Comencemos!
¿Qué es una página web?
Una página web en esencia es un documento o archivo de texto (con extensión .HTML), que puede ser interpretado por un navegador web.
El lenguaje HTML (Hyper Text Markup Language) o lenguaje de marcado de hipertexto, fue creado por Tim Berners Lee a inicios de los 90.
Una página web (completa) puede estar compuesta de varios elementos entre los cuales están:
- El HTML, que es el que dará la estructura del sitio
- El CSS que es el encargado de darle el diseño y estilo al sitio.
- Los scripts, generalmente en JS (JavaScript) para crear interacción y comportamientos dinámicos al sitio.
Una página puede ser ejecutada localmente (como archivo) desde tu ordenador, o de manera remota (a través de una URL) desde un servidor.
Un archivo HTML está compuesto de etiquetas que encierran el contenido y hacen que el navegador web lo interprete como tal. Entre las etiquetas más populares de una página web se encuentran:
- <body>
- <head>
- <div>
- <link>
- <p>
- <h1> <h2> …
- <a>
- <img>
Estructura de una página web.
El HTML de un sitio está compuesto de 2 áreas: El <head> y el <body>
En el <head> se definen varios elementos como:
- Nombre del sitio
- Juego de caracteres
- Idioma
- Enlaces a hojas de estilos
- Etiquetas <meta>
Y en el body se establecerá la estructura y contenido del sitio. En él encontraremos las secciones, divs, spans, y demás elementos que permiten darle cuerpo a este.
Puedes crear una estructura de bloques utilizando algún software de prototipado como por ejemplo Adobe XD, mockups, axure u otras herramientas como por ejemplo paint si así lo deseas, ¡incluso puedes diseñar tu estructura con papel y lápiz! Lo ideal es que tengas claro cómo será tu sitio y que no improvises con el código.
Supongamos que deseamos un sitio web sencillo que ocupe todo el ancho de la ventana, que tenga un título, un pequeño texto, y un botón en el centro de la misma. Nuestra estructura sería algo así:
¿Cómo crear una página web?
Lo primero que debes tener en cuenta es utilizar un editor de texto. Puedes usar el que desees y con el que te sientas plenamente cómodo.
En segundo lugar, deberás crear una carpeta en tu computador, donde puedas almacenar todo los archivos necesarios para el sitio. De esta forma, tendrás una organización adecuada. Puedes agregar el nombre que desees a la carpeta, por ejemplo, el nombre de tu sitio “Mi_Sitio”.
Adicionalmente, dentro de esta carpeta te recomiendo que crees subcarpetas para los demás recursos adicionales como imágenes, scripts, hojas de estilo y librerías.
Un ejemplo de la estructura por el momento sería la siguiente:
- Mi_sitio
- css
- js
- img
Luego de tener el espacio de trabajo organizado, podemos empezar a ¡escribir código!
Lo primero que haremos para esto será crear un nuevo archivo en nuestro editor de texto, y a continuación lo guardarás con el nombre que desees + la extensión .html, por ejemplo: index.html. La ubicación para guardarlo puede ser la raíz de la carpeta contenedora del sitio. Por lo tanto en este momento, la estructura estaría de esta manera:
- Mi_sitio
- css
- js
- Img
- Index.html
Empezaremos creando las etiquetas principales del documento html las cuales son html, head y body:
<html>
<head>
<body>
Recuerda cerrar las etiquetas e ¡indentar tu código!:
<html>
<head>
</head>
<body>
</body>
</html>
Agregaremos los elementos necesarios en el head para que la página se visualice correctamente: charset y title. Existen otras etiquetas muy importantes que deberás agregar al head, pero estas las veremos más adelante, o si lo deseas en el curso de desarrollo web de Next U podrás estudiarlas en profundidad.
<html>
<head>
<meta charset=”UTF-8”>
<title>Mi sitio</title>
</head>
<body>
</body>
</html>
A continuación agregaremos el contenido del sitio en el body.
Lo primero que haremos será un <div> para que sea el contenedor. Es importante que agregues un id al div, ya que más adelante podremos usarlo en el CSS para hacer algunos ajustes de estilo. El nombre del id puede ser el que desees, por ejemplo: “mydiv”.
<html>
<head>
<meta charset=”UTF-8”>
<title>Mi sitio</title>
</head>
<body>
<div id=”mydiv”>
</div>
</body>
</html>
¡IMPORTANTE! Te recomiendo que vayas guardando tu trabajo a medida que vayas avanzando. Acostúmbrate a guardar cada 5 minutos o cada vez que agregues una nueva etiqueta o elemento al archivo.
Ahora agregamos el Título, párrafo y botón que planteamos en nuestro prototipo inicial. Para esto usaremos las etiquetas <h1> <p> y <a>
<html>
<head>
<meta charset=”UTF-8”>
<title>Mi sitio</title>
</head>
<body>
<div id=”mydiv”>
<h1>Hola a todos!</h1>
<p><b>¿Cómo están?</b></p>
<a class=”boton”>Saluda!</a>
</div>
</body>
</html>
Guarda nuevamente el sitio y a continuación ábrelo desde tu explorador de archivos con el navegador web. Al tratarse de un sitio hecho solamente con HTML, sin hoja de estilos asociada debería verse así:
No se ve muy agradable que digamos, ¿cierto?
¡Ya haremos que esto cambie con el poder de CSS!
Css (Cascading Style Sheets) u hojas de estilo en cascada es un lenguaje que permite cambiar por completo la forma en la que se muestra un sitio. Por medio de:
- clases,
- ids,
- selectores y
- media queries,
Podemos hacer que un sitio cambie por completo.
MDN (Mozilla Developer Network) nos muestra las partes que componen una regla en css:
Fuente: https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics
Algunas de las propiedades más conocidas y usadas en CSS son:
- Font-family
- Color:
- Background
- Margin
- Padding
- Border
- display
En nuestro sitio de ejemplo, crearemos un nuevo archivo. Lo puedes llamar como desees, por ejemplo: style junto con la extensión .css, es decir: style.css. Y lo guardarás dentro de la carpeta CSS que creaste al inicio:
- Mi_sitio
- Css
- style.css
- js
- Img
- index.html
- Css
Ahora, recuerda que debes enlazar el archivo en tu sitio HTML, ya que si no lo haces, no servirán de nada todos los estilos que hagas en tu archivo CSS ya que no serán asignados. Entonces regresa a tu archivo index.html y utiliza la etiqueta <link>
<html>
<head>
<meta charset=”UTF-8”>
<title>Mi sitio</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div id=”mydiv”>
<h1>Hola a todos!</h1>
<p><b>¿Cómo están?</b></p>
<a class=”boton”>Saluda!</a>
</div>
</body>
</html>
Una vez esté enlazada la hoja de estilos, podemos empezar a codificar en CSS.
IMPORTANTE: Recuerda que existen 3 maneras de agregar CSS a tu sitio web: las hojas de estilo externas, los estilos en el head del documento y los estilos inline.
Lo primero que haremos será centrar el contenido del sitio. Para esto usaremos la propiedad text-align y le asignaremos el valor “center”. Para que se aplique en todo el sitio, podemos añadir esta propiedad en el body.
body
{
text-align: center;
}
Ahora, si queremos que el sitio ocupe la totalidad del ancho de la pantalla, podemos agregar las siguientes reglas:
body
{
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
Por ahora con los cambios que hemos aplicado desde CSS, nuestro sitio luce de esta manera:
Sin embargo no es mucho lo que hemos logrado hasta el momento… continuemos haciendo más cambios
Ahora es momento para adicionar algo de color a nuestro sitio, podemos usar un color para el fondo, uno para el texto y otro más para el botón. Empezaremos agregando un color de fondo:
background-color: #21334D (puedes colocar el que tu quieras)
body
{
background-color: #21334D;
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
Un cambio sencillo pero que puede dar un toque muy agradable al sitio es el uso de fuentes personalizadas. Los sitios HTML por defecto tienen aplicada la fuente Times New Roman, una fuente que a primera vista expresa demasiada “seriedad”. Podemos reemplazarla fácilmente por medio de la propiedad font-family.
body
{
font-family: Arial, Helvetica, sans-serif;
background-color: #21334D;
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
De momento, nuestro pequeño sitio luce asi:
Como verán, hace falta contrastar mejor el texto con respecto al color de fondo. Para esto, vamos a utilizar los selectores y el atributo “color”:
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #21334D;
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
h1{
color: #07DBAF;
}
p{
color: #FFFFFF;
}
¿Que tal si jugamos un poco con los tamaños?
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #21334D;
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
h1{
color: #07DBAF;
font-size: 50pt;
}
p{
color: #FFFFFF;
font-size: 25pt;
}
Ahora, vamos a hacer uso de las propiedades position y top para posicionar nuestro texto verticalmente en el centro de la pantalla. Añadiremos estas propiedades a nuestro div contenedor, al cual le habíamos asignado previamente el id “mydiv”
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #21334D;
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
#mydiv{
width: 100%;
position: absolute;
top: 30%;
}
h1{
color: #07DBAF;
font-size: 50pt;
}
p{
color: #FFFFFF;
font-size: 25pt;
}
IMPORTANTE: Recuerda que para asignar propiedades a un id deberás anteponer el caracter especial # (numeral, hash…etc) y para asignar propiedades a una clase usarás el punto (.)
Para finalizar la aplicación de estilos a nuestro pequeño sitio, añadiremos las propiedades necesarias para que nuestro enlace actual luzca más como un botón. Si deseas conocer más en detalle estas propiedades, te recomiendo que tomes el curso de desarrollo web en Next U.
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #21334D;
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
.boton{
background-color:#ff7111;
border:1px solid #ed7014;
border-radius:4px;
color:#ffffff;
display:inline-block;
font-size:15px;
font-weight:normal;
line-height:41px;
text-align:center;
text-decoration:none;
width:180px;
}
#mydiv{
width: 100%;
position: absolute;
top: 30%;
}
h1{
color: #07DBAF;
font-size: 50pt;
}
p{
color: #FFFFFF;
font-size: 25pt;
}
Con estas reglas, nuestro sitio debería ahora lucir así:
Algo sencillo, pero definitivamente… ¡con mejor estilo que antes!
Finalmente, podemos hacer uso de Javascript para hacer que nuestro sitio tenga algún comportamiento dinámico.
Recordemos que por medio de javascript podemos lograr cosas muy interesantes como:
- Crear variables y almacenar valores en ellas
- Operaciones en elementos de nuestro HTML
- Funciones y eventos
y mucho más…
Al igual que con nuestra hoja de estilos CSS, nuestro script de Javascript puede ser creado y agregado al sitio web por medio de la etiqueta script.
A continuación vamos a crear un script muy básico que genere un nuevo texto al dar click al botón que hicimos anteriormente.
Lo primero que debemos hacer es crear nuestro archivo, desde nuestro editor de texto, crea un nuevo archivo, guardalo con el nombre que desees + la extensión .js. Por ejemplo script.js.
En nuestra estructura de carpetas de nuestro sitio, los archivos estarían organizados de la siguiente manera:
- Mi_sitio
- Css
- style.css
- Js
- script.js
- Img
- Index.html
- Css
A continuación enlazaremos el archivo a nuestro HTML en el head:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Mi sitio</title>
<link rel=”stylesheet” href=”css/style.css”>
<script src=”js/script.js”></script>
</head>
<body>
<div id=”mydiv”>
<h1>Hola a todos!</h1>
<p><b>¿Cómo están?</b></p>
<a class=”boton”>Saluda!</a>
</div>
</body>
</html>
Javascript, al igual que cualquier lenguaje de programación, abarca una gran cantidad de características como:
- Condicionales
- Bucles
- Funciones
- Eventos
Además de muchos métodos pre establecidos. En este ejemplo haremos uso de algunos.
Antes de empezar a codificar nuestro script, tengamos en cuenta una cosa: si deseamos que nuestro sitio reaccione al oprimir el botón agregando un texto, debemos crear un contenedor para el mismo. Lo que puedes hacer es añadir una nueva etiqueta <p> justo después del botón en tu HTML y a esta añadirle un id (en este caso “miParrafo”), con el fin de manipular su contenido por medio del script.
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Mi sitio</title>
<link rel=”stylesheet” href=”css/style.css”>
<script src=”js/script.js”></script>
</head>
<body>
<div id=”mydiv”>
<h1>Hola a todos!</h1>
<p><b>¿Cómo están?</b></p>
<a class=”boton”>Saluda!</a>
<p id=”miParrafo”></p>
</div>
</body>
</html>
Ahora que tenemos todo listo, podemos empezar a crear nuestro script. Deberás tener en cuenta un concepto clave en javascript: el DOM. El dom (Document Object Model), o modelo de objetos del documento, es una API que permite que los scripts que se crean puedan interactuar con tu documento HTML permitiendo su modificación.
Para este ejemplo, modificaremos el contenido de la etiqueta <p> que creamos para que sea el contenedor del nuevo texto a crearse al hacer click en el botón.
Lo primero que haremos será agregar un EVENTO al botón que previamente habíamos creado en el HTML por medio de la función onclick. En ella vamos a llamar a una función que crearemos en el script. Puedes llamarla con el nombre que desees. Por ejemplo: crearParrafo().
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Mi sitio</title>
<link rel=”stylesheet” href=”css/style.css”>
<script src=”js/script.js”></script>
</head>
<body>
<div id=”mydiv”>
<h1>Hola a todos!</h1>
<p><b>¿Cómo están?</b></p>
<a class=”boton” onclick=”crearParrafo()“>Saluda!</a>
<p id=”miParrafo”></p>
</div>
</body>
</html>
Con esto conseguimos que al hacer click en el botón, se llame la función crear Párrafo(). ¡Ahora, vamos a crear esta función!
En tu archivo script.js vamos a empezar creando el bloque de código que contendrá la función:
function crearParrafo()
{
}
IMPORTANTE: Si el nombre de tu función está compuesto por más de una palabra, es una buena práctica que utilices el Camel Case para una buena visualización de tu código.
nombreFuncionEscribirParrafo
El camel case o “Nomenclatura camello” quiere decir que en cada palabra nueva que agreguemos, el primer carácter lo hagamos en Mayúscula para distinguir entre las pablaras. Al observar se asemeja a las jorobas de un camello.
Fuente: Wikipedia
Ahora, en nuestra función lo primero que haremos será crear un nuevo elemento de tipo párrafo y asignarle el contenido.
function crearParrafo()
{
var texto = document.createElement(‘p’);
texto.textContent = ‘¡Gracias!’;
}
A continuación, localizamos el párrafo contenedor que creamos en nuestro HTML por medio de la función getElementById de javascript. Por esta razón es importante utilizar ids y clases en nuestro código.
function crearParrafo()
{
var texto = document.createElement(‘p’);
texto.textContent = ‘¡Gracias!’;
var parrafo = document.getElementById(‘miParrafo’);
}
Finalmente, asignamos el texto que creamos inicialmente en nuestra función al párrafo contenedor por medio de la función appendChild.
var count = 0;
function crearParrafo()
{
var texto = document.createElement(‘p’);
texto.textContent = ‘¡Gracias!’;
var parrafo = document.getElementById(‘miParrafo’);
parrafo.appendChild(texto);
}
De esta manera, cada vez que hagas click en el botón, se creará un nuevo párrafo en tu HTML!.
Pero… ¿te has dado cuenta de que sucede si haces click más de una vez al botón?
Ups, esto no se ve muy bien, ¡pero no te preocupes!. Nada que un contador y un IF no puedan solucionar.
Agregamos una variable que sea contador de los clicks que hace el usuario. La inicializamos con valor cero. Luego en nuestra función, creamos una sentencia IF, donde le diremos a nuestro código que agregue el párrafo SI la variable contador sigue siendo cero (es decir si el párrafo no ha sido creado aún). De lo contrario (else) haremos que se cree una ventana emergente con el método alert diciéndonos que el párrafo ya fue creado. Agregamos la suma de 1 a nuestro contador al final de la función… ¡Y listo!
var count = 0;
function crearParrafo()
{
var texto = document.createElement(‘p’);
texto.textContent = ‘¡Gracias!’;
var parrafo = document.getElementById(‘miParrafo’);
if(count == 0){
parrafo.appendChild(texto);
}
else{
alert(“Ya agregaste el texto”);
}
count = count + 1;
}
De esta manera hemos terminado nuestro pequeño script de ejemplo para este sitio. Esto ha sido apenas un ejemplo muy básico de lo que es HTML, CSS y Javascript.
Lo que hemos hecho es tan solo una pequeña parte de todo lo que puedes lograr con los conocimientos adecuados. ¡Las posibilidades son infinitas!
Así que si deseas embarcarte en este maravilloso mundo del desarrollo web, te invito a que empieces a tomar tu curso en Next U, allí encontrarás todo lo que necesitas para convertirte en un desarrollador web.
Recuerda que “Cada logro comienza con la decisión de intentarlo.” -Gail Devers.
Si disfrutaste de este contenido, no olvides suscribirte a nuestro canal de Youtube. Ahí podrás ver más videos como este y aprender bastante de otras áreas del mundo digital, tales como Marketing, Tech y más.
No olvides dar tu like y, si tienes alguna duda, escríbela abajo en los comentarios y te la responderé con todo el gusto. Muchísimas gracias.
¡Hasta pronto!
Crea sitios web atractivos y dinámicos. Conoce más sobre desarrollo web certificándote en los cursos online de Next U.
¿Nos acompañas?
Síguenos en Facebook y suscríbete a nuestro canal de YouTube para que aproveches GRATIS cada uno de los videos y participes de las sesiones en vivo.
Enlace Facebook – Next U 👍🏼
Enlace YouTube – Next U Subscríbete
Si aún no eres uno de nuestros estudiantes, te invitamos a visitar nuestra página web y conocer un poco más sobre Next U, nuestros certificados y beneficios como la plataforma de aprendizaje 100% online, que te ofrece certificados en áreas de alta demanda laboral:
✓ Marketing digital.
✓ Programación web.
✓ Programación móvil.
✓ Negocios digitales.
✓ Diseño.
✓ TI.
✓ Emprendimiento.
✓ Cloud computing.
Sin horarios, ni conocimiento previo. Aprendes a tu propio ritmo desde el lugar que elijas y en español.
Optimiza tu tiempo, ahorra dinero, y encuentra todo lo que necesitas en un mismo lugar.
