De entrada al crear un proyecto Web Application tenemos
<html>
<head>
<title>Mi Pagina Web HTML5</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
/*Esta linea es para hacer relación con nuestro estilo con terminación .css */
<link rel="stylesheet" type="text/css" href="css/estilo2.css">
/*href se refiere a la carpeta que creaste dentro de tu proyecto y el nombre del archivo observa
el articulo HTML desde NeatBeans*/
</head>
/*head indica la cabecera aquí colocamos el nombre y descripción de nuestra pestaña*/
<body>
/* Aquí es donde comenzaremos a trabajar. En este lugar se aloja todo el contenido de nuestra
pagina web*/
</body>
</html>
Comenzaremos a trabajar dentro del <body> y a programar nuestro archivo .css
para poder realizar esto debemos crear un id a todos nuestros elementos
<body id="bodyWeb">
<header id="headerWeb">
/*Una opcion para centrar el titulo es <h1 align="center">Titulo</h1>*/
<h1>Mi pagina web html</h1>
</header>
<nav id="navWeb">
/*nav es un menú de selección*/
<ul>
<li>
<a href="index.html"> Inicio </a>
/*a href="index.html" Se refiere a un link */
</li>
<li>
<a href="index.html"> Contacto </a>
</li>
<li>
<a href="index.html"> Informacion </a>
</li>
</ul>
</nav>
<div>
/*div Es un contenedor de textos aquí podemos colocar todo el contenido de nuestra pagina*/
<aside id="asideWeb">
Es una barra lateral donde colocamos algunos temas relacionados
</aside>
<section id="sectionWeb">
/*En section colocamos todo el contenido principal de nuestra pagina*/
<article>
<header>
<h3>Titulo de mi articulo o publicacion</h3>
</header>
<img src="imagenes/Imagen2.jpg" width="500px" height="350">
/*src indica la carpeta que contiene la imagen y su nombre de la imagen con su
extensión*/
<p>
<h4>Parrafo</h4>
</p>
<footer>
<h5>Puede ser pie de pagina</h5>
</footer>
</article>
</section>
<footer id="footerWeb">
<h5>Derechos de autor y términos de la pagina</h5>
/*h5 Indica el tamaño de la letra*/
</footer>
</div>
</body>
Si ejecutáramos en este momento nuestro proyecto seria un desorden total para eso tenemos que programas todos los id en nuestro archivo con terminación .css. Estos son algunos comandos para dar formato a nuestra pagina
/*Resetear el navegador*/
*
{
margin: 0px;
padding: 0px;
list-style: none;
}
/*Etiquetas*/
body
{
background-color: #333333;
}
#headerWeb
{
width: 80%; /*Espacio ocupado en la pagina web*/
background-color: #821835; /*Color del fondo*/
max-width: 1100px; /* Máximo de espacio que ocupara en la pagina*/
margin: 5px auto;/*Espacio entre un componente y el siguiente*/
height: 60px;/*Altura*/
text-align: center;/* Alineación del texto al centro*/
}
#headerWeb h1
{
color: #82b6cd;
}
#navWeb
{
width: 80%;
background-color: #003155;
max-width: 1100px;
margin: 2px auto;
}
#navWeb ul
{
padding: 10px;/*Otra forma de dimensionar un elemento*/
}
#navWeb ul li
{
display: inline; /*Tipo de alineación de las lineas dentro del ul*/
}
#navWeb ul li a
{
text-decoration: none;/*Hipervínculos sin subrayado*/
color: #ffffff;
font-size: 17px;/*Tamaño de letra*/
font-weight: bold;/*Formato de letra en negrita*/
}
#navWeb ul li a:visited
{
text-decoration: none;
color: #119cff;
}
#navWeb ul li a:hover
{
font-size: 15px;
background-color: #0091b3;
}
#asideWeb
{
background-color: #486a9a;
float: right;
width: 19.7%; /*Ancho*/
margin-right: .3%;/*Margen derecho*/
color: #b30a06;
max-height: 1100px;/*Altura máxima*/
height: 100px;/*Altura inicial*/
}
#divWeb
{
color: #003155;
width: 80%;
max-width: 1100px;
margin: 5px auto;
background-color: #006287;
}
#sectionWeb
{
background-color: #a0afc8;
width: 80%;
}
.reiniciar
{
clear: both;
}
#footerWeb
{
background-color: #003155;
font-family: sans-serif;/*Tipo de letra*/
clear: both;
font-size: 12px;
color: #ffffff;
width: 100%;
max-width: 1100px;
height: 50px;
}
 |
| Así quedaría nuestra pagina |
Esto es solo el comienzo aprenderemos mas en las próximas publicaciones dudas o aclaraciones gto.aje.2@hotmail.com
Podria hacer un video tutorial, Muchas Gracias :) Like!!
ResponderEliminar