Aprendiendo HTML - Básico utilizando el Dreamweaver CS4: octubre 2010

martes, 19 de octubre de 2010

Guía #3

Formato de párrafos y textos en HTML

Una de las cosas principales que hacemos para dar formato a nuestro texto es su alineación, entonces si deseamos introducir un texto alineado en alguna dirección abriríamos nuestro bloc de notas y escribiríamos:

<html>

</body>

<p align="left">Alineando a la izquierda</p>

<p align="center">Alineando al centro</p>

<p align="right">Alineando a la derecha</p>

</body>

</html>

Viéndose así:

De seguro que se han dado cuenta que el atributo align=”left” no es muy necesario usarlo ya que el navegador por defecto usa esa alineación para todos los párrafos.

Nota: todo ejemplo que muestre estará dentro de las etiquetas <body> </body> .. en caso contrario yo lo aclararé =D..

Ahora seguro han d estar pensando: ¿qué hacer cuando el texto es demasiado largo?¿escribir el atributo align para cada párrafo? … Pues eso no será así; cuando el texto es demasiado largo se usa la etiqueta <div> </div>.. entonces el siguiente código:

<p align="left">Parrafo1</p>

<p align="left"> Parrafo3</p>

<p align="left"> Parrafo2</p>

Es equivalente a:

<p>Parrafo1</p>

<p>Parrafo2</p>

<p>Parrafo3</p>

</div>

También existen unas etiquetas especiales para resaltar los títulos de nuestros textos en cuanto a su tamaño se refiere, estás etiquetas se les llama encabezados y son de 6 niveles, al decirles que resalta el texto lo hace en cuanto al tamaño.. el código es:

<html>

<head>

<title>Todos los encabezados</title>

</head>

<body>

<h1>Encabezado de nivel 1</h1>

<h2>Encabezado de nivel 2</h2>

<h3>Encabezado de nivel 3</h3>

<h4>Encabezado de nivel 4</h4>

<h5>Encabezado de nivel 5</h5>

<h6>Encabezado de nivel 6</h6>

</body>

</html>

Subíndices y supraíndices

Para los Subíndices se usará las etiquetas <sub></sub> y para los supraíndices usaremos <sup></sup> y se utilizarán de la siguiente manera:

O<sup>2-</sup><sub>2</sub> es un Peróxido

lunes, 11 de octubre de 2010

Guia #2

martes, 5 de octubre de 2010

Creando nuestra primera página

Podemos ya con estos conocimientos, y alguno que otro más, crear nuestra primera página. Entonces abrimos nuestro editor de textos y copiamos o digitamos el siguiente código.

* Recomiendo digitar el texto, así se nos hará más familiar la escritura del código.

Ahora debemos guardar el archivo con extensión .html o .htm en tu disco duro. Para ello accedemos al menú Archivo y seleccionamos la opción Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html.

Posible problema:

Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una página web. Lo que está pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensión .txt y en realidad lo que está guardando en el disco duro es mi_pagina.html.txt

Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el menú de Ver seleccionáis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de selección que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (Así se hace en Win98, puede variar un poco en otras versiones de Windows.)

Con ello conseguiremos que se vea siempre la extensión del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensión que no sea .txt

Ya con todo esto el abrir nuestra página no debe ser ningún problema para nosotros, entonces procedemos a buscar el archivo en el lugar donde lo hemos guardado y lo abrimos; para que sepan que lo guardaron en extensión .html ... su archivo debe estar con el siguiente icono -- >

Entonces comprobado esto también, al abrirlo la página debe mostrar lo siguiente:

Guía #1

Se muestra un video realizado por mi persona.. con la primera guía de este humilde manual =D, comenten, expongan sus dudas... gracias!!

Sería recomendable agranden el video a pantalla completa ... =D , y disculpen por el sonido de la lectora... ya no me volverá a suceder en los siguientes videos ...

domingo, 3 de octubre de 2010

Usando código HTML

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta, la cual presenta en la gran mayoría de veces dos partes:

Una apertura que se denota de la siguiente manera: <etiqueta>

Un cierre de tipo: </etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrira las modificaciones que caracterizan a esta etiqueta. Asi por ejemplo:

Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente codigo:

<b>Esto esta en negrita</b>

El resultado Sera:

* Por el momento no se pregunten como salió esa ventana de intenert de explorer, sólo vean el resultado =D ... la respuesta estará en la siguiente sección ... verán la luz!!!

Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML escribiéramos:

<p>Hola, estamos en el párrafo 1</p>
<p>Ahora hemos cambiado de párrafo</p>

El resultado sería:

* Nótese que por más que las líneas de código están juntas; en la visualización las líneas se encuentran separadas ... XD!

Partes de un documento HTML
Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el título de nuestra página.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento de texto con la siguiente estructura:

Ojo: Las mayúsculas o minúsculas son indiferentes al escribir etiquetas

Creación de Sitios en Dreamweaver

Un sitio de Adobe Dreamweaver CS4 no es nada más que el conjunto de archivos y activos del sitio Web que crearemos. Podemos crear páginas Web en nuestro equipo, cargarlas en un servidor Web y mantener el sitio mediante la transferencia de archivos actualizados una vez guardados. También podemos editar y mantener sitios Web que no se hayan creado con Dreamweaver, pero en este blog solo explicaré como crear un sitio donde esté almacenado todo el contenido de tu web... hay que ser ordenados....

Para crear un sitio, al iniciar dreamweaver CS4 nos aparecerá la siguiente ventana en donde seleccionamos "Sitio de Dreamweaber"..

luego en la ventana que nos sale colocamos un nombre a nuestro sitio y una direccion HTTP.. y le damos siguiente

en la ventana siguiente seleccionamos que no se desea utilizar una ecnología de servidor... eso será motivo de hacer otro blog XD... y le damos siguiente

Luego dejamos la primera opción seleccionada ya que nos permitirá crear nuestro nuestro en nuestro equipo dándole una ruta... el dreamweaber automaticamente a creado una ruta, en mi caso esta en "mis documentos" y si se fijan el nombre de la carpeta es el nombre del sitio que elegimos... bueno le damos siguiente

En la siguiente ventana nos preguntarán como conectarnos a un servidor remoto, y como esto no haremos.. seleccionamos "ninguno" y le damos siguiente ... ¿por qué? ... porque solo ejecutaremos nuestras páginas web en nuestro equipo.

Ahora nos saldrá toda la configuración de nuestro sitio como para recodarlo... ya terminamos.. seleccionamos "completado".