Ejemplos de html pagina web

Inicio » Ejemplos de html pagina web

Diseño responsivo html

Este tutorial es la primera parte de una serie de tutoriales de diseño web que estoy preparando. Está diseñado para proporcionar una base introductoria a la codificación para la web. Este tutorial comienza con los fundamentos del trabajo con HTML y cubre los siguientes temas:

Visita un sitio web (preferiblemente usando Chrome), haz clic con el botón derecho del ratón y selecciona ver la fuente. Verás el código que utiliza el navegador para representar la página web. El código puede parecer un poco abrumador si estás empezando, pero el punto principal es que este código es un documento HTML y tu navegador está traduciendo este código en la página web que ves.

Tendrá más sentido cuando empiece a trabajar con el código, pero por ahora digamos que HTML es el lenguaje del contenido y la estructura. El contenido, por ejemplo, incluye cosas como texto, imágenes y enlaces. La estructura, por ejemplo, consiste en saber si un determinado texto es un título o un párrafo, o si pertenece al encabezado o al pie del documento, etc.

Me parece útil concentrarse primero en el contenido y la estructura, teniendo en cuenta que así es como los motores de búsqueda o “bots” leen e interpretan el contenido. Los bots utilizan la estructura del contenido para ayudar a entenderlo, como por ejemplo si algo se define como encabezado o lista de elementos. Para la optimización de los motores de búsqueda, por ejemplo, los bots no están necesariamente interesados en el estilo visual del contenido, por ejemplo, si es morado o verde, etc. Lo que más les interesa es la sustancia real del contenido, como las palabras reales del texto, los enlaces y las imágenes, etc.

Sitio html

En este artículo del Plan de Estudios de Estándares Web hablaremos sobre la navegación y los menús de los sitios web. You’ll learn about different types of menus and how to create them in HTML. We’ll also touch on the subject of menu usability and accessibility. We won’t go into styling menus yet, but this article will lay the foundations. There are code examples to download to go along with this article — we will refer to these throughout the tutorial.

HTML5 defines a <nav> menu, which is to be used to contain the primary navigation of a web site, be it a list of links or a form element such as a search box. This is a good idea, as previous to this we would contain the navigation block inside something like <div id=”navigation”>. Yes, you can identify this for styling purposes pretty well, but it is a <div>, and therefore semantically anonymous. <nav> nos da una forma consistente de definir sin ambigüedad cuál es la navegación principal, lo que es bueno para cosas como la optimización de los motores de búsqueda, y para los usuarios con discapacidad visual que utilizan un lector de pantalla, que podrán encontrar la navegación mucho más fácilmente si está claramente señalizada (esto depende de que el lector de pantalla que están utilizando soporte el elemento <nav>, por lo que podría ser un poco lejos todavía). Así, un bloque de navegación tendría un aspecto similar al siguiente:

Descarga de archivos html

</html>Luego guarde su documento.Este código define esencialmente el documento como HTML.Ahora vea las dos ‘etiquetas’ – html y /html. Son etiquetas de apertura y cierre y todo lo que hay entre ellas se define como ‘perteneciente’ al elemento html.Enhorabuena, has creado tu primer documento HTML. Sin embargo, todavía no tiene nada en él… Ahora vaya a W3Schools – HTML. Seleccione y copie el código del documento HTML de ejemplo y péguelo sobre el código que acaba de escribir. Este es un buen punto de partida para un documento básico de página web. Debería ser algo parecido a esto:<! DOCTYPE html>

</html>Ahora guarda tu documento, visita el documento en tu ordenador y ábrelo en un navegador web (por ejemplo, Chrome, Firefox, Explorer, etc.). Deberías ver el título del documento en la pestaña del navegador y los demás elementos visibles en el “cuerpo” de la página web.Sobre todo cuando se empieza, recomiendo utilizar la tecla de tabulación del teclado para sangrar y dar formato al código de la siguiente manera. De esta forma, es más fácil ver la estructura de las etiquetas de apertura y cierre:<! DOCTYPE html>

Texto de ejemplo html

En este artículo del Plan de Estudios de Estándares Web hablaremos sobre la navegación y los menús de los sitios web. Aprenderás sobre los diferentes tipos de menús y cómo crearlos en HTML. También tocaremos el tema de la usabilidad y accesibilidad de los menús. Todavía no entraremos en la creación de menús, pero este artículo sentará las bases. Hay ejemplos de código que se pueden descargar para acompañar este artículo – nos referiremos a ellos a lo largo del tutorial.

HTML5 defines a <nav> menu, which is to be used to contain the primary navigation of a web site, be it a list of links or a form element such as a search box. This is a good idea, as previous to this we would contain the navigation block inside something like <div id=”navigation”>. Sí, se puede identificar esto para fines de estilo bastante bien, pero es un <div>, y por lo tanto semánticamente anónimo. <nav> nos da una forma consistente de definir sin ambigüedad cuál es la navegación principal, lo que es bueno para cosas como la optimización de los motores de búsqueda, y para los usuarios con discapacidad visual que utilizan un lector de pantalla, que podrán encontrar la navegación mucho más fácilmente si está claramente señalizada (esto depende de que el lector de pantalla que están utilizando soporte el elemento <nav>, por lo que podría ser un poco lejos todavía). Así, un bloque de navegación tendría un aspecto similar al siguiente:

Ir arriba