Ir al contenido principal

馃寪 Introducci贸n al Desarrollo Web: Estructura B谩sica en HTML

Bien, el d铆a de hoy quiero comenzar dejando en claro lo siguiente, en html existe una gran variedad de etiquetas para diversas cosas, no las conozco todas o al menos no las recuerdo al momento, durante las pr贸ximas entradas introducir茅 poco a poco diferentes etiquetas seg煤n sean requeridas, sin embargo, si quieres conocer mas te recomiendo consultar en San Google por mas informaci贸n, yo te recomiendo la pagina "https://www.w3schools.com", yo solo te proporcionare el fuego que necesitas para encender la p贸lvora que har谩 explotar tu mente.

En fin, hoy definiremos como escribir una sencilla pagina web. Para ello es necesario conocer la estructura de un documento en HTML. Hoy emplearemos las siguientes etiquetas b谩sicas:

Etiqueta Uso
<!DOCTYPE>
Etiqueta utilizada para notificar al navegador el tipo de documento que vamos a crear ya sea XHTML o HTML as铆 como su versi贸n.
<html>
Etiqueta usada para indicar al navegado el inicio y final de un documento.
<head>
Tambi茅n conocida como cabecera, dentro de las etiquetas head se colocan todos los datos importantes de la pagina como: el titulo de la pesta帽a, los estilos de dise帽o (CSS), c贸digo javascript (JS), t铆tulo del documento o p谩gina, informaci贸n para el posicionamiento en los buscadores etc.
<body>
Como su nombre lo dice, indica que desde la apertura de esta etiqueta hasta su etiqueta de cierre se definir谩 el cuerpo de la pagina, es decir donde escribir textos, im谩genes, tablas etc, es decir todo el contendi贸 que el usuario vera.
Nota: Para conocer informaci贸n 煤til de estas etiquetas, as铆 como sus atributos y dem谩s consulta: https://www.w3schools.com

Ademas veremos la introducci贸n a etiquetas como:
  • <p>: Etiqueta que nos permite introducir texto
  • <meta>: Etiqueta que nos permite agregar informaci贸n que sera 煤til para los buscadores y para el navegador, en este caso haremos uso de ella para agregar el juego de caracteres que usaremos (nota: el juego de caracteres es el conjunto de s铆mbolos que pueden ser mostrados en pantalla, existen muchos, ya habr谩s escuchado hablar del juego de caracteres ASCII, UNICODE. No te preocupes si no entiendes, ya trataremos su importancia en otra entrada).
  • <title>: Nos permite colocar el t铆tulo del documento, en otras palabras el texto que aparece en la pesta帽a del navegador.
Ahora, solo una cosa que quiero mencionar, la etiqueta <!DOCTYPE> se utiliza como ya dije para definir el tipo de documento web, esta lleva varios par谩metros dependiendo de si vamos a utilizar/crear un archivo XHTML, XML, HTML o si usaremos alguna versi贸n anterior de los lenguajes ya mencionados, no os preocupes, para no enredarnos estaremos trabajando con html5, as铆 que esta etiqueta en nuestro caso deber谩 estar escrita de la siguiente manera: <!DOCTYPE html> de esta forma le indicaremos al navegador que estaremos trabajando con un documento HTML en su versi贸n 5.
Igualmente si quieres consultar mas acerca de los par谩metros que te estoy comentando te recomiendo leer este articulo de: aprende-web.net

Estructura de un archivo HTML

Cada documento html se estructura b谩sicamente de la misma forma:
Estructura Basica de un Archivo HTML

 Recomendaciones:
Es importante siempre recordar abrir y cerrar correctamente cada etiqueta para evitar problemas, pues mencionar茅, pues de no hacerlo puede generar que tu pagina web luzca extremadamente diferente, mas si aplicamos dise帽o en ella.
Tambi茅n es recomendable escribir las etiquetas con letras min煤sculas, no generara ning煤n problema escribirlas en may煤sculas pero si puede generar confusi贸n en el navegador al intentar interpretarlo en otro lenguaje web.

Veamos un ejemplo:
<!Doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Titulo de Pesta帽a</title>
  </head>

  <body>
    <p>Hola mundo</p>
    <p>Como estan todos, Bienvenidos a StudentPlace</p>
  </body>

</html>
Al guardar el c贸digo anterior y visualizarlo en pantalla podemos observar un resultado como el siguiente:



 En en fin, es todo por hoy, espero te haya gustado la entrada. En para la proxima tocaremos el tema del juego de caracteres para aclarar futuras dudas.

Comentarios

Publicar un comentario