TP 14 - HTML - Herramientas de Trabajo

1
Curso de Diseño de Páginas Web “TP Nº14 - Herramientas para la edición de HTML”
Objetivo: Investigar las herramientas para la edición de código HTML.
Hola alumnos:
En este tema vamos a conocer las herramientas con las que vamos a trabajar HTML.
Para trabajar con código existen muchas herramientas disponibles, hemos elegido para
Uds. dos opciones:
A. Una herramienta básica que, si bien no es la ideal porque le faltan las facilidades
propias que brinda una estándar, es útil en casos puntuales a falta de otra
disponible o cuando otras opciones resultan muy complejas.
B. Una herramienta estándar que utilizan para codificar los diseñadores y
programadores cuando trabajan con código.
-----------------------------------------------------------------
Vamos a probar cada una estas herramientas:
A. El Bloc de Notas de la computadora: El Bloc de Notas es un editor de texto básico
que brinda posibilidad de escribir código sin el agregado de caracteres especiales
que ensuciarían el código HTML como Word de Microsoft.
B. El editor Bracket.
----------------------------------------------------------------
ACTIVIDAD: Revisión de herramientas.
A. Uso del Bloc de Notas:

Forma de acceso (en Windows 8): Inicio y Buscar
2
En la caja de diálogo tipeamos → Bloc de Notas

Cuando vamos escribiendo ya nos ubica el programa y hacemos clic en el ícono.
Se abre el Bloc de Notas.

3
En ese espacio es donde vamos a tipear el código.
B. Uso de Bracket
Este programa hay que descargarlo e instalarlo en su computadora:
1. Van a este enlace http://brackets.io/ y descargan el archivo
2. Lo buscan en la carpeta de descarga y le hacen doble clic y lo instalan.
3. Lo buscamos de la misma manera que buscamos el Bloc de Notas.
4. Ahora sobre el ícono de Brackets apretamos botón derecho del mouse y

hacemos clic en Anclar a la barra de tareas. De esta manera lo vamos a
tener a mano para apertura rápida.
4
5. Hacemos doble clic sobre el ícono de Brackets en la Barra de tareas y se

abre el programa.
Hacemos clic en Ver y luego en Temas y se abre otra ventana.
Elegimos Brackets Dark y Aceptar. Es importante que trabajen con la versión

oscura (Dark) de Brackets.
Ahora vamos a instalar 4 extensiones básicas para trabajar los archivos.
6. Hacemos clic en El Gestor de Extensiones.

5
7. Se abre una ventana y allí tipeamos indent guides
Y la instalamos.
Hace un proceso y la instala.
6
8. Buscamos la siguiente extensión: beautify y la instalamos.
9. Buscamos la extensión: skeleton y la instalamos.

7
10. Buscamos la extensión: lorem ipsum (verificamos que sea la de Lance

Campbell) y la instalamos.
El uso del tema Dark y las extensiones nos van a facilitar la tarea de escribir el
código.
-------------------------------------------------------------------------------------------
Habilitamos las extensiones en Brackets.
Las extensiones las hemos instalado ahora para que funcionen hacemos algunas
verificaciones:
11. Extensión Indent guides:

Clic en Ver y luego en Indent guides y la tildamos.
8
Extensión Beautify:
12. Verificamos que haya un icono debajo del ícono de Vista previa dinámica con
forma de varita mágica con el nombre de Formatear documento.
9
Extensión Skeleton:
13. Verificamos que haya un ícono debajo del ícono de Vista previa dinámica con
el símbolo de inserción de código.
14. Abrir el programa brackets que instalaron en su computadora.

15. Esperar que termine de cargar, a veces puede tardar un poco. Cuando abre
muestra una pantalla de color gris claro que ya tiene un código muy extenso
escrito. No vamos a hacer nada con ese código es un ejemplo que trae
Brackets de sus funcionalidades a modo de publicidad.
16. Vamos al Menú superior y hacemos clic en Archivo y luego en Nuevo y le
damos clic
17. Ahora se abre un espacio para escribir en el mismo de color gris claro y lo
vamos a cambiar a nuestro escritorio de trabajo de color oscuro.
18. Clic en Ver y luego en Temas y elegimos Brackets Dark y aceptamos.
19. Verificamos que Brackets esté trabajando en HTML mirando aquí, y si está en
modo Texto lo cambiamos a HTML.
20. En el escritorio de brackets verificamos que la extensión Indent guides esté

activada.
10
21. En el escritorio de Brackets hacemos clic en el ícono de la extensión de

skeleton y se abre una ventana: hacemos clic en Basic HTML Skeleton y Done.
22. Brackets va a escribir la estructura básica html.

23. Entre las etiquetas de <body> y </body> vamos a escribir lo siguiente:
lorem*3
y apretamos la tecla Tab
Y vemos ¿qué pasa?, responder la pregunta en su cuaderno de apuntes.
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
V.2020-05

TP 14 - HTML - Herramientas de Trabajo

Cargado por

Copyright:

Formatos disponibles

TP 14 - HTML - Herramientas de Trabajo

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

TP 14 - HTML - Herramientas de Trabajo

Cargado por

Copyright:

Formatos disponibles

1

Objetivo: Investigar las herramientas para la edición de código HTML.

A. Uso del Bloc de Notas:

En la caja de diálogo tipeamos → Bloc de Notas

Se abre el Bloc de Notas.

En ese espacio es donde vamos a tipear el código.

2. Lo buscan en la carpeta de descarga y le hacen doble clic y lo instalan.

3. Lo buscamos de la misma manera que buscamos el Bloc de Notas.

4. Ahora sobre el ícono de Brackets apretamos botón derecho del mouse y

5. Hacemos doble clic sobre el ícono de Brackets en la Barra de tareas y se

Hacemos clic en Ver y luego en Temas y se abre otra ventana.

Elegimos Brackets Dark y Aceptar. Es importante que trabajen con la versión

Ahora vamos a instalar 4 extensiones básicas para trabajar los archivos.

6. Hacemos clic en El Gestor de Extensiones.

7. Se abre una ventana y allí tipeamos indent guides

8. Buscamos la siguiente extensión: beautify y la instalamos.

9. Buscamos la extensión: skeleton y la instalamos.

10. Buscamos la extensión: lorem ipsum (verificamos que sea la de Lance

Habilitamos las extensiones en Brackets.

11. Extensión Indent guides:

14. Abrir el programa brackets que instalaron en su computadora.

20. En el escritorio de brackets verificamos que la extensión Indent guides esté

21. En el escritorio de Brackets hacemos clic en el ícono de la extensión de

22. Brackets va a escribir la estructura básica html.

También podría gustarte