Pasemos a ver la estructura básica de una página web html y empezamos en este mismo capítulo a crear una página web desde cero.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Curso PC Máster</title>
</head>
<body>
<p>En el body, se muestra el contenido en el navegador.</p>
</body>
</html>
Doctype html
Lo primero que encontramos es el "doctype" que proviene del inglés "document type" (tipo de documento). Esta declaración sirve para especificar que el docuemento está en cierta versión de html (también otros documentos que no son html). En la página de ejemplo que te estoy mostrando, al especificar solo html, estoy expresando que quiero que este archivo o documento esté escrito en la versión de html5 (la más moderna hasta la fecha).
No le des demasiada importancia a esta primera línea por el momento.
La etiqueta <html>
Empezamos con la estructura de la página html. Primero encontramos la etiqueta <html> la cual engloba el contenido de todo el documento. Fíjate donde tiene el cierre, al final del todo.
Dentro de esta etiqueta general de html, tenemos las dos sub etiquetas que lleva siempre todo documento html. El <head> y el <body>.
El <head> de HTML
El <head> (cabecera en español) sirve para colocar ahí etiquetas para cosas algo técnicas, como enlazar hojas externas, cargar estilos para la página, especificar cosas para que los navegadores puedan encontrar nuestra web, etc. Prácticamente, todo lo que se expresa aquí, no se le muestra al usuario.
El <body> de HTML
El <body> (cuerpo en español) es la parte que va a mostrar cosas para el usuario en el navegador. Por este motivo, puesto que la <p> de párrafo está ahí colocada, se va a mostrar al usuario.
Ten en cuenta que cada etiqueta html va en una de esta dos zonas, no tiene sentido poner una <p> en el <head>, por ejemplo, ya que no se le mostraría el párrafo al usuario.
Las etiquetas <meta> y <title>
En el <head> de este ejemplo, hay dos etiquetas más. Una que no tiene cierre (<meta>) (hay algunas etiquetas html que solo necesitan apertura) y otra llamada <title>.
La primera sirve para especificar la codificación de caracteres. De momento, la vamos a dejar así, en utf-8. Ya entraremos en detalle con esto más adelante.
La etiqueta <title> sirve para especificar el título de la página en la barra de título/pestañas del navegador. Fíjate en la imagen que en el título de la pestaña, sale lo de la etiqueta <title>. Esta es una de las pocas cosas del <head> que va a ver el usuario.
Crea tu primera página web
Vamos a crear una página web sencilla con la estructura anterior. Lo que yo haré, será una sencilla página de tienda de informática (va a ser superbásica para empezar).
Para seguir esta práctica, escoge un tema (puedes elegir el mismo que yo si quieres). Una web de un taller, de un bar, de una panadería, un restaurante...
Vamos a nuestro proyecto creado con Visual Studio Code anteriormente. Borra cualquier página html que tengas.
1- Crea un nuevo archivo html. Yo lo llamaré "informatica.html".
2 - Utiliza para la página la estructura de arriba o escríbela desde cero si quieres practicar e ir memorizándola.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>3 - Cambia el título.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Informática PC MÁSTER</title>
</head>
<body>
</body>Los títulos h o encabezados HTML
4 - Añade un título en el <body>. Será el título de la tienda que vea el usuario.
Para ello, tienes que saber que son los títulos h, cabeceras html o encabezados html (los puedes llamar de estas formas). Lo de h, viene de "headings" en inglés.
En HTML tenemos seis tamaños para los títulos. Estos se especifican con las etiquetas <h1> hasta <h6>
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
El encabezado más grande es el <h1> y el <h6> el más pequeño.
Aquí puedes ver como se pone el título:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>La tienda de PC Máster</title>
</head>
<body>
<h1>Informática PC MÁSTER</h1>
</body>Al cargar esto en el navegador, podemos ver el título en grande:
5 - Ahora, añade un subtítulo (un título más pequeño que el principal). Este lo podemos especificar con una etiqueta <h2>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>La tienda de PC Máster</title>
</head>
<body>
<h1>Informática PC MÁSTER</h1>
<h2>Servicio técnico</h2>
</body>Por cierto, es importante que al escribir, te vayas fijando siempre en como lo hago yo. Es importante seguir un orden en la escritura para que se vea todo bien y sea fácil de editar por nosotros u otras personas en el futuro.
Fíjate que las etiquetas que pertenecen al <head>, las pongo indentadas o tabuladas, para que se vea a simple vista, que son etiquetas que pertenecen al <head>. En el <body> lo mismo.
También, ¿ves que he añadido una línea vacía entre el <head> y el <body>? También lo he hecho con las etiquetas <h1> y <h2>. Estos espacios y tabulaciones, sin ignorados por el navegador web, de modo, que solo los pongo para claridad en el documento html.
Perfecto. Mira como el título <h2> es más pequeño que el <h1>:
6 - Para terminar con la parte del texto de la página, escribe un de párrafo después del título <h2> y algunos títulos más de diferentes tamaños como en este ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>La tienda de PC Máster</title>
</head>
<body>
<h1>Informática PC MASTER</h1>
<h2>Servicio técnico</h2>
<p>Contamos con el mejor servicio técnico para todo tipo de equipos informáticos. PCs, laptops, smart TV, smartphones...</p>
<h2>Servicio de ventas</h2>
<p>Contamos con un excelente servicio de ventas con unos precios increíbles.</p>
<h3>Contacto</h3>
<p>Puede contactarnos a través de nuestro número de teléfono, email o visitándonos en nuestra tienda física.</p>
</body>
En el siguiente capítulo, vamos a formatear el texto para añadirle negrita, cursiva, subrayado, etc.
No te pierdas nada este enorme curso de desarrollo web.
soy estudiante de informatica y el profesor mando hacer una pagina web pero no nos dio los topico para realizarla osea estamos en cero en la programacion de dicha pagina agradeceria de su apoyo para poder orientarno en la realizacion de la pagina como tal
excelente