UNIDAD 1 GENERALIDADES HTML

Transcripción

1 UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web. Existen diferentes versiones del lenguaje HTML, como la versión HTML 4.01, que es la versión estándar vigente y de HTML 5.0, la evolución del lenguaje, que hace parte de los complementos de en la mayoría de los navegadores modernos. El lenguaje HTML se complementa con otro conjunto de normas denominadas CSS (Cascade Style Sheet) u hojas de estilo. El HTML se encarga de definir la estructura y la organización que tendrá la información de la página web, CSS proporciona un conjunto de reglas orientadas a definir su formato y apariencia. Con las hojas de estilo se puede definir aspectos como el espacio entre líneas, el borde que rodea a un párrafo, los colores del texto o el tipo de letra. A todo este conjunto hay que añadir también algunos otros lenguajes que, unidos a los anteriores, permiten hacer cosas aún más complejas, como añadir interactividad a las páginas y convertir las páginas web en verdaderas aplicaciones, utilizando lenguajes como Javascript o PHP, entre otros. QUÉ SE NECESITA PARA UTILIZAR HTML5 Los archivos, que se diseñan al crear un espacio web, son archivos de texto sencillos, que sólo hace falta un programa de edición de textos planos y un navegador web para observar la apariencia que va tomando la página web. Entre estos elementos tenemos: a. Editor de texto: Para cualquier edición básica de una página web se necesita de una aplicación, que permita insertar las etiquetas del código en el editor. b. Navegador: Se requiere de un navegador web para ver las páginas que se está creando. Todos los computadores cuentan con este tipo de aplicaciones, ya sea Internet Explorer, Firefox o Chrome, entre otros. c. Editor de imágenes: Internet y sus páginas, son muy visuales. En ocasiones se requiere editar alguna imagen o crear algún título para la página, para ello se necesitará necesitaremos un programa que permita realizar este tipo de edición. d. Aplicación de FTP: Cuando la web esté terminada, se necesita transmitirla a un servidor de FTP para que esté visible en todo Internet. Para ello se debe emplear una aplicación de FTP, y en ocasiones se puede comprar un dominio para su publicación en internet. DEFINICIÓN DE HTML5 HTML5 es una combinación de nuevas etiquetas del lenguaje HTML (HyperText Markup Language - lenguaje de marcas de hipertexto), propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo.

2 El HTML5 contiene nuevos elementos de markup o sintaxis, utilizados para crear páginas web junto con las etiquetas utilizadas a día de hoy. Muchos de estos nuevos elementos ya son conocidos para los diseñadores que trabajan con las etiquetas HTML tradicionales, como por ejemplo: <p> (etiqueta de párrafo) <ul> (etiqueta de listas ordenadas) <div> (etiqueta para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos) entre otras. Todas las nuevas etiquetas proporcionan a los desarrolladores y diseñadores, herramientas más avanzadas y que se traducen en mejores experiencias para el usuario final. ETIQUETAS BÁSICAS DE LA ESTRUCTURA DEL HTML5 ETIQUETAS HTML Una etiqueta HTML es un comando encerrado por un signo de menor y otro de mayor; por ejemplo: <strong> Esta etiqueta indica que el texto que aparece a continuación se debe destacar sobre el resto; normalmente se muestra en negrita. En muchos casos se hace necesario una segunda etiqueta que delimite el final. Así, para que el texto deje de estar destacado y continúe normalmente, empleamos la misma etiqueta con una diagonal: </strong> Entonces las etiquetas se deben colocar de la siguiente manera: <Etiqueta de apertura> Instrucciones que serán afectadas por la etiqueta </Etiqueta de cierre> Algunos elementos requieren esa apertura y cierre, pero en otros casos sólo se necesita la etiqueta apertura, ya que se aplica un elemento puntual o con un contenido vacío. Por ejemplo: de <hr> Con esta etiqueta en el documento aparecerá una línea o separador de contenidos. En este caso, no existe la etiqueta </hr>, por tal motivo no se utiliza la etiqueta de cierre. Se recomienda que todas las etiquetas HTML se escriban en minúsculas. Anuque, los navegadores son capaces de interpretar las etiquetas en mayúsculas, las normas de la W3C (reglas internacionales para la accesibilidad Web) especifican que todas las etiquetas se deben escribir en minúsculas.

3 Otra característica importante de las etiquetas es que son anidarles, por lo que podemos definir un párrafo (mediante las etiquetas <p> y </p>) y en su interior incluir una lista de elementos, imágenes, texto destacado, etc. empleando diferentes etiquetas. Por ejemplo: <p> Se hace apertura del párrafo <img src= imagen.jpg > se inserta una imagen que hace parte del párrafo, no requiere etiqueta de cierre </p> Se cierra el párrafo Muchas etiquetas HTML necesitan contar con parámetros o atributos para funcionar correctamente. Éstos son modificadores que se introducen entre los signos de apertura y cierre para definir algún matiz concreto del elemento HTML. Por ejemplo, la etiqueta <img> se emplea para insertar una imagen en la página web, pero por si sola no funciona correctamente. Necesita que se inserte el parámetro con la ubicación, tamaño, alienación, entre otras, para aplicarle a la imagen y se muestre correctamente. Por ejemplo: <img src= imagen.jpg > En el ejemplo la etiqueta principal es la <img>, la cual requiere del parámetro src= nombre imagen, el cual ubica la imagen que se está nombrando. Es importante tener en cuenta que parámetros se identifican por un nombre, seguido de un signo de igual y entre comillas, el valor que le desea asignar. ESTRUCTURA BÁSICA DEL LENGUAJE HTML Las páginas web mantienen una estructura muy sencilla que se debe respetar, para que los navegadores sean capaces de presentarla. No se puede comenzar una página con una etiqueta de párrafo, por ejemplo, sino que debemos indicar qué tipo de página estamos generando, qué información adicional llevará y dónde comienza el contenido que debe ser mostrado. De este modo, cualquier página web incluirá al menos las siguientes etiquetas: 1. <html> y </html> Colocadas al principio y fin del documento indican dónde comienza y finaliza la página web. 2. <head> y </head> Definen un espacio en el que se incluyen contenidos que no se van a mostrar directamente en el navegador, sino que sirven para describir determinados aspectos del documento, como su título, autor, los estilos que emplearemos, pequeñas funciones que se deben realizar, etc. 3. <title> y </title> Permite definir el título de la página, el cual aparece en la barra de título del navegador o pestaña que se tenga abierta. 4. <body> y </body> en su interior se incluye la información que se mostrará en el navegador. Es el contenido real de la página, estructurado mediante las diferentes etiquetas. Las cuales se colocan de la siguiente manera: <html> <head> <title>mi primera página</title> </head>

4 <body> Contenido de la página </body> </html> ESTRUCTURA BÁSICA DEL LENGUAJE HTML5 Junto a las etiquetas anteriores, que hacen parte del HTML básico,se pueden insertan otras etiquetas que hacen parte del lenguaje HTML5, estas son: <!DOCTYPE> indica qué tipo de documento se está generando y a qué normas se ajusta. Se debe escribir en mayúscula fija. Se acompaña del texto html para indicar el tipo de documento. No tiene etiqueta de cierre Además, se deben utilizar las etiquetas semánticas, que permiten identificar el contenido de cada apartado que forma la página. Las etiquetas semánticas más importantes son: <Header> y </Header>: Es el equivalente a la cabecera de la página web. Contiene el título o nombre de la empresa/titular de la página, logo e información relacionada. <Nav>y </Nav>: Se utiliza para la barra de navegación, es decir los textos o botones e los enlaces externos o internos de la página <Section> y </Section>: Esta área se agrupan los diferentes temas o elementos que forman el contenido de la página. <Article> y </Article>: Es una pieza independiente de contenido, una <section> puede tener varios articles <Aside> y > </Aside>: Define un bloque de contenido relacionado con el contenido principal, pero que no es esencial para la compresión del mismo. <Footer> y </Footer>: Indica el pie de página de la página. <!DOCTYPE html> <html> <head> <title>mi primera página</title> </head> <body> <header> Cabecera de la página </header> <nav> Botonera de la página - Menú </nav> </section> <article> Contenido de la página

5 </article> </section> <footer> </footer> </body> </html> Gráficamente se observaría de la siguiente manera: