Informática General 2019 · HTML5 •Del año 2014. •Doctype más simple. •Separación de...

Informática General2019Cátedra:

Valeria Drelichman | Pedro PaleoLeonardo Nadel | Norma Morales

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

HTMLHyperText 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.

XHTMLExtensible Hypertext Markup Language

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

<etiqueta> </etiqueta>• Algunas etiquetas tienen la siguiente forma:

<etiqueta />

• Se modifican usando atributos:<etiqueta atributo1="valor1" atributo2="valor2">

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.

HTML5

• Provee tres características:– Estructura » HTML– Estilo » CSS– Funcionalidad » JavaScript

Reglas de escritura HTML5

• Por convención se debe:– Escribir las etiquetas siempre en minúsculas– Escribir los atributos siempre entre comillas– Cerrar siempre las etiquetas que tienen cierre

Reglas de escritura HTML5

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

<html>

• El atributo lang en la etiqueta html identificael idioma del contenido de la página; es porespañol.

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

</html>

<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.)

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

<title>

• Especifica el título del documento.• Es visible para el usuario.• Siempre debe ser completada.

<title>


<head><meta charset="UTF-8"><title>Un lindo documento</title>

</head>

</html>

<body>

• La parte visible del documento.• Donde va todo el contenido de la página.

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

<head><meta charset="UTF-8"><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án)ca

• En HTML5 se incorporan nuevas etiquetas que permiten especificar con mayor detalle las partes de un documento:– <header>; <hgroup>; <nav>; <article>; <section>;

<figure>; <aside>; <footer>• Las nuevas etiquetas también hacen más fácil

aplicar estilos.

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>

Texto en la página

• Salto de línea<br>

• Espacios en HTML

• Cita<blockquote>Esto es una cita</blockquote>

Caracteres especiales(si se usa la codificación iso-8859-1)

á á Á Á

é é É É

í í Í Í

ó ó Ó Ó

ú ú Ú Ú

ñ ñ Ñ Ñ

Línea horizontal

• La e.queta <hr> se usa como separador temá.co en una página HTML.

• Se muestra como una línea horizontal.

Texto

<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, <strong>muyimportante</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 absolutahref="h;p://www.google.com"– URL relaBvahref="index.html"– Anchorhref="#pie"

URLs

• URL absoluta

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

http://www.ejemplo.com/ruta1/

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

URLs

• 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

<a> </a>• Atributo id – Si se utiliza id sin utilizar href, se trata de un

anchor y no de un linkid="pie"

• Atributo targettarget="_blank"target="_self" (opción por defecto)

Links

<a href="h/p://www.una.edu.ar/">Link a la UNA</a>

• Abre en nueva ventana o pestaña<a href="h/p://www.una.edu.ar/"

target="_blank">Link a la UNA</a>

Link a un mail

<a href="mailto:[email protected]"> Mandarmail </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 <span> texto </span>

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

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

</div>

HTML5

• Las principales e0quetas HTML5 nuevas no 0enen una representación especial en pantalla.

• Pero cada una 0ene un significado semán0coque 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>

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

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

<article>

<article><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 <ar:cle> no es necesario que el contenido se en:enda por fuera del contexto de la página.

• Pueden usarse <sec:on> dentro de <ar:cle>, tanto como <ar:cle> dentro de <sec:on>.

<aside>

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

• Algunos usos posibles de <aside>: – explicación al margen, – glosario, – biogra?a del autor, – información del perfil, etc.

<footer>

• Define el pie de una página o sección.• Normalmente incluye: – información de derechos de autor, – algunos links, –mapa del si?o 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>.

<address><footer><address>

Escrito por <a href="mailto:[email protected]"> Juan Perez</a>.<br>Dominio.com<br>Viamonte 1832<br>Buenos Aires

</address></footer>

Imágenes

<img src="URL" alt="Texto alterna5vo">• Los atributos src y alt son obligatorios• Otros atributos

height="90" width="50"usemap="#mapa"

• Se sugiere u,lizar es,los en lugar de los atributos height y width

Formatos de imágenes

• GIF• GIF animado• JPG• PNG-8• PNG-24

• SVG

Comentarios en HTML

• Se pueden agregar comentarios en el códigoHTML.

El atributo style

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

<etiqueta style="propiedad:valor;">

• 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 7tulo</h1><p style="color:#0F0;">Esto es texto.</p>

Style font-family

<h1 style="font-family:verdana;">Este es un <tulo</h1><p style="color:green; font-family:courier;">Estoes 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;">Estoes texto.</p>

Informática General2019Cátedra:

Valeria Drelichman | Pedro PaleoLeonardo Nadel | Norma Morales

Informática General 2019 · HTML5 •Del año 2014. •Doctype más simple. •Separación de...

Documents

Transcript of Informática General 2019 · HTML5 •Del año 2014. •Doctype más simple. •Separación de...