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

Tamaño: px

Comenzar la demostración a partir de la página:

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

Alfredo Montes Redondo
hace 6 años
Vistas:

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 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 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 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 Funcionalidad» JavaScript

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. El código anterior funciona en HTML5. <html> La etiqueta html debe contener todo el código. <html> El atributo lang en la etiqueta html e identifica el idioma del contenido de la página; es por español. <html lang="es">

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.) <html lang="es"> <head> </head> 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 "> UNICODE <meta charset="utf-8"> <meta> <html lang="es"> <head> <meta charset="utf-8"> </head> <title> Especifica el título del documento. Es visible para el usuario. Siempre debe ser completada. <html lang="es"> <head> <meta charset="utf-8"> <title>un lindo documento</title> </head>

4 <body> La parte visible del documento, donde va todo el contenido de la página. <html lang="es"> <head> <meta charset="utf-8"> <title>un lindo documento</title> </head> <body> </body> 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: <header>; <hgroup>; <nav>; <article>; <section>; <figure>; <aside>; <footer> 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> </ul> <li> elemento </li> <li> elemento </li> Listas ordenadas <ol> </ol> <li> elemento </li> <li> elemento </li> Links y anchors <a> </a> Atributo href - URL absoluta href=" - URL relativa href="index.html" - Anchor href="#pie"

6 URLs URL absoluta 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> 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:mail@dominio.com"> Mandar mail </a> Con asunto de mensaje <a href="mailto:mail@dominio.com?subject=mensaje"> Mandar mail </a> A varias direcciones con asunto y cuerpo del mensaje <a href="mailto:mail@dominio.com& cc=otro@dominio.com& bcc=ultimo@dominio.com& 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 <span> texto </span>

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. <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 <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> Define el pie de una página o sección.

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>. <footer> <address> Escrito por <a href="mailto:juan@dominio.com">juan Perez</a>.<br> Dominio.com<br> Pedro de Mendoza 679<br> Buenos Aires </address> </footer> Imágenes <img src="url" alt="texto alternativo" /> 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 <img src=" alt="una linda margarita"> <img src=" alt="planta de orquídeas"> <img src=" alt="tulipán fucsia"> <img src=" alt="tres rosas y un colibrí" height="340" width="343"> Comentarios en HTML Se pueden agregar comentarios en el código HTML.

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

Documentos relacionados

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto) HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional