HTML
HTML, siglas de HyperText
Markup Language («lenguaje de marcado de
hipertexto»), Es el lenguaje de
marcado
predominante para la elaboració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. El HTML se escribe
en forma de «etiquetas», rodeadas por corchetes angulares (<,>).
HTML también puede describir, hasta un cierto punto.
la apariencia de un
documento, y puede incluir un script (por ejemplo JavaScript), el cual
puede afectar el comportamiento de navegadores web y
otros procesadores de HTML.
HTML también
es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un
término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida
directamente de SGML (como HTML
4.01 y anteriores).
Estructura básica de un documento HTML
Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).<HTML> <HEAD> <TITLE>Título de la página</TITLE> ... </HEAD> <BODY> Aquí iría el contenido de la página </BODY> </HTML>Vamos a analizar más detenidamente las distintas secciones que componen la páginaEntre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.El título de la página debe describir su contenido por ejemplo:
<TITLE>Colegio Público de Villamañán - Ámbito de Influencia - </TITLE>
no valdría en cambio
<TITLE>Página de Inicio</TITLE> ya que esto no dice nada por si soloDentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas<script language="JavaScript">
<!--
Aquí iría el código
// -->
</SCRIPT>El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:1. BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores
2. TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.
3. LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo.Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.
4. BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida.Por ejemplo si la página desde la que hacemos el enlace se
encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner:
<BODY BACKGROUND="gifs/fondo.gif">
Si la página estuviese en ejemplos se pondría:<BODY BACKGROUND="../gifs/fondo.gif">
Fíjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior
Definición de etiquetas en HTML
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.
Etiquetas que se manejan en el lenguaje de HTML
| Lenguaje HTML Básico | |
| <!DOCTYPE> Es la primera parte de una página web, aún antes que la etiqueta <html>. Le indica al navegador que especificación de HTML se está utilizando HTML 4.01: los tipos de documento que define son: strict, transitional y frameset. Strict Se usa cuando se utilizan CSS. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Transitional Presenta elementos en proceso de transición de acuerdo a los estándares del W3C. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Frames Debe usarse en documentos que incluyen frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> | |
| <html></html> Abre y cierra un documento HTML | |
| <head></head>Encabezado de la página - aquí se coloca titulo, metatags, e informacion para buscadores entre otras cosas. Está información no es visible. | |
| <body></body> Dentro de esta etiqueta va toda la parte visible de la página web. | |
| Etiquetas del Encabezado | |
| <title></title> El título de la página web. | |
| Atributos de la etiqueta Body | |
| <body bgcolor=?> Configura el color de fondo de la página, usando el valor del código de color hexadecimal. | |
| <body text=?> Configura el color por defecto del texto, usando el valor del código de color hexadecimal. | |
| <body link=?> Configura el color de las ligas, usando el valor del código de color hexadecimal. | |
| <body vlink=?> Configura el color de las ligas visitadas, usando el valor del código de color hexadecimal | |
| <body alink=?> Configura el color de las ligas al darle clic, usando el valor del código hexadecimal. | |
| Etiquetas HTML de Texto | |
| <pre></pre> Texto pre-formateado | |
| <hl></hl> Título más grande | |
| <h6></h6> Título más pequeño | |
| <b></b> Negritas | |
| <u></u> Subrayado | |
| <i></i> Cursivas | |
| <tt></tt> Tipo máquina de escribir | |
| <cite></cite> Cita, en cursiva | |
| <em></em> Resalta una palabra, negrita o cursiva | |
| <strong></strong> Resalta una palabra o grupo de palabras | |
| <font face=?></font> Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc. | |
| <font size=?></font> Coloca tamaño de letra, de 1 a 7 | |
| <font color=?></font> Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.) | |
| Ligas | |
| <a href="URL"></a> Hipervínculo | |
| <a href="mailto:EMAIL"></a> Hipervínculo mailto (para envío de correo) | |
| <a name="name"></a> Ancla en el mismo documento | |
| <a href="#name"></a> Liga hacia algún lugar dentro del mismo sitio | |
| Formato y presentación | |
| <p></p> Nuevo párrafo | |
| <p align=?> Alinea el párrafo hacia la izquierda, derecha o al centro | |
| <br> Inserta un interlineado suave. Crea otra línea | |
| <blockquote> </blockquote> Texto indentado de ambos lados | |
| <dl></dl> Lista de definiciones (glosario) | |
| <dt> Precede a cada término en definiciones | |
| <dd> Precede cada definición | |
| <ol></ol> Lista ordenada | |
| <li></li> Entrada en una lista | |
| <ul></ul> Lista con viñetas sin ordenar | |
| <div align=?> Para formato a porciones grandes del documento html, incluyendo hojas de estilo | |
| Elementos Gráficos | |
| <img src="name">Incorpora una imagen | |
| <img src="name" align=?> Alinea la imagen: izquierda, derecha y centro | |
| <img src="name" border=?> Determina el contorno de la imagen. Un valor 0 no tendrá contorno | |
| <map></map>Mapa de imágenes | |
| <body background="URL o ruta de archivo"></body> Coloca la imagen como fondo de la página | |
| <hr> Linea horizontal | |
| <hr size=?> Tamaño de una linea horizontal | |
| <hr width=?> Ancho de linea horizontal, ya sea porcentaje o valor absoluto. | |
| <hr noshade> Linea horizontal sin sombra | |
| Tablas | |
| <table></table> Crea tabla | |
| <tr></tr> Crea filas en una tabla | |
| <td></td> Crea celda en una fila | |
| <th></th> Encabezado de tabla, texto normal, negrita y centrado | |
| Atributos de Tablas | |
| <table border=#> Coloca contorno en las celdas de la tabla | |
| <table cellspacing=#> Espacio entre las celdas de una tabla | |
| <table cellpadding=#> Espacio entre el contorno de una celda y su contenido | |
| <table width=# or %> Ancho de la tabla, en pixeles o porcentaje del ancho de la página | |
| <tr align=?> or <td align=?> Alineación para las celdas, izquierda derecha, centro | |
| <tr valign=?> or <td valign=?> Alineación vertical de las celdas, arriba, abajo,enmedio | |
| <td colspan=#> Expansión de una celda, en número de columnas | |
| <td rowspan=#> Expansión de una celda, en número de celdas | |
| <td nowrap> Texto continuo dentro de una celda | |
| Marcos (frames) | |
| <frameset></frameset> Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets | |
| <frameset rows="value,value"> Número de lineas en un frameset, usando pixeles o porcentaje de ancho | |
| <frameset cols="value,value"> Número de columnas en un frameset, usando pixeles o porcentaje de ancho | |
| <frame> Frame singular dentro de un framset | |
| <noframes></noframes> Texto que aparecerá en navegadores que no soportan frames | |
| Atributos de Frames | |
| <frame src="URL"> Especifica que página html se muestra | |
| <frame name="name"> Nombra al frame para que sea identificado por otros frames y accesado | |
| <frame marginwidth=#> Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1 | |
| <frame marginheight=#> Margen superior e inferior de un grame, igual o mayor a 1 | |
| <frame scrolling=VALUE> Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto | |
| <frame noresize> No permite al usuario modificar el tamaño de un frame | |
| Formas | |
| <form></form> Forma | |
| <select name="name"></select> Menú desplegable | |
| <option> Opción del menú desplegable | |
| <textarea name="name" cols=40 rows=8></textarea> Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows) | |
| <input type="checkbox" name="name"> Crea un checkbox. | |
| <input type="radio" name="name" value="x"> Crea botón de radio. | |
| <input type=text name="name" size=20>Crea una opción de texto para entrada de información o despliegue | |
| <input type="submit" value="name"> Crea botón de envío de forma tipo submit | |
| <input type="image" border=0 name="name" src="name.gif"> Crea botón de envío con imagen | |
| <input type="reset"> Crea botón de limpieza (reset). Vacía la forma | |
| Otras Etiquetas HTML | |
| <EMBED SRC="url o ruta de archivo" VOLUME="50" HEIGHT="50" WIDTH="130"> Incorpora sonido con panel de control en la pantalla. | |
| < object width="600" height="300"> <param name="movie" value="miarchivo.swf"> <embed src="miarchivo.swf" width="600" height="300"> </embed> </object> Para insertar una pelicula flash swf en html | |
| <!-- Este es un comentario --> Inserta comentarios no visibles en la página. | |
| < iframe src ="/mipagina.html"> ... </iframe> > Inserta un frame dentro de una página. Inline Frame. | |
| < script type="text/javascript"> document.write("<h2>bienvenido!</h2>") </script> Inserta un script dentro de una página html. | |
| <span style="color:#00FFFF;"> </span> Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color. | |
Definición de atributos en HTML
HTML es el lenguaje de marcado predominante para la elaboració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. HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
Aunque ya en el texto anterior puedes encontrar algunos atributos de las etiquetas, te resumo en estos para que te des una idea:
•Los atributos siempre van con la estructura: nombre="valor".
•Los atributos siempre van en la etiqueta de apertura.
•Los valores siempre hay que ponerlos entre comillas
* otro atributo es que puede describir la apariencia del documento.
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.
Ejemplo:
Ejemplo:
Bibliografía
http://www.cafetero100.com/manual-html.php
C:\Users\Hogar\AppData\Local\Temp\Rar$EX96.408\pagina1.html
C:\Users\Hogar\AppData\Local\Temp\Rar$EX96.408\pagina1.html
