4º día: pagina en web
Sesión 4: Hacer página web en W3 Schools
En esta sesión vamos a hacer una versión de este blog en la web de W3Schools, la cual nos permite personalizar más aún la página, además de poder asignarle un mejor dominio público entre otras cosas:
Primero creamos una cuenta en la página, y una vez dentro vamos a la pestaña "Services▼" para crear una nueva página web gratis
Le asignamos el dominio (inventarse un nombre fácil de recordar)
En el menú "Files" tendremos varias pestañas con archivos, tendremos que crear 3 pestañas más para 3 tipos de estilos diferentes (.css)
Recordemos que el .html es el contenido "el texto" y el .md sirve para modificar el texto de este archivo para compartir información sobre su sitio web con otros o eliminarlo.
Como ejemplo el código Html para hacer mi página es:
<!doctypehtml>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<title>Página de prueba de la asignatura doble columna, encabezado y pie</title>
<link rel="stylesheet" type="text/css" href="styles.css" id="estilo">
</head>
<body>
<div id="container">
<div id ="header">
<h1>Sitio web de Óscar(SCM)</h1>
</div> <!--fin de header-->
<div id="menu">
<button type="button" onclick="cambiarArchivoCss('style1.css')">Cambio a estilo 1</button>
<button type="button" onclick="cambiarArchivoCss('style2.css')">Cambio a estilo 2</button>
<button type="button" onclick="cambiarArchivoCss('style3.css')">Cambio a estilo 3</button>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Sobre mi</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div> <!--fin de menu-->
<div id="mainContainer">
<div id ="content">
<h2>Página 1: El vídeo</h2>
<p>Historia del vídeo y aplicaciones</p>
<h2>Página 2: El audio</h2>
<p>Evolución del audio y aplicaciones</p>
<h2>Página 3: Hacer una página web </h2>
<p></p>
</div> <!--fin del content-->
<div id="sidebar">
<h3>Menu</h3>
<ul>
<li>Introducción</li>
<li>Proyectos</li>
<li>Enlaces</li>
</ul>
</div> <!--fin de sidebar-->
<div id="footer">
<p> Sistemas de comunicación Multimedia 2025</p>
</div> <!--fin de footer-->
<!--fin de container-->
</body>
</html>
Y los 3 estilos .css se basan en el código del style1.css que en mi caso es:
body{
font-family: arial,helvetica,sans-serif;
}
#container{
margin:0 auto;
width:100%;
}
#header {
background-color:#887e2f;
padding:10px;
}
#menu{
float:left;
width:100%;
background-color:#ae2c2c;
}
#menu ul li{
list-style-type:none;
display:inline;
}
#menu li a{
display:block;
text-decoration:none;
border-right:2px solid #ffffff;
padding: 3px 10px;
float: left;
color:#ffffff;
}
#menu li a:hover{
background-color: #cccccc;
}
#mainContainer{
float:left;
width:100%;
}
#content{
clear:left;
float:left;
width:65%;
padding: 20px 0;
margin: 0 0 0 5%;
display: inline;
}
#sidebar {
float:right;
width:30%;
padding: 20px 0;
margin: 0;
display: inline;
background-color:#ce6c1c;
}
#footer {
clear:left;
background-color:#dbd4c5;
text-align:center;
padding: 40px 0;
height:1%;
}
Con este ejemplo la intefaz que se genera es la siguiente:
Enlace a la página web en W3schools:
https://oscardm.w3spaces.com
.png)
Comentarios
Publicar un comentario