Tutorial html
- 1. PEM. Luis Umaña Guatemala, Guatemala Página 1 de 9 HTML, siglas de HyperText Markup Language («lenguaje de marcado hipertextual»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información 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 Sir Timothy "Tim" John Berners-Lee (nacido en Londres, Reino Unido, 8 de junio de 1955) es un científico de la computación británico, conocido por ser el padre de la Web. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989. En Octubre de 1994 fundó el Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar el desarrollo de la tecnología sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet. Ante la necesidad de distribuir e intercambiar información acerca de sus investigaciones de una manera más efectiva, Berners-Lee desarrolló las ideas fundamentales que estructuran la web. Él y su grupo crearon lo que por sus siglas en inglés se denomina Lenguaje HTML, el protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL (Uniform Resource Locator). Los navegadores. Compatibilidad Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML. Los navegadores que se utilizan en la actualidad son: Manual Básico de HTML
- 2. PEM. Luis Umaña Guatemala, Guatemala Página 2 de 9 Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página. Editores Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite ganar rapidez. Algunos de los editores visuales con los que podrás crear tus páginas web son Adobe Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. Es aconsejable comenzar utilizando una herramienta lo más sencilla posible, para tener que insertar nosotros mismos el código HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual posteriormente, y depurar el código cuando fuera necesario. Para crear páginas web escribiendo directamente el código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. Etiquetas Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Recomendación: Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio (carpeta), y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar archivos de audio y video, etc.
- 3. PEM. Luis Umaña Guatemala, Guatemala Página 3 de 9 En este ejemplo utilizaremos el editor de texto de Windows (bloc de notas) para ello los pasos son los siguientes: 1. Crea una carpeta para guardar el trabajo a realizar. 2. Dentro de la carpeta, haz clic derecho y en el menú contextual selecciona la opción; Nuevo, luego Documento de texto. 3. Colocarle el nombre de “Hola mundo” al documento de texto. 4. Dentro del documento de texto, deberá de escribir el siguiente código: 5. Dirigirse al menú Archivo y elegir la opción Guardar como. 6. Colocar el Nombre del archivo, de la siguiente manera: “Hola mundo.html” muy importante que al nombre del archivo se le ha de agregar la extensión html para que el archivo sea reconocido por la PC como un archivo de página web. 7. En la sección de Tipo, seleccionar la opción: Todos los archivos (*.*). 8. Ahora en la carpeta en donde se encuentra el archivo de texto aparecera un archivo de página web, haz doble clic sobre el para que se abra el navegardor predeterminado de la PC y muestre el contenido de este ejemplo. Mi primera página web en HTML
- 4. PEM. Luis Umaña Guatemala, Guatemala Página 4 de 9 Etiqueta Significado Ejemplo <b> negrita curso HTML <i> cursiva curso HTML <u> subrayado curso HTML <s> tachado curso HTML <SUB> subindice curso HTML HTML <SUP> superindice curso HTML HTML <big> aumenta el tamaño de la fuente curso HTML <small> disminuye el tamaño de la fuente curso HTML Las listas <li> Elemento de lista <li> Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>. Por ejemplo, para insertar en una lista los siguientes elementos: Perro Gato Periquito Habría que escribir: Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada) como veremos a continuación. Lista desordenada <ul> Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>. A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado). Por ejemplo, para insertar la siguiente lista: o Perro o Gato o Periquito Habría que escribir: Lista ordenada <ol> Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>. A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas). Por ejemplo, para insertar la siquiente lista: i. Perro ii. Gato iii. Periquito Habría que escribir: <ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul> <li>Perro</li> <li>Gato</li> <li>Periquito</li> <ol type="i"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ol>
- 5. PEM. Luis Umaña Guatemala, Guatemala Página 5 de 9 Los Colores en HTML Se representan mediante un número hexadecimal. Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9, sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F. Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF. Existen 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Existe otra forma de representar algunos colores, sin la necesidad de utilizar números en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes: Color Hexadecimal Nombre #FFFFFF white #000000 black #000080 navy #0000FF blue #008000 green #008080 teal #00FF00 lime #00FFFF aqua #800000 maroon #800080 purple #808000 olive #808080 gray #C0C0C0 silver #FF0000 red #FF00FF fuchsia #FFFF00 yellow Como dejar Espacios en blanco La solución al problema de los espacios en blanco no es tan sencilla como el de las nuevas líneas. Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto (es importante incluir el símbolo & al principio y el símbolo; al final).
- 6. PEM. Luis Umaña Guatemala, Guatemala Página 6 de 9 Etiquetas Básicas en HTML 1 <!-- Comentario. Ninguno --> <!--Esto es un comentario--> <!-- Autor: Luis Umaña Lenguaje: HTML--> 2 <A> Hipervínculo. HREF, NAME, REL, REV, TITLE </A> <a href="http://www.hotmail.com"> Visita www.hotmail.com </a> <a href="pagina1.html"> Enlace a la Página 1 del Sitio Web </a> 3 <BGSOUND> Sonido de fondo. SRC, LOOP. Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. <bgsound src="Carpeta de audio/canción1.mid" loop="-1"> 4 <BODY> Cuerpo del documento. BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK </BODY> El cuerpo del documento contiene la información propia del documento, es decir lo que pqueremos que se visualice, el texto de la página, las imágenes, los formularios, etc. A través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página. El color de fondo puede establecerse a través del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. <body bgcolor="#0000FF"> <body bgcolor="blue"> <body background="fondo.gif"> A través de la etiqueta <body> también es posible establecer el color del texto de la página a través del atributo text. Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos que escribir: <body text="#FF0000"> Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en píxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero sí los atributos marginwidth (anchura del margen) y marginheight (altura del margen). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una página no tenga margen superior, y tenga un margen izquierdo de 20 píxeles, tendremos que escribir: <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > ... </body> </html> 5 <BR> Retorno de línea. CLEAR: Se utiliza en combinación con ALIGN de IMAGE. Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta <br>. En cierta manera, insertar la etiqueta <br> en un determinado punto del texto
- 7. PEM. Luis Umaña Guatemala, Guatemala Página 7 de 9 equivale a presionar la tecla ENTER (o Intro) en ese mismo punto. 6 <CENTER> Centrar. Ninguno </CENTER> <center> es una etiqueta HTML que usamos para centrar el contenido de un texto en un documento. Crea una división, con saltos de línea antes de abrir la etiqueta y una vez se cierra y lo que hay dentro de <center> y </center> aparece con estilo de párrafo en alineación centrada. 7 <EMBED> Audio/Video SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona del mismo modo para los archivos de audio y de vídeo. <embed src="Videos/Shakira_Waka_Waka.avi" autostart="false" loop="true"> 8 <FONT> Manejo de letras (fuente). SIZE, COLOR. Internet Explorer: FACE. </FONT> Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos al Tutorial de HTML </font> También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> después de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta<font>. Por ejemplo: <body> <basefont color="#006699" size="4" face="Arial"> Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la última que se encuentra. 9 <H1 ...H6> Tamaño de letras del 1 al 6. HTML 3.0: LEFT, CENTER, RIGHT </H1 .../H6> <H2 align="center">El lenguaje HTML</H2> <H4>Apartado 1: Las etiquetas</H4> 10 <HEAD> Encabezamiento del documento. BASE, TITLE, ISINDEX, NEXTID, META </HEAD> La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>.
- 8. PEM. Luis Umaña Guatemala, Guatemala Página 8 de 9 11 <HR> Línea horizontal. NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR Inicio <hr align="left" width="300%" size="5" noshade> Bienvenidos a mi página. Inicio Bienvenidos a mi página. 12 <HTML> Al principio y al fin de todo documento. HEAD, BODY </HTML> Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de la página. 13 <IMG> Cargar imágenes. ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. <img src="imagenes/logo_animales.gif"> Teniendo en cuenta que la imagen se llama logo_animales.gif y que está dentro de la carpeta imágenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). <img src="imagenes/logo_animales.gif" width="200" height="80"> 14 <MARQUEE> Marquesina. ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. </MARQUEE> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez). A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha). También es posible establecer un color de fondo, a través del atributo bgcolor. Por ejemplo, para insertar la siguiente marquesina: <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee>
- 9. PEM. Luis Umaña Guatemala, Guatemala Página 9 de 9 15 <P> Párrafos </P> El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>. No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p>hacen que se cambie de línea automáticamente. También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado). <p align="center"> Bienvenidos a mi página.</p> 16 <PRE> Visualiza el texto en su formato original. WIDTH </PRE> Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>. Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto, así como todos los saltos de línea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta<br>. Por ejemplo, para insertar el texto: Hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado Habría que escribir: <pre> Hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado</pre> 17 <TITLE> Título dentro de HEAD. Ninguno </TITLE> El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él. Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>. Revisión del Manual