Diseño Web. HTML

Diseño Web

1.1 Introducción a HTML

Vamos a iniciar definiendo unos conceptos básicos sobre html y lo primero que queremos definir es qué es la html quiere decir HyperText Markup Language el término hypertext hace énfasis al hecho de que la web está basada en los súper vínculos o en los vínculos los cuales permiten enlazar diferentes documentos dentro de internet, los vínculos súper vínculos De hecho son la base html y el html es el lenguaje base de la web y lo ha sido desde sus inicios en los años 90 Markup Language hace énfasis por referencia al hecho de que los documentos html se basan en las etiquetas que están haciendo marcado a los diferentes elementos que hacen parte de una página. [pic 1]

Html está basado en otro lenguaje de mercado más antiguo que se llama sgml de hecho solamente hasta la última versión del html que es la versión 5 ya se ha roto ese enlace o esa herencia a este lenguaje sgml. El lenguaje html no es un lenguaje de programación recuerden, es un lenguaje marcado y como tal es un lenguaje muy fácil de aprender.

Recordemos que las etiquetas que hacen parte del lenguaje html tienen la función de marcados es decir de decidir como el navegador va mostrar los diferentes elementos que hacen parte de nuestra página html, por ejemplo en este caso estamos dando un ejemplo visual el cual corresponde a un post-it

[pic 2]

y dentro del post-it existe una instrucción lo mismo pasa dentro del lenguaje html en la parte derecha ustedes pueden ver unos elementos que se pretenden visualizar dentro de una página web y estos elementos están marcados mediante unas etiquetas que le están indicando al navegador cómo demostrar ese contenido.

[pic 3]

Ya hemos dicho que el lenguaje html es el que permite definir la estructura a mi página html, existe un segundo lenguaje llamado CSS el cual permite generar una capa de presentación, es decir es un lenguaje que permite definir características como el tamaño, el color, entre muchas otras características en la parte izquierda ustedes están viendo una modelo y observen como en la parte derecha esta misma modelo tiene tres capas de presentación diferentes, claro tres vestidos diferentes pero esta capa de presentación puede incluso llegar a hacernos pensar que se trata de tres modelos diferentes sin embargo es la misma modelo pero nuevamente contiene tres capas de presentación diferentes o tres vestidos diferentes esta es la misma relación que existen entonces entre los lenguajes html y css mientras el lenguaje html define la estructura mi sitio web el lenguaje css define la capa de presentación vamos a ver este mismo concepto.

En tu navegador web utiliza el navegador Chrome y haz una búsqueda sobre como visualizar las páginas web sin CSS, después presiona la combinación Control+Shift+I, aparecerá una ventana a la derecha con el código HTML de la página web que estás viendo, en la parte media de la ventana donde dice estilos busca el siguiente código:

[pic 4]

Modifica el color de fondo y el color de las variables y observa, esto que está modificando son los estilos CSS de la página web, si quiere volver a ver la página original solo presiones control+ F5.

1.2 Editores de código

Una de las primeras decisiones que debemos tomar cuando vamos a trabajar con html es seleccionar el editor de código con el cual vamos a trabajar podemos utilizar desde el bloc de notas, así como notepad +, Brakets, sublime text y para controlar los estilos CSS Adobe Dreamweaver.

  [pic 5][pic 6][pic 7]

[pic 8]

[pic 9]

[pic 10]

El lenguaje html está basado en los elementos que se llaman etiquetas o tags, la función de estas etiquetas o tags es marcar o etiquetar el contenido de la página html para indicarle de esa manera al navegador la forma como se debe renderizar o se debe mostrar, en la imagen nosotros vemos diferentes ejemplos de etiqueta por ejemplo tenemos la etiqueta h1 observen que todas las etiquetas tienen una etiqueta que abre y tiene una etiqueta que cierra, la etiqueta que abre corresponde al nombre la etiqueta encerrados en los símbolos menor que y mayor que, y la etiqueta que cierra corresponde exactamente a la misma etiqueta que abre más el /slash que va antes del nombre de la etiqueta de esa misma manera estamos etiquetando el h2 que vemos más hacia la parte inferior y de la misma manera también estamos utilizando la etiqueta p o la etiqueta de párrafo, observen que estas tres etiquetas tanto la etiqueta h1 como la h2 como la etiqueta p o etiqueta de párrafo tienen contenido, como tiene un contenido necesitan etiquetar apertura y una etiqueta de cerrado estos son entonces contenedores precisamente porque contienen otros elementos, pueden contener caracteres o pueden contener otras etiquetas, sin embargo la primera etiqueta tiene una diferencia sustancial y es que no tiene etiqueta apertura y etiqueta de cerrado solamente contiene la etiqueta de apertura, observen entonces cómo tenemos el símbolo menor que el nombre de la etiqueta es meta y el texto que sigue se le llama un atributo los atributos corresponden a información adicional que suele requerir la etiqueta, en este caso el nombre del atributo chart set seguido por un símbolo de igual y entre comillas tenemos el valor de ese atributo finalmente cerramos con el símbolo mayor que. Es importante entonces notar la diferencia entre la sintaxis que tiene una etiqueta contenedora y una etiqueta que no es contenedor recuerden, la etiqueta contenedora necesita la etiqueta de cerrado mientras que la etiqueta que no es contenedora como es el caso de la primera línea no necesita la etiqueta cerrada.

Recursos y referencias de ayuda para HTML

https://developer.mozilla.org/es/docs/Web/HTML

https://developer.mozilla.org/es/docs/Web/CSS

https://www.w3schools.com/html/default.asp

1.3 Estructura de una página web

Abre tu navegador entra www.msn.com, teclea la combinación para visualizar la pagina web en modo desarrollador, observa que el código básicamente la siguiente estructura.

<!DOCTYPE html>

<html>

            <head>

            < /head>

...