Ejemplos De Páginas Web Con HTML

El HTML o hypertext markup languaje, por sus siglas en inglés, es utilizado para desarrollar y crear páginas web. Está compuesto de etiquetas que son interpretadas por el navegador.  Las etiquetas HTML son pequeños textos encerrados en corchetes angulares para escribir el código HTML.

¿Cuáles son algunas de estas etiquetas? Hipervínculos, saltos de páginas y etiquetas para imágenes por mencionar algunas. Veamos a continuación ejemplos de páginas web con HTML.

Ejemplos de páginas web con html

  • Angry Birds Space
  • Adventure World
  • Beer Camp 2012
  • Birrificio irpino
  • Cheese Please
  • Coming Soon
  • Cryptrade
  • CSS Piffle Pitch Deck
  • Digital Hands
  • Dotfusion
  • Dribbble
  • humans-machines
  • be
  • GreenCampusGuide – ProjectGreen
  • HTML5 Readiness
  • Ice Phone
  • It
  • Luhsetea
  • Rally Interactive
  • Slavery Footprints
  • Soul Wire
  • Super Lovers
  • Symbly
  • The Amazing Spiderman
  • Downtown
  • This Shell
  • Toyota Prius Projects
  • Your Plan, Your Planet
  • Especies en piezas
  • Miki Mottes
  • Génesis
  • Festival KIKK
  • Onedesigncompany
  • Marie Morelle

Las etiquetas más usadas en HTML

Etiquetas de tipo bloque HTML

Abarca todo el espacio de su contenedor, creando así el bloque con contenido coherente que incluye texto e imágenes. Siempre inician una línea nueva del documento. Dos ejemplos son: Los párrafos y los encabezados.

Función de etiquetas bloques

  • <html> </html>: Encierra toda la página.
  • <head> </head>: Información meta ( Titulos y conjunto de caracteres).
  • <body> </body>: Contenido de la página.
  • <h1> </h1>: Encabezado, (<h2> </h2>) subtítulos y así hasta llegar al más bajo que sería el <h6> </h6>.
  • <p> </p>: Párrafos.
  • <blockquote> </blockquote>: Citas en bloque.
  • <ol> </ol>: Listas enumeradas.
  • <ul> </ul>: Listas sin numeración.

Etiquetas en líneas

Se usan para dar formato o modificar el estilo del texto sin afectar la estructura del mismo. Un ejemplo de esto son las negritas o las cursivas. A diferencia de las etiquetas bloques, estas no causan salto de línea.

Función de etiquetas en línea

  • <b> </b>: Texto en negritas.
  • <i> </i>: Texto en cursiva.
  • <u> </u>: Subrayado y tachado.
  • <sub> </sub>: Subíndice.
  • <sup> </sup>: Superíndice.

Ventajas de HTML

  • Lenguaje reconocido y con variedad de recursos disponibles.
  • Se puede ejecutar en todos los navegadores.
  • Fácil de aprender y muy eficaz.
  • Totalmente gratis.
  • Se despliega con rapidez.
  • Admite archivos pequeños.

Estructura básica HTML

Para crear un documento HTML bien estructurado y correctamente distribuido puedes valerte de estas etiquetas:

  • HTML: <html> </html>, se ubica al comienzo al final del documento. Permite a los navegadores reconocerlo como un documento HTML para su lectura.
  • Encabezado: <head>, Es un código encriptado utilizado para el encabezado de la página.
  • Título de la Página: <title>, nombre del sitio con el que te identificaran los usuarios.
  • Cuerpo: <body>, Todo el contenido del sitio, incluyendo las imágenes, el texto, video o cualquier otro elemento.
  • Títulos y subtítulos: <h1> <h2>… <h6>, los títulos y subtítulos permiten establecer el orden de importancia del contenido y al mismo tiempo le aportan orden y lógica.

Editores HTML online

Notepad++

Es un editor descargable gratuito. No es exclusivamente HTML, pues también comprende otros lenguajes. Es muy reconocido, se puede leer en español y aplica color a la sintaxis del HTML.

Quackit HTML

Algunas de sus ventajas son las siguientes: Es WYSIWYG, creación limpia del código HTML, acceso online y además es gratuito.

Editor LiveGap

Este editor gratuito también te permite colorear la sintaxis del código HTML. Podrás visualizar cuál será el resultado final de la edición del código al mismo tiempo que trabajas en ello.

En conclusión, aunque hay otros recursos y herramientas para crear páginas web, el HTML es muy reconocido, ampliamente usado y con una larga trayectoria. Estos ejemplos de páginas web con HTML, te permitirán apreciar los resultados que se obtienen de su uso. A partir de ahí, decidirás si te animas con HTML o no.