domingo, 18 de septiembre de 2011

LENGUAJE DE PROGRAMACION (HTML) II


Unidad 2. Estructura de una página (I)
Google  

A lo largo de este tema vamos a aprender a crear una página básica.
La estructura básica de una página es:


...

...

Ahora veamos cómo funcionan estas etiquetas.
 
Identificador del tipo de documento
 
Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas  y .
Entre las etiquetas  y  estará comprendido el resto del código HTML de la página.
Por ejemplo:

...

Cabecera de la página
 
La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título.
Está formada por las etiquetas  y . La etiqueta  va justo debajo de la etiqueta .
Por ejemplo:


...

...

Entre las etiquetas  y , las etiquetas que podemos encontrar y más se utilizan son: 

domingo, 11 de septiembre de 2011

LENGUAJE DE PROGRAMACION (HTML)

Unidad 1. Introducción a HTML (I)
Principio del formulario

Final del formulario

A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web.

Qué es HTML


El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado.

Editores


Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite ganar rapidez.
Estos editores visuales pueden generar en ocasiones código basura, es decir, código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML para poder depurar el código de nuestra páginas.

Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos.
En aulaClic puedes encontrar los cursos de Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores más usados hoy en día.
Es aconsejable comenzar utilizando una herramienta lo más sencilla posible, para tener que insertar nosotros mismos el código HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual posteriormente, y depurar el código cuando fuera necesario.
Para crear páginas web escribiendo directamente el código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.
http://www.aulaclic.es/html/graficos/dreamweaver.gif

A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras páginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitirá crear páginas a través del código HTML.


Etiquetas


Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es:
Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos.
La etiqueta de final está delimitada por los caracteres . Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es:
Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.
A continuación tenemos un ejemplo en el que tenemos la etiqueta anidada dentro de la etiqueta .:

Bienvenidos clase  de sistemas

Este código daría como resultado el siguiente texto:
Bienvenidos clase de sistemas
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta , antes de cerrar esta etiqueta hemos puesto la por lo que antes de cerrar la etiqueta debemos cerrar la etiqueta etiqueta .
Para que te vayas haciendo una idea de cómo crear una página html a través del Bloc de notas, vamos a crear una página web sencilla, con una línea de texto.


Mi primera página
 

Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al menú Inicio, Programas, Accesorios, opción Bloc de notas.
Seguidamente introduce, en el documento en blanco, el texto siguiente:


MI PRIMERA PAGINA


Hola, estoy haciendo pruebas.

http://www.aulaclic.es/html/graficos/bloc.gif


Guarda el documento con la extensión htm, con el nombre miprimpag.htm. Puedes guardarlo a través del menú Archivo, opción Guardar.
Pulsando dos veces sobre el icono del archivo miprimpag.htm, éste debería abrirse automáticamente en el navegador que tengas instalado en tu ordenador.
El navegador deberá mostrar una página como la de la derecha.
Como puedes ver, la página resultante es una página que solamente tiene una línea de texto.
http://www.aulaclic.es/html/graficos/miprimpag.gif


Si observas la barra de título del navegador, verás que el título de la página es MI PRIMERA PAGINA. Este título ha sido establecido por la línea MI PRIMERA PAGINA.
El color de fondo de la página ha sido establecido por la línea .
El texto Hola, estoy haciendo pruebas. se ha insertado a través de línea size="5">Hola, estoy haciendo pruebas..

Haz clic en el siguiente enlace y  Realiza el siguiente test: