La segunda tecnología es CSS, siglas de Cascading Style Sheets o hojas de estilo en cascada, es un lenguaje de diseño gráfico y sirve para editar el aspecto de los elementos HTML permitiendo cambiar el color, tamaño, forma, fuentes, distribución de los elementos en la pantalla, etc. Su función es dictar todo el aspecto visual de la página, si el sitio fuera una persona, CSS sería como la piel, la forma, el peinado y la ropa.
La tercera tecnología es JavaScript, de las tres es el único lenguaje de programación y sirve para agregar interactividad al sitio, hacer que reaccione a eventos, opere con datos ingresados por el usuario, etc, si el sitio fuera una persona, JavaScript sería todos los sistemas, necesarios para darle vida.
Estas tres tecnologías constituyen lo que en desarrollo web se conoce como front-end, la parte del sitio que es visible para el usuario y con la que este interactúa, luego está el back-end que es lo que pasa por debajo, donde entran temas como bases de datos, programación del lado del servidor, etc, pero ya hablaremos de eso en otro momento, bastante más adelante. Por ahora veamos HTML, que es lo primero a aprender en todo este mundo.
Para empezar a escribir código HTML se necesita un editor de texto, puede ser el bloc de notas o cualquier editor para programar como Visual Studio Code, Atom o Sublime Text, yo uso Atom. El archivo debe llevar la extensión html, así el navegador podrá abrirlo. A continuación el código de una página básica, al ejecutar esto en tu navegador verás una página en blanco con "Hola, mundo!" arriba a la derecha.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Un dos tres probando, probando</title>
</head>
<body>
<p>Hola, mundo!</p>
</body>
</html>
La primera linea sirve para indicarle al navegador la versión de HTML que se está usando, en este caso se le indica html, que representa la versión HTML5, la más actual.
En HTML casi todos los elementos están compuestos por una etiqueta de apertura, como <html> y su correspondiente etiqueta de cierre </html> y pueden tener atributos como lang, cuyos valores van entre comillas y en este caso es "es", lo que le indica al navegador que el contenido de la página estará en idioma español, en caso de inglés sería "en". Lang es un atributo de la etiqueta html. Toda la página completa va dentro del elemento <html></html>, por eso su etiqueta de cierre </html> está al final de todo.
Dentro de <html></html> hay dos secciones principales: <head> y <body>, head es la cabecera, dentro van etiquetas como title, que contiene el texto que aparecerá como titulo de la pestaña y otros datos para indicarle cosas al navegador como la etiqueta <meta> con su atributo charset, esta etiqueta no lleva etiqueta de cierre ya que no hay nada dentro de ella. Cuando head finaliza con su etiqueta de cierre </head>, empieza body.
En body estará todo lo que es visible para el usuario, como un párrafo de texto, que se representa con la etiqueta <p></p>, si quieres agregar otro párrafo debajo del hola mundo tendrías que poner <p>Esto es otro párrafo</p>. En body va toda la página que el visitante ve: textos, imágenes, barras de navegación, publicidad, links, etc. Por medio de etiquetas le indicaremos al navegador qué es cada cosa, así sabe que lo que hay dentro de <p> es un texto.
Y bueno, esa es la estructura básica de un html, siempre es la misma y para añadir más cosas simplemente hay que ir agregándole más etiquetas que veremos en el futuro porque creo que por hoy ya es suficiente. Cabe destacar que un sitio web está formado por varios archivos html, cada uno de los cuales forma una página, así podrías tener un html para home, otro para la página de contacto, otro para la sección de fotos, etc. Una página web no es lo mismo que un sitio. Y eso es todo por hoy, adiós.
No hay comentarios:
Publicar un comentario