Clase 2: Progamar con HTML

¿Que se necesita para comenzar a programar?

•  Editor de texto para escribir el código fuente: puede ser Notepad ++ , o Bloc de notas (aplicación que trae incorporada windows). Existen otros editores como Kompozer, podés utilizar otro con el que te sientas cómodo.

Notepad++ 

Es un programa para editar código fuente de cualquier lenguaje de programación.Es de estos editores que ofrecen ayudas muy útiles para "tirar líneas de código", como resaltado de colores, posibilidad de editar varios documentos a la vez, menús contextuales, auto-completar código, etc.  además es gratuito.
Entre las características que ofrece Notepad++ podemos destacar:

• Coloreado de código para más de 40 lenguajes de programación diferentes, entre los que se incluyen todos los que un desarrollador del web podría tocar, como HTML, Javascript, ASP, SQL, PHP, CSS, Pitón, Ruby, etc.

• Impresión a color de los códigos

• Permite definir el resaltado de sintaxis para nuevos lenguajes de programación que necesite el usuario.

• Autocompletado de código, también configurable por el usuario o extensible por medio de descargas bajo demanda del programador.

• Multi-Documento

• Multi-Vista, lo que significa que puedes tener más de una vista de un mismo código, con por ejemplo dos versiones del mismo documento.

• Permite realizar acciones de Buscar / Reemplazar utilizando incluso expresiones regulares para definir los patrones a reemplazar.

• Deteción automática del estado del documento, que puede ayudarnos en caso que queramos guardar un archivo que había sido modificado por otro usuario o programa.

• Otras utilidades como Zoom, soporte para varios idiomas, puntos de marca, resaltado de paréntesis u sangría, creación de macros, etc. 

Kompozer

Estamos ante un programa sencillo para realizar páginas web en vista diseño, lo que técnicamente se llama WYSIWYG (what you see is what you get, lo que ves es lo que obtienes). Esto quiere decir que puedes crear sitios web directamente escribiendo texto sobre Kompozer, como si fuera un editor de texto normal y sin tener que escribir el código fuente HTML necesario para construir la página. Cuando quieres insertar otros contenidos, como imágenes o enlaces, tienes que utilizar botones de la barra de herramientas, que te muestran formularios para especificar las propiedades de los elementos, como el archivo de la imagen, el texto alternativo, o en el caso de un enlace, la dirección donde se dirige, etc.
Esto simplifica bastante la tarea de las personas que quieren empezar a crear sus páginas web, porque no tienen que aprender HTML. Simplemente tenemos que aprender a manejar Kompozer, con sus menús, formularios, etc. Pero no hay que engañarse, porque utilizar un programa de este estilo, como mínimo, requerirá unos conocimientos básicos para aprender a manejar archivos de diversos tipos, conexiones FTP, y otras características propias de la publicación en Internet. A la hora de maquetar contenidos en una web, lo que se hace con Komposer, también viene bien saber las distintas propiedades que podemos aplicar a los elementos de la página para cambiar su apariencia, colocación o comportamiento.
Kompozer ayuda bastante a la hora de diseñar la web, pero además tiene diversas herramientas para facilitar también la publicación de una página en un servidor. Dispone de un gestor de sitios (site manager), en el que podemos configurar un acceso por FTP al servidor web donde está alojada la página. A través de ese gestor podemos abrir archivos que estén en el servidor para editarlos directamente con Kompozer y luego guardarlos en el servidor con el botón "Publish". También podemos crear nuevos archivos en Kompozer y subirlos a un servidor que tengamos configurado en el gestor de sitios. El mismo gestor de sitios lo podemos utilizar también para acceder a directorios y ficheros que tengamos en local en nuestro ordenador, configurando un sitio sin indicar los datos de FTP, sino indicando el directorio de nuestro disco duro donde están los archivos de la web.

•  Galería de imágenes: esta te ayudara para salir al paso en caso de que no tengas conexión a internet, arma una con formatos .jpg, .png, .gif (dichos formatos son los que soporta HTML).

•  Un editor de imágenes: si necesitás retocar alguna imagen podés utilizar cualquier aplicación que uses en Multimedia 1 o Diseño Web (Photoshop, Fireworks, etc. o alguna con la que te identifiques o te sea fácil de usar). 

•  Un servidor (Host): podés conseguir uno gratuito subscribiéndote a él, o podés adquirir uno pago. La idea es que tengas tu propio espacio para subir tus trabajos y presentarlos en caso de que lo necesites. 

Comenzando con HTML5
¿Qué son las etiquetas?

  Son elementos dentro del código de hipertexto que funcionan como una especie de marca, que le otorga a la sección encerrada dentro de la etiqueta una característica específica, como color de fuente, tamaño, tipo de elemento y hasta la sección que ocupa dentro del archivo HTML, o en este caso HTML5.
Las etiquetas se inician de la siguiente manera: ‹› y se cierran con: ‹/›

 Etiquetas semánticas: etiquetas que indican qué es el contenido que contienen, en lugar de como se debe formatear al mostrar el documento HTML en un cliente web.
Son las que sirven para definir el esquema principal del documento, como HEADER, ARTICLE, FOOTER, etc. Todas esas etiquetas semánticas nos indican qué es el contenido que engloban y cuál es su relación con el conjunto de elementos del documento HTML.

¡A programar!

 La primera línea de código es la declaración <!DOCTYPE HTML>  de un documento HTML. Esta etiqueta indica qué versión de HTML se utiliza en el documento, para que los navegadores puedan aplicar la gramática y sintaxis correspondiente al él. La versión de HTML5 simplifica mucho esta directiva. Las versiones anteriores HTML usaban declaraciones más complicadas para varios formatos HTML.

 La directiva <HTML>  aparece una vez al principio de la página web y de nuevo con una barra añadida ( </HTML>) al final y le indica al navegador que todo lo que se encuentra entre ellas es código html y se debe interpretar como tal.

Con la directiva <HEAD>  y </HEAD>se delimita la cabecera del documento que suele contener información sobre el mismo como título, idioma, palabras clave, autor, etc. La información que se especifique en la cabecera no es mostrada por el navegador al usuario con la única excepción de la etiqueta <TITLE> y </TITLE> esta sirve para especificar el título del documento y es visualizada en la barra de título de la ventana correspondiente al programa navegador.

 La directiva  <BODY> delimita el cuerpo de un documento html y engloba todo el contenido que se ve en una página web: titulares, texto, imágenes, listas, tablas, formularios.

<HEADER> </HEADER> : Es el elemento que abre la web. Normalmente lleva ubicado el logotipo o el texto representativo. En los casos que la web lleve publicidad, también se suele ubicar el banner de cabecera dentro de él.

<NAV> </NAV>: Representa a todos los enlaces de navegación que llevan a las distintas secciones de nuestra web. Es una de las partes más importante, pues debe ser fundamental para que el usuario sea capaz de navegar por las categorías y páginas.

<SECTION> </SECTION>: Es la etiqueta que viene a sustituir por defecto al <DIV>

, y lo que indica es que estamos en una sección distinta, como si de un capítulo de un libro se tratase.

<ARTICLE> </ARTICE>: La etiqueta article está diseñada para contener una unidad propia de información y contenido, que a su vez puede tener su cabecera (header), cuerpo (section) y pie de artículo (footer). Un section puede contener varios artículos independientes.

<ASIDE> </ASIDE>: Viene a sustituir al sidebar o barra lateral, aunque su uso es para llenarlo de contenido que no esté relacionado directamente con esa página, por ejemplo un listado de enlaces, anuncios, iconos sociales, etc.

<FOOTER> </FOOTER>
: Representa el pie de página, presente en casi todas las webs. Nos sirve para ubicar los datos de contacto, algo de información extra, iconos sociales, actualizaciones de twitter, etc. Permite inclusive un segundo menú de navegación.

Etiquetas y atributos
Las etiquetas pueden presentar modificadores que llamaremos atributos, los que nos permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma, separados por un signo de igual. El orden en que se incluyan los atributos es indiferente y no afecta al resultado. Si se incluye varias veces el mismo atributo con distintos valores, el resultado obtenido será imprevisible dependiendo de cómo lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra, deberá expresarse entre comillas, en otro caso no será necesario.

Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrás el signo igual (“=”) con los valores de dichos atributos entre comillas (“”).

Etiquetas lógicas y físicas 

Los estilos físicos formatean cada porción de texto atendiendo tan sólo a cómo debe aparecer finalmente en pantalla, sin preocuparse en absoluto en qué peso o papel desempeña cada parte del documento en el esquema total del mismo.

<B>: muestra el texto en un tipo de letra más grueso.

<I>: muestra el texto inclinado (en cursiva).

<U>: subraya el texto.

<TT>: utiliza un tipo de letra no proporcional.

<BIG>: muestra el texto con un tipo de letra más grande. 

<SMALL>: utiliza un tipo de letra menor

<S>: utiliza un tipo de letra tachado. 

<SUB>:escribe como subíndice. 

<SUP>: escribe como superíndice.  

Los estilos lógicos se caracterizan porque en ellos hacemos un estudio lógico de cada parte del documento, observando la importancia que tiene en el global del mismo distinguiendo entre cabeceras, citas, subíndices, comienzos de capítulo, etc., por lo que formatearemos cada parte del documento de acuerdo a su importancia en el conjunto global. 

<STRONG>: muestra el texto en un tipo de letra más fuerte, normalmente en negrita.

<EM>: muestra el texto enfatizado, normalmente en cursiva.

<CODE>: suele utilizarse para mostrar algún tipo de código, suele usar un tipo de fuente no proporcional. 

<BLOCKQUOTE>: bloque de texto indentado. 

Etiquetas Anidadas 

 Las etiquetas HTML5 suelen ir en parejas y también vimos que es posible incluir unas etiquetas dentro de otras. Esto es lo que precisamente se llama anidamiento. Por ejemplo:

<B>negrita</ B>

<B><I>cursiva y negrita</I></B>

EJEMPLO

El < META CHARSET = "UFT-8"> es el tipo de carácter que usamos en toda la pagina.

Saltos de Línea

 El salto de línea está definido con la etiqueta <BR> . Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta <BR> obliga a saltar de línea donde quiera que la ubiquemos. 

Parrafos

<P>: esta etiqueta sirve para separar párrafos.

Cabeceras

 En un documento HTML es posible definir seis tipos distintos de cabeceras que serán normalmente el título del documento y los distintos sub-apartados que lo forman. 

Las etiquetas que definen las cabeceras serán <H1> indica el tirulo mayor <H2> corresponde al tirulo menor <H3> sirve para colocar un subtitulo<H4> corresponde a un subtitulo 2<H5> este realiza un subtitulo 3.

ejemplo 

Las Imágenes y HTML

 Un documento HTML puede incorporar imágenes o gráficos, no sólo como fondo del documento (con el atributo BGCOLOR de la etiqueta <BODY>) sino dentro del propio cuerpo del documento. Existen distintos tipos de imágenes: 

• Jpg: (con extensión JPG) son imágenes en color real (paleta de colores RGB de 24 bits) comprimidas mediante un algoritmo matemático. Se emplean cuando la imagen precisa una gran cantidad de colores (fotografías principalmente), prevaleciendo la calidad de la imagen y su colorido sobre el tamaño del archivo. 
•  Gif: En el formato GIF, las imágenes sólo se representan mediante una paleta de 256 colores, por lo que no permiten la presentación de imágenes muy complejas. Son las más empleadas por su pequeño tamaño. Puede escogerse uno de los 256 colores para hacerlo transparente, con lo que el navegador no representa dicho color en el documento, viéndose su fondo. 
•  Gif animado: Consiste en una serie de imágenes en formato GIF (y por tanto en 256 colores) que se alternan en la pantalla del ordenador, obteniéndose una película. El GIF animado puede repetirse un número determinado de veces o indefinidamente, de forma que la película se repita ininterrumpida mente, volviendo al principio cuando se ve la última imagen.
•  PNG: (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de color.

¿Cómo insertar imágenes?

<IMG>: Para insertar una imagen en un documento HTML se emplea la etiqueta , que carece de etiqueta de cierre. Por el contrario presenta varios atributos, uno de los cuales, el atributo SRC, es imprescindible para su funcionamiento. 

 SRC: El atributo SRC es indispensable dentro de la etiqueta , ya que especifica la URL (absoluta o relativa) de la imagen que se desea insertar en el documento HTML. Así, para insertar una imagen llamada foto.jpg que se encuentre en el directorio imágenes, respecto a la ubicación del documento, escribiremos: 

<IMG SRC=”imagenes/foto.jpg”>

Si por el contrario la imagen se halla en el directorio imágenes del sitio www.dominio.ar, deberemos indicar:

<IMG SRC=”http://www.dominio.ar/ imagenes/foto.jpg”>

EJEMPLOIMAGEN