Un documento HTML ha de estar delimitado por la etiqueta< ht ml> y</ht ml>. 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 titulo 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 con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo,
palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>
Con todo lo que conocemos ya sobre HTML podemos construir una página web que ya tiene
bastante sentido. Vemos un ejemplo a continuación.
<html>
<head>
<title>Elaboración de Paginas Web</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Elaboración de Páginas Web de Tercer Semestre</b>.</p>
<p>Aquí aprenderás de manera personal a realizar tu pagina web.</p>
<p>Estás en la página <b>Elaboración de Páginas Web de Tercer Semestre</b>.</p>
<p>Aquí aprenderás de manera personal a realizar tu pagina web.</p>
</body>
</html>
Cómo ya hemos dicho el HTML es un lenguaje de marcas (etiquetas). Así todo nuestro texto
estará encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.
Funcionan de la siguiente manera:
<etiqueta> inicio de una etiqueta
</etiqueta> el cierre de una etiqueta
Algunas etiquetas, que iremos viendo a lo largo del manual, no llevan etiqueta de cierre, en ese
caso se cierra, dentro de la propia etiqueta, tal y cómo vemos a continuación
<etiqueta />
Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta de
apertura, por ejemplo: <br />
Las etiquetas deben de ir siempre en minúsculas. Encontrarás muchas páginas WEB en las que las etiquetas están en mayúsculas, hasta el HTML 4.0 era indiferente la utilización de minúsculas o mayúsculas y muchos autores utilizaban las mayúsculas por claridad.
Todo lo que vaya entre dos etiquetas HTML se verá afectado por éstas, por ejemplo:
Estas son algunas de las etiquetas más utilizadas:
< html>marcan el inicio y el final de una pagina web< /html>
< title>establece un titulo para la pagina< /title>
< body bgcolor="">establece un color de fondo para la pagina
< title>establece un titulo para la pagina< /title>
< body bgcolor="">establece un color de fondo para la pagina
< body background="">establece una imagen de fondo para la pagina < body
text="">establece el color de letra en la pagina
< h1>establece un encabezado en la pagina< /h1> < hr>agrega una línea separadora
Etiquetas de texto
< b>pone el texto en negrita< i>pone el texto en cursiva< /i>< font color="">cambia el color de texto< font size="">cambia el tamaño del texto
< b>pone el texto en negrita< i>pone el texto en cursiva< /i>< font color="">cambia el color de texto< font size="">cambia el tamaño del texto
< font face=""> cambia el tipo de letra < font color=""size=""face=""> cambia el color el
tamaño y el tipo de letra< /font>
Etiquetas de enlace< aref0"">texto< /a>añade un enlace utilizado la palabra texto< ahref="">< img src="">< /a>añade un enlace utilizando una imagen
Etiquetas de imagen
< img src="">permite añadir una imagen ala pagina
< img src=""align0"top">alinea el titulo de la imagen en la parte superior < img src=""align="middle">alinea el titulo de la imagen en la parte de en medio < img src=""align"bottom"> alinea el titulo de la imagen en la parte inferior
Etiquetas secundarias.
Algunas veces, necesitaremos añadir dos etiquetas a un texto, por ejemplo, supongamos y esto es sólo un ejemplo, que un título sea también un enlace, veamos cómo lo haríamos (utilizamos pseudo código puesto que todavía no hemos visto el código html).
<título><enlace>lo que se a.co m</enlace></título>
En cambio el siguiente código sería incorrecto
<título><enlace>lo que se a.co m</titulo></enlace>
Las etiquetas pueden a veces llevar atributos que nos permiten especificar más las etiquetas que utilizamos. Los atributos son como los adjetivos. Por ejemplo supongamos que tenemos una etiqueta<hombre> y queremos especificar que es guapo. Así que utilizaremos el atributo "apariencia" a este atributo le daremos el valor de "guapo". Nos quedaría apariencia="guapo". Así nuestro< ho m br e> nos quedaría <hombre apariencia="guapo">.
Veamos la etiqueta<ht ml> nos dice que se trata de un documento html, pero podemos utilizar el atributo lang para especificar el idioma del contenido del documento, así nos quedaría<ht mllang="es">. Los atributos se especifican indicando el nombre del atributo (lang) y su valor (es).
En castellano estaríamos diciendo: esto es un documento html en español. Los atributos siempre se añaden en la etiqueta de inicio y los valores de un atributo siempre deben estar entre comillas.
Etiquetas de párrafo
Para esto se utiliza la etiqueta <p > y</p> . Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea.
Para alinear un párrafo se utiliza el comando< align> y</a lign>, utilizado dentro de la etiqueta <p>. Se puede alinear de tres formas diferentes:
<p align="left">Pár r afo ... </p> Alinea a la izquierda.<p align="center">Pár r afo ... </p> Realiza un centrado.<p align="right">Pár r afo ... </p> Alinea a la derecha.< p> indica el inicio de un párrafo nuevo< br>cambia el texto a otra línea< pre>añade un texto preformateado < /pre>
< li>sirve para listar objetos< ul>añade numeración a los objetos listados< ul>añade viñetas a los objetos listados< /ul>
< blockquote>resalta una línea ubicada en un párrafo< /blockquote> indica el inicio de una definición
< li>sirve para listar objetos< ul>añade numeración a los objetos listados< ul>añade viñetas a los objetos listados< /ul>
< blockquote>resalta una línea ubicada en un párrafo< /blockquote> indica el inicio de una definición
Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando
<br>.
Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un
párrafo de otro que es<br >
Etiquetas para darlefor m a to al texto:
Para el tamaño y tipo de letra se usa la etiqueta<fo nt > y< /fo nt>, que posee tres atributos:
tamaño(siz e), Tipo de letra o fuente(fa c e) y color
Formato:
<b>y </b> Sirve para colocar un texto en Negrita.
<u>y < /u> sirve para subrayar un texto
<strike>y </strike> sirve para tachar un texto.
<strong>y </strong> cumple la misma función que <b>
<i>y <i> para colocar un texto en cursiva.<em>texto con énfasis</em> texto con énfasis
<cite>citación</cite>citació n
<dfn>definición</dfn>de finició n
<kbd>teclado</kbd>te clado
<samp>ejemplo</samp>e je mplo
<u>y < /u> sirve para subrayar un texto
<strike>y </strike> sirve para tachar un texto.
<strong>y </strong> cumple la misma función que <b>
<i>y <i> para colocar un texto en cursiva.<em>texto con énfasis</em> texto con énfasis
<cite>citación</cite>citació n
<dfn>definición</dfn>de finició n
<kbd>teclado</kbd>te clado
<samp>ejemplo</samp>e je mplo
size: regula el tamaño de los caracteres.
Ejemplo:<font size="3"> texto...</fo nt > .
face: es la fuente que se quiere usar, arial, times new roman, etc.
Para elegir nosotros mismos el color que queremos que tengan los links o enlaces e incluso el
texto, las etiquetas que se utilizan para hacer esto son las siguientes:
• text="#número" Para el color del texto.
• link="#número" Para el color de los enlaces.
• vlink="#número" El color con que aparecerán los enlaces ya visitados.
• alink="#número" Color del enlace cuando lo pulsamos.
Por lo tanto la etiqueta <body> puede quedar del siguiente modo:
<body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">
Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta: background="localización
de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo:
<body background="/documentos/html/gifs/dragonball.gif">
Las listas pueden ser: Lista desordenada,< ul> (Unordered List).Lista ordenada,<o l> (Ordered List).
Ejemplos de diferentes tipos de listas:
Ejemplos de diferentes tipos de listas:
Lista con números romanos:
<ol> <li type=I>Manzana
<li type=I>Zanahoria
<li type=I>Zanahoria
<li type=I>Lechuga
<li type=I>Tomate
<li type=I>Tomate
</ol>
I Manzana
II Zanahoria
III Lechuga
IV Tomate
II Zanahoria
III Lechuga
IV Tomate
Lista numerada:
<ol>
<li>Manzana
<li>Zanahoria
<li>Lechuga
<li>Tomate
<li>Zanahoria
<li>Lechuga
<li>Tomate
</ol>
1 Manzana
2 Zanahoria
3 Lechuga
4 Tomate
2 Zanahoria
3 Lechuga
4 Tomate
Una de las formas de crear listas con Dreamweaver es activar la barra Texto, para ello pulsaremos, tal como vemos en la imagen inferior, en el botón
“Común”.
Y en el panel que se despliega seleccionáremos
la opciónText o.
Pulsaremos el botón“ul”. Con este botón activamos la opción “Listas simples o no ordenadas”
Si seleccionamos la lista simple, la línea donde tengamos activo el cursor de texto será el comienzo de una lista. Cuando pulsemos la tecla enter, Dreamweaver convertirá el texto introducido en esa línea en una entrada de la lista y prepara la siguiente línea como otro elemento de la lista. Para terminar de introducir elementos en la lista sólo tenemos que pulsar la tecla enter dos veces seguidas y ya podremos continuar escribiendo normalmente
No hay comentarios:
Publicar un comentario