La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

HTML LENGUAJE DE MARCADORES DE HIPERTEXTO Prof. Leonel Del Carpio 1.

Presentaciones similares


Presentación del tema: "HTML LENGUAJE DE MARCADORES DE HIPERTEXTO Prof. Leonel Del Carpio 1."— Transcripción de la presentación:

1 HTML LENGUAJE DE MARCADORES DE HIPERTEXTO Prof. Leonel Del Carpio 1

2 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 2

3 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 Prof. Leonel Del Carpio 3

4 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 4

5 Etiquetas etiquetas o marcas delimitan elementos HTML. Existen etiquetas de inicio y de fin o cierre. La etiqueta de inicio delimitada por los caracteres. Identificador o nombre. propiedades. Sintaxis: Los atributos de la etiqueta de inicio siguen una sintaxis predefinida y pueden tomar valor propio, o valor HTML predefinido. Prof. Leonel Del Carpio 5

6 La etiqueta final delimitada por. no contiene atributos. Su sintaxis es: Es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas. En el ejemplo la etiqueta esta anidada dentro de la etiqueta : Prof. Leonel Del Carpio 6

7 Bienvenidos a webpage 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, antes de cerrarla hemos puesto por lo que antes de cerrar la etiqueta debemos cerrar la etiqueta. Prof. Leonel Del Carpio 7

8 Ejm: Crear una página html a través del Bloc de notas, vamos a crear una página web sencilla. MI PRIMERA PAGINA Hola, estoy estudiando diseño web. Prof. Leonel Del Carpio 8

9 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 9

10 1. Un documento de hipertexto solo se compone de texto. a) Verdadero b) Falso 2. Los navegadores se encargan de interpretar el código HTML de los documentos. a) Verdadero b) Falso 3. 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 10

11 4. 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. 5. 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. Prof. Leonel Del Carpio 11

12 Estructura básica Identificador del tipo de documento Cabecera de la página Título de la página Cuerpo del documento Prof. Leonel Del Carpio 12

13 Colores hexadecimales web Prof. Leonel Del Carpio 13

14 Colores hexadecimales web Prof. Leonel Del Carpio 14

15 Color de fondo atributo bgcolor. Para que el color de fondo de una página sea azul, escribe:... Sería equivalente a poner:... Prof. Leonel Del Carpio 15

16 La imagen de fondo atributo background. Para hacer que la imagen de fondo de una página sea la imagen fondo.gif, escribe:... Prof. Leonel Del Carpio 16

17 Si no esta en el mismo sitio, y esta en la carpeta images, en el mismo directorio, escribe:... En la etiqueta puede establecer el color del texto de la página: atributo text. Para color del texto rojo, escribe:... Prof. Leonel Del Carpio 17

18 1 Abre el Bloc de notas, para el primer ejercicio. 2 Escribe el código: Inicio 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 18

19 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 19

20 1.Las páginas web escritas en HTML tienen la extensión html o htm. a) Verdaderob) Falso 2.El código de las páginas queda entre las etiquetas y. a) Verdaderob) Falso 3.El título de una página esta dentro de la cabecera. a) Verdaderob) Falso 4.Puede establecerse una imagen de fondo a través del atributo background. a) Verdaderob) Falso MICRO Evaluación Prof. Leonel Del Carpio 20

21 5. Las etiquetas y 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. b) el atributo bgcolor. c) el atributo text. Prof. Leonel Del Carpio 21

22 El texto Los caracteres son dos caracteres especiales que indican inicio y fin de etiqueta. < Se representa con < > Se representa con > áá Á Áññ ™©©®® Saltos de línea Prof. Leonel Del Carpio 22

23 Texto preformateado Separadores Formatear el texto atributos de la etiqueta: Facefuentecolor color del texto Sizetamaño del texto Ejm: Para insertar el texto: Bienvenidos a WEBPAGE.com escribe: Bienvenidos a WEBPAGE.com Prof. Leonel Del Carpio 23

24 Para insertar el texto: Bienvenidos a webpage.com escribe: Bienvenidos a webpage.com Párrafos atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado) Prof. Leonel Del Carpio 24

25 Otra forma de alinear texto es mediante las etiquetas y, que también tienen el atributo align. La etiqueta, al igual que la etiqueta, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor. Encabezados seis etiquetas que representan seis tipos de cabeceras distintas. Todas precisan etiqueta de cierre. Prof. Leonel Del Carpio 25

26 Resaltado del texto EtiquetaSignificadoEjemplo negritacurso HTML Agricultura cursivacurso HTML Agricultura subrayadocurso HTML Agricultura tachadocurso HTML Agricultura teletipo (máquina de escribir) curso HTML Agricultura aumenta el tamaño de la fuente curso HTML Agricultura disminuye el tamaño de la fuente curso HTML Agricultura Prof. Leonel Del Carpio 26

27 Encabezados h EtiquetaEjemplo Título 1: HTML Título 2: HTML Título 3: HTML Título 4: HTML Título 5: HTML Título 6: HTML Prof. Leonel Del Carpio 27

28 Marquesinas Líneas de texto que se desplazan de un lado a otro. etiquetas y. 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). Prof. Leonel Del Carpio 28

29 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. Esto es una marquesina Prof. Leonel Del Carpio 29

30 1. Si se escriben varios espacios en blanco seguidos sólamente se mostrará uno en el navegador. a) Verdadero b) Falso 2. La etiqueta hace que el texto se muestre en cursiva. a) Verdadero. b) Falso 3. El texto equivale a un espacio en blanco. a) Verdaderob) 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 Prof. Leonel Del Carpio 30

31 Hiperenlace 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 y. El atributo href especifica la página a la que está asociado el enlace. Para insertar el enlace: Visita escribe: Visita Visita Prof. Leonel Del Carpio 31

32 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 el nombre del dominio. Por ejemplo, "http://www.webpage.com" o "http://www.webpage.com/index.htm" Para insertar el enlace: Visita escribe: Visita Visita Prof. Leonel Del Carpio 32

33 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. Prof. Leonel Del Carpio 33

34 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: Enlace a Tema 4: Hiperenlaces 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: Enlace a Tema 4: Hiperenlaces Prof. Leonel Del Carpio 34

35 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 Prof. Leonel Del Carpio 35

36 Habría que escribir: Enlace a Tema 4: Hiperenlaces 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: Enlace a Tema 4: Hiperenlaces Prof. Leonel Del Carpio 36

37 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: Punto de fijacion Tipos de enlaces Prof. Leonel Del Carpio 37

38 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 en una ventana nueva escribe: Visita en una ventana nueva Prof. Leonel Del Carpio 38

39 Colores de los vinculos Se especifican en las propiedades de la página, en la etiqueta. 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. Prof. Leonel Del Carpio 39

40 Por ejemplo, al insertar el siguiente código: Mientras no se visite la página el enlace será de color rojo (#FF0000): Mientras la página sea la última visitada, el enlace será de color fucsia (#FF0099): Cuando se haya visitado la página el enlace será de color naranja (#FF9900): Prof. Leonel Del Carpio 40

41 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 y, 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: Texto con ancla no es necesario insertar nada entre las etiquetas y, y que sin mirar el código no hay nada que indique que delante del texto haya un ancla. Prof. Leonel Del Carpio 41

42 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: para webpage escribe: para webpage para aulaclic Prof. Leonel Del Carpio 42

43 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. Prof. Leonel Del Carpio 43

44 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: haz clic aquí para descargar el fichero haz clic aquí para descargarte el fichero En este caso utilizamos una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra página. Prof. Leonel Del Carpio 44

45 Imágenes Imagen 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 45

46 Example of an inline image with alternative text and title Prof. Leonel Del Carpio 46

47 Prof. Leonel Del Carpio 47

48 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 48

49 1. Para insertar una imagen es necesario insertar la etiqueta. a) Verdaderob) Falso 2. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. a) Verdaderob) Falso 3. El texto alternativo no aparece al situar el puntero sobre la imagen. a) Verdaderob) Falso 4. 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 49

50 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 50

51 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 Prof. Leonel Del Carpio 51

52 ABOUT W3C 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. Questions About W3C or the Web? Consult the Help and FAQ for answers to questions: What does W3C do? How is W3C funded? Is W3C sending me spam? Prof. Leonel Del Carpio 52

53 HOME | W3C cafe W3C cafe menu location about us recruit new branch 26 January 2011 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 new menu 26 January 2011 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 Copyright © 2011 W3C cafe Prof. Leonel Del Carpio 53

54 Prof. Leonel Del Carpio 54

55 Prof. Leonel Del Carpio 55

56 Table HTML History Version Published year HTML HTML Prof. Leonel Del Carpio 56

57 Biblio online /detail1.shtml?cmd[893]=x &cmd[996]=x /detail1.shtml?cmd[893]=x &cmd[996]=x Prof. Leonel Del Carpio 57


Descargar ppt "HTML LENGUAJE DE MARCADORES DE HIPERTEXTO Prof. Leonel Del Carpio 1."

Presentaciones similares


Anuncios Google