CLASE 5 “Redacción de noticias y Lenguaje HTML para la creación y mejora de páginas web” Lics. en Periodismo y Comunicación Social FCH-UNSL (Año 2014)

Presentación del tema: "CLASE 5 “Redacción de noticias y Lenguaje HTML para la creación y mejora de páginas web” Lics. en Periodismo y Comunicación Social FCH-UNSL (Año 2014)"— Transcripción de la presentación:

1 CLASE 5 “Redacción de noticias y Lenguaje HTML para la creación y mejora de páginas web” Lics. en Periodismo y Comunicación Social FCH-UNSL (Año 2014) CREATIVE COMMONS RECONOCIMIENTO-NOCOMERCIAL- COMPARTIRIGUAL 3.0 UNPORTED LICENSE

2 LENGUAJE HTML ENCABEZADO Título de la página CUERPO [Aquí se escriben las etiquetas que permiten visualizar la página] HTML (HyperText Markup Language) es un lenguaje de creación de páginas web compuesto por una estructura básica de programación (Encabezado y Cuerpo) y un contenido (texto, imágenes, tablas, audios, videos, etc.)…

3 Su estructura básica de programación se compone de etiquetas que cumplen la función de “comandos” que permiten el agregado de contenido a una página web. Mientras éstas se escriben se trabaja en Vista Diseño y cuando se visualiza el efecto de las mismas en un navegador de páginas web se trabaja en Vista Usuario… LENGUAJE HTML COMIENZO DE LA PÁGINA WEB ENCABEZADO Título de la página CUERPO [Aquí se escriben las etiquetas que permiten visualizar la página] FIN DE LA PÁGINA WEB VISTA DISEÑO VISTA USUARIO

4 Su trabajo requiere del uso de un procesador de textos básico (por ej. Bloc de Notas) donde se escribe de forma manual el código de programación de la página. Esto requiere conocer el funcionamiento de cada una de las etiquetas del lenguaje HTML. Las etiquetas se escriben entre llaves angulares ( ) y suelen tener una fase de apertura y de cierre (indicada por el símbolo ( / )… VISTA DISEÑO COMIENZO DE LA PÁGINA WEB ENCABEZADO Título de la página CUERPO [Aquí se escriben las etiquetas que permiten visualizar la página] FIN DE LA PÁGINA WEB

5 El código fuente de una página web puede ser visualizado a través del comando Ver  Código fuente (u otro similar) en cualquier navegador… VISTA DISEÑO

6 Visualización ampliada de los diferentes comandos escritos en lenguaje HTML… VISTA DISEÑO

7 Constituye otro de los modos en los que se debe ubicar el creador de una página web: cómo verá la página el usuario lector. La Vista Usuario es posible en la medida que el archivo generado en el Bloc de Notas se guarde con extensión.HTML, lo que producirá como efecto su apertura en el Navegador de páginas web predeterminado… VISTA USUARIO

8 La extensión.HTM/.HTML. se coloca de forma manual, mediante las configuraciones manuales de los campos “Nombre” y “Tipo” del comando “Archivo  Guardar como”… VISTA USUARIO

9 Permiten el agregado de contenido a una página web de forma muy sencilla. Entre las de más fácil manejo se encuentran: Y y o … y … y … CREANDO PÁGINAS EN HTML ETIQUETAS SIMPLES

10 y indican principio y fin de la página web que se está creando. y indican principio y fin del encabezado de la página. En el mismo se coloca información general, como título de la página, información para robots de búsqueda de información, códigos de programación que se utilizarán en la página, etc. y indican principio y fin del cuerpo de la página. En el mismo se coloca su contenido: texto, imágenes, enlaces, audio, video, etc… CREANDO PÁGINAS EN HTML ETIQUETAS SIMPLES

11 , y CREANDO PÁGINAS EN HTML ETIQUETAS SIMPLES COMIENZO DE LA PÁGINA WEB ENCABEZADO Título de la página CUERPO [Aquí se escriben las etiquetas que permiten visualizar la página] FIN DE LA PÁGINA WEB

12 y especifica el título de la página. agrega una o más líneas vacías al texto. o …y … … especifican el tamaño del texto, siendo H1 el más grande. y alinea un texto al centro del renglón. coloca una línea horizontal del largo de la pantalla… CREANDO PÁGINAS EN HTML ETIQUETAS SIMPLES

13 ,, …, y CREANDO PÁGINAS EN HTML ETIQUETAS SIMPLES El Informante Primera pagina Un periódico en el que nosotros y vos hacemos la diferencia en la información…

14 ,, …, y CREANDO PÁGINAS EN HTML ETIQUETAS SIMPLES

15 separa párrafos. y coloca un texto en negrita. y coloca un texto en cursiva. y subraya un texto. y destaca una cita textual dentro de un texto… CREANDO PÁGINAS EN HTML MÁS ETIQUETAS SIMPLES

16 ETIQUETAS EN HTML,,, y ETIQUETAS SIMPLES

17 enumera elementos con números. enumera elementos con viñetas… CREANDO PÁGINAS EN HTML ETIQUETAS DE NUMERACIÓN DE ELEMENTOS Ambas etiquetas trabajan en conjunción con la etiqueta.

18 (Listas con números) CREANDO PÁGINAS EN HTML ETIQUETAS DE NUMERACIÓN DE ELEMENTOS

19 (listas con viñetas) CREANDO PÁGINAS EN HTML ETIQUETAS DE NUMERACIÓN DE ELEMENTOS

20 CREANDO PÁGINAS EN HTML ETIQUETAS DE ENLACES O HIPERVÍNCULOS Permite que al cliquear sobre un texto éste pueda ser redirigido hacia otro texto, una imagen, un audio, video, e incluso a otro sitio web. Su forma general es: Término al que se le asocia el enlace …

21 CREANDO PÁGINAS EN HTML ETIQUETAS DE ENLACES O HIPERVÍNCULOS

22 y sus atributos CREANDO PÁGINAS EN HTML ETIQUETAS DE ENLACES O HIPERVÍNCULOS Admite diversos modificadores de los que podemos mencionar a “target” que cumple diversas funciones: “_blank”: muestra el enlace en una nueva página. “_self”: muestra el enlace en la misma página…

23 y sus atributos CREANDO PÁGINAS EN HTML ETIQUETAS DE ENLACES O HIPERVÍNCULOS Uso del modificador: “_blank”

24 y el enlace a un email CREANDO PÁGINAS EN HTML ETIQUETAS DE ENLACES O HIPERVÍNCULOS Su forma general es: Texto del enlace …

25 y el enlace a un email CREANDO PÁGINAS EN HTML ETIQUETAS DE ENLACES O HIPERVÍNCULOS

26 CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA Se utilizan al interior de la etiqueta Body y permiten modificar la forma o colores del fondo de la página y los enlaces: sin visitar, activos y visitados. permite modificar el color de fondo de la página permite agregar una imagen de fondo modifica el color de los enlaces sin visitar modifica el color de los enlaces visitados modifica el color de los enlaces activos…

27 BGCOLOR CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA Modifica el color de fondo de una página admitiendo variantes que expresan al color en letras o en código hexadecimal: … El color en código hexadecimal difiere de acuerdo a la paleta de colores considerada.

28 BGCOLOR CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA

29 BGCOLOR CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA

30 PALETA DE COLORES EN HEXADECIMAL CREANDO PÁGINAS EN HTML #0000FFblue #008000green #008080teal #00FF00lime #00FFFFaqua #800000maroon #800080purple #808000olive #808080gray #C0C0C0silver #FF0000red #FF00FFfuchsia #FFFF00yellow

31 PALETA DE COLORES EN HEXADECIMAL CREANDO PÁGINAS EN HTML #000000#000033#000066#000099#0000CC#0000FF #003300#003333#003366#003399#0033CC#0033FF #006600#006633#006666#006699#0066CC#0066FF #009900#009933#009966#009999#0099CC#0099FF #00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF #00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF #330000#330033#330066#330099#3300CC#3300FF #333300#333333#333366#333399#3333CC#3333FF #336600#336633#336666#336699#3366CC#3366FF #339900#339933#339966#339999#3399CC#3399FF #33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF #33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF #660000#660033#660066#660099#6600CC#6600FF #660033#663333#663366#663399#6633CC#6633FF #666600#666633#666666#666699#6666CC#6666FF #669900#669933#669966#669999#6699CC#6699FF #66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF #66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF #990000#990033#990066#990099#9900CC#9900FF #993300#993333#993366#993399#9933CC#9933FF #996600#996633#996666#996699#9966CC#9966FF #999900#999933#999966#999999#9999CC#9999FF #99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF #99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF #CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF #CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF #CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF #CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF #CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF #CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF #FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF #FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF #FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF #FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF #FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF #FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF

32 BACKGROUND CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA Se utiliza dentro de la etiqueta Body de una página web para colocar una imagen de fondo. Su forma general es:

33 BACKGROUND CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA

34 LINK, VLINK Y ALINK CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA

35 TABLAS CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA Permiten el ordenamiento de uno o más datos en celdas rectangulares distribuidas en filas y columnas: fila1-celda1 fila1-celda2 fila1- celda3 fila2-celda1 fila2-celda2 fila2- celda3 indica la fila y indica la columna de la tabla.

36 TABLAS (Vista Diseño) CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA

37 TABLAS (Vista Usuario) CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA

38 TABLAS y atributos CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA Existen diversos modificadores del comando Table, entre ellos: BORDER que modifica el ancho del borde BGCOLOR que modifica el color de fondo de la tabla HEIGHT que modifica el alto de la tabla VALIGN que pemite modificar la alineación del contenido Arriba Abajo

39 TABLAS y atributos CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA

40 TABLAS y atributos CREANDO PÁGINAS EN HTML ETIQUETAS DE FONDO DE LA PÁGINA

41 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES Permiten insertar o complementar la información textual con imágenes, audio, video, etc. Utiliza las etiquetas: para la inserción de imágenes. para colocar sonido de fondo a una página. IFRAME, EMBED U OBJECT que permite embeber objetos multimediales (audio, video y presentaciones con diapositivas, entre otros) dentro de un sitio web.

42 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES Permite la inserción de imágenes fijas o animadas. Su forma general es: Entre los distintos modificadores que admite se tienen: Height y Width: para modificar alto y ancho de la imagen Alt: para asociar un texto a la imagen Align: top, middle, bottom, texttop, etc. Border: para cambiar el grosor del borde, etc. IMG

43 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES IMG Al momento de referenciar una imagen se debe tener clara su ubicación dentro del disco rígido. En general, todas las imágenes deben alojarse dentro de una misma carpeta.

44 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES IMG

45 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES BGSOUND Permite colocar un sonido de fondo a la página. Su forma general es: <BGSOUND SRC=“dirección web o ruta local del destino del enlace” Algunos de sus modificadores son: Loop: posibilita la repetición del sonido. Volume: indica el volumen con el que se escuchará ese audio (-10.000…10.000) Balance: indica la distribución del volumen (- 10.000…10.000) La elección del sonido de fondo para una página debe ser atinada, puesto que en muchos casos pueden resultar molestos, o bien, deberían admitir su desactivación por parte del usuario lector.

46 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES BGSOUND

47 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES EMBEBER UN AUDIO Los audios se suben en un sitio externo (como Goear o Dilandau), diferente de dónde se publican los contenidos. Este sitio provee la información para embeber el audio desde cualquier otro sitio web.

48 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES EMBEBER UN AUDIO Al embeber un audio éste se incorpora a la página anexándose a la misma permitiendo desde allí su reproducción.

49 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES EMBEBER UN VIDEO Los videos se suben a un sitio externo, diferente de donde se publican los contenidos (por ej. Youtube o Vimeo). Este sitio provee la información para embeber el audio desde cualquier otro sitio web.

50 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES EMBEBER UN VIDEO (usando Iframe) Al chequear la sintaxis brindada por un sitio web se debe chequear que esta esté escrita correctamente. El omitir por ej. “http:” es motivo de error en los navegadores.

51 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES EMBEBER UN VIDEO (usando Object)

52 CREANDO PÁGINAS EN HTML INSERCIÓN DE ELEMENTOS MULTIMEDIALES PLUGINS NECESARIOS Para poder visualizar los audios y videos de un sitio web es necesario disponer del Plugin “Shockwave Flash” instalado en la computadora. Este puede descargarse e instalarse desde la Web o bien anexarse desde los plugins de un navegador…

53 Especifican información esencial para el navegador tal como: Versión del lenguaje HTML con la que se está trabajando: la Versión 4 está estable mientras que la Versión 5 se encuentra en fase de experimentación. La primera línea de código que se coloca antes de la etiqueta html es: http://www.w3.org/TR/html4/strict.dtd CREANDO PÁGINAS EN HTML OTRAS ETIQUETAS FUNDAMENTALES Título de la página

54 Juego de caracteres utilizado en cada página Web: que permite la visualización de caracteres alfanuméricos y especiales. Las líneas de código posibles luego de son: CREANDO PÁGINAS EN HTML Título de la página OTRAS ETIQUETAS FUNDAMENTALES

55 FIN DE PRESENTACIÓN… Elaborado por Prof. Viviana M. Ponce vmponce@unsl.edu.ar CREATIVE COMMONS RECONOCIMIENTO-NOCOMERCIAL- COMPARTIRIGUAL 3.0 UNPORTED LICENSE