Creando páginas web desde cero con Sublime

sublime text

Sublime, ¿qué es y como descargarlo?

Sublime es un editor de texto que funciona con Windows, OSX y Linux y es alucinadamente rápido para crear páginas web.

Puedes descargarlo grátis desde la página oficial

Creando un archivo con Sublime

Una vez que lo hayas abierto, escribe un nombre para la página dentro del editor y guárdala en el escritorio para que no se pierda tu archivo, automáticamente Sublime entiende que la primera linea de contenido es el nombre.

Captura de pantalla de Sublime

Captura de pantalla de Sublime

Ahora empieza la parte interesante, la tecla tab de tu teclado será la clave.

Creando una página web con Sublime

Escribe html en el editor y luego tabula (no pongas ningún espacio), automáticamente sublime escribirá el código básico de una página web. Tu página debería verse ahora así.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

HTML es un lenguaje de marcas, las marcas empiezan así; <marca> y terminan así: </marca>

Todo el contenido de la página va dentro de las marcas <body> </body> cuando se dice dentro se refiere a poner el contenido <body> aquí dentro </body>

Párrafos

Lo siguiente es empezar a escribir un poco de contenido dentro de la página, para eso vamos a ocupar la etiqueta p, ahora la gran gracia que tiene sublime es que nos escribe todas las etiquetas html automáticamente, así que escribe solamente p y luego sin espacio ni nada, presiona el tb. y te va a generar automáticamente el siguiente contenido

<p> </p>

y dentro puedes escribir lo que quieras, ahora, la forma más fácil de escribir contenido en una página es ocupando lorem ipsum, para eso escribe lorem y acto seguido tab.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

haz doble click en la página que creaste en el escritorio y verás que tienes tu primera página web. Ahora veamos otras marcas, primero, títulos

Títulos

Los títulos que son más grandes que los párrafos se hacen con las marcas h1, escribe dentro de sublime (siempre dentro del body de la página) pero arriba de los parrafos, h1 y luego la tecla tab.

Subtítulos

los subtítulos son otras marcas que van desde h2 hasta h6, escribe cualquiera, luego tab y dentro el contenido de tu subtítulo

Links

Los links se hacen con la marca a, escribe a y luego tab y deberías obtener lo siguiente:

<a href=""></a>

Dentro de donde dice href debes poner la dirección completa de la página, ej: http://www.en1mes.com

Entre medio de las etiquetas el contenido del link. Prueba guardando y recargando la página que tenías abierta o ábrela de nuevo.

Imágenes

escribe img en y luego tab, obtendrás lo siguiente:

<img src="">

Links dentro de las imágenes

Realmente es al revés, las imágenes van dentro de los links, y la estructura es la siguiente:

<a href="http://www.en1mes.com"><img src="http://www.en1mes.com/assets/logo.png"></a>

Ya tienes tu primera página web, quieres aprender más? En1Mes te podemos enseñar a construir tu sitio web o el de tu empresa.

Gonzalo Sánchez
Summary
Article Name
Creando páginas web desde cero con Sublime
Description
Aprende a crear páginas web con el editor más rápido y sencillo del mercado.
Author
Share Button

About Gonzalo Sánchez

Emprendedor lean, Ingeniero civil informático dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas y por sobre todo fundador de en1mes.
11 years ago uncategorized17,179
audio una etiqueta para experimentar en HTML5¿Es tu página web responsiva?
You Might Also Like
 
 

Leave a Reply