Crear una página web desde cero

(Bueno.. desde 0.5 digamos) Hay muchas herramientas para hacer una página de internet, entre ellas WordPress (con la que está hecho este blog) es una de las más famosas, por lo fácil y práctica que es. En este post quisiera hacer una introducción a cómo crear una página de internet desde cero y hacerle host desde una cuenta de github. Haremos una introducción a HTML y les recomendaré unas páginas donde pueden profundizar, la idea es que si les interesa aprender desarrollo web, esto sirva como un primer paso.

Una página de internet se escribe en el lenguaje HTML (HyperText Markup Language), el cual consiste en un conjunto de etiquetas que se abren y cierran (<etiqueta>contenido</etiqueta>). Por ejemplo para escribir un bloque de texto utilizamos la etiqueta “p”, que significa “paragraph”.

<p>Aqui va el contenido</p>

Es importante notar que las etiquetas que cierran se escriben con la diagonal invertida. Existen muchas de ellasy cada una cumple una función, por ejemplo h1, significa un header de primer nivel, h2, de segundo nivel, h3 de tercer nivel, cada uno más pequeño que el anterior.

Vamos a crear una primera página. Para ello, pueden abrir su editor de texto favorito, yo les recomiendo SublimeText. También pueden probar cómo se vería su página en vivo en esta página. Abran un archivo de texto nuevo y escribamos lo siguiente

<!DOCTYPE html>
<html>
<body>

<h1>Portafolio artístico de _____</h1>
<p>Aquí presuman todos sus logros</p>

</body>
</html>

Con la primer línea, le indicamos el tipo de documento que vamos a escribir, esta es una etiqueta que no se cierra. La segunda línea es donde se colocará todo el contenido de la página, entre las etiquetas <html></html>. La etiqueta <body></body> define el cuerpo de la página y dentro de él pondremos nuestra información.

Para poner una imágen utilizamos la etiqueta <img>, esta también es una de las que no se cierran, sólo tenemos que indicarle la dirección de la imágen. por ejemplo:

<img src="https://creativecommons.org/images/deed/cc-logo.jpg">

Todo este código debemos guardarlo en un archivo que se llame index.html, el cual tiene que estar en un servidor. Como parte del ejercicio introductorio, les recomiendo hacer host a sus ejercicios de HTML en su cuenta de github. Si no tienen una, pueden abrirla aqui. Para hacer el hosting de esta manera, deben crear un repositorio llamado “usuario.github.io”, (sustituyan su nombre de usuario por en el link). Y una vez que clonen  su repositorio pueden trabajar directamente desde su computadora por medio de la aplicación Github, o su git client favorito. Pueden ver instrucciones detalladas de esto en este tutorial.

Una vez que tengan su página básica, les recomiendo tomar unos tutoriales para utilizar HTML junto con CSS para hacer que se vea mejor. Por ejemplo, les muestro mi ejercicio. Uno de los mejores que he encontrado en linea es Free Code Camp, donde no sólo te enseñan a programación web desde lo más básico, sino que puedes trabajar en proyectos reales con los cuales te conectan.

Una de las ventajas de aprender a programar HTML y CSS es que ya no dependemos totalmente de herramientas  y templates como los de WordPress, Wix o Weebly para crear nuestro portafolio, sino que podemos modificarlos al gusto libremente. Espero que esta información les sirva, y si hacen su página de esta forma, por favor compartanla en los comentarios de abajo.

Saludos y que tengan buena semana.

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s