Vamos aprender el curso HTML/CSS desde cero.
-El CSS se puede nombrar como nombre de la etiqueta (Ejemplo H1)
-El nombre de la clase se pondría (Por ejemplo el menú)
-Y en HTML seria class="menú"
-O se puede poner como #menú y en el CSS / Y id="menú" en HTML
En la clase 4 vamos hacer una carpeta llamada clase4 y en ella haremos carpetas dentro; llamadas CSS donde meteremos los estilos, IMG donde meteremos la imagen o logo, y paginas donde meteremos más de una.
-Creamos también un archivo llamado index.html (Todo referente y base a la clase 3)
Tenemos la base de la clase 3 (Aquí vemos el HTML, con su head, y su body, en el body hemos añadido un logo referente a la carpeta img, luego hemos añadido menú con su h3 que es el tamaño en el que lo vamos a ver tambien vemos en body
En el CSS de al lado vamos a colocar los estilos.
<html>
<head>
<meta charset="utf-8">
<title>clase3title>
<link rel="stylesheet" href="css/estilo.css">
head>
<body>
<div class="logo">
<img src="img/logo_ivardev.png">
div>
<div id="menu">
<h3>menuh3>
<ul>
<li><a href="index.html">Homea>li>
<li><a href="paginas/pagina1.html">Página 1a>li>
<li><a href="paginas/pagina2.html">Página 2a>li>
ul>
div>
<div class="contenido">
<h3>otroh3>
<h1>títuloh1>
<p>esta es mi pagep>
<a href="paginas/pagina1.html">ir a página 1a>
div>
body>
html>
En este CSS (Vamos a usar el margin margen exterior y padding margen interior)
.logo{ text-align:center; background-color: #CCCCCC; }
#menu {background-color: cornflowerblue; width:25%;float:left;}
.contenido {background-color: #F0F0F0; width: 75%; float:left; }
h1 {color: #000FFF; font-size:100px;}
p {color:rgb(156, 120, 0); font-size:xx-large;}
-
Queremos quitarle el margen al body por ese motivo vamos a cambiarle el margen de fuera que sería margin.
body {margin:0; background-color: aquamarine;}
Para el logo vamos a quitarle interior y exterior entonces utilizaremos margin y padding. (Hay muchas formas de ponerlo, si ponemos todas solo hará caso al ultimo) En este caso queremos enseñar el ejemplo de todas las formas posibles. Una hace todo otra hace a cada cosa una forma
.logo{
padding: 40px; /* Esto haria padding en todos los lados*/
padding: 40px 0; /* Si ponemos esto seria padding 40 arriba y abajo y 0 en los lados*/
padding: 40px 20px 30px 10px; /* 40 arriba 20 derecha 30 abajo y 10 izquierda*/
padding-top: 40px;
padding-bottom: 30px;
padding-right: 20px;
padding-left: 10px; /*Esto es lo mismo que lo anterior escrito con mas palabras, el margin funciona igual */
Vamos a poner ahora estilos para el menú que como esta mostrado en HTML ID. Lo ponemos con #
#menu{padding: 20px 0px;}
h3 {margin-left: 10px; font-size: 20px;}
Así modificaríamos todos los estilos llamados h3 , si no queremos modificarlos todos deberíamos hacer una llamada al estilo compuesto #menu h3
#menu h3 {margin-left: 50px; font-size: 40px;}
Estos modificaría solo los estilos h3 que estan dentro de la capa id="menú"
Tenemos creada la pagina 1 y la duplicaremos para tener otra llamada pagina2 exactamente igual que la 1.
-En las dos hemos metido su H1. Un problema que nos podemos encontrar con las tildes es que no lea el español y nos salgan letras extrañas, por ello debemos colocar en head la etiqueta: <meta charset="utf-8"> Y nos arreglara el idioma.
Ahora tenemos 3 paginas index, pagina1,pagina2 para poder navegar entre ellas, enlazándolas.
<html>
<head>
<meta charset="utf-8">
<title>página 1title>
<link rel="stylesheet" href="../css/estilo.css">
head>
<body>
<div class="logo">
<img src="../img/logo_ivardev.png">
div>
Tenemos nuestro menú con titulo puesto en H3. La ul significa los bloques que nos guarda, y li donde los escribimos. En este caso estamos llamado a las paginas nombradas.
<div id="menu">
<h3>menuh3>
<ul>
<li><a href="../index.html">Homea>li>
<li><a href="pagina1.html">Página 1a>li>
<li><a href="pagina2.html">Página 2a>li>
ul>
div>
div class="contenido">
<h1>Página 1h1>
<a href="../index.html">volver a indexa><br>
<a href="https://www.ivardev.com" target="_blank">ir a ivardeva>
div>
body>
html>
Aquí tenemos la pagina 2 duplicada de la pagina 1.
<html>
<head>
<meta charset="utf-8">
<title>página 1title>
<link rel="stylesheet" href="../css/estilo.css">
head>
<body>
<div class="logo">
<img src="../img/logo_ivardev.png">
div>
<div id="menu">
<h3>menuh3>
<ul>
<li><a href="../index.html">Homea>li>
<li><a href="pagina1.html">Página 1a>li>
<li><a href="pagina2.html">Página 2a>li>
ul>
div>
<div class="contenido">
<h1>Página 2h1>
<a href="../index.html">volver a indexa><br>
<a href="https://www.ivardev.com" target="_blank">ir a ivardeva>
div>
body>
html>
En definición lo que hemos querido crear es una pagina que nos lleva a los enlaces creados, Si estamos en home y queremos ir a pagina 1 nos lleva allí, mediante enlaces.
