Mi primera página web con HTML 5

Home » Blog » Mi primera página web con HTML 5

Para crear tú primera página web con HTML 5 solo se necesitan 2 cosas: 1 procesador de textos (Bloc de notas, sublimetext, etc) y conocimientos sobre el lenguaje de marcado HTML (HyperText Markup Language).

El fichero

El formato estándar de un fichero de una página web es un texto sin formato (esto hace referencia a que algunos procesadores de textos permiten definir el formato del fichero y esto puede afectar a una incorrecta interpretación de caracteres, por ejemplo en el bloc de notas si le damos a guardar como, abajo podemos cambiar la codificación del fichero, si la codificación es española debemos seleccionar UTF-8 esto hará que los caracteres latinos como ñs, acentos, etc… de la web se interpreten correctamente).

Códificación de una página web

Y este documento debe tener la extensión .html, por ejemplo: mi-primera-web.html. En cuanto al nombre del fichero debemos tener en cuenta un detalle. Cuando escribimos una URL por ejemplo: imacreste.com, que página se carga?. La página que se carga inicialmente es index.html, debe ser nuestra home.

Código fuente mínimo de una página web

<!DOCTYPE HTML>
<html lang="es-ES">
 <head>
  <meta charset="utf-8" />
  <title>Título de la web</title>
 </head>
 <body>
  <h1>Títular</h1>
  <h2>Subtitulo</h2>
  <p>párrafo</p>
 </body>
</html>

Una web se divide en los siguientes bloques:

  • Doctype: Indicamos la versión de HTML, en este caso HTML5.
  • Etiqueta html: Toda la web esta encapsula entre estas 2 etiquetas.
  • Etiqueta head: Es la cabecera de la página web, y por decirlo de alguna forma es la parte oculta, la que no se visualiza en el navegador de forma directa.
  • Etiqueta body: Es la parte que se visualizara.

Esta es la estructura de toda web. A partir de estas se pueden incorporar otras muchas, tanto en el head como en el body. Las etiquetas se componen de una apertura <html>, <body>, etc. y un cierre </html>, </body>, etc. Algunas etiquetas permiten abrirse y cerrarse en una sola línea <meta charset=»utl-8″ />. Observa que se usa / para indicar el cierre de una etiqueta.

Entre las etiquetas pueden ir otras etiquetas o texto plano. En el ejemplo vemos que entre las etiquetas h1, hay un texto, que luego se visualizara por pantalla pero por ejemplo podríamos hacer:

<h1><strong>Esto es un ejemplo de <negrita</strong></h1>

Tendríamos un texto plano pero la palabra negrita tendrá el formato negrita. No es momento de agobiarse hay muchas etiquetas y poco a poco iras aprendiendo y memorizando las más importantes.

Y las etiquetas pueden tener sus propiedades que hacen que varié su funcionamiento, por ejemplo en <html lang=»es-ES»> vemos la propiedad lang, en este caso estamos indicando que la página esta pensada para el español.

Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023