En esta clase, usaremos una única carpeta “clase 3” que contenga todos los archivos de nuestra práctica.
Usamos esta carpeta en Visual code con “abrir carpeta”.
Vamos a crear una estructura básica de un sitio web.
Creamos una carpeta que llamamos “img” y otra “css”. En img incluiremos imágenes y en css archivos css.
Creamos un archivo en el directorio raiz (clase 3) que nombraremos como “index.html”. El nombre de index.html es el que se utiliza para la página principal de un sitio.
Creamos estructura básica html.
<html>
<head>
<title>clase3title>
head>
<body>
body>
html>
Vamos a mostrar un logo png en el body, el png está colocado en la carpeta img
<html>
<head>
<title>clase3title>
head>
<body>
<img src="img/logo_ivardev.png">
body>
html>
Vamos a colocar el logo en el centro de la página, para eso creamos una capa que lo contenga con la clase “logo”.
<html>
<head>
<title>clase3title>
head>
<body>
<div class="logo">
<img src="img/logo_ivardev.png">
div>
body>
html>
Creamos ahora un archivo css, dentro de la carpeta css, que llamaremos estilo.css. Creamos la clase “logo” en el archivo css.
.logo{ text-align:center; }
Tenemos que inlcuir la referencia al archivo css en el código html.
<html>
<head>
<title>clase3title>
<link rel="stylesheet" href="css/estilo.css">
head>
<body>
<div class="logo">
<img src="img/logo_ivardev.png">
div>
body>
html>
Ahora el logo se muestra en el centro porque tiene la clase “logo” definida en el archivo estilo.css.
Vamos a incluir más código y estilos:
<html>
<head>
<title>clase3title>
<link rel="stylesheet" href="css/estilo.css">
head>
<body>
<div class="logo">
<img src="img/logo_ivardev.png">
<h1>títuloh1>
<p>esta es mi pagep>
div>
body>
html>
.logo{ text-align:center; }
h1 {color: #000FFF; font-size:100px;}
p {color:blueviolet; font-size:xx-large;}
El estilo de las etiquetas se pueden definir en el css para todos los casos, nombrando la etiqueta. Si usamos la clase solo se aplicará el estilo a la etiqueta que lo tenga.
Todo está centrado porque se encuentra dentro de la etiqueta div.
Vamos a crear una estructura de página, con una capa superior centrada y dos columnas abajo. Lo hacemos creando distintas capas.
<html>
<head>
<title>clase3title>
<link rel="stylesheet" href="css/estilo.css">
head>
<body>
<div class="logo">
<img src="img/logo_ivardev.png">
div>
<div class="menu">
menu
div>
<div class="contenido">
<h1>títuloh1>
<p>esta es mi pagep>
div>
body>
html>
.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:blueviolet; font-size:xx-large;}
Creamos ahora una página nueva, dentro de una nueva carpeta, que nombramos “paginas”. La página nueva se llamara “pagina1.html”.
Creamos estructura similar, teniendo en cuenta que al estar en una carpeta, las referencias externas (css / img) deben hacerse subiendo un nivel, con ../
<html>
<head>
<title>página 1title>
<link rel="stylesheet" href="../css/estilo.css">
head>
<body>
<div class="logo">
<img src="../img/logo_ivardev.png">
div>
<div class="menu">
menu
div>
<div class="contenido">
div>
body>
html>
Vamos a crear una navegación básica, entre index.html y pagina1.html.
Para crear enlaces, se usa la etiqueta a.
<html>
<head>
<title>clase3title>
<link rel="stylesheet" href="css/estilo.css">
head>
<body>
<div class="logo">
<img src="img/logo_ivardev.png">
div>
<div class="menu">
menu
div>
<div class="contenido">
<h1>títuloh1>
<p>esta es mi pagep>
<a href="paginas/pagina1.html">ir a página 1a>
div>
body>
html>
<html>
<head>
<title>página 1title>
<link rel="stylesheet" href="../css/estilo.css">
head>
<body>
<div class="logo">
<img src="../img/logo_ivardev.png">
div>
<div class="menu">
menu
div>
<div class="contenido">
<a href="../index.html">volver a indexa><br>
<a href="https://www.ivardev.com" target="_blank">ir a ivardeva>
div>
body>
html>
Con estos enlaces se puede saltar de una página a otra, o a un enlace externo. Si se usa el atributo “_blank” se abre una nueva ventana.
