LENGUAJE DE MARCADORES DE HIPERTEXTO Prof. Leonel Del Carpio HTML LENGUAJE DE MARCADORES DE HIPERTEXTO Prof. Leonel Del Carpio
Qué es HTML HTML (Hyper Text Markup Language) lenguaje páginas web. Prof. Leonel Del Carpio Qué es HTML HTML (Hyper Text Markup Language) lenguaje páginas web. HTML is a Markup Language for creating Web pages Es hipertexto, (texto de forma estructurada), compuesto por etiquetas, (inicio y fin). Hipertexto: textos, imágenes, sonido, vídeos, etc., documento multimedia. html o htm, visualizados en los navegadores. Los navegadores interpretan el código HTML, y muestran las páginas web.
Prof. Leonel Del Carpio Nov 95 HTML 2.0. divulgativo, orientado a la actividad académica, contenido lo más importante. Netscape comenzó a incluir nuevas etiquetas. HTML 3.0 extenso y confuso. No fue bien aceptado. Como reacción se formo W3C. Ene 97 HTML 3.2. incluía mejoras que Explorer y Netscape añadieron sobre HTML 2.0. Dic. 97 HTML 4.0, creado para estandarizar los marcos (frames), las CSS y los scripts. Sept. de 2001 HTML 4.01.
Un editor web: texto y visual. Prof. Leonel Del Carpio Un editor web: texto y visual. Editor visual genera código basura, en ocasiones es más efectivo corregir directamente el código. Algunos editores visuales son Dreamweaver, Frontpage, NetObjects Fusion, CutePage, HotDog Proffesional, Editor de texto permite familiarizarse con el HTML, para luego utilizar algún editor visual . Crear páginas web HTML: Wordpad o Bloc de notas.
Prof. Leonel Del Carpio Etiquetas etiquetas o marcas delimitan elementos HTML. Existen etiquetas de inicio y de fin o cierre. La etiqueta de inicio delimitada por los caracteres < y >. Identificador o nombre. propiedades. Sintaxis: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de inicio siguen una sintaxis predefinida y pueden tomar valor propio , o valor HTML predefinido.
Prof. Leonel Del Carpio La etiqueta final delimitada por </ y >. no contiene atributos. Su sintaxis es: </identificador> Es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas. En el ejemplo la etiqueta <font> esta anidada dentro de la etiqueta <p>:
Prof. Leonel Del Carpio <p align="center"><font color=“RED" size="4"> Bienvenidos a webpage </font></p> Este código daría como resultado el texto: Bienvenidos a webpage Las etiquetas no se pueden 'cruzar', en el ejemplo empezamos por la etiqueta <p>, antes de cerrarla hemos puesto <font> por lo que antes de cerrar la etiqueta <p> debemos cerrar la etiqueta <font>.
Prof. Leonel Del Carpio Ejm: Crear una página html a través del Bloc de notas, vamos a crear una página web sencilla. <html> <head> <title>MI PRIMERA PAGINA</title> </head> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola, estoy estudiando diseño web.</font> </body> </html>
Guarda el documento como mipagina.htm. Prof. Leonel Del Carpio Guarda el documento como mipagina.htm. Pulsando dos veces sobre el icono del archivo mipagina.htm, éste se abre en el navegador instalado en tu pc. El navegador muestra tu página resultante, que es una página que tiene una línea de texto.
Prof. Leonel Del Carpio Un documento de hipertexto solo se compone de texto. a) Verdadero b) Falso Los navegadores se encargan de interpretar el código HTML de los documentos. a) Verdadero b) Falso El nuevo comité encargado de establecer los estándares del HTML es el W3C. a) Verdadero b) Falso MICRO Evaluación
Prof. Leonel Del Carpio Los editores visuales a) Pueden generar código basura. b) Permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores. Existen dos tipos de etiquetas: a) de comienzo de elemento y de fin de página b) de comienzo de elemento y de atributo c) de comienzo de elemento y de fin o cierre de elemento.
Estructura básica Identificador del tipo de documento <html> Prof. Leonel Del Carpio Estructura básica Identificador del tipo de documento <html> Cabecera de la página <head> Título de la página <title> Cuerpo del documento <body>
Colores hexadecimales web Prof. Leonel Del Carpio Colores hexadecimales web
Colores hexadecimales web Prof. Leonel Del Carpio Colores hexadecimales web
Color de fondo atributo bgcolor. Prof. Leonel Del Carpio Color de fondo atributo bgcolor. Para que el color de fondo de una página sea azul, escribe: <body bgcolor="#0000FF"> ... </body> Sería equivalente a poner: <body bgcolor="blue"> ... </body>
La imagen de fondo atributo background. Prof. Leonel Del Carpio La imagen de fondo atributo background. Para hacer que la imagen de fondo de una página sea la imagen fondo.gif, escribe: <body background="fondo.gif"> ... </body>
Prof. Leonel Del Carpio Si no esta en el mismo sitio, y esta en la carpeta images, en el mismo directorio, escribe: <body background="imagenes/fondo.gif"> ... </body> En la etiqueta <body> puede establecer el color del texto de la página: atributo text. Para color del texto rojo, escribe: <body text="#FF0000"> ... </body>
Prof. Leonel Del Carpio 1 Abre el Bloc de notas, para el primer ejercicio. 2 Escribe el código: <html> <head> <title>Inicio</title> </head> <body bgcolor="#99CC99"> </body> </html> Con este código estarás creando un documento con el título "Inicio", y con el color de fondo verde (#99CC99).
Prof. Leonel Del Carpio 3 Haz clic sobre el menú Archivo. 4 Haz clic sobre la opción Guardar como. Se abrirá el cuadro de diálogo Guardar como. 5 En el recuadro Tipo: elige Todos los archivos. 6 Guarda el documento como inicio.htm, en la carpeta Mis docs/ejercicios_html/animales.
Prof. Leonel Del Carpio Las páginas web escritas en HTML tienen la extensión html o htm. a) Verdadero b) Falso El código de las páginas queda entre las etiquetas <head> y </head>. a) Verdadero b) Falso El título de una página esta dentro de la cabecera. a) Verdadero b) Falso Puede establecerse una imagen de fondo a través del atributo background. a) Verdadero b) Falso MICRO Evaluación
Prof. Leonel Del Carpio 5. Las etiquetas <body> y </body> van... a) Justo encima de la cabecera. b) Dentro de la cabecera. c) Justo debajo de la cabecera. 6. Es posible definir el color de la fuente del documento mediante... a) la etiqueta <html>. b) el atributo bgcolor. c) el atributo text.
Prof. Leonel Del Carpio El texto Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. < Se representa con < > Se representa con > á á Á Á ñ ñ ™ ™ © © ® ® Saltos de línea <br>
Texto preformateado <pre> Separadores <hr> Prof. Leonel Del Carpio Texto preformateado <pre> Separadores <hr> Formatear el texto <font> atributos de la etiqueta: Face fuente color color del texto Size tamaño del texto Ejm: Para insertar el texto: Bienvenidos a WEBPAGE.com escribe: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a WEBPAGE.com</font>
Para insertar el texto: Bienvenidos a webpage.com escribe: Prof. Leonel Del Carpio Para insertar el texto: Bienvenidos a webpage.com escribe: <font color="#993366" size="4" face="Comic Sans">Bienvenidos a <b><i><u><tt> webpage.com</tt></u></i></b></font> Párrafos <p> atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado)
Encabezados <h1> Prof. Leonel Del Carpio Otra forma de alinear texto es mediante las etiquetas <div> y </div>, que también tienen el atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor. Encabezados <h1> seis etiquetas que representan seis tipos de cabeceras distintas. Todas precisan etiqueta de cierre.
curso HTML Agricultura Prof. Leonel Del Carpio Resaltado del texto Etiqueta Significado Ejemplo <b> negrita curso HTML Agricultura <i> cursiva <u> subrayado <s> tachado <tt> teletipo (máquina de escribir) <big> aumenta el tamaño de la fuente <small> disminuye el tamaño de la fuente
Encabezados h Título 1: HTML <H1> <H2> Título 2: HTML Prof. Leonel Del Carpio Encabezados h Etiqueta Ejemplo <H1> Título 1: HTML <H2> Título 2: HTML <H3> Título 3: HTML <H4> Título 4: HTML <H5> Título 5: HTML <H6> Título 6: HTML
Marquesinas <marquee> Prof. Leonel Del Carpio Marquesinas <marquee> Líneas de texto que se desplazan de un lado a otro. etiquetas <marquee> y </marquee>. defecto, se desplaza de derecha a izquierda indefinidamente. Atributo behavior modifica el tipo de movimiento. alternate (de lado a lado de la ventana, rebota), scroll (de un lado a otro, continuo) o slide (de un lado a otro, pero una sola vez).
Puede establecer un color de fondo, a través del atributo bgcolor. Prof. Leonel Del Carpio Atributo direction dirección en la que se moverá el texto. down (arriba abajo), up (abajo arriba), left (derecha izquierda) o left (izquierda derecha). Puede establecer un color de fondo, a través del atributo bgcolor. <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee>
Prof. Leonel Del Carpio Si se escriben varios espacios en blanco seguidos sólamente se mostrará uno en el navegador. a) Verdadero b) Falso La etiqueta <b> hace que el texto se muestre en cursiva. a) Verdadero. b) Falso 3. El texto equivale a un espacio en blanco. a) Verdadero b) Falso 4. Los encabezados... a) Sirven para establecer el color de fondo del texto. b) Se utilizan para establecer títulos dentro de la página. c) No existen en HTML. MICRO Evaluación
Hiperenlace <a> Prof. Leonel Del Carpio Hiperenlace <a> Un hiperenlace, hipervínculo, o vínculo, es un enlace, que al ser pulsado lleva de una página o archivo. Un enlace han de encontrarse entre las etiquetas <a> y </a>. El atributo href especifica la página a la que está asociado el enlace. Para insertar el enlace: Visita www.webpage.com escribe: <a href="http://www.webpage.com">Visita www.webpage.com</a>
Tipos de referencias Referencia absoluta: Prof. Leonel Del Carpio Tipos de referencias Referencia absoluta: ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, empezar la referencia por http:// , el nombre del dominio. Por ejemplo, "http://www.webpage.com" o "http://www.webpage.com/index.htm" Para insertar el enlace: Visita www.webpage.com escribe: <a href="http://www.webpage.com">Visita www.webpage.com</a>
Referencia relativa al sitio: Prof. Leonel Del Carpio Referencia relativa al sitio: documento situado en el mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando en una misma carpeta, conocida como carpeta raíz del sitio.
Enlace a Tema 4: Hiperenlaces escribe: Prof. Leonel Del Carpio Por ejemplo, conociendo que el documento t41.htm se encuentra en la carpeta raíz del sitio, para insertar el enlace: Enlace a Tema 4: Hiperenlaces escribe: <a href="/t41.htm">Enlace a Tema 4: Hiperenlaces</a> Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t41.htm estuviera en una carpeta llamada tema4, y esta en la carpeta raíz del sitio, escribe: <a href="/tema4/t41.htm">Enlace a Tema 4: Hiperenlaces</a>
Referencia relativa al documento: Prof. Leonel Del Carpio Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace: Enlace a Tema 4: Hiperenlaces
<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> Prof. Leonel Del Carpio Habría que escribir: <a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> Observa que en este caso no aparece el símbolo "/" delante del nombre del documento. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la misma carpeta que el documento actual, habría que escribir: <a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Por ejemplo, para insertar el enlace: Prof. Leonel Del Carpio Punto de fijación: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto". Por ejemplo, para insertar el enlace: Punto de fijacion Tipos de enlaces Habría que escribir: <a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>
Prof. Leonel Del Carpio Destino del enlace blank: Abre documento vinculado en una ventana nueva. _parent: Abre documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre documento vinculado en la ventana completa. Para insertar el enlace: Visita www.aulaclic.com en una ventana nueva escribe: <a href="http://www.aulaclic.com" target ="_blank">Visita www.aulaclic.com en una ventana nueva</a>
Colores de los vinculos Prof. Leonel Del Carpio Colores de los vinculos Se especifican en las propiedades de la página, en la etiqueta <body>. Atributos link (vínculo), alink (vínculo activo), y vlink (vínculo visitado). link determina el color de los enlaces sin visitar. alink determina el color del enlace activo (enlace que acaba de ser visitado). vlink determina el color de los enlaces visitados.
Por ejemplo, al insertar el siguiente código: Prof. Leonel Del Carpio Por ejemplo, al insertar el siguiente código: ... <body link="#FF0000" vlink="#FF0099" alink="#FF9900"> ... <a href="http://www.aulaclic.com" target ="_blank">www.webpage.com</a> ... Mientras no se visite la página www.webpage.com, el enlace será de color rojo (#FF0000): www.webpage.com Mientras la página www.webpage.com sea la última visitada, el enlace será de color fucsia (#FF0099): Cuando se haya visitado la página www.webpage.com, el enlace será de color naranja (#FF9900): www.aulaclic.com
Puntos de fijación. Anclas Prof. Leonel Del Carpio Puntos de fijación. Anclas Documentos extensos, divididos en varios apartados, preferible ir directamente al apartado deseado. Para ello se utilizan las anclas, o puntos de fijación. Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar cualquier valor. Por ejemplo, para insertar un punto de fijación delante del siguiente texto: Texto con ancla ESCRIBE: <a name="miancla"></a>Texto con ancla no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin mirar el código no hay nada que indique que delante del texto haya un ancla.
e-mail para webpage escribe: Prof. Leonel Del Carpio Correo electrónico: Abre Outlook Express para escribir un correo electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del vínculo debe ser "mailto:direcciondecorreo". Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a Webpage, tal como este: e-mail para webpage escribe: <a href="mailto:webmaster@aulaclic.com">e-mail para aulaclic</a>
Vínculo para descarga: Prof. Leonel Del Carpio Vínculo para descarga: El valor del atributo href será una página web (htm, html, asp, php...) pero puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento pdf. Cuando el enlace no es a una página Web aparece el cuadro de diálogo en el que el navegador le pide al usuario permiso para descargar el fichero en su ordenador.
referencia externa, relativa al sitio o relativa al documento. Prof. Leonel Del Carpio extensiones asociadas (.doc Word, .pdf Acrobat, .xls a Excel...) Opción agregada: abrir el fichero sin descargarlo en el disco duro del usuario. referencia externa, relativa al sitio o relativa al documento. Por ejemplo, tenemos el fichero carta.doc y queremos que nuestros visitantes puedan verlo y descargarlo: haz clic aquí para descargar el fichero: <a href="carta.doc" tarjet=_blank >haz clic aquí para descargarte el fichero</a> En este caso utilizamos una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra página.
Imágenes Imagen <img> atributo src. Prof. Leonel Del Carpio Imágenes Imagen <img> atributo src. Por ejemplo, para insertar la siguiente imagen: img src="imagenes/gatito.jpg"> atributo alt El texto alternativo se muestra también al situar el puntero sobre la imagen.
Prof. Leonel Del Carpio <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <title>Example of an inline image with alternative text and title</title> </head> <body> <img src="balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle" title="What I see when I look out of my window; the castle was one reason to move there."> </body> </html>
Prof. Leonel Del Carpio
Tamaño de una imagen atributos width (anchura) y height (altura) Prof. Leonel Del Carpio Tamaño de una imagen atributos width (anchura) y height (altura) atributo border toma valores numéricos, que indican el grosor en píxeles del borde. el borde de la imagen siempre será de color negro, a no ser que la imagen contenga un enlace, en cuyo caso el color del borde será el color establecido para los vínculos.
Prof. Leonel Del Carpio Para insertar una imagen es necesario insertar la etiqueta <imagen>. a) Verdadero b) Falso Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. a) Verdadero b) Falso El texto alternativo no aparece al situar el puntero sobre la imagen. a) Verdadero b) Falso Es preferible modificar el tamaño de las imágenes desde un editor de imágenes. a) Verdadero. b) Falso. MICRO Evaluación
Prof. Leonel Del Carpio 5. El atributo width... a) Sirve para especificar la anchura de la imagen b) Sirve para especificar la altura de la imagen 7. Las imágenes... a) Pueden redimensionarse a través de los atributos width y height b) Siempre tienen un borde alrededor c) Cualquiera de las dos primeras opciones d) Ninguna de las opciones anteriores 8. El borde de la imagen ... a) Es de color negro b) Adquiere el color de los vínculos cuando contiene alguno c) las dos opciones anteriores
Prof. Leonel Del Carpio Web browsers Web browser is a software application for viewing the Web pages. : Internet Explorer(Microsoft) Firefox(Mozilla) Chrome(Google) Safari(Apple) Opera(Opera) ...etc
<ul> <body> <h1>ABOUT W3C</h1> Prof. Leonel Del Carpio <body> <h1>ABOUT W3C</h1> <p>The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.</p> <hr> <h2>Questions About W3C or the Web?</h2> <p>Consult the Help and FAQ for answers to questions:</p> <ul> <li>What does W3C do?</li> <li>How is W3C funded?</li> <li>Is W3C sending me spam?</li> </ul> </body>
<h1>W3C cafe</h1> <ul> <li>menu</li> Prof. Leonel Del Carpio <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>HOME | W3C cafe</title> </head> <body> <h1>W3C cafe</h1> <ul> <li>menu</li> <li>location</li> <li>about us</li> <li>recruit</li> </ul> <h2>new branch</h2> <p>26 January 2011</p> <p> text text text text text text text text text text text text text text text text text text text text text text text text text text </p> <h2>new menu</h2> <p>26 January 2011</p> <p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> <p>Copyright © 2011 W3C cafe</p> </body> </html>
Prof. Leonel Del Carpio
Prof. Leonel Del Carpio
Prof. Leonel Del Carpio Table <table> <caption>HTML History</caption> <tr> <th>Version</th> <th>Published year</th> </tr> <td>HTML+</td> <td>1993</td> <td>HTML2.0</td> <td>1995</td> </table>
Prof. Leonel Del Carpio Biblio online http://www.itrainonline.org/itrainonline/spanish/detail1.shtml?cmd[893]=x-893-28091&cmd[996]=x-996-28091 http://www.eduteka.org/Hipertexto1.php http://www.webestilo.com/guia/enlaces.php3 http://www.librosweb.es/css/index.html http://es.wordpress.com/ http://blog.cursodream.dreamhosters.com/