- lenguaje HTML: crea la estructura, los apartados, el sitio necesario para poner cosas ( < > )
- lenguaje CSS: crea la apariencia de lo que pongamos ( [ ] )
- lenguaje JavaScript (no confundir con Java): que crea la funcionalidad y el dinamismo de lo que pongamos ({ ;})
Para programar necesitamos crear un archivo. Lo haremos con cualquier programa como el "bloc de notas", el "notepad ++", el "Visual Studio Code" entre otros. De estos tres el visual Studio Code es el más completo. Diferencia los elementos que escribamos con colores, automáticamente, facilitando la comprensión de la estructura. El archivo creado lo guardamos con el nombre deseado, seguido de la extensión ".html". Este archivo lo podemos abrir con el Visual Code por un lado, para editarlo y también podemos abrirlo con el navegador Internet Explorer, o Google Chrome, o Mozilla Firefox, para ver cómo se ve lo que programamos.
Lenguaje HTML:
Consiste en indicar al programa qué hacer, con comandos metidos dentro de "etiquetas", es decir, comandos escritos entre los símbolos "menor qué " y "mayor qué" (< >). Toda etiqueta debe abrirse "<comando>" y cerrarse, es decir "</comando>", con la barra invertida antes del comando y dentro de los símbolos < >.
La estructura básica de un archivo vendrá dada por 3 etiquetas: html, head, body.
<html>
<head>
</head>
<body>
</body>
</html>
Algunas etiquetas de comandos fundamentales son:
- Antes de la etiqueta "html" se suele poner la etiqueta <!DOCTYPE html> que es sólo un comentario.
- <title>: Dentro de Head, nombre de la pestaña del navegador.
- <h1>: Dentro de Body, las etiquetas h1 a h7 son títulos y subtítulos dentro de la página del navegador.
- <p>: Incrementa el espaciado entre líneas, creando párrafos.
- <img src="imagen.ext">: Inserta una imagen de la misma carpeta donde esté el archivo. Esta etiqueta no necesita cierre. "src" signfica source, fuente.
- <a href=" ">: es un hipervínculo. Entre las comillas de la etiqueta de apertura del comando, ponemos la dirección http del enlace. Entre las etiquetas de apertura y cierre, ponemos la palabra que queremos que sea el hipervínculo: <a href=" "> hipervínculo </a>. Si queremos que el hipervínculo no sea una palabra, sino una imagen, basta sustituir la palabra entre las etiquetas, por la etiqueta de imagen <img src="imagen.png">.
