Recomendados
Más contenido relacionado
Similar a Estructura basica de una pagina web en html
Similar a Estructura basica de una pagina web en html (20)
Último
Último (8)
Estructura basica de una pagina web en html
- 1. ESTRUCTURA DE UNA PAGINA EN HTML Pedro José Porras Gutiérrez. Abril 2018. Colegio Técnico Bachiller Simón Bolívar Arauca Informática
- 2. ii Copyright © 2015 por Cristian Rojas &” Pedro José Porras Gutiérrez. Todos los derechos reservados.
- 3. iiiDedicatoria Dedico este trabajo para todos los usuarios interesados en saber la estructura básica de una página web
- 4. ivAgradecimientos Gracias por escogernos no olvide compartir con tus colegas y compañeros.
- 5. vAbstract La estructura básica está en su lugar; simplemente necesita cambiar el título y añadir algo de texto. Lo primero que tenemos que saber es que en toda página web existen dos partes claramente diferenciadas: la cabecera, o head, y el cuerpo, o body.
- 6. viTabla de Contenidos Contenido Estructura básica de una página web .............................................................................................. 1 Sección 1.01 <html> y </html>............................................................................................ 1 Sección 1.02 <head> y </head> ........................................................................................... 1 Sección 1.03 <body> y </body> .......................................................................................... 1 Sección 1.04 <!DOCTYPE> y <?xml>................................................................................ 1 2. Probando la página web....................................................................................................... 2 Lista de referencias ......................................................................................................................... 6 Apéndice ........................................................................................Error! Bookmark not defined. Vita.................................................................................................Error! Bookmark not defined.
- 7. viiLista de figuras imagen 1..estructura HTML _____________________________________________________________________________ 2 imagen 2..Aspectos basicos _____________________________________________________________________________ 3 imagen 3..Ejemplo de HTML ____________________________________________________________________________ 4
- 8. viiiLista de tablas Tabla 1 estructura basica _______________________________________________________________________________ 5
- 9. 1 Estructura básica de una página web Las páginas web mantienen una estructura muy sencilla que debemos respetar, para que los navegadores sean capaces de presentarla. No podemos comenzar nuestra 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: Sección 1.01 <html> y </html> colocadas al principio y fin del documento indican dónde comienza y finaliza la página web. Sección 1.02 <head> y </head> definen un espacio en el que incluiremos 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. Sección 1.03 <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.Junto a las tres etiquetas anteriores podemos encontrar algunas más que son importantes para que la web se interprete correctamente: Sección 1.04 <!DOCTYPE> y <?xml> Son dos etiquetas que indican qué tipo de documento estamos generando y a qué normas se ajusta. Normalmente serán siempre iguales y será nuestro editor el que se encargue de colocarlas al principio de la página, cuando sea necesario. Con todo lo anterior, una página creada desde cero y con un breve contenido quedaría de la siguiente manera: <!DOCTYPE html> <html> <head> <title>Mi primera página</title> </head>
- 10. 2 <body> <p>Mi primera página web, creada con tan sólo copiar y pegar.</p> </body> </html> Eso es todo. Ya tenemos diseñada nuestra primera página web. 2. Probando la página web Vamos a intentar probar nuestra página anterior siguiendo estos pasos: Abriremos un editor de texto sencillo, como el "Bloc de notas" en Windows o el "Editor de textos" de Linux. En su interior copiaremos y pegaremos el texto anterior o bien lo escribiremos desde cero. En este segundo caso debemos prestar mucha atención, para no escribir mal ninguna etiqueta. imagen 1..estructura HTML
- 11. 3 A continuación guardaremos la página web en alguna carpeta de nuestro ordenador. El numero del archivo debe terminar en .html o en .htm. Así, podemos emplear el nombre index.html, que es el que se suele asignar siempre a nuestra página web principal. Nota: Los nombres de los archivos de las páginas web deberían escribirse siempre en minúsculas, sin espacios y sin caracteres especiales, reduciéndolos a letras y números y, si acaso, algún guión alto o bajo. De ese modo no tendremos problemas al subir nuestras páginas a un servidor web. imagen 2..Aspectos basicos Usando nuestro explorador de archivos, accederemos a la carpeta en cuestión; debemos tener a la vista el archivo y podremos hacer doble clic sobre él para que se abra dentro de nuestro navegador.
- 12. 4 imagen 3..Ejemplo de HTML Si todo ha ido bien, veremos una página web en nuestro navegador. Aquí han sucedido muchas cosas que se pueden ir destacando: El navegador no muestra el texto que hemos escrito en el documento html; sólo el contenido que aparece dentro del <body>, del cuerpo de la página. En la pestaña podemos ver el título de la página, que coincide exactamente con lo que establecimos mediante el elemento <title> incluido en la cabecera de la página (<head>). Merece la pena fijarse en la URL de nuestra página web, es decir, la dirección única. Como nuestro archivo no está colocado en Internet o en un servidor, la dirección no comienza con http://, sino que veremos que empieza con file:// seguido de la ruta necesaria para llegar al archivo. Aquí podríamos dar por concluido nuestro trabajo. Si hemos comprendido cómo funciona el modelo de etiquetas y de prueba en el navegador, sólo nos queda comenzar a conocer diferentes etiquetas para que los documentos se muestren tal y como nosotros queremos.
- 13. 5 Con esta prueba ha quedado demostrado también que el uso de un editor más sofisticado es totalmente opcional, aunque la realidad es que se simplifica notablemente la incorporación de etiquetas, sobre todo aquellas que no se usan con frecuencia. Tabla 1 estructura basica
- 14. 6 Lista de referencias Andrews, S. Fastqc, (2010). A quality control tool for high throughput sequence data. Augen, J. (2004). Bioinformatics in the post-genomic era: Genome, transcriptome, proteome, and information-based medicine. Addison-Wesley Professional. Blankenberg, D., Kuster, G. V., Coraor, N., Ananda, G., Lazarus, R., Mangan, M., ... & Taylor, J. (2010). Galaxy: a web‐based genome analysis tool for experimentalists. Current protocols in molecular biology, 19-10. Bolger, A., & Giorgi, F. Trimmomatic: A Flexible Read Trimming Tool for Illumina NGS Data. URL http://www. usadellab. org/cms/index. php. Giardine, B., Riemer, C., Hardison, R. C., Burhans, R., Elnitski, L., Shah, P., ... & Nekrutenko, A. (2005). Galaxy: a platform for interactive large-scale genome analysis. Genome research, 15(10), 1451-1455.