Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drako01/programacion_web_santino
Curso Completo de Desarrollo Web para Santino
https://github.com/drako01/programacion_web_santino
css3 flexbox-css grid html5 javascript sass visual-studio-code
Last synced: about 1 month ago
JSON representation
Curso Completo de Desarrollo Web para Santino
- Host: GitHub
- URL: https://github.com/drako01/programacion_web_santino
- Owner: Drako01
- Created: 2024-06-04T21:27:53.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-27T00:03:37.000Z (5 months ago)
- Last Synced: 2024-07-27T15:25:35.192Z (5 months ago)
- Topics: css3, flexbox-css, grid, html5, javascript, sass, visual-studio-code
- Language: HTML
- Homepage: https://github.com/Drako01/programacion_santino/wiki
- Size: 1.79 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ¡Creación de una página HTML usando buenas prácticas!
## Guía para Crear una Página HTML Usando Buenas Prácticas
## Introducción
Este documento tiene como objetivo guiarte a través del proceso de creación de una página HTML básica utilizando buenas prácticas. HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web y es fundamental para cualquier desarrollador web.
## Requisitos Previos
No se requieren conocimientos previos para seguir esta guía. Sin embargo, un editor de texto (como Visual Studio Code, Sublime Text o Atom) y un navegador web (como Google Chrome, Firefox o Safari) serán necesarios.
## Estructura Básica de un Documento HTML
Cada documento HTML debe seguir una estructura básica. Aquí tienes un ejemplo de la estructura mínima de una página HTML:
```html
Mi Primera Página HTML
Bienvenido a Mi Página
Este es un párrafo de ejemplo.
© 2024 Mi Nombre
```
### Descripción de la Estructura
1. ``: Declara el tipo de documento como HTML5.
2. ``: La etiqueta `` envuelve todo el contenido de la página. El atributo `lang="es"` define el idioma de la página como español.
3. ``: Contiene metadatos sobre el documento, como el juego de caracteres (`charset`) y el título (`title`) que se muestra en la pestaña del navegador.
4. ``: Define la codificación de caracteres como UTF-8.
5. ``: Hace que el diseño sea adaptable a diferentes tamaños de pantalla.
6. ``: Define el título de la página.
7. ``: Contiene el contenido visible de la página.
## Buenas Prácticas
### 1. **Uso de Etiquetas Semánticas**
Utiliza etiquetas HTML semánticas como ``, ``, ``, ``, y ``. Estas etiquetas ayudan a mejorar la accesibilidad y el SEO de tu página.
### 2. **Organización del Código**
Mantén tu código limpio y organizado. Utiliza la indentación y espacios en blanco para mejorar la legibilidad. Aquí tienes un ejemplo de una buena práctica:
```html
Ejemplo de Buenas Prácticas
Encabezado Principal
Sección 1
Contenido de la primera sección.
Sección 2
Contenido de la segunda sección.
© 2024 Mi Nombre
```
### 3. **Comentarios**
Utiliza comentarios para explicar secciones de tu código. Esto es útil para ti y para otros desarrolladores que puedan trabajar en tu código en el futuro.
```html
```
### 4. **Accesibilidad**
Asegúrate de que tu página sea accesible para todos los usuarios, incluyendo aquellos con discapacidades. Utiliza atributos como `alt` en las imágenes y `aria` en elementos interactivos.
```html
```
### 5. **SEO (Optimización para Motores de Búsqueda)**
Incluye metaetiquetas relevantes y usa etiquetas de encabezado (`
`, ``, etc.) de manera apropiada para mejorar el SEO de tu página.
```html
```
## Recursos Adicionales
- [Documentación de MDN Web Docs](https://developer.mozilla.org/es/docs/Web/HTML)
- [Curso de HTML en W3Schools](https://www.w3schools.com/html/)
- [Guía de Accesibilidad Web](https://www.w3.org/WAI/tips/developing/)
## Conclusión
Siguiendo esta guía, deberías ser capaz de crear una página HTML básica que siga buenas prácticas. Continúa explorando y aprendiendo más sobre HTML y otras tecnologías web para mejorar tus habilidades como desarrollador.
---
Autor: Alejandro Daniel Di Stefano
---