Curso de Páginas Web

Para obtener Visual Studio Code, puedes seguir los siguientes pasos:

• git init Inicializa un repositorio git en el directorio de trabajo actual.
• Visita el sitio web oficial de Visual Studio Code en el siguiente enlace: Descargar Visual Studio Code.
• En la página de descarga, verás opciones para descargar Visual Studio Code para diferentes sistemas operativos, como Windows, macOS y Linux. Haz clic en el enlace correspondiente a tu sistema operativo.
• Una vez que hayas descargado el archivo de instalación, ábrelo y sigue las instrucciones para instalar Visual Studio Code en tu computadora.
• Después de completar la instalación, podrás abrir Visual Studio Code y comenzar a utilizarlo como editor de código fuente.

Para agregar una extensión en Visual Studio Code, puedes seguir estos pasos:

• Abre Visual Studio Code en tu computadora.
• Haz clic en el ícono de "Extensiones" en la barra lateral izquierda o presiona Ctrl + Shift + X (Windows/Linux) o Cmd + Shift + X (Mac) para abrir la vista de extensiones.
• En la barra de búsqueda de la vista de extensiones, escribe el nombre de la extensión que deseas agregar. Por ejemplo, si deseas agregar la extensión "Auto Rename Tag", escribe "Auto Rename Tag" en la barra de búsqueda.
• Aparecerán los resultados de la búsqueda. Haz clic en la extensión que deseas agregar.
• En la página de la extensión, haz clic en el botón "Instalar" para agregar la extensión a Visual Studio Code.
• Una vez que la extensión se haya instalado correctamente, verás un mensaje de confirmación y la extensión aparecerá en la lista de extensiones instaladas.
• Puedes configurar y personalizar la extensión según tus preferencias utilizando la opción "Configuración" de la extensión o accediendo a la configuración de Visual Studio Code (File > Preferences > Settings).

Algunas de las principales extensiones para Visual Studio Code que son útiles para programar con HTML, CSS y JavaScript son:

• Auto Rename Tag: Esta extensión te permite cambiar automáticamente el nombre de una etiqueta HTML o XML cuando modificas su etiqueta de apertura o cierre. Es útil para mantener la consistencia y evitar errores al renombrar etiquetas.
• Error Lens: Error Lens resalta los errores y advertencias directamente en el código fuente mientras escribes. Esto te permite identificar y corregir problemas de manera más rápida y eficiente, sin tener que buscar en la consola de errores.
• IntelliSense for CSS: Esta extensión proporciona autocompletado inteligente para nombres de clases CSS en archivos HTML y CSS. Te ayuda a escribir código CSS más rápido y evita errores tipográficos al seleccionar nombres de clases.
• Open in Browser: Esta extensión te permite abrir fácilmente archivos HTML o archivos en el navegador web predeterminado desde Visual Studio Code. Es útil para ver rápidamente cómo se ve tu página web sin tener que cambiar de ventana o buscar el archivo en tu sistema de archivos.
• Material Icon Theme: Material Icon Theme es una extensión que agrega iconos personalizados a los archivos y carpetas en el explorador de Visual Studio Code. Esto hace que sea más fácil y rápido identificar los diferentes tipos de archivos en tu proyecto.
• Prettier - Code formatter: Prettier es una extensión de formateo de código que te ayuda a mantener un estilo de código consistente y legible. Formatea automáticamente el código HTML, CSS y JavaScript según las reglas de estilo configuradas.
• Spanish Language Pack: El paquete de idioma español para Visual Studio Code traduce la interfaz de usuario y las etiquetas del editor al español. Esto hace que sea más fácil y cómodo trabajar con Visual Studio Code si prefieres usar el español como idioma principal.

Emmet es un complemento o plugin que está disponible en varios editores de texto, incluido Visual Studio Code. Permite escribir código HTML y CSS de manera más rápida y eficiente utilizando abreviaturas.

Algunas de las abreviaturas más utilizadas en Emmet son:

Sintaxis Emmet	Resultado en HTML
div	<div></div>
p	<p></p>
a	<a href=””></a>
br	<br>
h1	<h1></h1>
form	<form action=””></form>

El concepto es simple, tan solo con escribir el nombre del elemento HTML, Emmet producirá el resto ¡Pruébalo en un documento HTML de VS Code!

Operadores principales:

Operador Hermanos:

Use el operador + para colocar elementos cerca uno del otro, en el mismo nivel:

Sintaxis Emmet	Resultado en HTML
div+p	<div></div> <p></p>
div+h1+h2	<div></div> <h1></h1> <h2></h2>
div+p+bq	<div></div> <p></p> <blockquote></blockquote>
div+div+div	<div></div> <div></div> <div></div>

Cualquier nombre de un elemento HTML junto con el operador + producirá un HTML inclusive de elementos desconocidos:

Puedes usar el operador > para anidar elementos uno dentro del otro: Operador Hijo: >

Sintaxis Emmet	Resultado en HTML
div>h1	<div>     <h1></h1> </div>
div>ul>li	<div>     <ul>         <li></li>     </ul> </div>
div>article>p	<div>     <article>         <p></p>     </article> </div>

Emmet puede ayudarnos en especificar clases, tributos, Id’s y contenidos también utilizando los siguientes comandos:

Operador de atributo clase: .

Para especificar la clase (class) a la que pertenece el elemento.

Sintaxis Emmet	Resultado en HTML
div.row	<div class=”row”></div>
div.class1.class2	<div class=”class1 class2″></div>
div.header+div.footer combinado con operador de hermanos	<div class=”header”></div> <div class=”footer”></div>
div.row>h1.title combinado con operador hijo	<div class=”row”>     <h1 class=”title”></h1> </div>

Operador de id: #

Para especificar el Id del elemento

Sintaxis Emmet	Resultado en HTML
div#myDiv	<div id=”myDiv”></div>
h1#myId	<h1 id=”myId”></h1>
div#myrow+div#mytitle combinado con operador de hermanos	<div id=”myrow”></div> <div id=”mytitle”></div>
div.row#myrow+div.title#mytitle combinado con operador de hermanos y de clase	<div class=”row” id=”myrow”></div> <div class=”title” id=”mytitle”></div>
div.row#myRowId>div.title#myTitleId>h1#myh1Id combinado con operador de hijo y de clase	<div class=”row” id=”myRowId”>     <div class=”title” id=”myTitleId”>         <h1 id=”myh1Id”></h1>     </div> </div>
div.row#myRowId>p.myPClass#myPId+h1.TitleClass#TitleId combinado con operador de hijo, de hermano y de clase	<div class=”row” id=”myRowId”>     <p class=”myPClass” id=”myPId”></p>     <h1 class=”TitleClass” id=”TitleId”></h1> </div>

Texto: { }

Para escribir texto en el elemento:

Sintaxis Emmet	Resultado en HTML
h1{hello}	<h1>hello</h1>
div>label{Name:}	<div><label for=””>Name:</label></div>
a{mylink}	<a href=””>mylink</a>
div.card>h1{Card Title}+p.card–text#myId{Subtitle}	<div class=”card”>     <h1>Card Title</h1>     <p class=”card-text” id=”myId”>Subtitle</p> </div>

Notación de atributos: [ attr ]

Para especificar cualquier otro atributo del elemento

Sintaxis Emmet	Resultado en HTML
td[title=“Hello world!”]	<td title=”Hello world!”> </td>
div.card-body[[collapse]=false]	<div class=”card-body” [collapse]=”false”> </div>
input[type=”radio”]#myInput	<input type=”radio” id=”myInput”>

Multiplicación: *

Para definir cuántas veces se debe enviar el elemento:

Sintaxis Emmet	Resultado en HTML
div*5	<div></div> <div></div> <div></div> <div></div> <div></div>
li*3	<li></li> <li></li> <li></li>
div.row>div.col-md-3*4{MyText}	<div class=”row”>     <div class=”col-md-3″>MyText</div>     <div class=”col-md-3″>MyText</div>     <div class=”col-md-3″>MyText</div>     <div class=”col-md-3″>MyText</div> </div>

Modificadores a este comando usando múltiples $$$ (para anteponer Ceros):

Sintaxis Emmet	Resultado en HTML
div*5{myDiv$}	<div>myDiv1</div> <div>myDiv2</div> <div>myDiv3</div> <div>myDiv4</div> <div>myDiv5</div>
ul>li*3{$}	<ul>     <li>1</li>     <li>2</li>     <li>3</li> </ul>
div.row>div.col-md-3*4{MyText}	<div class=”row”>     <div class=”col-md-3″>MyText</div>     <div class=”col-md-3″>MyText</div>     <div class=”col-md-3″>MyText</div>     <div class=”col-md-3″>MyText</div> </div>

Subir de nivel:

Sintaxis Emmet	Resultado en HTML
div+div>h1{MyH1}^div>h2{MyH2}	<div></div> <div>     <h1>MyH1</h1> </div> <div>     <h2>MyH2</h2> </div>
div>h1{MyH$}*3^div>h2{MyH$}*2^div>h3{MyH3$}*2	<div>     <h1>MyH1</h1>     <h1>MyH2</h1>     <h1>MyH3</h1> </div> <div>     <h2>MyH1</h2>     <h2>MyH2</h2> </div> <div>     <h3>MyH31</h3>     <h3>MyH32</h3> </div>