Diseño web desde cero — Html parte 1
Iniciando en diseño web
Quizá a algunos les resulte cómico o hasta irónico que se hable a estas alturas de html en diseño, pero si es lo primero, lo básico, si alguien quiere iniciar en este tema debe iniciar por acá(si, hay algunos conceptos previos, yo se, pero lo técnicamente hablando para iniciar es html).
La gran wikipedia lo define como HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. En otras palabras es un lenguaje o códigos que permiten al navegador de Internet (Chrome, Firefox, Opera, el que sea) definir una estructura e información de una pagina web o sitio web.
Para crear este “Código” requerimos un editor de texto cualquiera (Por favor no uses bloc de notas, funciona pero no es lo ideal.) existen opciones geniales como SublimeText, Atom que es gratuito o simplemente codepen es un servicio online que nos permite crear código HTML en linea. Una vez terminemos de realizarlo debemos guardar nuestro archivo con la extensión html, generalmente se le da el nombre de index.html al archivo principal de un sitio.
¿Que contiene un archivo html?
Bueno un archivo html debe iniciar con la declaración
<!DOCTYPE html>que sirve para que el navegador entienda que a partir de este momento vamos a crear código html y pueda procesarlo de esa manera.
Ahora las etiquetas. Como mencione arriba html es un lenguaje de marcas o etiquetas con ellas podemos definir que elementos queremos crear. los etiquetas tienen una forma particular y sencilla de crearse. Realizamos la apertura del elemento con el nombre de la etiqueta encerrado entre los signos menor que y mayor que, en el centro se colocar el contenido y finalmente se cierra la etiqueta nuevamente entre menor y mayor que, añadiendo un /. Observa el siguiente ejemplo.
<etiqueta> contenido</etiqueta>
Otros ejemplos de etiquetas son:
<html>Contenido</html>, <p>contenido</p>, <div>contenido</div>.
Si desea mas información sobre las etiquetas puede visitar el siguiente enlace donde se presentan todas con una descripción y opciones para entenderlas y conocerlas: Enlace
Con esto podemos definir un documento html sencillo, veamos la siguiente imagen:
Podemos reconocer, el Doctype inicial, además vemos las etiquetas <html></html> requeridas para el documento. También tenemos varias que no había mencionado, <head><title><body> investigando un poco en enlace que puse un poco mas arriba podrás identificar para que sirve, pero en si esta es la estructura básica de una web.
El resultado es algo como:
Esta es una introducción básica para entender como iniciarse en este mundo, debes crear etiquetas, dentro de ellas el contenido, cada etiqueta cuenta con algunas cualidades, pero palabras mas o menos, ya podrías crear una web, sin colores ni estilos, pero con información presentada de forma clara.
¿El paso a seguir? bueno existen muy buenos tutoriales, libros y videos sobre html, en donde puedes aprender y profundizar sobre este tema, en el siguiente articulo veremos un poco mas sobre el trabajo con html, algunos conceptos y realizaremos un ejemplo funcional.
