Curso HTML: Crea tu primera página web



Este es el primer articulo de una serie en la que te enseñare todo lo básico para que puedas crear y modificar páginas web usando HTML,  todo esto de forma sencilla y sin perder tu tiempo.

Indice del curso

  1. Crea tu primera página web
  2. Cómo agregar un favicon (icono)
  3. Usar tablas y comentarios
  4. Uso de títulos y párrafos
  5. Trabajar con Listas
  6. Mostrar imágenes y rutas
  7. Enlaces o links a otras páginas web
  8. Formularios en páginas web
  9. Etiqueta textarea para ingresar textos grandes
  10. Mostrar listas desplegables
  11. Subir imágenes, números, emails, etc

Estructura básica de un documento HTML

HTML es un lenguaje en el que se define el contenido de una página web, esto se hace mediante el uso de etiquetas (o elementos) y atributos para modificar los elementos. La estructura básica puede cambiar, pero para que sea considerada correcta, debería de tener al menos estos elementos y atributos:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Titulo</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- Contenido visible -->
  </body>
</html>

En la primera línea se define que es un documento HTML, la segunda línea define el inicio del documento y el idioma del contenido, por ejemplo, español, esto se usa para ayudar a los buscadores como Google a identificar el idioma de tu sitio y ofrecer en los resultados de búsquedas sólo sitios en el idioma solicitado.

La tercera línea define el inicio de la cabecera <head> y cierra en la linea 8 con la etiqueta </head> , la cabecera sirve para incluir y definir información importante para que el navegador pueda mostrar correctamente la página web, por ejemplo, en la primera línea de cabecera se indica el set de caracteres como UTF-8, esto permite que se muestren correctamente los caracteres extendidos como la letra ñ y las tildes.

La segunda línea de la cabecera define el título de la página, y se muestra en la pestaña de los navegadores. Las siguientes dos líneas indican que se cargue una hoja de estilos y un archivo de JavaScript respectivamente. Las hojas de estilo servirán para darle el formato a la página web y los archivos de JavaScript para agregar logica de programacion por ejemplo validar un dato ingresado.

Finalmente dentro de las etiquetas <body> vamos a incluir todo el contenido visible de la página web, como textos, imágenes, etc.

Elementos

Los elementos son la unidad básica de una página web, un elementos puede contener otros elementos dentro de sí y también puede contener atributos.

Cuando vimos la estructura de un documento HTML, vimos algunos elementos, por ejemplo <head>, <body>, etc. Los elementos deben abrirse y cerrarse apropiadamente, existen dos formas de cerrarlos

La primera es repitiendo la misma etiqueta pero con una barra inclinada al inicio, por ejemplo:

 

Esta forma se usa cuando las etiquetas o elementos tienen contenido, si no las cerramos apropiadamente, el documento puede mostrarse de forma incorrecta.

La segunda forma de cerrarlos es incluyendo la barra inclinada al final de la etiqueta:


Esta forma se usa en los elementos vacíos (no tienen contenido). El no cerrarlas puede no afectar la presentación o no generar un error, pero si queremos producir un documento apegado a las normas, siempre debemos cerrar las etiquetas vacías.

Atributos

Los atributos se usan para definir información adicional en los elementos y siempre deben de incluirse en la etiqueta de apertura.

Cuando vimos la estructura básica, en el elemento <html> definimos el atributo “lang” para decir en qué idioma está el contenido.

Los atributos se definen en la forma nombre_atributo=”valor”, es recomendable incluir el valor siempre entre comillas, no importa si son comillas dobles o simples. También es recomendable escribir el nombre del atributo en letras minúsculas. Omitir estas recomendaciones puede no tener alguna consecuencia en la forma en que se visualiza la página web, pero de nuevo, si queremos un documento apegado a los estándares, si debemos seguirlas.

Estos son algunos ejemplos de atributos más usados:

altDefine un texto alternativo cuando una imagen no puede ser mostrada
disabledHace que un elemento de entrada, por ejemplo un botón, este deshabilitado.
hrefDefine la dirección web que se mostrará cuando alguien haga clic sobre un enlace
idDefine un código o nombre único para un elemento (no da error si lo repetimos, pero la idea es asignar un nombre único)
srcEspecifica la dirección o ruta de una imagen
styleSe usa para definir estilos CSS que afecten únicamente a la etiqueta que lo contiene. (no es recomendable)
titleDefine un texto tipo “tool tip” para un elemento.
Versión en video

Deja una respuesta

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