Hola chic@s mi nombre es César y les mostraré como elaborar rápidamente una pagina web sencilla responsive que podrás ver perfectamente en cualquier dispositivo movil incluyendo iPhone:
1). En primer lugar debes contar con un sencillo editor de textos, puede ser notepad, block de notas, notepad++ etc.
2). Una vez que tengas tu editor de texto abierto crea un archivo en blanco (vacío) con el siguiente nombre, por ejemplo: pagina-web.html (es importante que la extensión del archivo sea .html para que así el navegador pueda interpretarla como un archivo web html)
3)_. Vamos a comenzar a colocar el codigo html en tu pagina:
Super facil!
3.1)_. Coloca la siguiente estructura en tu archivo en blanco:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Responsive para iPhone</title>
</head>
<body>
</body>
</html>
Con ello nos aseguramos de que nuestro archivo posee codigo html y las estructuras basicas como cabecera (head), cuerpo (body).
**3.2)_. Ahora vamos a colocarle información a tu pagina web: **
En la sección de la cabecera vamos a agregarle el titulo de tu pagina de la siguiente forma:
<title>Web Responsive para iPhone :)</title>
3.3)_. En el Body colocaremos lo siguiente:
<header>
<h1>Web Responsive para iPhone :)</h1>
</header>
<nav>
<ul>
<li><a href="https://www.w3schools.com/html/html_responsive.asp">Ejemplos de páginas responsive</a></li>
<li><a href="https://www.linkedin.com/in/césar-enrique-romero-66aa73294">Acerca de mi jeje</a></li>
</ul>
</nav>
<main>
<section>
<h2>Pagina Web Resposive </h2>
<p>Esta sencilla pagina web puedes visualizar sin problemas desde cualquier dispositivo móvil.</p>
</section>
</main>
<footer>
<p>César Enrique Romero - 2024</p>
</footer>
3.3)_. Finalmente vamos a darle colorido a tu pagina con estilos ccs:
En la seccion de la cabecera (Head) justo debajo del titulo coloca el siguiente código:
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
nav {
background-color: #444;
padding: 10px 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
</style>
3.4)_. Hemos culminado! Ahora haz click en cuadrar tu archivo html y visualízalo en tu navegador! 😃
Curso de Frontend Developer
