Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

(1)

UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales

Informática General 2016

Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

HTML

Desarrollo web Lenguaje de marcado - HTML / XHTML / HTML5

Lenguaje de hojas de estilo - CSS 2.1 / CSS 3

Lenguaje de programación - JavaScript

Imágenes y elementos multimedia HTML (HyperText Markup Language) Creado en el año 1993.

Lenguaje de marcas o etiquetas (tags) para la creación de documentos de hipertexto.

Las etiquetas definen la estructura lógica del documento. Un documento HTML consta de texto: etiquetas y contenido. XHTML (Extensible Hypertext Markup Language)

Originalmente del año 2000. Las etiquetas abren y cierran:

Algunas etiquetas tienen la siguiente forma:

Se modifican usando atributos:

HTML5

Del año 2014.

Doctype más simple.

Separación de contenido y estilo: Etiquetas de estilo de HTML4 son ahora obsoletas. Integración con CSS y lenguajes de programación.

Nuevas etiquetas semánticas. Nuevas características multimedia. Provee tres características:

Estructura » HTML Estilo » CSS

(2)

Reglas de escritura HTML5 Por convención se debe:

- Escribir las etiquetas siempre en minúsculas - Escribir los atributos siempre entre comillas - Cerrar las etiquetas que tienen cierre

Anidamiento incorrecto:

<p> texto en <strong> negrita </p> </strong>

Anidamiento correcto:

<p> texto en <strong> negrita </strong> </p>

Estructura de un documento DOCTYPE

HTML

HEAD

Información sobre la página

(ej: título, codificación de carácteres, ...) BODY

Contenido de la página (ej: textos, imágenes, …) <!doctype>

Tiene que ser la primera línea del archivo. Identifica el tipo de documento.

<!doctype html>

El código anterior funciona en HTML5. <html>

La etiqueta html debe contener todo el código.

<!doctype html>

<html> </html>

El atributo lang en la etiqueta html e identifica el idioma del contenido de la página; es por español.

<!doctype html>

<html lang="es"> </html>

(3)

<head>

Contiene información que no es parte del contenido:

• Título

• Link a hojas de estilo CSS

• Scripts y links a scripts

• Información para robots

• Definición de codificación

• Otros metadatos (palabras clave, negociación de contenido, etc.)

<!doctype html> <html lang="es"> <head> </head> </html> Codificación

Se refiere a la codificación de los textos. Va en el HEAD.

Opciones de codificación:

Western ISO Latin 1 / Europeo Occidental

<meta charset="iso-8859-1"> UNICODE <meta charset="UTF-8"> <meta> <!doctype html> <html lang="es"> <head> <meta charset="utf-8"> </head> </html> <title>

Especifica el título del documento. Es visible para el usuario.

Siempre debe ser completada.

<!doctype html> <html lang="es">

<head>

<title>Un lindo documento</title>

</head> </html>

(4)

<body>

La parte visible del documento, donde va todo el contenido de la página.

<!doctype html> <html lang="es">

<head>

<title>Un lindo documento</title> </head>

<body> </body>

</html>

Layout en HTML

Las etiquetas de HTML fueron originalmente pensadas para definir el contenido de un documento. “Esto es un header”, “Esto es un párrafo”, “Esto es una tabla”, utilizando las etiquetas <h1>, <p>, <table>, respectivamente. Del layout del documento se debería ocupar el browser sin la ayuda de ninguna etiqueta de formato.

Diseño en HTML

Para poder aplicar diseño en páginas HTML, manteniendo el contenido y la presentación de los documentos claramente separados, se normalizó el lenguaje CSS.

Web semántica

En HTML5 se incorporan nuevas etiquetas que permiten especificar con mayor detalle las partes de un documento:

Las nuevas etiquetas también hacen más fácil aplicar estilos. Texto en la página Algunas etiquetas: <p> </p> <br> <h1> </h1> <h2> </h2> <strong> </strong> <em> </em> Espacios en HTML   Caracteres especiales á á Á Á é é É É

(5)

í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ Texto Párrafos

<p> Contenido del párrafo </p>

Títulos

<h1> Título de nivel 1 </h1> <h2> Título de nivel 2 </h2>

Énfasis

<em> Importante </em>

<strong> Muy importante </strong>

Línea horizontal

La etiqueta <hr> se usa como separador temático en una página HTML. Se muestra como una línea horizontal.

<h1>Este es un título</h1> <p>Esto es texto.</p>

<hr>

<h2>Este es otro título</h2>

<p>Este texto es sobre otro tema, muy <strong>importante</strong>.</p>

<hr>

Listas sin orden

<ul>

<li> elemento </li> <li> elemento </li> </ul>

Listas ordenadas

<ol>

<li> elemento </li> <li> elemento </li> </ol> Links y anchors <a> </a> Atributo href - URL absoluta href="http://www.google.com" - URL relativa href="index.html" - Anchor href="#pie"

(6)

URLs

URL absoluta

http://www.ejemplo.com/ruta1/ruta2/pagina2.html http://www.ejemplo.com/ruta1/

http://www.ejemplo.com/img/fondo.jpg

URL relativa (mismo directorio)

pagina2.html

URL relativa (directorio en un nivel superior)

../pagina2.html

URL relativa (en un subdirectorio)

subdirectorio/pagina2.html

URL relativa al directorio raíz del sitio

/subdirectorio/pagina2.html

Links y anchors

Atributos id (si se utiliza id sin utilizar href, se trata de un anchor y no de un link)

id="pie"

Atributo target

target="_blank"

target="_self" (opción por defecto)

Link a un mail

<a href="mailto:[email protected]"> Mandar mail </a>

Con asunto de mensaje

<a href="mailto:[email protected]?subject=Mensaje"> Mandar mail </a>

A varias direcciones con asunto y cuerpo del mensaje

<a href="mailto:[email protected]& [email protected]&

[email protected]& subject=Mensaje

&body=Pedido%20de%20info"> Mandar mail </a>

<span>

Sirve para aplicar estilo a una parte de la página HTML. Normalmente es una parte pequeña.

El tag <span> no supone ningún cambio visual por sí mismo; se le deben aplicar estilos.

Codificación

(7)

<div>

Sirve para aplicar estilo a una parte de la página HTML. También crea una división en la página a la que se le puede aplicar una cantidad de atributos adicionales. Se utiliza en conjunto con los estilos CSS para armar el layout de la página.

<div>

<h1>Un encabezado</h1> <p>Mucho texto</p> </div>

HTML5

Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Pero cada una tiene un significado semántico que sirve para ordenar el contenido del documento.

Etiquetas HTML5 <header> </header> <nav> </nav> <article> </article> <section> </section> <aside> </aside> <address> </address> <footer> </footer> <header>

Contiene información introductoria, usualmente títulos, subtítulos, logos. Puede haber varios <header> en un documento.

No se puede usar <header> dentro de <footer>, <address> u otro <header>. <nav>

Define un grupo de links de navegación.

No todos los links de un documento son links de navegación, <nav> se debe usar sólo para grupos de links de navegación.

<nav> <ul> <li><a href="texto.html">Texto</a></li> <li><a href="fotos.html">Fotos</a></li> <li><a href="otro.html">Otro</a></li> </ul> </nav> <article>

Define contenido autónomo que podría existir independientemente del resto del contenido.

(8)

Algunos usos posibles de <article> son: post en un blog, artículo de un diario, comentario.

<h1>Nueva nota</h1>

<p>Nueva nota sobre HTML5.</p> </article>

<section>

Define una sección en un documento; agrupa contenido relacionado.

A diferencia de <article> no es necesario que el contenido se entienda por fuera del contexto de la página.

Pueden usarse <section> dentro de <article>, tanto como <article> dentro de <section>. <section> <h1>...</h1> <p>...</p> </section> <section> y <article> <section> <h1> ... </h1> <article> <h2>...</h2> <p>...</p> </article> </section> <section> y <article> <article> <h1> ... </h1> <section> <h2>...</h2> <p>...</p> </section> </article> <aside>

Define contenido relacionado con el resto de la página, pero que si no está igual se entiende el resto.

Algunos usos posibles de <aside>: explicación al margen, glosario, biografía del autor, información del perfil, etc.

<footer>

(9)

Normalmente incluye información de derechos de autor, algunos links, mapa del sitio o maneras de ponerse en contacto.

<address>

Define la parte del documento que contiene la información de contacto.

Si se usa dentro de <body> es el contacto de la página; si se usa dentro de <article> es el contacto de ese artículo.

Normalmente se incluye el elemento <address> dentro de <footer>.

Escrito por <a href="mailto:[email protected]">Juan Perez</a>.<br> Dominio.com<br> Pedro de Mendoza 679<br> Buenos Aires </address> </footer> Imágenes

Los atributos src y alt son obligatorios Otros atributos height="90"width="50” usemap="#mapa” Formatos de imágenes GIF GIF animado JPG PNG-8 PNG-24

Comentarios en HTML

Se pueden agregar comentarios en el código HTML.

(10)

<!-- Código comentado

<p>Esto no se ve porque está comentado</p> -->

El atributo style

Para definir el estilo de un elemento HTML se usa el atributo style.

La propiedad es una propiedad de CSS. El valor es un valor de CSS. Style background-color <body style="background-color:blue;"> <h1>Este es un título</h1> <p>Esto es texto.</p> </body> Style color <h1 style="color:red;">Este es un título</h1> <p style="color:#0F0;">Esto es texto.</p> Style font-family <h1 style="font-family:verdana;">Este es un título</h1> <p style="color:green; font-family:courier;">Esto es texto.</p>

Style text-align

<h1 style="font-family:verdana; text-align:center;">Este es un título</h1> <p style="color:green; font-family:courier;">Esto es texto.</p>