Para este mini tutorial vamos a comenzar en nuestro entorno de desarrollo, no importa cual si no con el que te sientas mas cómodo, en mi caso usare VC.
Una vez abierto vamos a crear una carpeta en nuestro escritorio y la llamamos mi primera pagina web.
Ahora abrimos visual code y abrimos la carpeta desde ahí y creamos un archivo llamado index.html.
Como paso siguiente es escribir nuestra etiqueta html:5 y damos a enter para generar nuestro DOCTYPE.
Dentro del elemento <style> en la sección <head>, define los estilos CSS para tu página web.
Puedes especificar estilos para elementos HTML específicos como <body>, <header>, <main>, <section>, <footer>, entre otros.
Define propiedades de estilo como font-family, background-color, color, padding, margin, border-radius, y más según tus necesidades.
Agrupa los estilos por secciones para mantener el código organizado y legible.
Estructura de Contenido en el Cuerpo de la Página
Añade el texto e información relevante a cada elemento HTML.
Abre el archivo HTML que esta en tu escritorio en tu navegador web para ver cómo se muestra tu página web con los estilos CSS internos aplicados.
Este enfoque utiliza HTML5 para definir la estructura y elementos semánticos de tu página web, junto con estilos CSS internos para dar formato y apariencia a esos elementos.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"type="text/css"href="styles.css"><title>Título de la Página</title></head><body><!-- Encabezado --><header><h1>Mi Página Web</h1><nav><ul><li><ahref="#">Inicio</a></li><li><ahref="#">Acerca de</a></li><li><ahref="#">Servicios</a></li><li><ahref="#">Contacto</a></li></ul></nav></header><!-- Contenido principal --><main><sectionid="intro"><h2>Bienvenido a mi sitio web</h2><p>Este es un sitio de ejemplo.</p></section><sectionid="servicios"><h2>Nuestros Servicios</h2><ul><li>Servicio 1</li><li>Servicio 2</li><li>Servicio 3</li></ul></section></main><!-- Pie de página --><footer><p>© 2023 Mi Empresa</p></footer></body></html><style>/* Resetear estilos predeterminados del navegador */body,
h1,
h2,
p,
ul,
li {
margin: 0;
padding: 0;
}
/* Estilos generales */body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
/* Encabezado */header {
background-color: #007acc;
color: #fff;
padding: 20px;
text-align: center;
}
navul {
list-style-type: none;
}
navulli {
display: inline;
margin-right: 20px;
}
/* Contenido principal */main {
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px0px10pxrgba(0, 0, 0, 0.1);
}
section {
margin-bottom: 20px;
}
/* Pie de página */footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>```
