29 nov 2013

CABECERA DE UN DOCUMENTO

La cabecera de un documento se encuentra delimitada por las etiquetas <HEAD> y <HEAD>. En la cabecera se encuentra la información que aunque no se presenta directamente al usuario, es importante. Por ejemplo, se incluye información como: el título de la página, palabras clave (que utilizará los motores de búsqueda para indexar nuestro documento), información sobre el autor, etc.

Dentro de la cabecera nos podemos encontrar con las siguiente etiquetas:
  • <TITLE> </TITLE>. Permite indicar el título de la página web que aparecerá en la barra del navegador.
  • <!DOCTYPE>
    <html>
    <head>
    <title> Título de la página </title>
    </head>
    <body>
    </body>
    </html>

  • <META>. Permite especificar metadatos de un documento HTML. Los metadatos son información adicional sobre la página Web como el autor, tipo de contenido, etc.
  • Los principales atributos de la etiqueta son:
    1. name. Identifica un nombre de la propiedad.
    2. content. Detalla el valor de la propiedad
    3. scheme. Atributo que especifica el esquema que se usará para interpretar el valor de la propiedad.
    4. http-equiv. Lo utilizan los servidores HTTP para obtener información sobre los encabezados de respuesta del mensaje HTTP. También puede usarse en lugar del atributo name.
    A continuación podemos ver algunos ejemplos de uso de la etiqueta <META>
    1. <META name="description" content="Curso Portales Web">
    2. <META name="keywords" content="HTML, CSS, JavaScript, PHP">
    3. <META name="author" content="Sebastián Ortíz Serna">
    4. <META http-equiv="Content-type" content="text/html;charset=ISO-8859-1">
    donde:
    • En la línea 1 se introduce una descripción genérica del contenido de nuestro documento HTML.
    • En la línea 2, se facilitan las palabras clave que serán utilizadas por los bucadores para indexar nuestra página.
    • La línea 3 sirve para aportar información sobre el autor de los contenidos.
    • Para terminar, en la línea 4 se especifica la codificación del conjunto de caracteres de nuestro documento.

  • <LINK>. Este elemento permite crear un vínculo o relación entre nuestro documento y otros recursos. Suele utilizarse para declarar las hojas de estilo que utiliza el documento, el archivo de scripts, describir la posición del documento dentro de una serie, etc.
  • A continuación podemos ver un ejemplo:
    1. <head>
    2. <title>Tema 2</title>
    3. <link rel="StyleSheet" type="text/css" href=".../style.css" />
    4. <link rel="prev" href="tema1.html" />
    5. <link rel="next" href="tema3.html" />
    6. <link rel="alternate" media="print" href="tema2-imp.html" />
    7. <link rel="alternate" hreflang="en" href="tema2-en.html" />
    8.</head>
    donde:
    • En la línea 3 se hace la declaración de la hoja de estilo que será utilizada en el documento. Se pueden llamar varias hojas de estilo.
    • En las líneas 4 y 5 se indica que el documento pertenece a una serrie de documentos y que la página anteriores el tema1.html y la posterior es el tema3.html. Por tanto, si el navegador lo permite utilizará esta información para enlazarla con los botones anterior y siguiente de la barra de herramientas.
    • En la línea 6 se da informació, para que a la hora de imprimir se utilize otro documento que estará formateado para la impresión.
    • En la línea 7 se le avisa al navegador de que existe una traducción al inglés tema2-en.html de la página que se muestra.

  • <BASE>. Permite definir la URL utilizada para resolver todas las direcciones relativas al documento, así como el marco de destino del nuevo enlace. Para ello basta con asignarle la URL al atributo href y el marco al atributo target.
  • <base href="http://www.ual.es/masterASCI/" target="_blank">
    En el ejemplo se toma como dirección base la dirección http://www.ual.es/masterASCI y como marco destino una nueva ventana.

ESTRUCTURA BÁSICA - HTML

Una etiqueta permite indicarle al navegador información sobre los datos que recibe. La sintaxis de una etiqueta es:

<etiqueta> Texto <etiqueta>
Por ejemplo como veremos más adelante la etiqueta <b> permite poner el texto en negrita.
<b>Texto que aparece en negrita<b>
Texto que aparece en negrita
DOCUMENTO HTML. Básicamente todo documento HTML tiene la siguiente estructura
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>
  • <HEAD>. Contiene información no visible sobre la página. Esta información puede ser el autor, título, palabras clave para los buscadores, etc.
  • <BODY>. Es la parte más importante de la página Web y en esta zona es donde se guarda todo el contenido que va a mostrar el navegador.

HERRAMIENTAS DE LA PROGRAMACIÓN WEB

HTML (HYPERTEXT MARKUP LANGUAGE). Es el lenguaje de marcado para la elaboración de páginas Web. Es utilizado para la descipción de la estructura y el contenido de la página, incluyendo los diferentes elementos que la componen: texto, imágenes, tablas, vídeos, etc. En si sintaxis son utilizadas las denominadas etiquetas, situeadas entre corchetes angulares (<, >), Es interpretado por los navegadores Web permitiéndonos visualizar la página Web diseñada.

CSS (CASCADING STYLE SHEETS). Las hojas de estilo en cascada son ficheros que permiten definir la forma en que una Web es mostrada en el navegador o impresa. De esta forma indicamos cómo cualquier detalle de la misma es formateado o cuál es su estilo: color, forma, tamaño, fuente, etc.

JAVASCRIPT. Se trata de un lenguaje de sripting basado en objetos y sin tipos de datos, utilizado para el acceso a objetos en aplicaciones, fundamentalmente integrado en páginas Web, permitiendo generarlas de forma dinámica y con interfaces gráficas mejoradas. JavaScript es interpretado, como HTML, por el navegador Web.

PHP (HYPERTEXT PRE-PROCESSOR). Es un lenguaje interpretado del lado del servidor que permite la construcción de páginas Web dinámicas. Uno de sus puntos fuertes en la inclusión de un gran número de funciones para la explotación de bases de datos, junto a SQL, de una forma sencilla.

SQL (STANDARD QUERY LANGUAJE). Es un lenguaje de tipo declarativo para la creación, acceso y manipulación de bases de datos relacionales. Su importancia en el diseño y creación de portales Web radica en las enormes posibilidades para la construcción de consultas sobre bases de datos y obtener información con la que construir páginas Web dinámicamente.

28 nov 2013

EDITORES DE PAGINAS WEB

Para poder practicar programación web necesitamos algunos editores o creadores de código. Básicamente se utiliza el block de notas del sistema operativo pero hoy les traigo unas herramientas que nos facilitarán el trabajo de programación web.
  1. SUBLIME TEXT 2.0 - PORTABLE
  2. Este editor de código es el mas simple para aprender a manejar, además nos ahorra tiempo terminando la etiqueta y en algunas ocasiones escribiendo los atributos por nosotros.

    Les dejo el link de descargar y exploren para aprenderlo a manejar.
    http://www.mediafire.com/
     https://mega.co.nz/

  3. NOTEPAD++
  4. Otra herramienta muy útil y simple para la creación de código html.
    En Mediafire está el archivo para instalar , y en Mega tenemos el Notepad++ Portable.
    https://www.mediafire.com/https://mega.co.nz/

  5. CODIO
  6. Esta vez no traemos un programa, esta vez traemos una página. Codio es una web en la que podemos crear y editar código web.
    Para trabajar en esta web necesitan hacer un previo registro.
    https://codio.com/