Aprendiendo Código: 2013

La etiqueta h1/h6

Otros elementos HTML muy utilizados dentro del diseño web son los dedicados a indicar títulos, para esto contamos con los elementos:

<h1><h2><h3><h4><h5><h6>

El título de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos que es el navegador el responsable de definir el tamaño de la fuente, más adelante podrá ver que uno puede modificar la fuente, tamaño, color etc.)

Según la importancia del título utilizaremos alguno de estos elementos HTML. Requiere la marca de cerrado del título con la barra invertida como hemos visto.

A continuación podremos confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Definiremos un párrafo para cada título de segundo nivel.

Cada título aparece siempre en una línea distinta, no importa si lo tipeamos seguido en el archivo, es decir el resultado será igual si hacemos:

<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>

o esto:

<h1>Tipos de datos en MySQL</h1><h2>varchar</h2>

El navegador dispone cada título en una línea nueva.

Recordemos que el HTML no tiene la responsabilidad de indicar el tamaño de las fuentes. El navegador definirá el tamaño de fuente según el nivel de título que indiquemos. La de tamaño más grande es la de nivel 1 <h1>.

<h1> viene de heading, heading significa título.

La etiqueta p

Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al próximo párrafo.

Dentro de un párrafo puede haber saltos de línea <br>.

<html>
<head>
</head>
<body>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. <br>Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor </p>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. <br>Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor </p>
</body>
</html>

En el ejemplo anterior, tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta página, separa los contenidos de los dos párrafos con un espacio horizontal. Además el primer párrafo contiene varios saltos de línea. Normalmente uno agrupa en párrafos para dar más sentido a nuestro escrito.

Cuando modificamos la ventana del navegador los párrafos se acomodan automáticamente de acuerdo al ancho de la ventana.

Para recordar el nombre de esta marca HTML:
<p> viene de paragraph

La etiqueta br

Todo el texto que utilizaremos en el cuerpo de la página aparece en por defecto en la misma línea, no importa si cuando tescribimos en la página disponemos cada palabra en una línea distinta (es decir un navegador no tiene en cuenta la tecla ENTER).

Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML <br>.

Cuando aparece la marca <br> el navegador continua con el texto en la línea siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto hasta ahora.

Para recordar los nombres de los elementos HTML es bueno ver cual es la palabra completa de la misma:

<br> viene de break

HTML: Un lenguaje de marcas

Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo podemos llamar a nuestra primer página con el nombre: pagina1.html

Durante este curso utilizaremos un programa para escribir la página y visualizaremos en un navegador los resultados que genera nuestro código.

Si observamos cualquier página web podremos ver que todas ellas comienzan con la marca:<html> y finalizan con la marca:</html>
Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter /
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:

Y el cuerpo de la página:

<body>
Cuerpo de la página.
</body>

Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.

Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo.

Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).

Recomiendo escribir manualmente todas las marcas HTML para aprenderlas de memoria. No es conveniente copiar y pegar. Cuando recuerde todas las marcas, podrá copiar y pegar trozos de páginas HTML para agilizar el desarrollo.

CSS un lenguaje descriptivo (3)

Definición de estilos a nivel de página.

Es la definición de estilos en una sección de la cabecera de la página HTML donde podemos definir estilos que se aplican a las distintas marcas HTML de la página.

El problema del concepto anterior donde debíamos crear un estilo similar para la marca h1 se puede resolver en forma más adecuada empleando la definición de estilos a nivel de página.

Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer título</h1>
<h1>Segundo título</h1>
</body>
</html>

Podemos observar que en la cabecera de la página definimos la sección:

Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo. Podemos observar que es mucho más eficiente que definir los estilos directamente sobre las marcas HTML.

Podemos definir estilos para muchas marcas en la sección style:<!DOCTYPE html>

<html>
<head>
<title>Problema</title>
<style type="text/css">>
h1 {color:#ff0000}
h2 {color:#00ff00}
h3 {color:#0000ff}
</style>
</head>
<body>
<h1>rojo</h1>
<h2>verde</h2><h3>azul</h3>
</body>
</html>

CSS un lenguaje descriptivo (2)

Definición de estilos a nivel de marca HTML

Es la forma más fácil pero menos recomendada para aplicación de un estilo a una marca HTML. Se define en la propiedad style los estilos a definir para dicha marca.

Es común definir estilos directamente en las marcas HTML cuando estamos diseñando la página y posteriormente trasladar el estilo creado a una hoja de estilos.

La sintaxis para definir un estilo a una marca HTML es la siguiente:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>

Por defecto, todo navegador tiene un estilo definido para cada marca HTML, lo que hacemos con la propiedad style es redefinir el estilo por defecto. En este problema definimos la marca h1 con un color de texto rojo y como color de fondo el amarillo:

<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>

Veremos más adelante que hay muchas propiedades en CSS. En este primer ejemplo inicializamos las propiedades color (define el color del texto) y background-color (define el color de fondo del texto).

Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma.

Cuando definimos estilos directamente en las marcas HTML, tenemos que tener en cuenta que el estilo se aplica únicamente a la marca donde inicializamos la propiedad style, es decir, si tenemos dos secciones h1, deberemos definir la propiedad style para cada marca:

<h1 style="color:#ff0000;background-color:#ffff00">
Primer título
</h1>
<h1 style="color:#ff0000;background-color:#ffff00">
Segundo título
</h1>

Como podemos observar, más allá que los dos estilos son exactamente iguales, estamos obligados a definirlos para cada marca HTML.

CSS un lenguaje descriptivo

Que entendemos por hojas de estilo en cascada (CSS)

CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.

Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. En un principio, los sitios web se concentraban más en su contenido que en su presentación.

HTML no pone mucha atención en la apariencia del documento. CSS describe como los elementos dispuestos en la página son presentados al usuario. CSS es un gran avance que complementa el HTML y la Web en general.

Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página.

El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1, CSS2 y CSS3 del World Wide Web Consortium (W3C), es un estándar aceptado por toda la industria relacionada con la Web, o por lo menos, gran parte de navegadores (es verdad el IExplorer de Microsoft nos puede dar un dolor de cabeza con los navegadores antiguos). Podemos visitar W3C.

Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a la marca, en el head de la página o agrupar las reglas de estilo en un archivo independiente con extensión *.css

En este curso veremos las tres metodologías, pero pondremos un especial énfasis en la tercera forma, que es la más adecuada para separar el contenido de la página y la forma como se debe representar la misma por medio de la hoja de estilo.

Blender Game Engine II: Interactuando con objetos

Uno de los problemas recurrentes cuando se comienza a trabajar en el desarrollo de un vídeojuego por primera vez y no se tienen muchos conocimeintos sobre el tema es como lograr crear nuestra primera inteacción o lo que es lo mismo como nos interelacionamos con los elementos que componen nuestro juego.

Un elemento clave en esta interacción entre personas y videojuegos es, evidentemente, el mando. Esta página web recoge un buen resumen de su evolución, mostrando un árbol genealógico que parte desde el año 1977 hasta nuestros días. Como veis, si hacéis clic sobre alguno de los controladores, inmediatamente os aparecerá una breve historia de cada producto.

No obstante para que esta interacción entre los displays de control del vídeojuego (hardware) y los elementos que forman nuestro vídeojuego (software) funcionen es necesario realizar una trabajo con el entorno de desarrollo de nuestro videojuego que permita establecer dichas relaciones.

En este artículo abordaremos este problema intentando encontrar la mejor metodologia y los procesos más simples para crear una interactividad entre el usuario de un videojuego tridimensional y los elementos del propio vídeo juego empleando para ello Blender Game Engine como motor de render y responsable último de coordinar todo el trabajo que vamos a realizar.

En esta ocasión nos basaremos en la utilización de los bloques de lógica que incluye Blender para controlar objetos de nuetro videojuego por medio del teclado permitiendonos mover objetos e interacturar con ellos de una forma rápida y sin necesidad de ningún tipo de conocimiento previo

A continuación, dejo el video tutorial en el que podreis ver como realizar una interacción en Blender Game Engine

Me gustaría recomendar a todos aquellos que no habéis leido la primera parte de este conjunto de tutoriales que podéis encontrar el índice de contenidos de este curso en este enlace.

Blender Game Engine I: Definiendo el espacio de trabajo

En este artículo comenzamos explorando las posibilidades que Blender tiene como kit de desarrollo de videojuegos tridimensionales.

Como paso previo a comenzar a ver las posibilidades que Blender nos ofrece, he preparado un pequeño videotutorial en el que podremos ver como configurar el espacio de trabajo en Blender para desarrollar videojuegos y como activar el motor de renderizado en tiempo real que incorpora Blender para comenzar a trabajar.

Como he comentado anteriormente, Blender tiene su propio motor de juego que le permite crear aplicaciones interactivas en 3D. El motor de juego de Blender (BGE) es una potente herramienta de alto nivel de programación. Su principal objetivo es el desarrollo de videojuegos, pero se puede utilizar para crear cualquier software interactivo en 3D con otros fines, tales como tours interactivos en 3D de arquitectura o de investigación de la física educativa.

La interfaz de Blender al igual que la gran mayoria de la suites de 3D se puede considerar de todo menos amigable. Este tipo de entornos de trabajo son tan extensos que resulta dificil adaptarse a todas las opciones de configuración de que disponene. La mala noticia es que esteno es el tipo de cosa que puede saltarte sin más antes de comenzar a trabajar con el software. Esta interfaz no ha sido diseñada para permitir a un usuario nuevo tomar asiento y que sea capaz de realizar el solo sus ideas sobre un nuevo proyecto.

La forma de trabajar dentro de Blender se basa en el concepto de una mano en el ratón, la otra en el teclado.

Blender fue diseñado con esta mentalidad, aunque la interfaz es flexible, hay accesos directos de las funciones para que en vez de aprenderte la combinación de teclas de dichas funciones, puedas acceder a ella usando el ratón.

A continuación dejo el vídeo con las instrucciones para configurar el espacio de trabajo de Blender para comenzar a desarrollar vídeojuegos.

Me gustaría recomendar a todos aquellos que no habéis leido la primera parte de este conjunto de tutoriales que podéis encontrar el índice de contenidos de este curso en este enlace.

Blender Game Engine: Índice de contenidos

En esta entrada podrás encontrar el listado completo de las lecciones correspondientes al curso de Blender Game Engine de Aprendiendo Código.

Lista de contenidos del curso

Recuerda que aunque el curso ha sido inicialmente desarrollado para Blender 2.63 es compatible con toda la serie de Blender 2.6

Para descargar el software utilizado en este curso, puedes acceder directamente al sitio web oficial de Blender y descargalo gratuitamente desde su sección de descargas.

HTML Básico V: Los atributos de HTML

Tal y como vimos en la segunda parte de este tutorial, los atributos representan información adicional para las etiquetas HTML

Entre los atributos más utilizados destacan los siguientes:

Id

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente). Por norma general se emplea el atributo id para referirse a un elemento por medio de terceros lenguajes de programación.

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

Class

El atributo "class" asigna un nombre de clase (o varios nombres de clases separados por espacios) al elemento contenedor. Es usado junto con hojas de estilo CSS y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Como he comentado la utilización del atributo class esta intimamente ligada con la utilización de CSS y se recomiendo que se utilice unicamente paraeste fin. de esta forma podremos distingir entre la apariencia grafica de nuestro elemento utilizando clases y el contenido del mismo utilizando "id".

<p class="referencias">Este artículo pertenece al curso de HTML básico de Aprendiendo Código y se le aplican los estilos de la clase referencia</p>
<p class="referencias importante">Este artículo pertenece al curso de HTML básico de Aprendiendo Código y se le aplican los estilos de la clase referencia y después los estilos de la clase importante</p>

Style

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos puede resultar útil y el resultado es igual al obtenido por las hojas de estilo CSS, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modo, se mejora la separación de las partes semántica y el contenido de tu documento.

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo escrito en azul.</p>
<p style="color: #FF0000; font-size: 12pt">Este es un párrafo escrito en rojo.</p>
<p>Y este es otro texto no tiene estilo y aparecerá en color negro siempre que siga siendo el color por defecto de nuestro body.</p>

Title

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al pasar el ratón por encima del contenido del elemento. también resulta de utilidad a los buscadores a la hora de indexar los contenidos de la web.

No es un atributo necesario para el desarrollo de una página web.

<a title="Aprendiendocodigo.blogspot.com" href="http://aprendiendocodigo.blogspot.com">Aprendiendo Código</a>

Lang

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos HTML, utilizamos el atributo lang para especificar el lenguaje de un elemento.

Este atributo es util para indexar tú web en motores de busqueda o para que los sintetizadores de audio puedan transcribir correctamente la web. Otra posibilidad que aporta este atributo es el de aplicar distintos CSS a cada idioma de nuestra web. o mostrar mensajes personalizados en función del idioma configurado en el navegador del visitante de nuestra web.

<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en Español.</p>

Dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

RTL: derecha a izquierda.
LTR: izquierda a derecha.

<q lang="he" dir="rtl">...una cita en Hebreo...</q>

Charset

Especifica la codificación de caracteres del documento.

<a charset="utf-8" href="http://aprendiendocodigo.blogspot.com">Código HTML</a>

Además de estos atributos, hay muchos otros generalmente relacionados con el estilo gráfico de nuestra web que han caido en deshuso en favor del lenguaje CSS que veremos más adelante.

HTML Básico IV: La etiqueta body

La etiqueta <body> define el cuerpo de un documento y todo aquello que incluyamos dentro de ella representa el contenido que el ususario de nuestra web puede ver cuando accede a nuestro sitio web.

Si copiamos el siguiente código y lo probamos en un navegador podremos comprobar como cualquier texto que intrduzcamos dentro de la etiqueta body se muestra en pantalla.

<html>
<head>
<title>Título del documento</title>
</head>

<body>
Todo el contenido del documento...
</body>

</html>

Dentro del cuerpo del documento se incluye todo el contenido del mismo como por ejemplo: textos, enlaces, imágenes, tablas, etc. pero será necesario utilizar la etiqueta correspondiente para que el navegador lpueda mostrar el contenido según nuestros deseos.

Si te interresa conocer más sobre las etiquetas HTML, te recomiendo ver el tutorial avanzado de HTML 5 que estoy desarrollando con el fin de conocer todas las etiquetas que podemos utilizar y su función.

Aunque es posible por medio de los atributos definir dentro de las etiquetas valores como el color del texto, el tamaño del contenedor, etc. Actualmente y por cuestiones organizativas se utilizan archivos CSS para ese trabajo. De esta forma cuando desarrollemos una web tendremos archivos HTML con el contenido de nuestra web y archivos CSS con la apariencia de nuestra web.

HMTL Básico III: la etiqueta HEAD

La etiqueta <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la etiqueta <TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro navegador de páginas Web.

Ejemplo :

<TITLE>Aprendiendo código</TITLE>

En el ejemplo anterior se definia el titulo de la página como "Aprendiendo código", de esta forma al abrir nuestra página web en la pestaña superior de la misma podremos comprobar como aparece el textro "Aprendiendo código".

Dentro de la cabecera de nuestro documento también podemos incluir otras etiquetas adicionales. La etiqueta <META> se utiliza para transmitir información sobre la propia página web.

Ejemplos :

El ejemplo anterior por tanto, indica al navegador el nombre de la página y sus contenidos principales. Esta información no tiene interes para el usuario de nuestra página web pero sin embargo, resulta vital para los buscadores de contenido (Google, Bing, etc) ya que ayudan a definir el contenido de nuestra web y relacionarlo con las busquedas que hacemos por internet.

En este caso, se indica al navegador las palabras clave que definen nuestra web, y por tanto, se le especifica al buscador que cuando alguién realice una busqueda que incluya las palabras claves definidas en el contenido de keywords incluya nuestra página web entre los resultados.

Otro uso de la etiqueta <META> es la de indicar documentos con "refresco automático". Si se indica una URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos especificados. Si no se incluye ninguna URL se volverá a cargar en el navegador el documento en uso transcurridos los segundos indicados. Esto es util para páginas que cambian de contenido con mucha frecuencia o para redireccionar a la persona que visita nuestra pagina Web a una nueva dirección donde se encuentra una versión actualizada de nuestra pagina Web.

Ejemplo :

El código anterior, redireccionará nuestro navegador transcurridos 15 segundos a la web de aprendiendo código desde la web en la que nos encontremos actualmente.

HTML Básico II: Estructura de un documento HMTL

Para definir un documento como una estructura HTML basta con declarar las siguientes etiquetas en un documento de texto y guardarlo con extensión .html

Para ello abriremos un nuveo documento de texto y copiaremos el código anterior, es importante señalar que no es necesario tabular las distintas etiquetas para que el navegador las reconozca aunque resulta una práctica muy útil para entender el código.

Una vez copiado el código bastará con guardar el documento en formato html, en caso de que vuestro editor de texto no os de la opción de guardar como documento html, bastará con guardarlo como texto plano (archivo .txt o similar) y despues renombrar la extensión cambiando el .txt por .html.

De esta forma, si volvemos a abrir el archivo con el bloc de notas, veremos que en principio nada a cambiado. la unica diferencia radica en que si abrimos el arrchivo con un navegador nos mostrará una página web en blanco ya que aún no hemos añadido el contenido..

Como habreis podido observar, cada uno de los elementos que forman la web esta formado por una etiqueta de inicio y otra de cierre.

Ejemplo: <HTML> y </HTML>

De esta forma, podemos entender el código anterior de la siguiente forma:

<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

El documento se hallará situado en algún ordenador al que se pueda acceder a través de Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el camino que ha de seguir nuestro navegador a traves de Internet para acceder a un determinado recurso, bien sea una página Web, un fichero, un grupo de noticias, etc. Es decir, lo que el navegador Web hace es acceder a un fichero situado en un ordenador que está conectado a la red Internet. La estructura de una URL para una página Web suele ser del tipo http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del fichero que contiene la página Web escrita en HTML. Por ejemplo :

http://www.http://aprendiendocodigo.blogspot.com.es/2013/04/entrada-de-prueba.html

Donde ....

http:// indica el protocolo de transferencia de hiper texto o lo que es lo mismo que intentamos acceder a una pagina Web

aprendiendocodigo.blogspot.com.es es el Dominio (nombre) del ordenador al que se quiere acceder

/2013/04/ es el Directorio dentro del ordenador donde se encuentra la información

entrada-de-prueba.html es el Fichero que contiene la página Webque deseamos ver.

HTML Básico I: Un lenguaje de etiquetas

La base esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags) como elemento estructural sobre el que colocar elementos. Existen multitud de etiquetas y cada una sirve para realizar funciones distintas principalmente relacionadas con el tipo de contenido a mostrar o la forma de organizarlo.

<ETIQUETA> inicio
[.......]
</ETIQUETA> cierre

Una etiqueta es una palabra (en mayúscula o minúscula), delimitada por los signos < (mayor que) y > (menor que).

Por regla general, las etiquetas forman bloques que se inician con una instrucción y finalizan con la misma instrucción a la que se le antepone una barra inclinada (/) para indicar su final

Cada elemento se divide por lo tanto en tres partes bien diferenciadas: una etiqueta inicial, el contenido, y una etiqueta final. Todo lo que hay entre la etiqueta de apertura y la etiqueta de cierre se ve afectado por esa etiqueta y se denomina contenido de esa etiqueta.

<ETIQUETA>
[... contenido ...]
</ETIQUETA>

A veces, es necesario agregar datos adicionales a una etiqueta, en ese caso, la etiqueta de apertura será la que contendrá esos parámetros llamados atributos y que nos permititan diferenciar una etiqueta de otra aunque sean del mismo tipo.

<ETIQUETA atributo1="valor" atributo2="valor">
... contenido ...
</ETIQUETA>

Eventualmente, ciertas etiquetas no forman bloques ya que son autosuficientes, en ese caso, la barra inclinada se agrega al final de esa única etiqueta separada de esta por un espacio en blanco.

Algunos de los ejemplos más significativos de este tipo de etiquetas son las que se encargan de mostrar imágenes o incluir saltos de línea.

Este concepto de etiquetas de apertura y cierre es la clave para entender un lenguaje como el HTML. Como cualquier elemento puede contener a otros elementos, las etiquetas deben abrirse y cerrarse en el mismo orden en que fueron creadas. Una página web está compuesta por elementos (objetos) metidos unos dentro de otros (anidados). El elemento principal, el que contiene a todos los demás es el documento HTML.

Tras la etiqueta <html>, es frecuente encontrar las etiquetas <head> y <body> sobre las que puedes encontrar más información a través del enlace correspondiente.

Puedes consultar más información sobre la estructura de una página web, en este enlace.

HTML Básico 0: Cómo crear un documento HTML

Cómo comenzar un documento HTML

Este tutorial está diseñado para principiantes, que nunca han escrito un documento en HTML manualmente y necesitan saber dónde escribirlo y cómo guardarlo. Este tutorial mostrará el proceso de crear un archivo HTML. Aún cuando este proceso no pertenece al lenguaje HTML en sí, de esta forma, intentaré dar una pequeña idea para aquellos que todavía no saben como crear un documento HTML en blanco.

Este tutorial esta orientado a usuarios de Windows XP o posteriores. [proximamente podrás consultar la versión Mac aquí]

Consideraciones previas

Un documento HTML es un simple archivo que contiene texto en un lenguaje de marcas específico. Ésta información, aún estando escrita en forma estructurada lo cual la hace encajar en el estándar del lenguaje, es una simple secuencia de caracteres que pueden ser encontrados en un teclado normal..

Un archivo que contiene un documento HTML puede tener diferentes extensiones. De echo, puede tener cualquier extensión que tu quieras, pero si lo colocas en un archivo con una extensión como "bmp" (usualmente asociada con los archivos de bitmap) puede no ser interpretada en la forma que queremos (como un documento HTML). Entonces listaremos solamente las extensiones que serán normalmente "leídas" por los agentes de usuario como documentos HTML.

Muchas veces puede encontrar al navegar la web que la dirección URL en tu navegador correspondiente al documento que estás justamente viendo tiene una extensión de archivo como "php", "asp", "pl" ó "cfm" (a veces seguida por un símbolo de pregunta "?" y muchas otras cosas). Aún siendo estas extensiones asociadas con diferentes lenguajes del lado servidor, al momento que llegan al lado cliente no son más que documentos HTML documents. Esto se da debido a que los archivos contienen originalmente scripts del lado servidor que son procesados cada vez que un agente de usuario los solicita (antes de ser enviados) y son allí transformados en documentos HTML normales.

Pero para comenzar a escribir código HTML usaremos dos extensiones: "htm" y "html". La diferencia entre estas dos extensiones es simplemente una letra ("html" no es soportada por sistemas operativos antiguos los cuales casi ni se utilizan en estos días), así que puedes utilizarlas como prefieras.

Práctica

Una vez que has decidido que extensión utilizar, puedes elegir un nombre de archivo y crear el archivo. El proceso de crear archivos es una tarea simple que involucra un pequeño conocimiento acerca de tu sitema operativo. Los sistemas operativos pueden diferir en la forma en que los usuarios pueden crear un archivo, pero no mucho. De todos modos, mostraré el proceso de crear un archivo en Windows XP y dejaré que tu deduzcas o investigues cómo hacerlo en otros sistemas operativos.

El primer paso es hacer un click derecho en el escritorio y selecciona "Nuevo" y luego "documento de texto". Esto creará un archivo de texto y automáticamente te permitirá ingresar su nombre. Allí colocarás el nombre de archivo y la extensión elegida (por ejemplo, "ejemplo.html").

Nota: Para cambiar satisfactoriamente la extensión del archivo de "txt" a "html", necesitarás configurar tu sistema operativo para que muestre extensiones, de otro modo sólo podrás cambiar el nombre. Para ello, abre una carpeta (por ejemplo, "Mis documentos"), ve al menú "Herramientas" y selecciona "Opciones de carpeta...". Una vez abierta la ventana de opciones debes seleccional la solapa "Vista" y desmarcar la casilla "Ocultar extensiones para tipos de archivo conocidos".

Ahora el nombre ha sido elegido (ejemplo.html) y el archivo ha sido creado: estás listo para comenzar a editar este nuevo archivo. Elije un editor y abre el archivo. Mi recomendación es que uses un editor de texto básico. La mayoría de los sistemas operativos modernos proveen editores de texto básicos que puedes utilizar para editar tus páginas web. También puedes utilizar otros editores pero sin agregar formato (por ejemplo, texto en negrita) y salvar el archivo como texto plano solamente. En este ejemplo usaremos el Bloc de notas de Windows para editar el archivo. Simplemente haz un click derecho en el archivo creado recientemente y elige "Abrir con" y luego "Bloc de notas". Esto abrirá el nuevo documento HTML en el editor de texto "Bloc de notas" de Windows.

Ahora estás listo para comenzar a escribir tu página web. En la mayoría de los sistemas operativos modernos puedes ver el documento resultante en tu navegador por defecto haciendo doble click en el archivo. De este modo puedes editar y probar tus archivo de una manera muy sencilla.

Recuerda que siempre puedes ver el código fuente de una página web abriéndola con el navegador y seleccionando la opción "ver código fuente". No es recomendable editar los archivos desde aquí a menos que lo guardes especificando el nombre y la ubicación, dado que estor archivos mostrados por el navegador son habitualmente archivos temporales difíciles de localizar.

Sobre Aprendiendo Código

Temática de la web

Aprendiendo código es un blog sobre tutoriales y videotutoriales principalmente sobre lenguajes de programación distribuidos bajo licencia Creative Commons. No obstante, también se incluiran algunos tutoriales sobre diseño gráfico.

Categorias

De momento la página comenzará unicamente con tutoriales de Blender, HTML, CSS y Xcode aunque posteriormente se incluirán otros lenguajes de programación y programas.

Situación

Actualmente me encuentro desarrollando la pagina web por lo que es muy probable que algunas de las funciones finales de la página web no se encuentren operativas. Disculpen las molestias.

Inicio de la actividad

La actividad del Blog comenzará el 15 de Mayo.

Nos vemos.

Menu