Practica 1 HTML - Introducción al entorno de desarrollo

5

Click here to load reader

description

Primeros pasos en el desarrollo de sitios HTML e instalación del IDE Sublime Text 3.

Transcript of Practica 1 HTML - Introducción al entorno de desarrollo

Page 1: Practica 1 HTML - Introducción al entorno de desarrollo

INTRODUCCIÓN AL ENTORNO DE DESARROLLO

Sublime Text será el programa que se utilizará a lo largo del curso básico de HTML. Es un editor de texto

en el cual podemos crear documentos, no solo de texto plano, sino también documentos HTML, CSS,

Java script y más. Para descargarlo se irá a http://www.sublimetext.com/3 y utilizaremos la versión 3 de

este programa.

Una vez ahí buscaremos la versión del software que se adapte a nuestro sistema operativo. Como en el

curso se trabajará bajo la plataforma Windows, descargaremos la versión portable (no necesita

instalación) de este software:

Una vez realizada la descarga, creamos una carpeta llamada Sublime Text 3 y descomprimimos el

archivo descargado en esta carpeta. Si no hacemos esto, todos los archivos del programa se extraerán en

la carpeta donde se descargó y no queremos eso.

Después de descomprimir el archivo en la carpeta creada, entramos a esta y abrimos un archivo llamado

sublime_text que es el ejecutable de esta aplicación (tiene el ícono del programa):

Page 2: Practica 1 HTML - Introducción al entorno de desarrollo

Tras ejecutar este archivo se abrirá la pantalla principal del programa:

Por ser un programa portable, este no tiene licencia. Puede que a medida que se ocupe el software este

envíe ciertos mensajes en pantalla, pero solamente ignórelos y ciérrelos. Esto no afectará su

funcionamiento.

Ahora escribiremos el código de nuestra primera página web:

Page 3: Practica 1 HTML - Introducción al entorno de desarrollo

Una vez escrito esto diríjase al menú File y haga clic en la opción Save:

Lo siguiente es importante: Al colocar el nombre al documento NUNCA olvide escribir la extensión .html

o .htm pues de lo contrario lo único que guardará será un archivo de texto plano. Para este ejemplo le

colocaremos de nombre primera.html

Ahora diríjase a la carpeta en que haya guardado su página web (en mi caso está en el Escritorio). Notará

que no tiene el ícono de un documento de texto sino que el de un navegador web. El ícono dependerá

del navegador que tenga como predeterminado en el equipo de cómputo:

Page 4: Practica 1 HTML - Introducción al entorno de desarrollo

Al abrirlo se abrirá una pestaña en el navegador predeterminado (en este caso Google Chrome) y

mostrará el contenido de este sencillo sitio web:

No parece la gran cosa, pero este es el primer paso para poder crear sitios web.

EJERCICIOS:

EJERCICIO UNO: Abra una nueva pestaña (Ctrl+N) en Sublime Text 3 y escriba el siguiente código:

Guárdelo con el nombre de segunda.html y al probarlo en el navegador deberá verse así:

Page 5: Practica 1 HTML - Introducción al entorno de desarrollo

EJERCICIO DOS: Sublime Text 3 puede modificarse en torno a nuestras necesidades en cuanto al estilo

visual del mismo. Para modificar los colores de este diríjase a la pestaña Preferences y ubíquese en la

opción Color Scheme. Ahí aparecerán todos los estilos visuales disponibles para Sublime Text 3 y con

solo un clic puede elegir entre variados temas definidos:

Cambie el entorno hasta encontrar aquel que mejor se adapte a usted.