README.md 3.4 KB
freeCodeCamp español
Aprende HTML y CSS - Curso Desde Cero.
Notas
- HTML: Hyper Text Markup Language (lenguaje de marcado de hyper texto). Es un lenguaje que nos permite definir la estructura de una página web. Estructura el contenido y no su presentación visual. La extensión de archivos que se utiliza es
.html. - CSS: Cascading Style Sheets (hojas de estilo en cascada). CSS define la presentación visual de la estructura declarada con HTML. La extensión de archivos que se utiliza es
.css. - JavaScript es un lenguaje de programación que nos permite agregar funcionalidades a una página web (que sea interactiva). La extensión de archivos que se utiliza es
.js. - Elemento (Elements): es un componente básico de un documento HTML y sirven para definir la estructura del contenido de una página web.
- Etiquetas (Tags): permite definir los elementos de un documento HTML y los tipos de elementos que se van a crear. Normalmente requieren de una etiqueta de apertura y una etiqueta de cierre. Algunos elementos no requieren de etiquetas de cierre (Self-closing Tags).
- Normalmente se utilizan 2 espacios para la indentación.
- Se recomienda utilizar solo un encabezado de primer nivel
<h1>...</h1>en un documento HTML. - Definir los tipos de elementos adecuados para el contenido de un documento en HTML permite leerlo más fácil y ayuda al posicionamiento en buscadores (Search Engine Optimization - SEO) y en la accesibilidad.
- Se recomienda utilizar un solo elemento
<main>...</main>dentro de un documento HTML para representar el contenido principal del documento. - El atributo
rel="noopener noreferrer"previene de ataques de seguridad Tabnabbing, donde la pestaña de origen se reemplaza.noopener: impide que la página enlazada acceda a la página que lo enlazó.noreferrer: impide enviar información a la página que se enlaza.
- El elemento
<section>...</section>permite definir secciones en un documento HTML, como capítulos, encabezados, pies de página u otras secciones del documento. Es un elemento semántico que ayuda con el SEO y la accesibilidad. - La etiqueta
<strong>...</strong>indica que una parte de un texto es importante o urgente. - La etiqueta
<em>...</em>coloca énfasis en una palabra o frase específica. - La etiqueta
<s>...</s>indica que una parte de un texto ya no es correcto, preciso o relevante. Es información que estuvo presente durante un tiempo, pero se ha modificado posteriormente. - Las etiquetas
<input>y<button>...</button>son elementos de línea. - La etiqueta
<label>...</label>de un formulario ayudan a asociar el texto de un elemento<input>con el propio elemento<input>.
Atajos VScode
- Ctrl + n: Crea un nuevo archivo.
- Ctrl + [: Elimina una indentación.
- Ctrl + ]: Agrega una indentación.
- Alt + z: Visualiza el código de un archivo al tamaño de la pantalla.
- Ctrl + /: Comenta un bloque de código.