Ejemplo Codigo:
<html><!-- Inicia codigo html -->
<head><!-- Inicia cabecera html -->
<!-- Asi se aplican comentarios en html para documentar el codigo -->
<meta name="description" content="Estructura HTML basico" /> <!-- descripcion general -->
<meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <!-- Palabras claves separadas por comas que usar los robots de los buscadores -->
<meta name="author" content="Edsson Gonzalez" /><!-- Autor del html -->
<meta name="Language" content="Spanish"><!-- Idioma del html -->
<meta name="robots" content="all | index">
<!-- Si los "Robots" deben tener en cuenta esta página o no:
El valor de content puede ser:
all para que el robot tenga en cuenta esta página y pueda seguir los links contenidos en la misma (este es el valor predeterminado) noindex para que no la tenga en cuenta. none que es lo mismo que noindex, nofollow index para que la tenga en cuenta follow para que pueda seguir los links que haya en la página nofollow lo contrario de follow. -->
<meta http-equiv="Pragma" content="no-cache" ><!-- Esto le indica al navegador que no guarde la página en el caché -->
<meta http-equiv="Window-target" content="_top" >
<!-- Evitar que una página se muestre dentro de un frame: En Content podemos usar: _top para indicar que se muestre en la página completa, no dentro de un frame, _blank para que se muestre en una nueva ventana -->
<meta http-equiv="Refresh" content="20;url=http://www.nuevaurl.es"><!--Especifica el tiempo en segundos que el explorador tardará en mandarte a una segunda dirección URL -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- Define el juego de caracteres a utilizar -->
<title>Titulo del HTML</title>
<link rel="stylesheet" type="text/css" href="../estilos.css"><!-- Esto sirve para incluir un archivo externo de estilos en nuestro html -->
<!-- a:link, a:visited, a:hover, a:active sirve para definir que pasara con los enlaces publicados en el html, Cuando aparece text-decoration: underline; significa que cuando el cursor este sobre un enlace o link este mostrara una linea debajo de El -->
<style type="text/css">
a:link {
color: #039;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F00;
}
a:hover {
text-decoration: underline;
color: #039;
}
a:active {
text-decoration: none;
color: #F00;
}
.estilotitulo {
font-family: Arial Black, Gadget, sans-serif;
font-weight: bold;
color:#039;
font-size: 30px;
}
-->
</style>
</head><!-- finaliza cabecera html -->
<body><!-- Inicia el cuerpo del html -->
<!-- Para indicar un salto de linea se utiliza la etiqueta <BR> y para un cambio de parrafo (deja una linea en blanco en medio) se utiliza la etiqueta <P> . -->
Este texto tiene <br> saltos de linea y <p> parrafo.
<!--La etiqueta <P> puede usarse también como etiqueta cerrada <P></P> indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene el parámetro align que indica al navegador la forma de "justificar" el parrafo. Los valores posibles son LEFT, RIGHT y CENTER , estando aun en estudio el valor JUSTIFY -->
<p align="right">Este es un ejemplo de un parrafo de texto justificado a la derechar </p>
<!-- En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las etiquetas <H1><H2><H3>... <H1> será la que muestre el texto en mayor tamaño. -->
<h1>Texto de Prueba</h1>
<h2>Texto de Prueba</h2>
<h3>Texto de Prueba</h3>
<h4>Texto de Prueba</h4>
<h5>Texto de Prueba</h5>
<h6>Texto de Prueba</h6>
<!-- Otros atributos del texto -->
<b>Texto con Negrita</b>
<i>Texto en Cursiva</i>
<u>Texto Subrayado</u>
<s>Texto Tachado </s>
<br>
<!-- Aplicando un estilo definido a un texto, arriba creamos .estilotitulo como un conjuntos de caracteristicas que se pueden aplicar a un texto dentro de nuestro html este pude usarse n veces dentro del mismo-->
<span class="Es1"><span class="estilotitulo">texto con estilo titulo aplicado</span></span>
<br>
<!-- Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza la etiqueta <OL></OL> . Cada uno de los elementos de la lista irá precedido de la etiqueta <LI>. -->
<ol>
<li>Guatemala</li>
<li>Mexico</li>
<li>España</li>
</ol>
<!-- IMAGENES Para incluir una imagen en nuestra página Web utilizaremos la etiqueta <IMG> . Hay dos formatos de imagenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG . Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el navegador, a no ser que disponga de un programa externo que permita su visualización.
La etiqueta <IMG> tiene varios parámetros :
src = "imagen" Indica el nombre del fichero gráfico a mostrar.
alt = "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.
border = tamaño Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.
height = tamaño Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
width = tamaño Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
hspace = margen Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.
vspace = margen Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.
-->
<img src="news.gif" alt="foto" border="0" height="20" width="99"hspace="20" vspace="10" />
<br>
<!-- Enlaces dentro del html -->
<a href = "http://www.twitter.com/" > Pulse para ir a la página de Twitter </a>
<br>
<!--Un Hiperenlace también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo hare mos con el parametro name -->
<a name = "seccion1" ></a>
<!-- Esta instrucción marca el inicio de una sección dentro de nuestra página. La seccion se llamará seccion1 . Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma -->
<a href = "#seccion1" > Primera Parte </a>
<br>
<!-- Asimismo podemos hacer que el Hiperenlace de como resultado el envío de un correo electrónico a una dirección de correo determinada. -->
<a href = mailto:usuario@email.dom> Envíame tus sugerencias </a>
<br>
<!--También podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo-->
<a href = "manual.zip" > Pulsa aqui para llevarte una copia del manual. </a>
</body><!-- finaliza el cuerpo del html -->
</html><!-- finaliza codigo html -->
No hay comentarios:
Publicar un comentario