[CURSILLO] HTML básico

Moderador: dresha

Reglas del Foro
En Ogarena no están bien vistos el Warez ni la Piratería; para eso hay otros foros que seguro os acogen con los brazos abiertos.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

[CURSILLO] HTML básico

Mensaje por apokalypse »

INTRODUCCION AL HTML

El HTML es un lenguaje basado en etiquetas XML diseñado para mostrar las páginas Web.

Todas las páginas web que se muestran en un navegador nos muestran un código HTML. Los cambios en los datos y los efectos dinámicos se hacen o bien cambiando el HTML antes de entregarlo al cliente (como en PHP) o bien una vez entregada la página (Javascript).

Para los que nunca hayan trabajado con XML, aquí os dejo una pequeña introducción:

Los documentos XML en general están formados por etiquetas que pueden tener este aspecto:

Código: Seleccionar todo

<etiqueta parametro1="valor"> ... </etiqueta>
Una etiqueta puede tener diferentes parametros (o no tenerlos), y para casi todas es necesario la etiqueta de cierre (los estandares modernos de HTML usan siempre etiquetas de cierre, aunque no siempre es obligatorio). Una etiqueta, a su vez, tiene otras etiquetas en su interior, de modo, que el XML puede tener un aspecto como el de este ejemplo:

Código: Seleccionar todo

<listacompra>
<articulo>
<nombre>Leche</nombre>
<cantidad>3 cajas</cantidad>
</articulo>
<articulo>
<nombre>Pan</nombre>
<cantidad>2 barras</cantidad>
</articulo>
<articulo>
<nombre>Huevos</nombre>
<cantidad>1 docena</cantidad>
</articulo>
</listacompra>
Última edición por apokalypse el 13 May 2011 10:11, editado 10 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 1

Mensaje por apokalypse »

BASE DE UN DOCUMENTO HTML

Todo documento web está formado por 2 partes:

* Cabecera : sirve para almacenar datos y funciones que afectan al comportamiento de la página, pero no son elementos "visuales" (es decir, están ahí pero no se muestran al usuario porque no tienen nada que mostrar). La cabecera se identifica por medio de la etiqueta "<head> ... </head>".

* Cuerpo : es la parte visual de la página web. En esta parte aparecen las etiquetas HTML que forman los distintos elementos de una página web. Se identifica por medio de la etiqueta "<body> ... </body>". La etiqueta <body> tiene algunos parámetros útiles:
+ background="imagen.jpg" : establece la imagen de fondo de la página web. Si se quiere mostrar solo una vez (resoluciones de pantalla mayores que el tamaño de la imagen), le podeis añadir el parámetro behavior="fixed".
+ bgcolor=#XXXXXX : muestra un color de fondo de página. El color está en formato hexadecimal RGB.

El aspecto mínimo que tiene un documento web es el siguiente:

Código: Seleccionar todo

<html>
<head>
<title>Titulo de la pagina</title>
</head>
<body>
Esta es la parte que se muestra al usuario, el cuerpo del documento
</body>
</html>
La etiqueta "<title> ... </title>" define el título del documento web, y solo puede contener texto en su interior.
Última edición por apokalypse el 09 Abr 2011 18:47, editado 2 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 2

Mensaje por apokalypse »

TEXTOS EN HTML

Los textos son una parte vital del HTML. Se usan para mostrar datos, cabeceras o información útil.
Los textos pueden ser formateados con las siguientes etiquetas:

* "<b> ... </b>" : hace que el texto de su interior se escriba en negrita

* "<i> ... </i>" : hace que el texto de su interior se escriba en cursiva

* "<u> ... </u>" : subraya el texto de su interior

* "<br>" o "<br />" : inserta un salto de línea en el texto.

* "<p align="center/right/left"> ... </p>" : esta etiqueta permite crear párrafos y el atributo align establece su alineación (en el centro, a la derecha o a la izquierda respectivamente).

* "<font> ... </font>" : Esta etiqueta sirve para definir varios aspectos del texto que contiene en su interior:
+ face="Arial Black" : este atributo permite cambiar el tipo de letra. Basta con escribir el nombre de la fuente para que el navegador lo muestre con dicho tipo de letra.
+ color=#XXXXXX : este atributo establece el color con el que se muestra el texto de su interior.
+ size=5 : este atributo establece el tamaño de letra del texto del interior de la etiqueta

* "<h1> ... </h1>" --> "<h6> ... </h6>": estas etiquetas muestran el texto con un formato de encabezados que van del más grande (h1) hasta el más pequeño (h6).

* "<hr>" : inserta una línea horizontal en el documento web. Tiene los siguientes atibutos:
+ align="center" : define la alineación de la línea.
+ size="2" : grosor en píxeles de la línea
+ width="400" : ancho de la línea en píxeles (si se deja vacio llena todo el ancho posible)
+ color="red" : define el color de la línea (colores elementales en nomenclatura inglesa)

* "<div align="center/right/left"> ... </div>" : esta etiqueta permite definir la alineación de un bloque del documento con sus textos, imagenes, etc. Tiene más usos, pero de momento no los veremos.

* "<center> ... </center>" : aunque cada vez se usa menos, esta etiqueta sigue siendo válida y alinea al centro el bloque de documento HTML que tiene en su interior.

* "<sup> ... </sup>" : sirve para escribir un texto a modo de superindice (por ejemplo : m<sup>2</sup> para los metros cuadrados)

* "<sub> ... </sub>" : sirve para escribir un texto a modo de subindice (por ejemplo : T<sub>total</sub> para escribir Ttotal)
Última edición por apokalypse el 10 Abr 2011 12:01, editado 4 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 3

Mensaje por apokalypse »

CARACTERES ESPECIALES

Uno de los problemas que aparecen al escribir textos en HTML, es que muchos navegadores no reconocen caracteres como los acentos, la "Ñ" y otros caracteres considerados "especiales" (< , > , ? , & , ...).

Para escribir estos caracteres especiales hay que escribir un pequeño código. Aquí os dejo una lista de los caracteres especiales junto con su código:

* " "
* & &
* < <
* > >
* (espacio sin separación) &nbsp;
* ¡ &iexcl;
* ¢ &cent;
* £ &pound;
* ¤ &curren;
* ¥ &yen;
* ¦ &brvbar;
* § &sect;
* ¨ &uml;
* © &copy;
* ª &ordf;
* « &laquo;
* ¬ &not;
* ® &reg;
* ¯ &macr;
* (guión débil) &shy;
* °(grados) &deg;
* ± &plusmn;
* ² &sup2;
* ³ &sup3;
* ´ &acute;
* µ &micro;
* &para;
* · &middot;
* ¸(cedilla) &cedil;
* ¹ &sup1;
* º(masculino) &ordm;
* » &raquo;
* ¼ &frac14;
* ½ &frac12;
* ¾ &frac34;
* ¿ &iquest;
* À &Agrave;
* Á &Aacute;
* Â &Acirc;
* Ã &Atilde;
* Ä &Auml;
* Å &Aring;
* Æ &AElig;
* Ç &Ccedil;
* È &Egrave;
* É &Eacute;
* Ê &Ecirc;
* Ë &Euml;
* Ì &Igrave;
* Í &Iacute;
* Î &Icirc;
* Ï &Iuml;
* Ð &ETH;
* Ñ &Ntilde;
* Ò &Ograve;
* Ó &Oacute;
* Ô &Ocirc;
* Õ &Otilde;
* Ö &Ouml;
* × &times;
* Ø &Oslash;
* Ù &Ugrave;
* Ú &Uacute;
* Û &Ucirc;
* Ü &Uuml;
* Ý &Yacute;
* Þ &THORN;
* ß &szlig;
* à &agrave;
* á &aacute;
* â &acirc;
* ã &atilde;
* ä &auml;
* å &aring;
* æ &aelig;
* ç &ccedil;
* è &egrave;
* é &eacute;
* ê &ecirc;
* ë &euml;
* ì &igrave;
* í &iacute;
* î &icirc;
* ï &iuml;
* ð &eth;
* ñ &ntilde;
* ò &ograve;
* ó &oacute;
* ô &ocirc;
* õ &otilde;
* ö &ouml;
* ÷ &divide;
* ø &oslash;
* ù &ugrave;
* ú &uacute;
* û &ucirc;
* ü &uuml;
* ý &yacute;
* þ &thorn;
* ÿ &yuml;
Última edición por apokalypse el 05 May 2011 11:51, editado 5 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 4

Mensaje por apokalypse »

Enlaces y Anclas

Uno de los elementos más útiles de una página web son los ENLACES. Con los enlaces consigues crear una estructura de páginas web en las que vas navegando, permitiendo de ese modo tener diferentes contenidos con diferentes documentos HTML y permitir una navegación controlada por los mismos.

La etiqueta que define un enlace es "<a ... > </a>". Aquí se muestra una lista de los parámetros de la etiqueta:

* href="pagina.html" : este atributo contiene la dirección de la página a la que el navegador debe ir cuando se activa el enlace.
* target="marco1" : este atributo sirve para hacer cambiar un marco de FRAME (se verá y explicará más tarde el uso de este atributo)
* name="nombre" : con este atributo y sin usar el HREF, se pueden crear ANCLAS, las cuales permiten identificar una parte concreta de la página a la que podemos ir si en otro enlace ponemos el href="#nombre1".

Pongo aquí un ejemplo del uso de anclas:

Código: Seleccionar todo

<html>
<head><title>Ejemplo ancla</title></head>
<body>
<a name="nombre">ANCLA</a>
<a href="#nombre"> Al hacer click en este enlace la página se dirige al ancla</a>
</body>
</html>
El interior de la etiqueta "<a> </a>" solo puede contener:
* Texto con formato (<font>, etc...)
* Imagen
Última edición por apokalypse el 04 May 2011 11:06, editado 3 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 5

Mensaje por apokalypse »

LISTAS

En ocasiones debemos representar listas y/o esquemas con un orden concreto, y conseguir hacer ese esquema usando texto puro, sería una labor muy ardua, por ello, HTML incluye dos etiquetas que nos permiten crear listas:

* Listas ordenadas : Estas listas son muy útiles para hacer esquemas o índices, ya que cada elemento va precedido de un número correspondiente al orden del mismo, además de ocuparse el solito de hacer los sangrados necesarios. Se caracteriza por la etiqueta "<ol> ...</ol>"
* Listas no ordenadas : Son listas similares a las ordenadas, salvo que sustituyen los números por símbolos iguales para niveles iguales en la lista. Se caracteriza por la etiqueta "<ul> ... </ul>".

Con estas etiquetas solo definimos la lista. Para insertar elementos de la lista se debe usar la etiqueta "<li> ... </li>".

Aquí os dejo un ejemplo de una lista ordenada y otra desordenada:

Código: Seleccionar todo

<html>
<head><title></title></head>
<body>
Lista ordenada: <br />
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
<br />
Lista no ordenada: <br />
<ul>
<li>Elemento X</li>
<li>Elemento Y</li>
<li>Elemento Z</li>
</ul>
</body>
</html>
Si queremos incluir listas dentro de otras listas, podemos crear una nueva etiqueta de lista de la etiqueta "<li> ... </li>". Un ejemplo de lista encadenada:

Código: Seleccionar todo

<html>
<head><title></title></head>
<body>
Lista encadenada: <br />
<ol>
<li>
Tema 1
<ol>
<li>Tema 1.1</li>
<li>Tema 1.2</li>
<li>Tema 1.3</li>
</ol>
</li>
<li>
Tema 2
<ol>
<li>Tema 2.1</li>
<li>Tema 2.2</li>
<li>Tema 2.3</li>
</ol>
</li>
</body>
</html>
Última edición por apokalypse el 05 May 2011 11:51, editado 2 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 6

Mensaje por apokalypse »

IMÁGENES

Las imágenes son uno de los elementos más útiles que puedan usarse en cualquier página Web, ya que con ellas se pueden lograr mejores aspectos gráficos con usando todo HTML puro.

La etiqueta que define una imagen es "<img ...>", sin etiqueta de cierre, y tiene los siguientes parámetros:
* width=100 : define el ancho de la imagen
* height=50 : define el alto de la imagen
* src="imagen.jpg" : es la ruta donde está el archivo de imagen que se quiera mostrar.

Las imágenes tienen una multitud de usos en la construcción de páginas Web:
- Cabeceras
- Botones
- Fotos
- Pequeños textos fijos
- ...

Eso si, no conviene sobrecargar de imágenes una página, porque ralentizaría demasiado la conexión, de modo que hay que buscar un equilibrio entre aspecto y número de imágenes.
Última edición por apokalypse el 09 May 2011 14:11, editado 2 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 7

Mensaje por apokalypse »

FORMULARIOS

Los Formularios son elementos Web que permiten al usuario insertar datos en una página que luego serán utilizados por la página Web. Por ejemplo, un formulario de registro de usuario o un login de usuario.

La etiqueta que define un formulario es "<form ...> ... </form>" y tiene los siguientos parámetros útiles:

* action="registrar.php" : es la dirección de la página Web que va a recoger los datos enviados en el formulario.
* method="GET" // "POST" : selecciona el método que se empleará para enviar los datos a la página Web de destino. El método GET envía los datos a traves de la URL mientras que el método POST crea datos invisibles que se envían de una página a la otra.

Pero la etiqueta "<form>...</form>" solo define el formulario y los tipos de datos que se pueden insertar en él se escriben como estas etiquetas:

* BOTONES : se pueden usar para enviar los datos de un formulario o para combinarlos con Javascript y crear efectos con ellos. Un ejemplo de ambos usos:

Código: Seleccionar todo

Boton de envio de formulario
<input type="submit" value="Texto del boton"> ---- Sin etiqueta de cierre

Boton normal
<input type="button" value="Texto del boton"> --- Sin etiqueta de cierre
* CASILLAS DE VERIFICACIÓN : son los elementos que permiten activar o no una opción concreta haciendo click en un cuadro blanco que contiene una marca (o no). Usan tambien la etiqueta INPUT de la siguiente manera:

Código: Seleccionar todo

<input type="checkbox" name="nombreDelControl" checked> --- checked indica si está activado por defecto o no.
* RADIO BOTONES : son los elementos que permiten elegir una de varias opciones, normalmente como circulos blancos que se activan con un punto negro en su interior. Usan la etiqueta INPUT de la siguiente manera:

Código: Seleccionar todo

<input type="radio" name="nombreDelControl" checked> --- igual que en "checkbox"
* MENUES : en este tipo de controles, se puede elegir una de las varias opciones que aparecen en el menú despleglable. La forma de hacer un menú es la de siguiente manera:

Código: Seleccionar todo

<SELECT name="nombreDelMenu">
<OPTION label="etiquetaOPCION" value="valorDeLaOpcion" selected>Texto de la opcion</OPTION> --- selected marca la opción por defecto

<OPTGROUP label="Etiqueta de submenu"> --- esto permite crear agrupaciones de opciones
<OPTION label="etiquetaOPCION" value="valorDeLaOpcion">Texto de la opcion</OPTION>
<OPTION label="etiquetaOPCION2" value="valorDeLaOpcion2">Texto de la opcion2</OPTION>
</OPTGROUP>
</SELECT>
* CONTROLES OCULTOS : los controles ocultos son útiles para enviar información que el usuario no necesita ver, pero sin embargo es información útil para la página que recoge los datos del formulario. Para enviar un dato oculto, se hace con el siguiente uso de la etiqueta INPUT:

Código: Seleccionar todo

<input type="hidden" name="nombreControl" value="valorDelControl">
* TEXTO : el texto es la forma de entrada de datos más básica. Se pueden insertar tres tipos de textos : texto corto normal, texto corto como contraseña y texto de varias lineas. Se explica el uso de cada uno de ellas en este ejemplo:

Código: Seleccionar todo

Cuadro de texto de varias lineas
<textarea name="nombreCuadroVariasLineas" rows=5 cols=40></textarea> --- rows=filas, cols=columnas

Cuadro de texto simple
<input type="text" name="nombreTexto"> --- sin etiqueta de cierre

Cuadro de contraseña
<input type="password" name="nombreContraseña"> --- sin etiqueta de cierre
* SELECCIONAR ARCHIVO : a veces nos interesa que el usuario pueda enviar archivos a la página Web, y se hace siguiendo este uso de la etiqueta INPUT:

Código: Seleccionar todo

<INPUT type="file" name="nombreControlFichero">
Última edición por apokalypse el 10 May 2011 15:20, editado 2 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 8

Mensaje por apokalypse »

MAPAS

Los Mapas son elementos muy útiles en la construcción de un diseño Web. Usando una imagen podemos hacer que el mapa nos redirija a una página concreta dependiendo de donde haya pulsado el usuario. Se identifica por la etiqueta "<map name="NombreMapa">...</map>" y se usa de la siguiente manera:

Código: Seleccionar todo

<map name="prueba1">
<area shape="RECT" coords="X1,Y1,X2,Y2" href="a1.html"> --- define un rectangulo (x1,y1)-(x2,y2)
<area shape="CIRCLE" coords="X1,Y1,R" href="a2.html"> --- define un circulo centrado en (x1,y1) y de radio R
<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="a3.html"> --- define un poligono siguiendo el orden (x1,y1)-(x2,y2)-(x3,y3)-(x4,y4)-(x1,y1) (se cierra con el primero)
</map>
<img src="mapa.gif" width="380" height="72" border="0" usemap="#prueba1"> --- el usemap es para aplicar el mapa a esta imagen
Última edición por apokalypse el 11 May 2011 10:55, editado 3 veces en total.
apokalypse
Helper Programación
Helper Programación
Mensajes: 207
Registrado: 25 Jun 2008 03:31

Capítulo 9

Mensaje por apokalypse »

TABLAS

Muchas veces puede interesarnos usar tablas para representar datos. HTML incluye la etiqueta "<table> ... </table>", la cual solo define la tabla y tiene los siguientes atributos:

* border="0" : define el ancho del border en píxeles
* cellspacing="1" : define la separación en píxeles entre las celdas de la tabla
* cellpadding="1" : define en píxeles el margen entre el borde interno de la celda y el contenido de la misma

Pero con la etiqueta "<table>...</table>" solo definimos la tabla. Una vez dentro de la tabla se usa la etiqueta "<tr>...</tr>", que define las líneas de la tabla, pero no sus celdas. Para definir las celdas se usa la etiqueta "<td>...</td>" dentro de las "<tr>...</tr>" y tiene los siguientes parámetros útiles:

* background="imagen.jpg" : define la imagen de fondo de la celda
* bgcolor=#FF0000 : define el color de fondo de la celda en formato RGB hexadecimal
* align="left/right/center" : define el alineamiento horizontal de los elementos del interior de la celda
* valign="top/bottom/center" : define el alineamiento vertical de los elementos del interior de la celda
* width=100 : ancho de la celda
* height=50 : alto de la celda
* rowspan=2 : con este atributo se consiguen unificar celdas verticalmente. En este caso, cojería esa celda y la de abajo y las uniría en una única celda
* colspan=2 : funciona igual que rowspan, solo que unifica celdas en horizontal.

Os pongo aquí un ejemplo de tabla HTML

Código: Seleccionar todo

<table border="1">
<tr>
<th> Origen </th> --- <th> es una variante de TD que sirve para hacer cabeceras
<th> Destino </th>
</tr>
<tr>
<td>Burgos</td>
<td>Bilbao</td>
</tr>
<tr>
<td>Burgos</td>
<td>Madrid</td>
</tr>
<tr>
<td>Burgos</td>
<td>Santander</td>
</tr>
</table>
Otro de los usos de la tablas, es que dentro de una celda puede haber mas tablas, y si creamos una tabla exterior para el marco de la web, y otras tablas en su interior que vayan colocando los elementos de la Web en su sitio, tenemos una forma de crear una estructura de tablas para que sirva de soporte para nuestras páginas Web.
Última edición por apokalypse el 12 May 2011 21:16, editado 2 veces en total.
Responder