Todo Soluciones

Tecnología & Gadgets: Últimas Noticias, Revistas, Análisis y Comparativas de los Mejores Dispositivos

HTMLWeb

HTML Básico

Arkkan

Iniciaremos el blog con el primer artículo sobre, HTML ya que a mas de uno le ha picado la curiosidad por hacer su propia página web.

Seguramente pensaras que para hacer una web hacen falta programas de programación muy complicados y realmente no es así, con un simple editor de texto como es el blog de notas se puede hacer una web.

Estructura básica de un documento HTML: <HTML> <HEAD> <BODY>

  • <html>: Define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.
  • <head>: Define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana de su navegador, Dentro de la cabecera <head> podemos encontrar:
    • <title>: Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.
    • <link>: Para vincular el sitio a hojas de estilo o íconos Por ejemplo: <link rel=»stylesheet» href=»/style.css» href=»/style.css» type=»text/css»>
    • <style>: Para colocar el estilo interno de la página, ya sea usando CSS, JavaScript o otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>
  • <body>: Define el contenido principal o cuerpo del documento, esta es la parte del documento html que se muestra en el navegador, dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Encabezados de títulos del documento con diferente relevancia.
    • <table>: Define una tabla.
      • <tr>: Fila de una tabla.
        • <td>: Celda de datos de una tabla.
    • <a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href=»https://www.todosoluciones.es»>Todo Soluciones</a> se presenta como Todo Soluciones.
    • <div>: Área de la página.
    • <img>: Imagen, requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src=»./imagenes/foto.jpg» />
    • <font>: Con esta etiqueta, podemos seleccionar, la tipografía, el color o el tamaño.
    • <li><ol><ul>: Etiquetas para listas.
    • <b>: Texto en negrita (Etiqueta descartada. Se recomienda usar la etiqueta <strong>)
    • <i>: Texto en cursiva.
    • <u>: Texto Subrayado.
    • <marquee=»texto»> o <marquee>Texto</marquee>: Texto en movimiento.

Para concluir aquí tenemos un pequeño ejemplo, solo tienes que abrir el blog de notas, pegarlo y guardarlo con extension html:

Codigo:

<html>
   <head>
      <title>Todo Soluciones</title>
      <link rel="stylesheet" href="/style.css" href="/style.css" type="text/css">
   </head>
   <body>
      <h1>Titulo</h1>
      <table>
         <tr>
            <td>Uno</td>
            <td>Dos</td>
         </tr>
         <tr>
            <td>Tres</td>
            <td>Cuatro</td>
         </tr>
      </table>
      <div>
         <a href="https://todosoluciones.es">Todo Soluciones</a>
      </div>
      <img src="https://todosoluciones.es/TodoSoluciones.jpg" />  

      <ul>
         <li>Uno</li>
         <li>Dos</li>
         <li>Tres</li>
      </ul>
      <marquee>Texto en movimiento</marquee>
   </body>
</html>