Configuracion basica en la estructura HTML
La estructura básica de nuestro html requiere de ciertas etiquetas, y estas etiquetas son las indicaciones que le otorgamos al navegador para una correcta visualización de nuestra web:
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo</title>
<link rel=stylesheet type="text/css" href="estilo.css">
<script src="script.js" language="javascript" type="text/javascript"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta="robots" content="index, follow">
</head>
<body>
</body>
</html>
IMPORTANTE: Todas las etiquetas en el html se abren con un "<" y se cierran con un "</"; por ejemplo, abrimos con "<body>" y cerramos con "</body>" ... En medio de las etiquetas, van los códigos que necesitamos, obviamente los colocamos después de abrir y antes de cerrar dicha etiqueta.
Es importante que sepas que dentro de las etiquetas "body" es donde lleva el código que va a ser VISIBLE en tu página web, todo lo demás sólo sin indicadores de tí hacia el navegador, pero tal como está en este ejemplo NO SE VERÁ NADA pues no tiene nada dentro de dicha etiqueta, lo que se verá, repito, es lo que tú pongas entre las etiquetas de "body".
Bueno, pues eso sería lo básico que lleva la estructura html, puedes copiarlo y pegarlo para armar tu primera estructura de página web... A continuación viene la teoría, puedes leerla si gustas aprender sobre las etiquetas, o de plano ignora lo que sigue y sólo pega el código en tu editor de código.
---
Hay otras versiones con código más detallado y lleno de indicaciones, pero con este codigo resumido y directo, te funcionará perfecto.
El "<!Doctype html>" le indica al navegador que el tipo de lenguaje que va a leer es HTML, así como tenemos la etiqueta "<?php ?>" y esta le indica que el lenguaje a leer es PHP, por mencionar un ejemplo.
La etiqueta <html> indica que ahí comienza oficialmente nuestro codigo html.
<head> le indica al navegador los requisitos que le pedimos para nuestra web, es aquí donde van nuestros enlaces hacia los códigos CSS, JS, etc...
La etiqueta <title> indica el Título que aparecera en el encabezado del navegador.
En <link> colocamos la ubicacion de nuestro archivo CSS así como aparece arriba (lo puedes copiar facilmente) , le indicamos la ruta de nuestro archivo css en las comillas de href="" ... NOTA: Si quieres puedes omitir este indicador y colocar todo el codigo css dentro de la etiqueta <style></style> que debe ir dentro de <head>, claro está.
El <script> nos indica que estamos pidiendole al navegador incluir nuestro código javascript (sólo en caso de que lo necesitemos), debemos indicarle la ruta entre las comillas de src=""
El meta llamado "viewport" nos indicará el tamaño de visualización de nuestra página, la escala. Por ejemplo, nos ha tocado ver como una página que vemos en el celular se ve muy grande y tenemos que poner zoom, ¿no? pues a eso voy, que esa funcion le indica al navegador la escala en la que se verá la web, en este caso 1.0 ...
El meta robots, le indica a los buscadores si queremos que indexen (agreguen) nuestra web a su base de datos, pero aqui tenemos dos indicaciones, index y follow. Index le dice al buscador que lo agregue al buscador y Follow que tambien agregue las páginas (links) dentro de dicha página.. Si no queremos que lo indexe o lo siga, le decimos "noindex" o "nofollow" (se pueden combinar "index nofollow" o "noindex nofollow").
<body> es la etiqueta más indispensable para "ver nuestra web" ya que cualquier cosa que pongamos aquí, se verá en nuestra página web, por ejemplo si ponemos todo el código anterior y le agregamos algo así como:
<body>
bienvenidos
</body>
...en nuestra web se verá unicamente el texto "bienvenidos"... Es aquí donde colocarás todo el contenido a mostrar en tu web.
Saludos!
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo</title>
<link rel=stylesheet type="text/css" href="estilo.css">
<script src="script.js" language="javascript" type="text/javascript"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta="robots" content="index, follow">
</head>
<body>
</body>
</html>
IMPORTANTE: Todas las etiquetas en el html se abren con un "<" y se cierran con un "</"; por ejemplo, abrimos con "<body>" y cerramos con "</body>" ... En medio de las etiquetas, van los códigos que necesitamos, obviamente los colocamos después de abrir y antes de cerrar dicha etiqueta.
Es importante que sepas que dentro de las etiquetas "body" es donde lleva el código que va a ser VISIBLE en tu página web, todo lo demás sólo sin indicadores de tí hacia el navegador, pero tal como está en este ejemplo NO SE VERÁ NADA pues no tiene nada dentro de dicha etiqueta, lo que se verá, repito, es lo que tú pongas entre las etiquetas de "body".
Bueno, pues eso sería lo básico que lleva la estructura html, puedes copiarlo y pegarlo para armar tu primera estructura de página web... A continuación viene la teoría, puedes leerla si gustas aprender sobre las etiquetas, o de plano ignora lo que sigue y sólo pega el código en tu editor de código.
---
Hay otras versiones con código más detallado y lleno de indicaciones, pero con este codigo resumido y directo, te funcionará perfecto.
El "<!Doctype html>" le indica al navegador que el tipo de lenguaje que va a leer es HTML, así como tenemos la etiqueta "<?php ?>" y esta le indica que el lenguaje a leer es PHP, por mencionar un ejemplo.
La etiqueta <html> indica que ahí comienza oficialmente nuestro codigo html.
<head> le indica al navegador los requisitos que le pedimos para nuestra web, es aquí donde van nuestros enlaces hacia los códigos CSS, JS, etc...
La etiqueta <title> indica el Título que aparecera en el encabezado del navegador.
En <link> colocamos la ubicacion de nuestro archivo CSS así como aparece arriba (lo puedes copiar facilmente) , le indicamos la ruta de nuestro archivo css en las comillas de href="" ... NOTA: Si quieres puedes omitir este indicador y colocar todo el codigo css dentro de la etiqueta <style></style> que debe ir dentro de <head>, claro está.
El <script> nos indica que estamos pidiendole al navegador incluir nuestro código javascript (sólo en caso de que lo necesitemos), debemos indicarle la ruta entre las comillas de src=""
El meta llamado "viewport" nos indicará el tamaño de visualización de nuestra página, la escala. Por ejemplo, nos ha tocado ver como una página que vemos en el celular se ve muy grande y tenemos que poner zoom, ¿no? pues a eso voy, que esa funcion le indica al navegador la escala en la que se verá la web, en este caso 1.0 ...
El meta robots, le indica a los buscadores si queremos que indexen (agreguen) nuestra web a su base de datos, pero aqui tenemos dos indicaciones, index y follow. Index le dice al buscador que lo agregue al buscador y Follow que tambien agregue las páginas (links) dentro de dicha página.. Si no queremos que lo indexe o lo siga, le decimos "noindex" o "nofollow" (se pueden combinar "index nofollow" o "noindex nofollow").
<body> es la etiqueta más indispensable para "ver nuestra web" ya que cualquier cosa que pongamos aquí, se verá en nuestra página web, por ejemplo si ponemos todo el código anterior y le agregamos algo así como:
<body>
bienvenidos
</body>
...en nuestra web se verá unicamente el texto "bienvenidos"... Es aquí donde colocarás todo el contenido a mostrar en tu web.
Saludos!
Comentarios
Publicar un comentario