informática general 2019 · html5 •del año 2014. •doctype más simple. •separación de...
Post on 24-Jul-2020
4 Views
Preview:
TRANSCRIPT
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.)
<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á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:mail@dominio.com"> 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>.
<section>
<sec*on><h1>...</h1><p>...</p></sec*on>
<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 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:juan@dominio.com"> 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
<img><imgsrc="http://www.informaticauna.com.ar/img/margarita.jpg" alt="Una linda margarita">
<imgsrc="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ódigoHTML.
<!-- 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 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
top related