HTML 5 y CSS 3

Diseño Web Responsivo
#1

Empezando por lo básico

En primer lugar, como supongo ya sabes, la estructura de una página web se compone de las etiquetas html de apertura (<html>) y cierre (</html>) y que arropan a las dos partes del documento. Al <head> (apertura y cierre) y al <body> (apertura y cierre). Todo esto viene precedido por dos declaraciones obligatorias.
- La declaración del tipo de documento:
		<!DOCTYPE html>
		
Como ves, una declaración supersencilla. Antes, no era así.
- Y la declaración del idioma que vamos a emplear para escribir nuestro contenido:
		<html lang="es">
		
En nuestro caso lang (language), es, (español).
Luego en el head, tenemos que hacer, al menos, cuatro declaraciones.
- La primera el juego de caracteres que vamos a utilizar que, en nuestro caso es el UTF-8 que se corresponde con los caracteres del idioma español.
		<meta charset="utf-8">
		
- En segundo lugar, un tema importante para que nuestro sitio web sea "responsive", es decir que se pueda ver más o menos igual de bien, independientemente del device, es decir, del instrumento o herramienta con el que accedamos a la página web, sea ordenador PC, portátil, tablet o smartphone.
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
- En tercer lugar, un vínculo a la hoja de estilos que va a controlar y dar forma a las etiquetas de nuestro html. Es un link, un vínculo, a la ruta relativa en la que se encuentre nuestra hoja. Por ejemplo si se llama nuestro-estilo.css y está en la carpeta css que se encuentra en el mismo nivel que la página web desde la que se le llama, sería este código:
		<link rel="stylesheet" href="css/nuestro-estilo.css">
		
- Y, por último, e importante para los motores de búsqueda, es poner un título a tu página. Un title. En este caso, hemos puesto esta etiqueta:
		<title>HTML 5 y CSS 3</title>
		
Y ya, en el body, que va a ser lo que el visitante vea en su pantalla, escribimos todo lo que haga falta.
Por poner nuestro primer contenido, podría ser un título (que podría ser el mismo que hemos puesto en el head. Para ello, lo colocamos entre las etiquetas de <h1> y </h1>. Se podría hacer de otras muchas formas pero, si queremos que nuestra web sea encontrada por los motores de búsqueda, esta forma de definir el contenido, entre las etiquetas <h1> que hace referencia a head, cabeza, siendo el h1 (llega hasta h6 la de mayor tamaño), ya decimos, ayuda a los robots a identificar el tema del contenido de la web.
		<body>
			<h1>HTML 5 y CSS 3</h1>
		
Resumiendo, este sería el código que hemos escrito en nuestra primera página:
	<!DOCTYPE html>
		<html lang = "es">
   		<head>
	   		<meta charset="utf-8">
	   		<meta name="viewport" content="width=device-width, initial-scale=1">
			<link rel="stylesheet" href="css/nuestro-estilo.css">
	   		<title>HTML 5 y CSS 3</title>
   		</head>
   		<body>
	   		<h1>HTML 5 y CSS 3</h1>
	   		...
   		</body>
		</html>
		
Puedes ver, en una ventana nueva emergente, la página web con este mínimo contenido en funcionamiento. Hemos puesto el title en el head y el título (<h1>) del primer documento, como "HTML 5 y CSS 3". Una vez abierta esta página, puedes usar el botón derecho de tu ratón para acceder al código fuente y comprobar la sintaxis. Pulsa para ver esta mínima página web en ventana emergente
Página 1 Página 2 Página 3 Página 4 Página 5 Página 6 Página 7 Página 8 Página 9 Página 10 Página 11 Página 12 Contenidos
Icono de licencia Creative Commons

Ángel Ricardo Puente Pérez 2023

Icono del W3C Validator