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><htmllang="en"><head><metacharset="UTF-8"><metaname="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><ahref="https://www.w3schools.com/html/html_responsive.asp">Ejemplos de páginas responsive</a></li><li><ahref="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: 20px0;
}
nav {
background-color: #444;
padding: 10px0;
}
navul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
navulli {
display: inline;
margin: 010px;
}
navullia {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px0;
}
</style>3.4)_. Hemos culminado! Ahora haz click en cuadrar tu archivo html y visualízalo en tu navegador! 😃
