Notas sobre HTML Estándar

Transcripción

1 Notas sobre HTML Estándar Estructura... 2 Insertar comentarios en el código... 3 Salto de línea. <br>... 3 Línea horizontal. <hr>... 3 Encabezados <hx>... 4 Párrafos. Etiqueta <p>... 4 Cita textuales. <blockquote> </blockquote>... 4 Insertar Imágenes. < img>... 4 Tablas <table> </table>... 5 Encabezado de celdas... 6 Unificando celdas... 7 Listas (numeración y viñetas)... 9 Códigos para caracteres especiales Códigos de caracteres Creación de enlaces (links) <a> Texto en movimiento (marquesina). <marquee>

2 HTML HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). Estructura Los elementos son la estructura básica de HTML. Un elemento generalmente tiene una etiqueta (tag) de inicio, por ejemplo: <body>) y una etiqueta de cierre </body> Los elementos tienen dos propiedades básicas: atributos y contenido. Ejemplo: Elemento (Etiqueta) <body bgcolor = # > valor Atributo </Body> <html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. <head>: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. 2

3 Estructura básica de HTML <html> <head> <title> Mi primera página en HTML </title> </head> <body> Curso de HTML Estoy creando mi primera página </body> </html> Insertar comentarios en el código Son comentarios (aclaraciones o recordatorios que se escriben en el HTML), estos NO se ven en el navegador de Internet. <! -- Ejemplo de la etiqueta Title -- > Salto de línea. <br> Para realizar saltos de línea, utilizamos la etiqueta <br/>. Ejemplo: Curso de HTML <br/> Estoy creando mi primera página Línea horizontal. <hr> Se emplea para separar bloques representando una línea horizontal. Ejemplo: Curso de HTML <br/> <hr/> Estoy creando mi primera página 3

4 Encabezados <hx> Se utiliza para poner títulos o encabezados. <h1> Encabezado </h1> X = puede tomar un valor del 1 Al 6. Donde el mayor tamaño se representa con 1 y el menor tamaño con el 6. Ejemplo: <h1> Curso de HTML </h1> Estoy creando mi primer página Párrafos. Etiqueta <p> Para crear o definir párrafos, se usa la etiqueta <p> contenido del párrafo </p> <p> Las razones por las cuales llegaste ahí, serán cada vez aumentadas. Que tus metas se logren, que tus afanes se coronen. Siempre serás dichoso si el buen consejo, después de oído es aplicado. Camina por la vida con mucha prudencia. </p> Cita textuales. <blockquote> </blockquote> Se utiliza para citas, referencias, para indicar que lo expresado pertenece a un autor. <blockquote> "El peor esfuerzo es el que no se hace. Por ello, lucha, persevera y alcanza. Solamente tienes que anhelar lo bueno, ya el mundo conspira para que lo logres" </blockquote> Insertar Imágenes. < img> Se utiliza para insertar imágenes, posee atributos para trabajar con las imágenes. IMPORTANTE: cuando se crea un sitio web, dentro de él se crean carpetas para los objetos que se incrustan, una de ellas es la carpeta de imágenes. Es por ello que ahí deben buscarse las imágenes, bebemos conocer cómo se llaman y que extensión (formato) tienen. Básicamente los formatos son: JPG, PNG y GIF 4

5 Atributos Src (Source) = para indicar la ruta dónde está la imagen, src = imágenes/atrás.gif Alt = muestra texto cuando se coloca el mouse encima de la imagen. No para todos los browser. Width = Ancho de la imagen. Height = Alto de la imagen Border = para colocar un borde a la foto (en pixeles) Align = para alinear la imagen y poder colocar texto alrededor. Name = nombre de la imagen Ejemplos: <img src = images/imagen.jpg > <img src = images/atras.gif alt = Página anterior /> <img src = images/atras.gif width = 250 height = 200 border = 10 / > <img src = "images/bahia.jpg" width = 300 height = 250 border = 2 align = "right" /> Tablas <table> </table> Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo. Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos: 1 Atributos Tr = insertar filas Th = insertar encabezados de fila en la tabla Td = para insertar celdas en la fila (columnas) Colspan = Número de columnas que ocupa la celda Rowspan = Número de filas que ocupa la celda Border= define el borde de la tabla 1 Tomado de: Introducción a XHTML de Javier Eguíluz Pérez 5

6 Background = coloca una imagen en el fondo de la tabla Bgcolor = color de fondo. Align = para alinear la tabla Cellspacing = para separar las celdas (en pixeles) Cellpadding = define un espacio entre el borde de la celda y el contenido de la misma. Width = Ancho de la tabla, puede ser en pixeles o en porcentaje. Height = Alto de la tabla, puede ser en pixeles o en porcentaje. Summary = Permite describir el contenido de la tabla (lo utilizan los buscadores y las personas discapacitadas). Caption = Se emplea para definir la leyenda o título de una tabla. Atributos para las celdas: Align = alinea horizontalmente el contenido de las celdas. (left, right, center) Valign = alinea verticalmente el contenido de las celdas. (bottom, top, middle) Ejemplos Visualización <table border="1" > <td>celda 1</td> <td>celda 2</td> <td>celda 3</td> <td>celda 4</td> <td>celda 5</td> <td>celda 6</td> </table> Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6 Nota: Los bordes en este ejemplo son creados utilizando el atributo "border" para el tag HTML table, el cual es sólo utilizado para mejorar la visualización (para la que se pueda ver). Como los atributos de presentación van siendo desaprobados con cada versión del estándar HTML, y dado que los mismos efectos pueden lograrse usando hojas de estilo, se recomienda evitar el uso de atributos de presentación como "border" y utilizar sólo los estilos CSS. Encabezado de celdas Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla. En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado: 6

7 Código Visualización <table border="1" > <th>columna 1</th> <th>columna 2</th> <th>columna 3</th> <td>celda 1</td> <td>celda 2</td> <td>celda 3</td> <td>celda 4</td> <td>celda 5</td> <td>celda 6</td> </table> Columna 1 Columna 2 Columna 3 Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6 Las características de estas celdas pueden ser logradas visualmente usando una celda simple con atributos de presentación (texto centrado y en negrita), pero las celdas de encabezado proporcionan más información oculta que puede ser útil para navegadores no visuales (los navegadores hablados pueden decir a los usuarios el contenido de una celda asociándolo inmediatamente con el encabezado correspondiente) y arañas (como las de los motores de búsqueda lo que ayudaría en la promoción del sitio). Otra forma de asociar celdas de encabezados con celdas simples es usando los atributos: "headers" para definir una lista de celdas que proveen información de encabezado para la celda. Unificando celdas Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th). Código Visualización <table border="1" > <td>campo 1</td> Campo 1 Campo 2 Campo 3 7

8 <td>campo 2</td> <td>campo 3</td> <td colspan="2">campos 4 y 5</td> <td>campo 6</td> <td>campo 7</td> <td>campo 8</td> <td>campo 9</td> </table> Campos 4 y 5 Campo 6 Campo 7 Campo 8 Campo 9 Observa en el ejemplo anterior como una definición de celda unificando dos celdas, es el equivalente unificado de dos definiciones de celda simple. Esto también funciona para unificar verticalmente con una pequeña diferencia debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente, las definiciones de celda en la columna afectada deberán ser omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas: Código Visualización <table border="1"> <td rowspan="3">campo unificado</td> <td>campo 2</td> <td>campo 3</td> <td>campo 5</td> <td>campo 6</td> <td>campo 8</td> <td>campo 9</td> </table> Campo unificado Campo 2 Campo 3 Campo 5 Campo 6 Campo 8 Campo 9 Debes ser cuidadoso al unificar filas y columnas de modo de que no se encimen las celdas unificadas. Esto puede provocar un resultado indeseado. <table summary = "Productos del mes marzo"> <caption> Productos del mes de marzo </caption> <th>nombre producto de marzo</th> <th>precio unitario</th> <th>unidades</th> <th>subtotal</th> <td>reproductor MP3 (80 GB)</td> <td>192.02</td> <td>1</td> <td>192.02</td> 8

9 <td>fundas de colores</td> <td>2.50</td> <td>5</td> <td>12.50</td> <td>reproductor de radio & control remoto</td> <td>12.99</td> <td>1</td> <td>12.99</td> <th scope="row">total</th> <td>-</td> <td>7</td> <td><strong>207.51</strong></td> </table> Listas (numeración y viñetas) Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser: 1. ordenados <ul> (se refiere a numerados, no ordenados por algún criterio), 2. desordenados <ul> (no numerados), 3. listados de definición <dl>. Veamos cómo es la sintaxis básica y apariencia de estos elementos, a partir de los cuales, pueden hacerse combinaciones muy complejas mediante anidamientos de unos con otros, hasta conseguir prácticamente cualquier presentación deseada: Esto es una lista ordenada (numerada): 1. Primera linea 2. Segunda linea <ol> <li>primera línea </li> <li>segunda línea </li> </ol> Fíjate en que los elementos <LI> no necesitan cierre. Terminan cuando aparece otro igual o se cierra la lista. Puede ser conveniente poner el cierre </LI> si se van a aplicar instrucciones de estilo. Esto es una lista desordenada (no numerada): Primera linea segunda linea 9

10 <ul> <li> Primera línea </li> <li> Segunda línea </li> </ul> En este caso los números han sido sustituidos por unos puntos gruesos. Esa es la apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es disc). Con el valor circle se verá: o o Primera linea segunda linea <ul type= circle > <li>primera línea </li> <li>segunda línea </li> </ul> También puede usarse el valor square. Así: Primera linea segunda linea <ul type= square > <li>primera línea </li> <li>segunda línea </li> </ul> Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: type= 1 (por defecto) para números, type= a para letras mayúsculas, type= a para letras minúsculas, type= i para numeración romana en mayúsculas y type= i para numeración romana en minúsculas. Esto es una lista ordenada con letras mayúsculas: A. Primera linea B. Segunda linea C. Tercera linea <ol type= a > <li> Primera línea </li> <li> Segunda línea </li> <li> Tercera línea </li> </ol> 10

11 Esto es una lista ordenada con letras minúsculas: a. Primera línea b. Segunda línea c. Tercera línea d. Cuarta línea <ol type= a > <li> Primera línea </li> <li> Segunda línea </li> <li> Tercera línea </li> <li> Cuarta línea </li> </ol> Esto es una lista ordenada con numeración romana en mayúsculas: I. Primera linea II. Segunda linea III. Tercera linea IV. Cuarta linea <ol type= i > <li>primera linea </li> <li>segunda linea </li> <li>tercera linea </li> <li>cuarta linea </li> </ol> Esto es una lista ordenada con numeración romana en minúsculas: i. Primera linea ii. Segunda linea iii. Tercera linea iv. Cuarta linea <ol type= i > <li> Primera linea </li> <li> Segunda linea </li> <li> Tercera linea </li> <li> Cuarta linea </li> </ol> 11

12 En algunos casos puede interesarnos que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE. Esto es una lista ordenada con letras mayúsculas y que comienza por la E: E. Primera linea F. Segunda linea G. Tercera linea H. Cuarta linea <ol type= a start= 5 > <li> Primera linea </li> <li> Segunda linea </li> <li> Tercera linea </li> <li> Cuarta linea </li> </ol> El número que pones en el atributo START indica en que número o letra comenzará la lista. la E es la quinta letra. Esto es una lista de definición: Primera linea Segunda linea <dl> <dt>primera linea </dt> <dd>segunda linea </dd> </dl> Observe que ahora en lugar del elemento <li> se utiliza <dt> y <dd>, y como tipo <dl>. estos tres nuevos elementos también se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia. para hacerse una idea de la variedad de aspectos que se pueden conseguir, lo mejor es ver la página de ejemplos de listados. 12

13 Códigos para caracteres especiales Existen diversos sistemas operativos dentro del mundo de los ordenadores. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente después de encender el ordenador, y son los que se encargan de darle "vida" a nuestra máquina. Dado que el HTML pretende ser un lenguaje universal, y que una página debe verse como su creador desea, sin importar si estamos ante un ordenador que "habla" en inglés o en español, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad están todos, pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente. Por ejemplo, nuestra denostada en medio mundo "Ñ" se escribirá: Ñ o bien Ñ Códigos de caracteres Actualmente existen muchos más, con códigos de 4 dígitos, como el euro. Estos son algunos de los más utilizados. Algunos de ellos son: Caracter Código Descripción Alias!! Cerrar exclamación -- " " Dobles comillas -- # # Signo de número -- $ $ Dólar -- % % Tanto por ciento -- Tanto por mil -- & & Ampersand amp Creación de enlaces (links) <a> El siguiente es sin duda un elemento importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, pareciéndonos que siempre estamos en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito Todo esto lo consigue el elemento <a> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o simplemente link (en inglés link=eslabón o enlace). Atributos Href = Inica al recurso, página, archivo, imagen que se mostrará. Target = indica donde se mustra el recurso al que se hace hipervínculo. Algunos valores de target: 13

14 "_blank": Para que el enlace se muestre en una nueva ventana vacía. También puede darse un nombre cualquiera con el mismo efecto. "_self": Para mostrar el enlace en la misma ventana o frame que lo referencia (valor por defecto). "_top": El documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior, si existe. Ejemplos de hipervínculo <a href=" Link de prueba </a> <a hfef= > Link de prueba </a> Ir al índice <a href="indice.html"> </a>. <img src="bolaroja.gif"/> Y este sería el resultado: <a href="indice.html" target="_parent"> </a> Este es un enlace Ir al índice Es necesario comprender y dominar el concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios. La URL de un recurso tiene dos objetivos principales: Identificar de forma única a ese recurso Permitir localizar de forma eficiente ese recurso En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página. Las partes que componen la URL anterior son: Protocolo ( el mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las páginas web utilizan Las páginas web seguras (por ejemplo las de los bancos y las de los servicios de ) utilizan (se añade una letra s). 14

15 Servidor ( simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. Los navegadores son capaces de obtener la dirección de cada servidor a partir de su nombre. Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder. Enlaces comunes Enlace al inicio del sitio web <a href="/">inicio</a> Al pulsar el enlace anterior desde cualquier página web, se vuelve directamente a la página de inicio, home o página principal del sitio web. Enlace a un <a href="mailto:nombre@direccion.com" title="dirección de para solicitar más información"> Solicita más información </a> Al pinchar sobre el enlace anterior, se abre automáticamente el programa de correo electrónico del ordenador del usuario y se establece la dirección de envío al valor indicado después de mailto: La sintaxis es la misma que la de un enlace normal, salvo que se cambia el prefijo por mailto: La sintaxis de mailto: permite utilizarlo para otros ejemplos más complejos:  <a href="mailto:nombre@direccion.com,otro_nombre@direccion.com"> Solicita más información </a>  <a href="mailto:nombre@direccion.com?subject=solicitud de más información"> Solicita más información </a>  <a href="mailto:nombre@direccion.com?body=estaría interesado en solicitar más información sobre sus productos">solicita más información </a> Enlazar hojas de estilos CSS Este código se escribe dentro de la etiquta <head> <link rel="stylesheet" type="text/css" href="/css/comun.css" /> <link rel="stylesheet" type="text/css" href="/css/secciones.css" /> Enlazar el favicon El favicon o icono para favoritos es el pequeño icono que muestran las páginas en varias partes del navegador. Dependiendo del navegador que se utilice, este icono se muestra en la barra de direcciones, en la barra de título del navegador y/o en el menú de favoritos/marcadores. <link rel="shortcut icon" href="/favicon.ico" type="image/ico" /> Aunque en principio la imagen debería ser de tipo.ico (formato gráfico de los iconos), algunos navegadores soportan favicons en otros formatos gráficos más habituales (como por ejemplo.png). 15

16 Texto en movimiento (marquesina). <marquee> Este es un nuevo elemento que sólo funciona con las últimas versiones de los navegadores. Hasta su implementación sus efectos solamente podían conseguirse con JavaScript. La ventaja de hacerlo con JavaScript es que siempre funciona, incluso con navegadores antiguos. Se trata del elemento <marquee> </marquee> que sirve para hacer que el contenido de un bloque se desplace horizontalmente a lo ancho del mismo. Además de texto el bloque puede contener también imágenes. Tiene muchas parametrizaciones: Direction= Establece en que dirección se mueve el contenido del bloque en la pantalla. Puede tener dos valores: Left = izquierda (por defecto) Right =derecha Behavior= Determina cómo se mueve el contenido del bloque en la pantalla. Puede tener tres valores: Scroll hará que el contenido del bloque aparezca por un extremo, desaparezca por el contrario y vuelva a aparecer por donde comenzó. Slide (por defecto) hace que el contenido del bloque se deslice hacia el lado indicado por direction y se detenga al llegar al lado opuesto. Solamente volverá a moverse si la página es cargada de nuevo. Alternate El contenido del bloque se moverá alternativamente en una dirección y otra, comenzando por la indicada por direction Loop=n donde n es un número que indica las veces que el movimiento programado se realizará. El valor infinite (por defecto) producirá un bucle infinito. Scrolldelay=n donde n indica el tiempo de espera en milisegundos que se debe aplicar entre cada redibujado del bloque, es decir, la velocidad del movimiento. Scrollamount=n donde n indica el número de pixels que se deben tomar entre cada redibujado del bloque. Por defecto, tomará el bloque entero. Este parámetro debe utilizarse con cuidado, ya que puede ser contradictorio con el anterior SCROLLDELAY. Align= Es la alineación del bloque en la pantalla. no funciona en todos los navegadores, por lo que es más seguro indicar la alineación fuera del elemento o aplicar instrucciones de estilo. Puede tener tres valores: Center =centro Left = izquierda (por defecto) Right = derecha 16

17 Bgcolor = color donde color indica el color de fondo del bloque. El color se indica mediante su nombre en inglés, como "red", "blue", etc. También puede hacerse por su código RGB, pero esto no funciona igual en todos los navegadores, y en algunos, no funciona. Hspace = px donde px indica el número de pixels que tendrán los márgenes izquierdo y derecho de fuera del bloque. Solamente funciona con el IE. Vspace=px donde px indica el número de pixels que tendrán los márgenes superior e inferior fuera del bloque. Solamente funciona con el IE. Height=px donde px indica el número de pixels que tendrá el bloque de alto. También puede indicarse en tantos por ciento respecto a la altura total de la pantalla. Width=px donde px indica el número de pixels que tendrá el bloque de ancho. También puede indicarse en tantos por ciento respecto a la anchura total de la pantalla. <center> <marquee bgcolor="cyan height="40" width="50% direction="right" behavior="alternate" crolldelay = 400 > Bola Azul <img src="bolaazul.gif"> Desplazándose </marquee> </center> 17