Sintaxis básica de una pagina Web

Sabemos que una página Web está formada por una serie de contenidos (que los introducimos utilizando elementos HTML5), colocados y mostrados de una determinada forma (esto lo conseguimos empleando reglas de estilo CSS3) y, a veces, permitiendo que el usuario pueda interactuar con algunos elementos (esto se consigue usando Javascript).

HTML (HyperText Markup Language)

Las etiquetas se abren y tienen que cerrarse de acuerdo al orden en el que han sido abiertas
Las etiquetas están encerradas entre los signos de menor (<) y de mayor (>)
La mayoría del marcado se realiza con dos etiquetas, una de apertura y otra de cierre: <etiqueta>... contenido ...</etiqueta>. Existen algunas excepciones a esta regla en las que solo se escribe una etiqueta de la siguiente forma: <etiqueta />
Es conveniente que los nombres de las etiquetas y atributos siempre estén escritos en minúsculas
El valor de los atributos siempre procuraremos encerrarlos entre dobles comillas

Esquema de un elemento HTML, por ejemplo un h1

elemento html

CSS (Cascading Style Sheets)

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML/HTML5 para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista, formulario, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

Separar los contenidos de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en numerosos dispositivos diferentes.

Esquema de una regla CSS, por ejemplo en el selector h2

regla css

Estructura básica de una página Web

Toda página Web consta de dos partes: 1) head y 2) body

esquema pag web

Que traducido a código HTML es:

<!DOCTYPE html>
<html lang='es'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, minimum-scale=1.0'/>
    <link rel='stylesheet' href='css/style.css'/>
    <title>Título de la Web</title>
</head>
<body>
    <div id='main'>
        <header>
            <h1>Hola, mundo</h1>
        </header>
        <section>
            ...
        </section>
        <footer>
            <h6>(cc) ... </h6>
        </footer>
    </div>
</body>
</html>