cursos/html/freecodecamp-es-2024

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.

Referencias

• freeCodeCamp Español - Aprende HTML y CSS: Curso Desde Cero.
• MDN Web Docs (Mozilla Developer Network) - Documentación de HTML.
• Wikipedia - Código de idiomas ISO 639-1.
• Google HTML/CSS Style Guide.