Guia HTML

29-08-2011
Estructura bsica HTML
<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
<HEAD>: Especifica el prlogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que ser utilizado por los marcadores del navegador e identificar el contenido de la pgina. Solo puede haber un ttulo por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de l. En head no hay que colocar nada del texto del documento.
<BODY>: Encierra el resto del documento, el contenido.
Ver ejemplo
Profesor. Jos Castillo Olivares
Primeros pasos
<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta <H6>.....</H6> <P>: Prrafos. En principio, sin entrar en detalles de alineacin u otras caractersticas, digamos que se definen por las tags <P>.....<P>. <BR>: Saltos de lnea : Comentarios.
Ver Ejemplo
29-08-2011
Creacin de enlaces
Ver Ejemplo
Los enlaces se generan mediante la tag <A>.....</A <A HREF="URL">.....</A>: Es el ms habitual de los atributos y sirve para saltar entre diferentes URLs. De momento veremos: Saltar en una presentacin del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A HREF="archivo2.html">Siguiente pgina</a> Saltar de nuestra presentacin a otra presentacin web llamada www.bienvenidos.es: <A HREF="http://www.bienvenidos.es">Visita esta pgina</A> <A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una seccin de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vnculo a dicha seccin escribiremos: <A HREF="#parte1">Ir a la primera parte</A>
Listas
Ver Ejemplo
29-08-2011
Estilo de caracteres
Estilos lgicos: Indican como se va a emplear el texto que realzamos, no el como se va a formatear. <em>.....</em>: Indica que los carcteres estarn enfatizados de alguna manera, generalmente en cursiva aunque depender del navegador. <strong>.....</strong>: Los carcteres tendrn mayor nfasis, generalmente en negrita. <code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier. <samp>.....</samp>: Muy similar a code. <kdb>.....</kdb>:Texto que el usuario debe escribir. <var>.....</var>:Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada. <dfn>.....</dfn>:Se usa para resaltar una palabra que se va a definir. <cite>.....</cite>: Se usa para citas cortas. Estilos fsicos: Modifican la presentacin real del texto. <b>.....</b>: Pone el texto en negrita. <i>.....</i>: Pone el texto en cursiva. <tt>.....</tt>: Pone el texto en fuente monoespaciada. <u>.....</u>: Subraya el texto afectado.
Ver Ejemplo
Texto preformateado
<PRE> Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte pero nos encontramos con una excepcin a esta regla cuando utilizamos las tags <pre>.....</pre>. Sin embargo esta tag convertir el texto afectado a fuente monoespaciada (posiblemente Courier). Esta tag se usaba para hacer tablas en versiones anteriores del lenguaje HTML ahora su utilidad puede reducirse a convertir a HTML, rpida y fcilmente, archivos de correo electrnico y publicaciones de grupos Usenet.
Ver Ejemplo
29-08-2011
Saltos y Lneas
<HR> <BR> Lneas divisorias: Se crean con la tag <hr> que no tiene tag de cierre ni lleva texto asociado. Se puede especificar el ancho de la lnea con el siguiente atributo <hr width="80%"> . Saltos de lnea: La tag <br> inserta un salto de lnea donde se coloque. Puede colocar tantas como desee y se insertar un salto de lnea por cada una de ellas. Ver
Ejemplo
Caracteres Especiales HTML
29-08-2011
Tablas
<TABLE> <TR> <TD> Las tablas surgieron con la versin HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentacin en diferentes filas y columnas de modo que podamos resumir grandes cantidades de informacin de una manera que puede representarse rpida y fcilmente. El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>. Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularn automticamente segn las celdas que hay en cada fila. Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.
Ver Ejemplo
Tablas
Ttulo Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las tags <caption>.....</caption>. Las tags de ttulo van dentro de las tags de la tabla y son opcionales, el ttulo no es obligatorio. La tag de apertura puede llevar consigo el atributo align que indicar si el ttulo va encima o debajo de la tabla. align="top" indicara encima de la tabla y align="bottom" indicara en la parte de abajo. Alineacin de celdas Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. As, dentro de cada tag de celda podemos encontrar: El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center). El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle). Celdas extendidas Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags <th> o <td> los atributos: rowspan= ms un valor para indicar el nmero de filas que se quiere abarcar. colspan= ms un valor para indicar el nmero de columnas que se quiere abarcar.
29-08-2011
Espacios Tablas
width= Acompaa a <table> y especifica el ancho de la tabla, tanto en nmero de pixeles como en porcentaje respecto al ancho de la pantalla. Tambin puede acompaar a las tags <th> o <td> para especificar el ancho de las columnas. Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que indicar el ancho del borde en pixeles. Border="0" indicara la ausencia de borde. Cellspacing= Suele acompaar a la tag <table>. Indica el nmero de pixeles que separan cada celda. El valor predeterminado suele ser 2. Cellpadding= Tambin acompaa a la tag <table>. Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1.
Ver Ejemplo
Imgenes
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb">
29-08-2011
Imgenes
<IMG> El uso de imgenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imgenes en una presentacin web es muy sencillo, solo debe de tener en cuenta que las imgenes tienen que tener los formatos GIF, JPEG o PNG. Las imgenes en lnea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompaarse de los siguientes atributos: src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. Align= Permite controlar la alineacin Valor:left, right, top, middle y bottom. WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar. HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen. BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
Ver Ejemplo

Guia HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia HTML

Enviado por

Direitos autorais:

Formatos disponíveis

29-08-2011

Estructura bsica HTML

<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.

<BODY>: Encierra el resto del documento, el contenido.

Profesor. Jos Castillo Olivares

Profesor. Jos Castillo Olivares

Profesor. Jos Castillo Olivares

Caracteres Especiales HTML

Profesor. Jos Castillo Olivares

Profesor. Jos Castillo Olivares

Profesor. Jos Castillo Olivares

Você também pode gostar