¿Qué es una página web?una página web a un documento disponible en Internet, codificado según sus estándares y con un lenguaje específico conocido como HTML.
A estos sitios se puede llegar a través de los navegadores de Internet, que reciben la información del documento interpretando su código y entregando al usuario la información de manera visual. Estos suelen ofrecer textos, imágenes y enlaces a otros sitios, así como animaciones, sonidos u otros.
Tipos de página web
Básicamente existen dos tipos de páginas web: estáticas y dinámicas. Las estáticas forman parte de épocas anteriores, puesto que son de contenido fijo y no son aptas a actualizaciones constantes. En el caso de las dinámicas, pueden ser construidas en HTML o en otra extensión, como por ejemplo PHP. En este último caso se permite la interacción en tiempo real, apto para algunas páginas web con estas necesidades específicas, como pueden ser los foros.Elementos principales de una página web
QUE ES EL HTML
Las siglas en ingles que significa HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, vídeos, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación
Las Etiquetas El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.
Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:
<B> Letra Negrita, del inglés Bold (negrita). <TABLE> Definirá una tabla. <IMG> Inclusión de una IMaGen.
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.
<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>
Por ejemplo, con la etiqueta siguiente:
<B>Texto que será en negrita</B>.
Obtendremos:
Texto que será en negrita
Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, por ejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros elementos.
El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del texto normal.
Atributos de las Etiquetas
Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.
Un ejemplo de atributo será:
<A HREF="http://www.uca.es">Pagina principal de la UCA</A>
En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.uca.es.
Igualmente una etiqueta podría presentar varios atributos:
<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>
En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectarán al resultado final.
Etiquetas correctas
Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error. Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuando se comete un error sintáctico al expresar una etiqueta o un atributo no se producirá ningún error, simplemente no de obtendrá el efecto que deseábamos.
Cuando creemos código HTML hay que hacerlo lo más estándar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores, ya que las personas que se conectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien es interesante como se vería el documento en los distintos tamaños de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolución.
En este manual se han tratado de incluir las características más estándar de HTML y en caso de tratarse de instrucciones más particulares se indicará convenientemente.
. Estructura de un documento HTML
HTML DOCTYPE Define el tipo de documento. Este elemento, que muchos websmaster obvian , le indica al navegador la versión y tipo de HTML empleado en el documento. De esta forma, el navegador usará el modelo de renderización adecuado al tipo de documento.
Elemento htm Delimita el documento HTML, indicando al navegador el comienzo y fin de la página html. Sus etiquetas son: (Siempre al terminar el documento); (ambas opcionales ¡úsalas de todos modos!) Elemento head
head viene del ingles cabeza y su función es delimitar cabecera del documento. Sus etiquetas son: ; (ambas opcionales ¡úsalas de todos modos!) La cabecera es la sección apropiada para incluir información sobre el documento, la mayoría de la cual no será mostrada a los lectores. Para incluir esta información tenemos diversos elementos, de momento solo comentaremos el más importante
Elemento title Indica el título del documento. En general, los navegadores modernos lo muestran en la barra de título de la ventana. Sus etiquetas son: (ambas obligatorias) Elemento body Delimita el cuerpo del documento. Aquí van todos los contenidos de la página (texto, imágenes...) Todo lo que queremos mostrar a los lectores de nuestro documento. Sus etiquetas son: , (al terminar, siempre antes de )
significado de las etiquetas
<HTML>Apertura y cierre del código.
<HEAD>Cabecera del documento.
<BODY>Parte visible en pantalla del documento.
<BG COLOR> Para establecer un color de fondo.
<TITLE>Establece el nombre del documento. Dentro de <head>
<MARQUEE>podemos conseguir texto en movimiento.
<P>Párrafo nuevo.
<B>Texto en negrita
COMO SE CIERRA UNA ETIQUETA
Para cerrar una etiqueta se pone comillas de inicio y añadiendo una barra inclinada y luego la comilla de cierre
ejemplo
</head>
El lenguaje HTML
es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.
etiqueta
|
cierre
|
atributo
|
explicación
| |
<!--
|
-->
| Añadir un comentario no visible. |  | |
<a>
|
</a>
| Establece un vínculo. | | |
href
| Dirección del vínculo. | | ||
name
| Establece un ancla. | | ||
target
| Establece el destino del vínculo: _blank, _self, _top, _parent, o "definido" | | ||
<b>
|
</b>
| Texto en negrita. | | |
<blockquote>
|
</blockquote>
| Sangrado. | | |
<body>
|
</body>
| Parte visible en pantalla del documento. | | |
alink
| Modifica el color del vínculo cuando está activado. | | ||
background
| Para colocar una imagen de fondo. | | ||
bgcolor
| Para establecer un color de fondo. | | ||
link
| Modifica el color del vínculo antes de estar activado. | | ||
vlink
| Modifica el color del vínculo cuando ya ha sido visitado. | | ||
<br>
| Salto de línea. | | ||
<caption>
|
</caption>
| Establece el título de una tabla. Dentro de <table>. | | |
<center>
|
<center>
| Centra en horizontal. | | |
<dd>
| La definición del término. Dentro de <dl> | | ||
<dl>
|
</dl>
| Listado de términos y sus definiciones. | | |
<dt>
|
</dt>
| Término para ser definido. Dentro de <dl> | | |
<font>
|
</font>
| Fuente. | | |
size
| Tamaño de la fuente. | | ||
color
| Color | | ||
face
| Tipo de letra. | | ||
<form>
|
</form>
| Formulario | | |
action
| ="mailto:la_dirección_de_correo" | | ||
method
| ="post" | | ||
enctype
| ="text/plain" | | ||
<frame>
|
</frame>
| Marco. | | |
name
| Nombre que se le da para referirse después a él. | | ||
src
| Establece qué documento se va a cargar inicialmente en el marco. | | ||
frameborder
| Indica si habrá o no borde entre los marcos. | | ||
noresize
| Si se escribe, el navegante no puede redimensionar los marcos. | | ||
scrolling
| Establece si habrá o no barra de scrolling. | | ||
<frameset>
|
</frameset>
| Estructura de los marcos. | | |
cols
| Número de columnas. | | ||
rows
| Número de filas. | | ||
<h1>
|
</h1>
| Encabezado de primer orden.Hay otros 5: <h2><h3><h4><h5><h6> | | |
<head>
|
</head>
| Cabecera del documento. | | |
<hr>
| Línea de separación horizontal. | | ||
align
| Alineación de la línea. | | ||
noshade
| Sin efecto tridimensional. | | ||
size
| Grosor de la línea. | | ||
width
| Anchura de la línea. | | ||
<html>
|
</html>
| Apertura y cierre del código. | | |
<i>
|
</i>
| Letra cursiva. | | |
<iframe>
|
</iframe>
| Marco en línea. Carga en un marco otra página. | | |
name
| Nombre que se le da al espacio para posteriores referencias. | | ||
src
| Establece qué documento se carga inicialmente. | | ||
frameborder
| Establece si habrá o no borde de separación. | | ||
<img>
| Inserta una imagen. | | ||
alt
| Texto alternativo a la imagen. | | ||
border
| Establece si va a tener borde o no, cuando sirva de vínculo. | | ||
height
| Altura de la imagen. | | ||
width
| Ancho de la imagen. | | ||
src
| Establece qué imagen se va a insertar. | | ||
<li>
| Componente de una lista. Dentro de <ul> o de <ol> | | ||
<ol>
|
</ol>
| Lista numerada de objetos. | | |
<p>
|
</p>
| Párrafo nuevo. | | |
<sub>
|
</sub>
| Subíndice. | | |
<sup>
|
</sup>
| Superíndice. | | |
<table>
|
</table>
| Tabla. | | |
align
| Alinea la tabla: center, right, left | | ||
bgcolor
| Establece el color de fondo de la tabla. | | ||
border
| Establece un borde a la tabla | | ||
cellpadding
| Separación entre el borde de la tabla y el contenido. | | ||
cellspacing
| Separación entre las celdas. | | ||
width
| Establece el ancho de la tabla. | | ||
<td>
|
</td>
| Celda de una tabla. | | |
align
| Establece la alineación del texto dentro de la celda: left, center, right. | | ||
bgcolor
| Establece el color de fondo para la celda. | | ||
colspan
| Extiende la celda sobre varias columnas. | | ||
height
| Establece la altura de la celda. | | ||
rowspan
| Extiende la celda sobre varias filas. | | ||
valign
| Establece la alineación vertical: top, middle, bottom. | | ||
width
| Establece el ancho de la celda. | | ||
<th>
|
</th>
| Titular de la columna de una tabla. Dentro de <tr>. | | |
<title>
|
</title>
| Establece el nombre del documento. Dentro de <head> | | |
<tr>
|
</tr>
| Fila de una tabla. | | |
<u>
|
</u>
| Subrayado. | | |
<ul>
|
</ul>
| Lista no numerada de objetos. |
Ir
