Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo 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
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: <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 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 identifica el idioma del contenido de la página; es por españ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.)
<head> <!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.
<title> <!doctype html> <html lang="es"> <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á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.
Algunas etiquetas: <p> <br> Espacios en HTML Texto en la página </p> <h1> </h1> <h2> </h2> <strong> <em> </strong> </em>
Caracteres especiales (si se usa la codificación iso-8859-1) á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ
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.
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, 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"
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 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>
<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 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> <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 <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> <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. 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>.
<address> <footer> <address> Escrito por <a href="mailto:juan@dominio.com"> Juan Perez</a>.<br> Dominio.com<br> Viamonte 1832<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" Se sugiere utilizar estilos en lugar de los atributos height y width
Formatos de imágenes GIF GIF animado JPG PNG-8 PNG-24 SVG
<img> <img src="http://www.informaticauna.com.ar/img/margarita.jpg" alt="una linda margarita"> <img src="http://www.informaticauna.com.ar/img/orquideas.jpg" alt="planta de orquídeas"> <img src="http://www.informaticauna.com.ar/img/tulipan.jpg" alt="tulipán fucsia">
<img> <img src="http://www.informaticauna.com.ar/img/rosas.gif" alt="tres rosas y un colibrí" height="340" width="343">
<svg> Permite dibujar elementos vectoriales sin tener que linkear un archivo. <svg width="400" height="100"> <rect width="400" height="100" fill="yellow" stroke="red" stroke-width="20" /> </svg>
Comentarios en HTML Se pueden agregar comentarios en el código HTML. <!-- Esto es un comentario --> <!-- 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. <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; textalign:center;">este es un título</h1> <p style="color:green; font-family:courier;">esto es texto.</p>
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales