Tutorial: Crear mi primera página Web
1-Estructura Básica del HTML:
Comienza con la etiqueta <html> y dentro de ella, incluye las etiquetas <head> y <body>.
En el <head>, puedes agregar el título de la página y los estilos css .
2-Encabezado de la Página:
Utiliza la etiqueta <header> para definir el encabezado.
Dentro del <header>, se incluye un título con <h3> y una barra de navegación <nav> con enlaces <a> dentro de una lista <ul>.
3-Sección de Biografía:
Usa la etiqueta <section> con un id para identificar la sección.
Agrega un subtítulo con <h2> y un párrafo <p> para el contenido de la biografía.
Se Incluye una imagen con la etiqueta <img>.
4-Pie de Página:
Define el pie de página con la etiqueta <footer>.
Se añade información de contacto y enlaces a redes sociales con <a> y <img>.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Mi Página Web</title>
<style>
</style>
</head>
<body>
<header>
<h3 class=“titulo”>Bienvenidos a mi página web</h4>
<nav>
<ul>
<li><a href=“index.html”>Biografia</a></li>
<li><a href=“hobbies.html”>Mis Hobbies</a></li>
</ul>
</nav>
</header>
<section id=“Biografia”>
<h2>Mi Biografia</h2>
<div class=“bio-content”></div></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit nulla cupiditate ipsam facilis quas recusandae, deserunt in, aspernatur quasi voluptatum voluptate ab itaque deleniti tempora doloribus. Dolorum ex dicta odio?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officiis odit doloremque temporibus? In quos labore omnis quia asperiores eius culpa vitae animi. Et, magni eius ab est laborum possimus?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas in sapiente aliquam doloribus dignissimos sunt illo, possimus nesciunt temporibus. Dicta aperiam totam maiores praesentium quas excepturi sequi cupiditate molestiae voluptate.
</p>
<img src=“https://images.pexels.com/photos/1633417/pexels-photo-1633417.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1” alt=“Imagen”>
</div>
</section>
<footer id="contacto">
<p>Contacto: <a href="#">[email protected]</a></p>
<img src="facebook_icon-icons.com_59205.svg" alt="">
<img src="youtube_14198.ico" alt="">
</footer>
</body>
</html>
**Para la segunda vista de la pagina copiamos la estructura base: **
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Mi Página Web</title>
<style>
</style>
</head>
<body>
<header>
<h3 class=“titulo”>Bienvenidos a mi página web</h4>
<nav>
<ul>
<li><a href=“index.html”>Biografia</a></li>
<li><a href=“hobbies.html”>Mis Hobbies</a></li>
</ul>
</nav>
</header>
<section id=“Hobbies”>
<h2>Hobbies</h2>
<div class=“Container”>
<div>
<img src=“https://images.pexels.com/photos/15644518/pexels-photo-15644518/free-photo-of-hombre-gente-hierba-cesped.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1” alt=“Futbol”>
<p>Me apasiona el fútbol porque es un deporte que combina estrategia, habilidad y trabajo en equipo. Disfruto tanto jugarlo como verlo, y siempre me emociona cada partido.</p>
</div>
<div>
<img src=“https://images.pexels.com/photos/1596095/pexels-photo-1596095.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1” alt=“Futbol”>
<p>La música es una de mis pasiones, me encanta tocar la guitarra y componer mis propias canciones. Es una forma de expresión que me permite conectar con mis emociones y con los demás.</p>
</div>
</div>
</section>
<footer id="contacto">
<p>Contacto: <a href="#">[email protected]</a></p>
<img src="facebook_icon-icons.com_59205.svg" alt="">
<img src="youtube_14198.ico" alt="">
</footer>
</body>
</html>
los estilos css para index.hml y hobbies.html son los siguientes:
Para index.html
<style>
nav ul{
list-style: none;
display: flex;
justify-content: flex-end;
padding: 0;
background: papayawhip;
}
nav ul li a {
text-decoration: none;
color: #FF7F50;
padding:16px;
border-radius: 5px;
}
nav ul li a:hover {
color: #000080;
}
.titulo{
text-align: center;
color: #000080;
}
#Biografia h2{
color: #000080;
}
#Biografia p{
display: flex;
align-items: flex-start;
text-align: left;
}
#contacto{
background: #FF7F50;
color: papayawhip;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
margin: 0;
}
#Biografia img{
display: block;
margin: 0 auto;
width: 300px;
height: 200px;
}
footer img{
width: 30px;
height: 30px;
}
footer p{
margin: 0;
}
</style>
Para hobbies.html
<style>
nav ul{
list-style: none;
display: flex;
justify-content: flex-end;
padding: 0;
background: papayawhip;
}
nav ul li a {
text-decoration: none;
color: #FF7F50;
padding:16px;
border-radius: 5px;
}
nav ul li a:hover {
color: #000080;
}
.titulo{
text-align: center;
color: #000080;
}
#contacto{
background: #FF7F50;
color: papayawhip;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
margin: 0;
}
.Container{
display: grid;
grid-template-columns: 300px 300px;
gap: 50px;
padding: 0px;
justify-content: center;
}
section div img{
width: 300px;
height: 300px;
}
section div p{
text-align: center;
}
footer img{
width: 30px;
height: 30px;
}
footer p{
margin: 0;
}
section h2 {
color: #000080;
}
</style>
