Como crear una página web en html

Genera tu primera página web en html con las siguientes funciones. El código html es el código mas sencillo que hay para generar páginas web y con él se puede hacer una página entera sin tener que recurrir a otros códigos. Por eso es importante tener buenas nociones de este código si queremos iniciarnos en el mundo de las páginas web.

crear pagina web html

Las páginas webs se dividen en 3 partes. El Header, el Content y el Footer.

El Header es el encabezado de la página web. Muchas webs tienen siempre el mismo encabezado, y lo que va modificando es el Content. Viene expresado por la función <header></header>. Aquí es donde se introduce temas como el título, la descripción de cada una de las páginas, etc.

El Content es donde se coloca el contenido de cada página. Viene expresado por la función <body></body>. Aquí será donde introduciremos todo el contenido de cada una de las páginas, texto, imágenes, vídeos, etc.

El Footer es el pie de página, al igual que el header, muchas veces suele ser el mismo para todas las páginas que componen la web. Viene expresado por la función <footer></footer>. Muchas veces el footer va incluido dentro del body.

Otros artículos que te pueden interesar:

Código html para tu primera web

Para hacer nuestra primera página web lo único que tenemos que hacer es abrir una hoja de texto, poner el siguiente código y guardarlo con extensión .html. Luego veremos que el icono se convierte en un icono de internet explorer. Si le damos veremos el texto introducido.

pagina-web-html-primera

1. Función <html>

<html>
Esta es mi primera pagina
</html>

Cuando abrimos un código html hemos de empezar por <html> y cuando finalizamos dicho código hemos de acabar por </html>.

Otras funciones importantes

2. Función <!DOCTYPE html>

Esta función no requiere de cierre y es el primero elemento al abrir un documento, antes incluso que <html>. Esta función lo que hace es proporcionar información al servidor.

3. Función <head>

Esta función indica el encabezado de una página y es lo primero que lee el navegador. Dentro del <head></head> se ponen datos como el título, la descripción de la página, etc.

4. Función <title>

Este elemento va a ir introducido dentro de la etiqueta <head>. Este elemento aparecerá en la pestaña de tu navegador.

Title-de-una-página-web

Lo que introducimos dentro de <title></title> va a significar un dato muy importante para que google nos posicione nuestra página. Dentro del title tenemos que introducir un texto que describa perfectamente nuestra página y será muy importante poner palabras clave para que google pueda posicionarnos correctamente.

5. Función <meta>

Dentro de la función meta existen varias funciones que añaden información sobre la página. Esta información es utilizada por google y otros buscadores.

Author. Añade el autor de la página

Robots. Indica a los buscadores si esta página debe ser indexada o no.

Description. Añade una descripción breve de la página. Es utilizada por los búscadores para añadirlo en su comentario cuando estamos buscando.

Keywords. Aquí se coloca las keywords o palabras clave de la página.

title-y-metadescription-de-google

La función META tiene mas usos, pero las cuatro aquí expuestas son imprescindibles. Cada una de las páginas de tu web debe de tener todas estas funciones para que google y otros buscadores puedan interpretar y posicionar correctamente cada una de las páginas.

Quedaria de la siguiente manera:

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="author" content="nombre" />
<meta name="description" content="Mil maneras de programar"/>
<meta name="keywords" content="programacion, php, html, java"/>
<meta name="robots" content="index" />
<title>Como crear una página web en html | Programando mi web</title>
</head>

6. Función <body>

La función <body></body> se coloca después de la función <head> y se utiliza para colocar todos los elementos que componen la página como los videos, descargas, textos, imágenes, etc.

Dentro del body existen muchas funciones que podremos ir aplicando, las mas importantes son las siguientes.

<B>Negrita</B>. El texto que va introducido dentro irá marcado en negrita. Es preferible que dentro coloquemos palabras clave. Google las tiene muy en cuenta a la hora de posicionar dichas palabras.

<h1>, <h2>, <h3>. Son etiquetas para marcar los diferentes títulos que componen la página. Tiene dos funciones. La primera es la dar formato al texto que vaya introducido dentro. Si antes hemos definido la etiqueta <h1></h1> como letra Arial, negrita, 12 de altura. Todo lo que vaya dentro de la etiqueta <h1></h1> se verá como se ha definido. Igual con las etiquetas h2 y h3. La segunda función es la de utilizar en su contenido palabras clave para que google las pueda interpretar. En la lección h1 h2 h3: imprescindibles para tu seo de esta misma web explicamos con mas detalles su utilización. Puede ayudarte mucho a posicionar tu web.

<BR>. Indica un salto de linea.

<P></P>. Indica párrafo

<img src=”imagen.jpg” width=50 height=50 border=0 alt=”descripcion de la foto”>. Esta función sirve para introducir imágenes. En la página se visualizará la imagen del archivo que hemos colocado en SRC. Las etiquetas width, height, border y alt se pueden omitir. Pero las hemos puesto porque son importantes. “width” y “height” definen el tamaño, “border” define si debe tener una linea de contorno y “alt” define la descripción de la foto. Ésta última nos servirá también para que google pueda interpretar la foto y sacarla en su buscador, en el apartado de imágenes.

<a href=”http://www.programandomiweb.com”>Aprende a programar</a>. Esta función sirve para colocar un enlace. Si le clicamos encima dicho enlace nos redirigirá al dominio que está escrito dentro. Dentro de esta función podemos poner funciones como abrir ventana nueva, para ello habremos de poner la función target=”_blank” justo después del href=”dominio”. Tiene otras funciones como modificar color, quitar la linea de abajo, hacer el texto mas grande cuando se pasa el mouse por encima, etc.

Como se puede ver, el código html es bastante sencillo de utilizar. Tiene muchas otras funciones y con cada versión se amplían sus funciones. No es necesario aprendérselas todas ya que cada vez que tengamos que utilizar una en concreto la podemos buscar.

Otros artículos que te pueden interesar:

Deja un comentario

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