Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería Este es un documento para producir documentos en HTML, "Lenguaje de Marcación de Hipertexto", usado en la World Wide Web. Esta guía pretende ser una introducción para el uso de HTML y crear archivos en la Web. Tú deberías también revisar libros, pues hay muchos que te podrían ayudarte a conocer mas sobre la Web y HTML. Los documentos en HTML son archivos de texto planto que pueden ser creados usando cualquier editor de texto. Tú también puedes usar programas de procesamiento de palabras si tu te acuerdas de grabar tu documento como "solo texto". Con este lenguaje vamos a aprender a poner texto en negritas y hacer todo tipo de trucos para llamar la atención del usuario. Por la competitividad que existe dentro de la red este lenguaje y otros nos permiten desarrollar páginas que llamen la atención de los usuarios permitiéndoles así aumentar el numero de visitas a nuestro sitio. Lo único que te tengo que advertir es que los códigos en HTML son muy celosos en cuanto a ortografía y sintaxis, un solo error en las etiquetas y no te dará el resultado esperado. Así que por cualquier cosa, estas advertido, revisa antes!!! Algunos otros sitios que puedes visitar son: www.pangea.org/pacoc/manuales via-modem.com/especiales/tutorial.html www.desarrolloweb.com www.bannerlandia.com www.manuales-gratis.com www.solorecursos.com Los contenidos de este sitio son: Etiquetas Listas Parrafos y mas Formatos de Caracter
Etiquetas. Un elemento es un componente fundamental de la estructura de un documento de texto. Algunos ejemplos son los encabezados, tablas, párrafos y listas. Piensa así: tu usas las etiquetas para marcar elementos de un archivos. Para diseñar elementos en HTML se utilizan etiquetas, estas consisten en un símbolo de menor (<), el nombre de la etiqueta y un símbolo de mayor (>). Las etiquetas generalmente van de dos en dos, es decir tienen una de apertura y otra de cierre. La de cierre se caracteriza por tener una pleca en ella (/). Con las etiquetas se puede delimitar un párrafo, cambiarle atributos a dicho párrafo, crear tablas, alinear texto, cambiar color, tamaño, es decir hacer toda clase de modificaciones y efectos a tu pagina para una mejor imagen. Ahora debes tener en cuenta que HTML no es sensitivo, es decir que le da lo mismo si escribes la etiquetas en minúsculas o en mayúsculas. No todas las etiquetas funcionan en todos los navegadores, cuando una etiqueta no funciona en un navegador este solo lo ignora usualmente. Documento en HTML. Todo documento en HTML debe contener ciertas etiquetas. cada documento consiste de una cabecera y el cuerpo del texto. La cabecera contiene el titulo y el cuerpo contiene todo lo demás de la pagina como listas, párrafos y otras cosas. Un ejemplo de ello es: <html> <head> <title>ejemplo</title> </head> <body> <h1>html</h1> </body> </html> Las etiquetas principales son <html>,<head>,<title> y <body>, pero no son indispensables, es decir que si por casualidad se te olvidan o simplemente no las quieres poner no son necesarias para que la pagina se cargue. HTML Este elemento dice a tu navegador que el archivo contienen información en código HTML. La extensión.html o.htm también indica que este es un documento escrito en HTML. HEAD. El elemento cabecera identifica la primera parte de el documento en código HTML que contiene el titulo. El titulo se muestra como parte de la ventana de tu navegador. TITLE. El elemento titulo contiene el titulo del documento e identifica el contenido global del contexto. El titulo también se muestra en la parte superior del navegador, pero no en el área de texto.
BODY. La segunda parte y la mas larga de el documento en HTML, contiene todo lo que se mostrara en la ventana del navegador. Las etiquetas que se explicaran después son usadas dentro del documento de HTML. CABECERAS. HTML tiene seis niveles de cabeceras, numeradas desde la 1 hasta la 6 bajando su nivel de importancia. Las cabeceras sirven para poner el texto en negrilla y con mayor tamaño. La sintaxis para usar las cabeceras es: <h1>html</h1> Nota: Como consejo deberías respetar el nivel de cabeceras, por ejemplo no debes usar un encabezado numero uno y después sigas con uno numero tres. PARRAFOS. A diferencia de otros documentos de texto las líneas en los párrafos se extienden tanto como tu quieras, para tener un salto de línea debe estar especificado mediante una etiqueta que explicaremos mas adelante <br>. Los párrafos en HTML comienza con la etiqueta <p> y terminan con la etiqueta </p>.esta etiqueta tiene ciertos parámetros tales como "align", el cual puede ser en el centro, derecha o izquierda. Listas. HTML tiene listas numeradas, no numeradas y listas de definición Listas no numeradas: Para hacer listas no numeradas se utiliza la etiqueta <ul> </ul>, dentro de ellas se utiliza <li> para enumerar los componentes de la lista y se termina el componente con la etiqueta de cierre <li>. Un ejemplo de este tipo de listas es el siguiente: <ul> <li> perro <li> gato <li> elefante </ul> Se mostraría así: perro gato elefante
También puede tener elementos de lista en forma de párrafos utilizando la etiqueta <p>. Listas Numeradas: Son idénticas a una no numerada, pero en lugar de la etiqueta <ul> se utiliza <ol>. Los elementos se enumeran también con la etiqueta <li>. Aquí hay un ejemplo: <ol> <li> manzanas <li> peras <li> sandías </ol> Lo que luciría así: manzanas peras sandías Listas de definición: Contiene usualmente el termino y su respectiva definición Se utiliza la etiqueta <dl> para el termino y la etiqueta <dd> para la definición con sus respectivas etiquetas de cierre. Se puede utilizar también la etiqueta <dl compact>, que permite tener las definiciones cortas de ciertas cosas. Las muestra en una sola línea. Listas dentro de otras listas: estas pueden ser tanto numeradas como no numeradas Un ejemplo de ellas son: <ul> <li> Algunos departamentos de El Salvador son: <ul> <li> Santa Ana <li> San Salvador <li> Sonsonate <ul>
Parrafo. Texto Preformateado: Se utiliza la etiqueta <pre> que es la abreviatura de "preformatted", y nos permite integrar texto el cual conservara la fuente, tamaño y formato original del texto. conserva los espacios, nuevas lineas, tabulaciones y otras cosas en los lugares que tu desees. El codigo es este: <pre> Todas las palabras conservan su formato </pre> Todas las palabras conservan su formato Esta etiqueta puede ser utilizada con el atributo width que nos sirve para especificar el numero maximo de caracteres para una linea, tambien le ayuda al navegador a escoger una fuente apropiada para el texto. Los vinculos pueden ser usados con las secciones <pre>. Pero no es recomendable utilizar este tipo de etiquetas. Nota: como advertencia, dentro de una pagina programada en HTML no se pueden ocupar los simbolos <,> y &, para ellos se debe poner los siguiente: <, >, y &, respectivamente. Vea Secuencias de Escape para mas informacion. Direcciones: Se utiliza la etiqueta <address> que se utiliza para especificar el autor de un documento, y su direccion ademas de una fecha de revision. Generalmente es lo ultimo en un archivo. Por ejemplo: <address> Programacion en Internet / UES/ Facultad Multidisciplinaria de Occidente/ revisado el 28 de mayo </address>
<address> Programacion en Internet / UES/ Facultad Multidisciplinaria de Occidente/ revisado el 28 de mayo </address> Cortes de Lineas: La etiqueta <br> hace un corte de linea sin espacio en blanco entre lineas. Pues al usar <p> para lineas cortas guarda demasiado espacio en blanco. La etiqueta se utiliza asi: Universidad de El Salvador<br> Facultad Multidisciplinaria de Occidente <br> Universidad de El Salvador Facultad Multidisciplinaria de Occidente Lineas Horizontales: Son producidas por la etiqueta <hr> que tiene el mismo ancho que la ventana del navegador. Una linea horizontal es utilizada para dividir secciones de un documneto. Se puede cambiar el espesor y el ancho de la linea con los parametros: size y width respectivamente. Ejemplo: <hr size=4 width=50%> Formato de Caracter. HTML tiene dos tipos de estilo para palabras u oraciones individuales: logico y fisico. Las etiquetas de los estilos logicos se relacionan a lo que queremos hacer, es decir el nombre y la accion se relacionan de una manera logica. Pero no todos los navegadores aceptan este tipo de etiquetas. Los estilos fisicos hacen exactamente lo mismo que los logicos pero con diferente sintaxis. Estilos Logicos: <dfn> para que una palabra sea definida. Tipicamente se pone en cursiva <em> para enfasis, tambien se despliega en cursiva. <cite> para titulos de libros, peliculas y otros. Tambien se despliega en cursiva. <code> para codigo de computadora <kbd>
para usar una entrada del teclado <samp> para una secuencia literal de caracteres <strong> para enfasis fuerte. Generalmente desplegado en negrita. <var> para una variable, donde se reemplazara la variable con alguna informacion especifica. Estilos Fisicos: <b> texto en negrita <i> texto en cursiva Secuencias de Escape: Las secuencias de escape mas utilizadas son: < para < > para > & para & ö para o con dieresis ñ para ñ È
con E para que aparezca con acento Links. HTML tiene la habilidad de vincular una pagina con otra o dentro de la misma pagina. Para esto se utiliza la etiqueta <a> con su etiqueta de cierre </a>, se utiliza el parametro href para especificar el nombre de la pagina o seccion a la cual queremos vincular el texto o imagen.