Estructura de una pagina web en html ejemplo

Inicio » Estructura de una pagina web en html ejemplo

Plantilla de diseño Html

Los sitios web son un excelente recurso para los proyectos de software libre. Un sitio web ofrece una oportunidad ideal para que los usuarios conozcan mejor su proyecto. Los sitios web de proyectos pueden compartir información adicional, capturas de pantalla, código de muestra, vídeos y otros recursos que los desarrolladores y usuarios encontrarán útiles.

Ciertamente, no es necesario que construya un sitio web para su proyecto de software de código abierto. Hoy en día, puedes alojar tu proyecto de software de código abierto en lugares como GitHub o GitLab, y arreglártelas con la descripción estándar del estilo “Readme.md” de tu proyecto. Eso funciona muy bien para muchos proyectos y es una solución perfecta para los desarrolladores que quieren centrarse más en escribir el código de su proyecto que en mantener un sitio web.

Pero si quieres crear un sitio web, puedes aprovechar herramientas y constructores de sitios para que hagan el trabajo por ti. Por ejemplo, el sistema de gestión de contenidos web de código abierto TYPO3 es un excelente constructor de sitios web. También puedes utilizar otros sistemas de gestión de contenidos y constructores de sitios de código abierto para crear y gestionar un sitio web de proyecto, todo ello sin tener que aprender nada de código HTML.

Estructura de Html explicada

Las dos primeras líneas de este código declaran el tipo de documento, es decir, la versión de (X)HTML que está utilizando. Al declarar el tipo de documento al principio del archivo, se indica al navegador qué lenguaje debe interpretar. Observará que la versión aquí es XHTML 1.0 Transitional. Existe un gran debate sobre qué versión de HTML debe usarse, o si se debe usar HTML o XHTML. Este tutorial no profundiza en esas cuestiones.

Notará que la Declaración de Tipo de Documento (DTD) está contenida entre corchetes angulares. Esto indica al navegador que la declaración es un elemento de la página. El siguiente elemento es el elemento <html>, que indica dónde empieza y termina el código HTML. Generalmente, las páginas web deben comenzar y terminar con un elemento <html>. En el ejemplo anterior, el elemento <html> también tiene un atributo llamado “xmlns”. Esto significa XML Namespace. Proporciona al navegador más información sobre dónde encontrar las definiciones del tipo de documento.

Ejemplos de tablas Html

Una vez que hayas guardado tu código en tu carpeta con el nombre adecuado, cierra el cuaderno. En tu carpeta, además del cuaderno, verás el icono que representa el archivo que acabas de grabar.

Para ejecutar la página que acaba de crear, haga doble clic en el icono. Automáticamente se abrirá el navegador y se cargará la página. La ruta completa y el nombre del archivo aparecerán en la barra de direcciones.

Para ello, cierra el navegador y, dentro de la carpeta en la que estés trabajando, arrastra el icono de template.html sobre el cuaderno. De este modo, el cuaderno se abrirá y cargará el código fuente que habías escrito previamente.

Html layout generator

Now we’ve gotten to grips with the basics of HTML, what is contained inside the document <head>, and the different building blocks most commonly used to structure different items of content inside the <body>, we can look at the overall structure of the HTML content, and what distinct sections the page contains.

Before you read any further, go and have a look at some of your favourite websites. They will have vastly differing content, functionality, and look and feel, but they will all have common structural elements. There are very few sites that don’t at least loosely follow this pattern:

These sections could contain any number of different nested elements; for example, a footer could include a list full of links, a couple of paragraphs and an image. But how do we mark up these distinct sections, and group them together as single entities that can be laid out later using CSS? Let’s have a look.

You should only use these elements when there isn’t a more appropriate, semantic element to use for marking up content. Marking up paragraphs and headings with <div>s is bad practice; although it might look okay at first, the page will be inaccessible to those using screen readers (screen readers need a good structure of headings to navigate by), and it will be more bloated, harder to read, and less efficient to style with CSS. Try to cut down on the number of <div>s and <span>s used when possible: an abuse of these elements leads to what is often called “div-itis”.

Ir arriba