IFCD0110 Confección y publicación de Páginas Web: Apuntes

Editores

Visual Studio Code

El editor de texto VSCode ha sido creado y es mantenido por Microsoft. Lo distribuye con licencia Open Source y por lo tanto en forma gratuita. Lo debemos descargar del sitio code.visualstudio.com, como podemos comprobar, está disponible tanto para Windows, Mac y Linux.

Permite tener varios documentos abiertos mediante pestañas, e incluso emplear varios paneles para aquellos que utilicen más de un monitor. Es ampliable y personalizable. Permite instalar extensiones para añadir nuevos idiomas, temas, depuradores y para conectarte a servicios adicionales. Las extensiones se ejecutan en procesos separados, lo que garantiza que no lo ralentizarán.

Explorador Ejecución y Depuración - Visualizar en Chrome Extensiones

El lenguaje por defecto es Ingles, por lo tanto, lo primero que haremos es cambiarlo a castellano, instalando una extensión de VS Code para tal fin. Presionamos el ícono de la izquierda para administrar extensiones y buscamos 'spanish' y después de instalarla, debemos reiniciar el programa.

El tema o aspecto visual por defecto es el oscuro, pero podemos cambiarlo por un aspecto más claro. Para cambiar el tema presionamos el botón del engranaje en la parte inferior izquierda y seleccionamos "Tema de color".

Tema de celer Cof+K Cuf+T › jonención .. Tema del imının del produrto al nick Engranaje

Podemos cerrar la pestaña de bienvenida y tendremos el editor VSCode dispuesto para empezar atrabajar, sin ningún documento abierto.

Una de las características que tiene el editor de texto Visual Studio Code es la posibilidad de configurar sus funcionalidades como pueden ser fuentes, colores, tamaños de fuentes, tabulaciones, modos de presentar en pantalla el editor etc.

Para acceder a la ventana de configuración del VSCode lo podemos hacer de varias formas:

1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda.
2. Desde la pestaña de configuración, desde el menú de barra seleccionando (Archivo -> Preferencias -> Configuración).
3. También pulsando las teclas (Ctrl +,).

= Nuevo archivo ris tecto Nuevo archrep .. Ctrl+Alt+Windows+N Seleccion Nueva ventana Ctrl+Mayús+N Nueva ventana con parti Wheir archiv. Fjerutar Abnr carpeta .. Ctrl+K Ctrl+O Terminal Abrir área de trabajo desde archivo .. Ayuda Abri reciente Inicio Di Kucho archivd Conhguraoor Ctrl+ Extensiones Ctrl+Mayús+x Métodos abreviados de tedado col+K cul+5 E Abrir corpoca .. X Conectarye & Reciente Temo Configuración de copia de seguridad y sincronización .. aber una carpeta in Configuración de kon servirins en lines Preferencias A Cerrar ventana At+F4 Sair Mostrar página principal al inicio 80△0 20

Extensiones de VSCode

Una de las opciones fundamentales del editor de texto VSCode es la posibilidad de agregar características mediante las "extensiones". Existen miles de "extensiones" con objetivos tan diversos como:

• Temas de iconos de archivo
• Temas de color
• Lenguajes de programación
• Depuradores
• Formateadores de código fuente
• Teclas de acceso rápido de otros editores

Instalación de Extensiones

Para instalar cualquier extensión, pulsamos en el último icono de la barra lateral izquierda, donde podremos buscar por nombre cualquier extensión disponible, o desplazarnos verticalmente. Aconsejo instalar una serie de extesiones que nos van a servir para facilitar nuestro trabajo de programación:

Beautify . vscode-icons . ESLint . HTML CSS Support . HTML Snippets . Javascript (E6)code snippets · Auto-save on window change . Color highlight · Color picker . Babel Javascript . Open in browser . Live server . Auto Rename Tag .CSS peck .Prettier Code formater .TODO highlight

Beautify

Se utiliza para colocar de un modo adecuado nuestras líneas de código automáticamente. Principalmente indentaciones.

Vscode-icons

Sirve para poner iconos automáticamente en función del tipo de archivo. Existenotros pack de iconos, como Material icon theme.

ESLint

analiza estáticamente el código para encontrar rápidamente los problemas, principalmente con JavaScript.

HTML CSS Support

Mejora la experiencia a la hora de «picar código» de HTML o CSS aún más, además de que soporta una lista de lenguajes bastante extensa además de los dos ya citados.

HTML Snippets

Los sinippets son fragmentos de código que podemos guardar, para no tener que escribirlos continuamente.

Javascript code snippets

Con esta extensión tenemos una excelente colección de snippets, que nos permiten ahorrar tiempo.

Autosave on window change

Guarda los documentos que tenganmos abiertos, en cuanto nos salgamos de ellos o cambiemos de ventana.

Color highlight

Cuando utilizamos colores en diferentes formatos y lenguajes, este nos ayuda a poder visualizar tanto en el mini mapa como en el código en sí dichos colores ya renderizados.

Color picker

Ayuda a generar los códigos de color en diferentes notaciones.

Babel Javascript

Resalta la escritura de JavaScript usando diferentes colores que nos permiten visualizar más fácilmente el código.

Open in browser

Permite abrir el archivo HTML en curso, en el navegador por defecto del sistema.

Live server

Crea un servidor local (localhost) para ejecutar el sitio web, por lo tanto, puedes ejecutar código que requiera de servidor

Abrir CARPETA

Cuando tenemos que trabajar con un conjunto de archivos ("SITIO") que se encuentran en una carpeta lo más conveniente es utilizar la funcionalidad de "Abrir carpeta" para que se nos muestre la lista de archivos contenidos en la misma y no tener que abrir en forma individual cada archivo.

• Podemos hacerlo, pinchando en el primer icono de la barra lateral izquierda y luego pulsando el botón "Abrir carpeta".
• También podemos hacerlo, simplemente arrastrando la carpeta al área de trabajo.

SITIO debe ser organizado y ordenado. Compondrá imágenes, fonts, HTML, CSS y Javascripts Id a Escritorio y Nueva Carpeta. Luego seleccionamos dicha carpeta. Una vez la carpeta está en Visual Code aparecen simbolos para añadir archivo, carpeta ... Hemos creado una carpeta HIML

Cerrar CARPETA

Cuando se abre una nueva carpeta, se cierra la carpeta abierta actualmente, pero si queremos, podemos cerrar la carpeta abierta actualmente mediante la opción del menú "Archivo -> Cerrar carpeta".

Si tenemos una carpeta abierta y arrastramos una nueva carpeta al área de trabajo, nos pregunta si queremos copiarla a la carpeta abierta. NO debemos hacer esto, previamente deberíamos haber cerrado la carpeta que teníamos abierta.

EMMET

Es un complemento que ya viene integrado en VSCode que aumenta nuestra velocidad cuando tenemos que codificar páginas HTML y CSS. https://docs.emmet.io/cheat-sheet/ Consiste en disponer ciertos caracteres y que el editor VSCode nos sugiera una cadena que sustituya dichos caracteres.

HTML - ETIQUETAS BÁSICAS

¿QUÉ ES HTML?

(SIEMPRE EN MINUSCULAS)¿QUÉ ES HTML? El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos. Estos documentos pueden ser mostrados por los visores de páginas Web en Internet, como Firefox, Chrome o Microsoft Explorer.

Básicamente, HTML consta de una serie de etiquetas, que indican al navegador que se está utilizando, la forma de representar los elementos (texto, gráficos, etc ... ) que contiene el documento. Las etiquetas de HTML pueden ser de dos tipos, cerradas y abiertas. Las etiquetas abiertas constan de una sola palabra clave. Para diferenciar las etiquetas del resto del texto del documento se encierran entre los símbolos < y > Las etiquetas cerradas incluyen el carácter / antes de la palabra clave para indicar el final de la misma. Una etiqueta puede contener "atributos". Estos atributos se indican a continuación de la palabra clave de la etiqueta. Entre la etiqueta inicial y la final se pueden encontrar otras etiquetas.

Estructura básica de HTML

Un documento escrito en HTML contendría básicamente las siguientes etiquetas: Declara la versión de HTML. Indica el inicio del documento. Inicio de la cabecera. Final del título del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. Final del cuerpo del documento. Final del documentoto ! + Tab

Declara el idioma español en la página (Muestra el Título en la barra de título del navegador) TÍTULO DE LA PÁGINA WEB Codifica el texto de la página para que aparezcan los caracteres en castellano Entre estas etiquetas pondremos el contenido que se visualizará en nuestra página web (textos, imágenes, videos ... )

DOCTYPE

El Doctype o "Declaración del tipo de documento" es una instrucción especial que va al inicio de nuestro documento HTML y que permite al navegador entender qué versión de HTML estamos utilizando. Esta información determinará la manera en la que el navegador procesará el documento, un DOCTYPE distinto podría implicar hasta una visualización diferente del sitio web dentro del mismo navegador.

Vamos a escribir !+Tab para que nos escriba directamenteHTML > 5 index.html > ... 1 2 3 4 5 6 Inicio HTML 7 8 9

Esto es un párrafo .< /p> 10
11 12

Esto es otro párrafo .< /p> 13

He cambiado el lang de "en" a "es" para pasar de inglés a español En el Body se escriben los párrafos que queramos que se ven en la web. Los comentarios sirven para poder hacer anotaciones de edición. Es preferible ir borrando los que no sean necesarios.

ETIQUETAS DE APERTURA

Todo documento HTML debe estar incluido dentro de las etiquetas . Esto le indica al navegador en que lenguaje está creado el documento. < HTML> Dentro de las etiquetas , existen dos partes fundamentales del documento que son la cabecera y el cuerpo: < HEAD> Y

Título de la página (reconocer la ñ y acentos) Crear el archivo "dosparrafos.html" También probar que sucede si quitamos la codificación UTF-8.

COMENTARIOS

Para incluir comentarios en la página Web se utiliza la etiqueta