HTML HTML HTML. Diseño de Sitios Web. Qué es HTML?

Transcripción

1 Diseño de Sitios Web 5 (I) Qué es? Es un lenguaje descriptivo con el cual se describe la estructura del texto y todos los elementos que se muestran en la página. Es el método más usado para publicar documentos en la Web. : Hypertext Markup Language. Lenguaje de Marcas de Hipertexto. Lenguaje: No es un lenguaje de programación típico. Con el se crean documentos no aplicaciones. Marcas: Un documento es un archivo de texto enriquecido con instrucciones que le dicen al navegador cómo y dónde mostrar el texto del documento. Estas instrucciones se introducen mediante etiquetas o tags. Hipertexto: Zona sensible del documento desde la cual podemos acceder a otros documentos o recursos en la Web. Estructura y contenidos de un documento Un documento contiene: Textos: Información Etiquetas o tags: Elementos embebidos que proveen instrucciones para la estructura, apariencia y función de los contenidos. 1

2 Estructura y contenidos de un documento Un documento se divide en tres partes principales: Unadeclaración de la versión de con la que se ha creado el documento Unacabecera con información del documento u otros datos que no se consideran parte de su contenido. Uncuerpo con el contenido real del documento. Documento HMTL debe contener al menos: Declaración de Versión(<!DOCTYPE html>) Etiqueta Inicial (<>) Cabecera (<HEAD>) Titulo (<TITLE>.</TITLE>) Cierre de Cabecera (/HEAD) Cuerpo(<BODY>) Contenido de la página Cierre de cuerpo(/body) Etiqueta final (</>) 6 Componentes de un Documento Al crear un documento básicamente utilizaremos: Elementos Atributos Referencias a caracteres Comentarios. Componentes de un Documento Elementos: Representan estructuras mediante las cuales se organiza el contenido del documento o acciones que se desencadenan cuando el navegador interpreta el documento. Se introducen en el documento mediante una declaración del tipo de elemento. Cada declaración consta generalmente de tres partes: Etiqueta de Inicio: <NOMBRE DEL ELEMENTO> Contenido: puede ser otros elementos, texto o referencias a caracteres. Etiqueta de fin: </NOMBRE DEL ELEMENTO> 2

3 Tipos de Elementos Elementos en Bloque y en línea. Elementos en bloque: capaces de contener otros elementos Ej: <HEAD> <TITLE> Mi Sitio Web </TITLE> </HEAD> Elementos de linea <IMG SRC= imagen.gif > 9 Componentes de un Documento Referencias a Caracteres: Son nombres numéricos o simbólicos de caracteres que pueden incluirse en un documento. Comienzan con el símbolo & y terminan con ;. Se utilizan para representar caracteres especiales u otros que no pueden introducirse directamente desde el editor. Ejemplos: á = á &#225 é = é &#233 í = í &#237 ó = ó &#243 ú = ú &#250 ü = ü &#252 ñ = ñ &#241 Componentes de un Documento Atributos: Son propiedades asociadas a los elementos. Tienen asociado valores y modifican o extienden las acciones de los elementos. Los pares atributo/valor se colocan antes del cierre de la etiqueta de inicio del elemento (antes de >). Puede haber cualquier número de atributos separados por espacios en blanco y no tienen un orden predeterminado La sintaxis es: nombre del atributo = valor El valor va entre comillas aunque pueden omitirse Ejemplo: <NOMBRE ELEMENTO ATRIBUTO1=valor1 ATRIBUTO2= valor2 > CONTENIDO </NOMBRE ELEMENTO> <H1 ALIGN= center >Mi sitio web</h1> Componentes de un Documento Comentarios: Si se desea introducir algún comentario a un documento la sintaxis es:   Los comentarios serán ignorados por el navegador 3

4 Consideraciones Para generar documentos con un estilo de accesible por la mayor cantidad de navegadores posibles, pueden seguirse algunas guías. Seguir la sintaxis descripta por la especificación disponible del w3c más actualizada. Seguir convenciones de escritura de código para hacer el documento más fácil de leer. Por ejemplo Tags y atributos en mayúsculas Usar nuevas líneas y tabs para mayor legibilidad Evitar agregar elementos extras y redundantes Nombrar los archivos de acuerdo a las siguientes guías Usar extensiones apropiadas (.html y.htm para servidores Windows) Evitar espacios y caracteres especiales (?, %, #, etc.) Los nombres son Case Sensitives Cuidar los finales de líneas Surgimiento de 5 La versión estándar anterior era 4.01 que se estableció en 1999 y no tubo muchos cambios hasta surge como una cooperación entre la World Wide Web Consortium (W3C) y el Web Hypertext Application Technology Working Group (WHATWG). WHATWG estaba trabajando con formularios y aplicaciones Web y W3C trabajaba en X Nueva versión 5 Estas dos organizaciones trabajaron conjuntamente desde 2006 y establecieron algunas reglas para 5: Nuevas características que debían basarse en, CSS (Hojas de Estilos), DOM, y JavaScript Reducir la necesidad de plugins externos (como Flash) Mejor manejo de errores Mas etiquetas para reemplazar script 5 debería ser independiente del dispositivo. El proceso de desarrollo sería visible al público. 15 Nuevas Características de 5 Con esta versión se introducen nuevas características en una variedad de áreas. Algunas de las adiciones más notables son: Las etiquetas multimedia para audio y video con soporte a distinto códec. La etiqueta canvas para dibujar contenido en el navegador (2D y 3D). Las etiquetas datagrid, details, menu y command, que permiten manejar grandes conjuntos de datos. 16 4

5 Nuevas Características de 5 cont. Formularios más inteligentes que nos permitirán hacer cosas como validación de llenado mediante el uso de atributos requeridos, a través de los nuevos tipos , number, url, datetime, etc. APIs que permiten Arrastrar y Soltar objetos como imágenes, trabajar Off-Line, utilizar Geoposicionamiento, Almacenamiento persistente con base de datos local, Websockets y más. 17 Nuevas Características de 5 cont. Con un nuevo conjunto de etiquetas estructurales, 5 actualiza la forma en que los documentos están estructurados. Estas nuevas etiquetas estructurales se enfocan en dividir un documento en partes lógicas, cuyo nombre de etiqueta es descriptivo del tipo de contenido que está destinado a tener Cabecera <HEAD> Cabecera: La cabecera de un documento esta delimitada por las etiquetas <HEAD> Elementos </HEAD>. Los elementos que pueden encontrarse dentro de ella son: TITLE: Es el más importante y usado de los componentes. Sintaxis: <TITLE> Titulo del Documento </TITLE> No puede contener ningún otro elemento ni indicación de formato (atributos) META: Se usa para identificar propiedades de un documento, Cada META especifica un par propiedad/valor Sintaxis: <META name = propiedad content = valor > LINK: Establece enlaces entre recursos. BASE: permite especificar a los autores la URI STYLE: Se vera con las CSS SCRIPT: Para lenguaje de Script Etiqueta HEAD <> <HEAD> <TITLE> Titulo de Sitio Web </TITLE> «OBLIGATORIA» <META> «Palabras claves del sitio- NECESARIA» <LINK> «Permite utilizar recursos externos- OPCIONAL» <BASE> «Relacionado a los enlaces- OPCIONAL» <SCRIPT> «Permite incorporar un lenguaje script- OPCIONAL» </HEAD> <BODY> </BODY> </> 20 5

6 Etiqueta Cuerpo- BODY El cuerpo de un documento esta delimitado por la etiqueta <BODY>, contiene la información que se desea publicar utilizando los diferentes recursos de. <BODY> Contenido de la página visible al usuario </BODY> 21 5 Cuerpo <BODY> <BODY> <HEADER> Titulo del sitio y barra de navegación </HEADER> <ARTICLE> Contenido principal de la página </ARTICLE> <ASIDE> Contenido de la barra lateral </ASIDE> <FOOTER> Datos del pie de la página </FOOTER> </BODY> Estructura de Pagina 5.0 <body> <header>  Titulo del Sitio <nav> <! --Aqui se arma el menu de opciones--> <ul> <li><a href="/">item para nevegar</a></li> </ul> </nav> </header> <! Final del encabezado de la página--> <article id="main"> <! -- Contenido Principal de la página--> <h1>titulo del Articulo</h1> <p>contenido del Artículo.</p> <h2> sub-titulo del artículo</h2> <p>mas contenido.</p> <h3>sub-sub-heading del articulo</h3> <p>mas contenido </p> </article> <! Fin del contenido principal --> <aside> <! barra lateral a derecha--> <h2>encabezado de Barra lateral </h2> <h3>sub-encabezado de la barra</h3> </aside> <footer> <! En esta sección va el pie de página como contacto, fecha de actualización, empresa--> <h2>encabezado del Footer </h2> <p>contenido del Footer </p> 23 </footer> </body> Formato de Texto Texto en : No es mucho el formato que se le puede dar a un texto en. Con el texto se puede: Delimitar los párrafos con el elemento PARRAFO: P Su sintaxis es: <P [atributos]> Texto del Párrafo [</P>] Su presentación visual depende de los navegadores. Acomodan el texto al tamaño de la ventana Sucesiones de espacios y tab s como de enters no se visualizan en el navegador. Si se quieren agregar espacios se debe agregar la entidad &nbsp para formatear el texto. Para introducir una nueva línea dentro de un párrafo, se usa el elemento de línea <BR> 6

7 Formato de Texto Atributos de P: align = left justify center rigth <P ALIGN=JUSTIFY> TEXTO DEL PARRAFO </P> Dar formato a las líneas de un párrafo: Negrita: <b> </b> o <Strong> </Strong> Cursiva: <i> </i> Subrayado: <u> </u> Para modificar el color, tamaño, fuente, espesor de texto es necesario utilizar CSS. Formato de Texto Encabezados: Se utilizan para estructurar el cuerpo de un documento dividiéndolo en secciones Existen 6 niveles de cabeceras H1 a H6. Texto preformateado. Algunas veces es necesario que el espacio en blanco se muestre en algunos textos. Esto se logra con el elemento preformateado. Su sintaxis es <PRE>... </PRE> Ejemplo 7