Introducción al HTML

Introducción al
HTML
HTML NO ES UN LENGUAJE DE PROGRAMACIÓN, SINO UNA LENGUAJE
DESCRIPTIVO, UNA SERIE DE ETIQUETAS QUE EL NAVEGADOR INTERPRETARÁ
DE UNA U OTRA FORMA PARA MOSTRAR DISTINTOS CONTENIDOS POR
PANTALLA. POR EJEMPLO, SI CREAMOS UN DOCUMENTO DE TEXTO QUE SE
LLAME EJEMPLO.HTML Y QUE CONTENGA EL SIGUIENTE TEXTO:
Ejemplo:
<html>
<head></head>
<body>
Hola mundo! 
Esto es negrita. 
Y esto itálica. 
</body>
</html>
Generará el siguiente resultado:
Hola mundo!
Esto es negrita.
Y esto itálica.
aprender HTML consiste en conocer y saber utilizar dichas etiquetas.
Para realizar este curso no necesitamos ningún software específico,
sino que tan sólo necesitas un editor de texto, como puede ser el bloc
de notas de Windows, aunque se recomienda usar algún otro editor
más especializado que te ayude en la escritura del código, como
puede ser el Macromedia Dreamweaver.
Sublime Text 3
Estructura básica de una
página web
<html>
<head></head>
<body>
</body>
</html>
Una estructura HTML se empieza con la etiqueta <html> y acaba con
</html>. Todo lo que esté en medio será la página web. Dentro de
<html></html> se encuentran 2 partes diferenciadas.La primera
<head></head> es la cabecera de la página. Aquí irán cierta información que
no es directamente el contenido de la página. Aquí se pone el título de la
página, los metadatos, estilos, código javascript (todo esto se estudiará en
capítulos venideros). La primera que se suele estudiar es <title></title>, que
indica el título de la página (lo que el navegador pone en la parte superior
izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la
página: fotos, párrafos, formularios, etc.
 <html>
<head>
<title>Esto es el título de la
página.</title>
</head>
<body>
Hola mundo! 
Esto es negrita. 
Y esto itálica. 
</body>
</html>
Hay que observar el título en la parte superior izquierda de la página.
Además, dentro de <body></body> distinguimos varias etiquetas:
 => Indica salto de línea. En HTML un salto de línea normal
(púlsando la tecla Enter) no produce un salto de línea en el resultado. Es
necesario escribir (u otra etiqueta similar).
 => Indica comienzo y fin de negrita.
 => Itálica.
También observamos el código &iaacute; => Esto indica que queremos
poner una “i” con acento, es decir, “í”. Esto se explicará en un capítulo
posterior.
Es importante mencionar que las etiquetas se pueden escribir
indistintamente en mayúsculas o minúsculas, es decir Esto es
negrita. y Esto es negrita. produce el mismo resultado.
Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin
la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /),
si no, el navegador podría dar resultados inesperados. Excepciones a
esto son algunas etiquetas que no lo necesitan, como o <hr>.
Meta tags básicos
No podemos hablar de la estructura básica de un página web sin hablar
de los meta tags. Los meta tags se insertan en la cabecera de la página,
entre las etiquetas <head></head>. La función de estos tags varía.
Pueden ser informativos, para los buscadores y usuarios, indicándoles el

tipo de contenido de la web, sus palabras claves, etc. o pueden
predefinir una actuación a la página.
Los meta tags no se pueden ver a no ser que sea a través del código
fuente. Es decir, un meta tag no hace variar la apariencia de una página
web, pero son imprescindibles e importantísimos para los buscadores
webs.
Ejemplo:
El esquema de un meta tag es el siguiente: <meta name=” ”

content=” “/>. El “name” muestra el nombre de la etiqueta y el
“content” el contenido de esa etiqueta. Los meta tags pueden
cerrarse de dos formas: > o /> . La segunda es más correcta
aunque los navegadores no muestran diferencia con una u otra.
Meta tag “Description”
Este meta es también destinado para los buscadores. En la

“description” escribiremos la descripción de la página, de sus
contenidos. Esto lo haremos a través de frases cortas y separadas
entre ellas por puntos. En nuestra página este meta quedaría de la
siguiente manera:
<meta name=”Description” content=”Tutorial html. Meta tags” />
Meta tag “language”
Este meta tag le indica al buscador el idioma en el que está escrita

la página. En el caso de español en content se pone “es”, en inglés
“en”, en francés “fr”… Nuestra página es española así que su meta
será el siguiente:
<meta http-equiv=”Content-Language” content=”es”/>
Meta tag “Distribution”
Este meta es importante. Marca la distribución que queremos que

se haga de nuestra web en Internet. Si queremos que se distribuya
por todo el mundo en “content” indicaremos “global”. Escribir este
meta en global es lo más recomendable. Así pues nuestra página
incluirá…
<meta name=”distribution” content=”global”/>
Meta tag “Robots”
 Puede que no queramos que nuestra página sea indexada por los
robots de los buscadores Web. En ese caso debemos indicárselo
con el meta “Robots”. En content variará la respuesta
dependiendo del valor que escribamos.
 Los valores “all” e “index” indicarán que queremos que se indexe
toda la página. Los valores “none” y “noindex” indicarán que no
queremos que se indexe nada. El valor “follow” indica que
queremos que el robot siga los vínculos externos de nuestra web
y “nofollow” indicará lo contrario.

Introducción al HTML

Cargado por

Copyright:

Formatos disponibles

Introducción al HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introducción al HTML

Cargado por

Copyright:

Formatos disponibles

Introducción al

Pueden ser informativos, para los buscadores y usuarios, indicándoles el

El esquema de un meta tag es el siguiente: <meta name=” ”

Este meta es también destinado para los buscadores. En la

Este meta tag le indica al buscador el idioma en el que está escrita

Este meta es importante. Marca la distribución que queremos que

También podría gustarte