SlideShare uma empresa Scribd logo
1 de 5
Baixar para ler offline
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):
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:
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:
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í:
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.

Mais conteúdo relacionado

Mais procurados

El Juego TicTacToe (Gato) mediante Arboles de Decisiones
El Juego TicTacToe (Gato) mediante Arboles de DecisionesEl Juego TicTacToe (Gato) mediante Arboles de Decisiones
El Juego TicTacToe (Gato) mediante Arboles de Decisiones
José Enrique Alvarez Estrada
 
proyecto conexion netbeans con Mysql
proyecto conexion netbeans con Mysqlproyecto conexion netbeans con Mysql
proyecto conexion netbeans con Mysql
BrenditaLr
 
Codigo para crear la base de datos
Codigo para crear la base de datosCodigo para crear la base de datos
Codigo para crear la base de datos
Alvaro Cardona
 
Trabajo 5 Semestre Linux
Trabajo 5 Semestre LinuxTrabajo 5 Semestre Linux
Trabajo 5 Semestre Linux
guestec0c31
 

Mais procurados (20)

diapositiva Visual basic.net
diapositiva Visual basic.netdiapositiva Visual basic.net
diapositiva Visual basic.net
 
Implementación de clases
Implementación de clasesImplementación de clases
Implementación de clases
 
introducción tecnologías web
introducción tecnologías webintroducción tecnologías web
introducción tecnologías web
 
Herencia y Polimorfismo en Java
Herencia y Polimorfismo en JavaHerencia y Polimorfismo en Java
Herencia y Polimorfismo en Java
 
Tic tac toe code
Tic tac toe codeTic tac toe code
Tic tac toe code
 
8b Curso de POO en java - paso de diagrama clases a java 1
8b Curso de POO en java - paso de diagrama clases a java 18b Curso de POO en java - paso de diagrama clases a java 1
8b Curso de POO en java - paso de diagrama clases a java 1
 
El Juego TicTacToe (Gato) mediante Arboles de Decisiones
El Juego TicTacToe (Gato) mediante Arboles de DecisionesEl Juego TicTacToe (Gato) mediante Arboles de Decisiones
El Juego TicTacToe (Gato) mediante Arboles de Decisiones
 
Sesiones y cookies en php
Sesiones y cookies en phpSesiones y cookies en php
Sesiones y cookies en php
 
Herramientas y Tecnologías para la Web
Herramientas y Tecnologías para la WebHerramientas y Tecnologías para la Web
Herramientas y Tecnologías para la Web
 
Proyecto calculadora
Proyecto calculadoraProyecto calculadora
Proyecto calculadora
 
Como migrar una base de datos de mysql a power designer
Como migrar una base de datos de mysql a power designerComo migrar una base de datos de mysql a power designer
Como migrar una base de datos de mysql a power designer
 
proyecto conexion netbeans con Mysql
proyecto conexion netbeans con Mysqlproyecto conexion netbeans con Mysql
proyecto conexion netbeans con Mysql
 
Algoritmos con PSeInt
Algoritmos con PSeIntAlgoritmos con PSeInt
Algoritmos con PSeInt
 
Codigo para crear la base de datos
Codigo para crear la base de datosCodigo para crear la base de datos
Codigo para crear la base de datos
 
Tópicos Avanzados de Programación - Unidad 4 Acceso a datos
Tópicos Avanzados de Programación - Unidad 4 Acceso a datosTópicos Avanzados de Programación - Unidad 4 Acceso a datos
Tópicos Avanzados de Programación - Unidad 4 Acceso a datos
 
Programación 3: árboles binarios y ordenados
Programación 3: árboles binarios y ordenadosProgramación 3: árboles binarios y ordenados
Programación 3: árboles binarios y ordenados
 
WEB TECHNOLOGIES JavaScript
WEB TECHNOLOGIES JavaScriptWEB TECHNOLOGIES JavaScript
WEB TECHNOLOGIES JavaScript
 
Proyectos de clase lenguajes y automatas
Proyectos de clase lenguajes y automatasProyectos de clase lenguajes y automatas
Proyectos de clase lenguajes y automatas
 
Trabajo 5 Semestre Linux
Trabajo 5 Semestre LinuxTrabajo 5 Semestre Linux
Trabajo 5 Semestre Linux
 
Cuaderno de Trabajo VB 6.0
Cuaderno de Trabajo VB 6.0Cuaderno de Trabajo VB 6.0
Cuaderno de Trabajo VB 6.0
 

Destaque

Más es mejor que menos, cuando menos no es suficiente
Más es mejor que menos, cuando menos no es suficienteMás es mejor que menos, cuando menos no es suficiente
Más es mejor que menos, cuando menos no es suficiente
Joel Ortíz
 
La interfaz del servidor de directorios
La interfaz del servidor de directoriosLa interfaz del servidor de directorios
La interfaz del servidor de directorios
paola2545
 

Destaque (20)

Más es mejor que menos, cuando menos no es suficiente
Más es mejor que menos, cuando menos no es suficienteMás es mejor que menos, cuando menos no es suficiente
Más es mejor que menos, cuando menos no es suficiente
 
Presentación FP
Presentación FPPresentación FP
Presentación FP
 
Cec
CecCec
Cec
 
#surLearning. Centro Tecnológico Andaluz de #eLearning
#surLearning. Centro Tecnológico Andaluz de #eLearning#surLearning. Centro Tecnológico Andaluz de #eLearning
#surLearning. Centro Tecnológico Andaluz de #eLearning
 
Handout penulisan bahan ajar berbasis web
Handout penulisan bahan ajar berbasis webHandout penulisan bahan ajar berbasis web
Handout penulisan bahan ajar berbasis web
 
Ubiquitous Capture en Evernote. Tecnología móvil
Ubiquitous Capture en Evernote. Tecnología móvilUbiquitous Capture en Evernote. Tecnología móvil
Ubiquitous Capture en Evernote. Tecnología móvil
 
Curso prevención riesgos laborales para directivos
Curso prevención riesgos laborales para directivosCurso prevención riesgos laborales para directivos
Curso prevención riesgos laborales para directivos
 
La interfaz del servidor de directorios
La interfaz del servidor de directoriosLa interfaz del servidor de directorios
La interfaz del servidor de directorios
 
Curso auxiliar de psiquiatría
Curso auxiliar de psiquiatríaCurso auxiliar de psiquiatría
Curso auxiliar de psiquiatría
 
Manual en inglés de Joaquín Dosil, La Voz
Manual en inglés de Joaquín Dosil, La VozManual en inglés de Joaquín Dosil, La Voz
Manual en inglés de Joaquín Dosil, La Voz
 
200405 - Aplicaciones Web
200405 - Aplicaciones Web200405 - Aplicaciones Web
200405 - Aplicaciones Web
 
Presentacion plataforma virtual_ramona_cervantes_lerma
Presentacion plataforma virtual_ramona_cervantes_lermaPresentacion plataforma virtual_ramona_cervantes_lerma
Presentacion plataforma virtual_ramona_cervantes_lerma
 
Grupo Inditex
Grupo InditexGrupo Inditex
Grupo Inditex
 
Php
PhpPhp
Php
 
Proyecto EEP Turaniana
Proyecto EEP TuranianaProyecto EEP Turaniana
Proyecto EEP Turaniana
 
Retos de la Bibliotecas - Alejandro Martín Maldonado - BLAA
Retos de la Bibliotecas -  Alejandro Martín Maldonado - BLAARetos de la Bibliotecas -  Alejandro Martín Maldonado - BLAA
Retos de la Bibliotecas - Alejandro Martín Maldonado - BLAA
 
José m. del río
José m. del ríoJosé m. del río
José m. del río
 
energia
energiaenergia
energia
 
Especialista Web J8
Especialista Web J8Especialista Web J8
Especialista Web J8
 
Practica 3 HTML - Gestionando listas y tablas
Practica 3 HTML - Gestionando listas y tablasPractica 3 HTML - Gestionando listas y tablas
Practica 3 HTML - Gestionando listas y tablas
 

Semelhante a Practica 1 HTML - Introducción al entorno de desarrollo

Semelhante a Practica 1 HTML - Introducción al entorno de desarrollo (20)

Html
HtmlHtml
Html
 
Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8
 
Tb 2
Tb 2 Tb 2
Tb 2
 
Tb de flor
Tb de florTb de flor
Tb de flor
 
Laura
LauraLaura
Laura
 
Tutorial Javascript01
Tutorial Javascript01Tutorial Javascript01
Tutorial Javascript01
 
Javascript01 091001224249-phpapp01
Javascript01 091001224249-phpapp01Javascript01 091001224249-phpapp01
Javascript01 091001224249-phpapp01
 
Tutorial aprendiendo a programar
Tutorial aprendiendo a programarTutorial aprendiendo a programar
Tutorial aprendiendo a programar
 
Tutorial aprendiendo a programar
Tutorial aprendiendo a programarTutorial aprendiendo a programar
Tutorial aprendiendo a programar
 
Tutorial aprendiendo a programar
Tutorial aprendiendo a programarTutorial aprendiendo a programar
Tutorial aprendiendo a programar
 
Tutorial aprendiendo a programar
Tutorial aprendiendo a programarTutorial aprendiendo a programar
Tutorial aprendiendo a programar
 
Manual sobre code
Manual sobre codeManual sobre code
Manual sobre code
 
Manual sobre code
Manual sobre codeManual sobre code
Manual sobre code
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Subir actividades lim y ardora en tu blog
Subir actividades lim y ardora en tu blogSubir actividades lim y ardora en tu blog
Subir actividades lim y ardora en tu blog
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Dreamweaver generalidades
Dreamweaver generalidadesDreamweaver generalidades
Dreamweaver generalidades
 
Curso practico-de-javascript
Curso practico-de-javascriptCurso practico-de-javascript
Curso practico-de-javascript
 
Manual Dreamweaver
Manual DreamweaverManual Dreamweaver
Manual Dreamweaver
 

Último (7)

TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfTIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
 
Unidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucionesUnidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disoluciones
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
 
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
 
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjPPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
 
Las redes sociales en el mercado digital
Las redes sociales en el mercado digitalLas redes sociales en el mercado digital
Las redes sociales en el mercado digital
 

Practica 1 HTML - Introducción al entorno de desarrollo

  • 1. 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):
  • 2. 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:
  • 3. 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:
  • 4. 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í:
  • 5. 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.