TEORÍA: HACER UNA PÁGINA WEB
Página 1 de 1.
TEORÍA: HACER UNA PÁGINA WEB
Para entender bien este artículo hay que conocer los tutoriales anteriores sobre internet básico, lenguaje HTML y la elaboración de tablas.
La construcción de la página web parece complicada pero en realidad si se conocen las etiquetas básicas y el orden en que aparecen, solo es necesario ir copiando de una a otra, sustituyendo las fotos, los colores y los textos. Primero una breve explicación de lo que significa cada cosa y después las pondremos en nuestra página modelo, tal y como aparecen.
DOCTYPE
No es obligatoria, pero ayuda a la correcta interpretación de la página. Marca el estandar del lenguaje que se va a utilizar y encabeza todo.
Hay tres posibilidades, en la primera, el HTML exige html estricto, la segunda admite combinar sistemas y la tercera se usa cuando se van a usar frames y FRAMESET sustituye a BODY.
HTML
Obligatoria, es el lenguaje que vamos a usar y abre la página si no se pone la anterior
HEAD
La cabecera, obligatoria, es la información que damos sobre las características de la página, aparece tras la etiqueta head.
Dentro del HEAD van:
BODY
Obligatoria, es el cuerpo o contenido de la página. La etiqueta body puede ser sustituida por frameset para un tipo de páginas webs dividida en cuadros o frames. Aquí se ponen las fotos y los textos que queremos publicar.
Tambien lleva atributos lo que serían las instrucciones de color y las tablas que pongamos:
NOTA
Empezamos nuestra página:
PÁGINA BÁSICA
Aunque vamos a ver más parámetros, en realidad solo sería extrictamente necesario para una página sencilla esto:
MODELO DE PÁGINA WEB
Nosotros la haremos más completa, ya hemos visto que todo no es obligatorio, si no queremos dar datos personales no es necesario.
ENLACES
http://platea.pntic.mec.es/~abercian/guiahtml/estructura.htm
http://www.terra.es/personal6/morenocerro2/manual/desconocidas/desconocidas_4.html
La construcción de la página web parece complicada pero en realidad si se conocen las etiquetas básicas y el orden en que aparecen, solo es necesario ir copiando de una a otra, sustituyendo las fotos, los colores y los textos. Primero una breve explicación de lo que significa cada cosa y después las pondremos en nuestra página modelo, tal y como aparecen.
DOCTYPE
No es obligatoria, pero ayuda a la correcta interpretación de la página. Marca el estandar del lenguaje que se va a utilizar y encabeza todo.
Hay tres posibilidades, en la primera, el HTML exige html estricto, la segunda admite combinar sistemas y la tercera se usa cuando se van a usar frames y FRAMESET sustituye a BODY.
- Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O Frameset//EN">
HTML
Obligatoria, es el lenguaje que vamos a usar y abre la página si no se pone la anterior
HEAD
La cabecera, obligatoria, es la información que damos sobre las características de la página, aparece tras la etiqueta head.
Dentro del HEAD van:
- TÍTULO
- Código:
1._ Título de la Web: <meta name='title' content='url-de-la-web' />
2._ Identificación del autor y la licencia que se use:
<meta name='author' content='Nombre autor' />
<meta name='owner' content='Nombre autor' />
<meta name='copyright' content=Copyright del contenido' />
3._ Idioma y códigos de los caracteres propios:
<meta http-equiv='content-language' content='Spanish' />
<meta name='language' content='es' />
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
CHARSET
Con este atributo se fija el conjunto de caracteres de la página, el navegador al recibier esta etiqueta META ordenará al sistema operativo cargar los caracteres de escritura necesarios para que se vea bien la página. Si no los tiene instalados generará una ventana de aviso para su descarga.
[code] <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />[/code]
Aunque para el castellano debemos poner: "charset=ISO-8859-1", para no tener problemas con las eñes o los acentos a veces es necesario cambiarlo por este "charset=utf-8"
4._ Distribución del contenido de la web es global, regional, privado...
<meta name='distribution' content='global' />
5._ Clasificación de la web en los buscadores
Los keywords o "palabras clave": lista de palabras entre comas, deben describir y encuadrar el contenido del sitio.
<meta name='keywords' content="palabra1, palabra2, etc.' />
Description: Breve explicación del contenido de la página
<meta name='description' content=Cuentos infantiles en verso... ' />
6._ Edad del publico al que va dirigido: general / mature / restricted
<meta name='rating' content='General' />
7._ Robots: Autorización a los motores de búsqueda para indexar la información y publicitar los enlaces de la página web. Si no se prohibe, se indexa por defecto.
Indexación total.
<meta name='robots' content='index,follow' />
<meta name='robots' content='all'/>
Indexación parcial.
<meta name='robots' content='index,nofollow' /> (Se indexa la página, no los enlaces)
<meta name='robots' content='noindex,follow' /> (Se indexan los enlaces, no la página)
Si no se quiere indexar.
<meta name='robots' content='noindex,nofollow' />
<meta name='robots' content='none'/>
8._ Meta para hacer compatible el Chrome con el Internet Explorer
<meta content='chrome=1' http-equiv='X-UA-Compatible'/>
9._ Esta le dice a los robots cada cuanto tiempo se actualiza la web para que la revisen:
<meta name='revisit-after' content='1 day' />
<meta name='revisit-after' content='7 days' />- Código:
<script language="JavaScript">
<!--
Código
// -->
</SCRIPT>- Código:
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
Obligatorio, nombre de la página, es importante porque aparecerá en la pestaña, va introducido por la etiqueta title.
METATAGS
Son las características de la página que van a rastrear los buscadores. Son muy importantes para la difusión de la página ya que se usan además para incorporar información técnica que usan los navegadores como el grupo de caracteres usado, el tiempo de expiración del contenido, si lo hay, la posibilidad de dejar la página oculta y calificar su contenido.
Las más importantes son estas.
CÓDIGO JavaScript
Es un código que sirve para ordenar ciertas funciones, siempre con estas etiquetas de apertura y cierre
Por ejemplo, esta es la órden para subrayar el texto al pasar el ratón sobre un enlace:
BODY
Obligatoria, es el cuerpo o contenido de la página. La etiqueta body puede ser sustituida por frameset para un tipo de páginas webs dividida en cuadros o frames. Aquí se ponen las fotos y los textos que queremos publicar.
Tambien lleva atributos lo que serían las instrucciones de color y las tablas que pongamos:
- BGCOLOR, color de fondo.
BACKGROUND, URL, imagen de fondo, se multiplica para ocupar todo el espacio.
TEXT color del texto.
LINK, VLINK, ALINK, colores de texto con enlace, enlace ya visitado y enlace activo.
Los colores por defecto son BGCOLOR=white, TEXT=black, LINK=blue, VLINK=purple y ALINK=red.
NOTA
- Lo que esté dentro de esta etiqueta no se ve, pero nos sirve de indicación para no perdernos entre los códigos.
- Código:
<!-- TEXTO-->
Empezamos nuestra página:
PÁGINA BÁSICA
Aunque vamos a ver más parámetros, en realidad solo sería extrictamente necesario para una página sencilla esto:
- Código:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
Es el contenido de la página.
NOTA: Si en el body pones fotos recuerda poner en todas la etiqueta border=o, así no tendrán un círculo:
img src="URL FOTO" border=0>
</BODY>
</HTML>
MODELO DE PÁGINA WEB
Nosotros la haremos más completa, ya hemos visto que todo no es obligatorio, si no queremos dar datos personales no es necesario.
- Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O Transitional//EN">
<HTML>
<HEAD>
<!-- INFORMACIÓN PARA LOS BUSCADORES-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<META NAME="description" CONTENT="Modelo de como se debe hacer una página web">
<META NAME="keywords" CONTENT="Tutorial, página, web, html, script, etiquetas">
<META NAME="distribution" CONTENT="global">
<META NAME="author" CONTENT="Artesana">
<META NAME="copyright" CONTENT="Artesana, 15-11-2010">
<meta content='chrome=1' http-equiv='X-UA-Compatible'/>
<!-- TÍTULO, VISIBLE EN LA PESTAÑA Y LOS BUSCADORES-->
<TITLE>PÁGINA WEB DE MUESTRA</TITLE>
<!-- Enlace del favicon-->
<link rel="shortcut icon" type="image/x-icon" href="http://www.iconj.com/ico/m/z/mzs8ztotsn.ico" />
<!-- Enlace subrayado al paso del ratón-->
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
<!-- Música-->
<bgsound src="http://www.pcdon.com/-FrankSinatra__yesterday.mid" loop="-1">
</HEAD>
<!-- ABRIMOS BODY CON LA IMAGEN DE FONDO Y LOS COLORES POR DEFECTO -->
<BODY background="http://i285.photobucket.com/albums/ll78/Artes-ana/FONDOS/LISOS/tex2.gif" TEXT=#000000 LINK=#0000FF VLINK=#800080 ALINK=#FF0000 BGPROPERTIES=FIXED>
<br>
<br>
<!-- CONTENIDO DE LA PÁGINA -->
<!-- Banner -->
<center><script src="http://www.widgeo.net/message.php?msg=Bienvenidos a la pagina de Artesana... &adult=0&cat=art&big=big&cl=rainbow"></script></center>
<br>
<br>
<!-- Foto -->
<CENTER><IMG src="http://i285.photobucket.com/albums/ll78/Artes-ana/MIS%20FOTOS/LOGOFOROUNIVERSALES1.jpg" border=0></CENTER>
<br>
<br>
<!-- Texto sombreado con reenvío, *es posible que si no es internet explorer no se vea el efecto sombra -->
<CENTER><A href="http://artesana.foroactivo.com/" target="_blank"><DIV style="FILTER: shadow(color=#000000); WIDTH: 600px;height:40px"><FONT FACE="VERDANA" color="GREEN" size=6>PORTAL DE ARTESANA LA WEB =></FONT></A></DIV>
</CENTER>
<br>
<br>
<!-- Enlaces con la firma del autor-->
<A HREF="http://www.artesana.foroactivo.com" target=_blank><FONT COLOR="000000">Diseño de Artesana</FONT></A>
</BODY>
</HTML>
ENLACES
http://platea.pntic.mec.es/~abercian/guiahtml/estructura.htm
http://www.terra.es/personal6/morenocerro2/manual/desconocidas/desconocidas_4.html
Temas similares
» TEORÍA: BASE PARA HACER TABLAS
» ÍNDICE DE TEORÍA POÉTICA
» CÓDIGO PARA PONER TU WEB O TU FORO DE PÁGINA PRINCIPAL
» TEORÍA: EDITAR EN FOROS Y BLOGS CON TEXTO, MÚSICA E IMÁGENES
» Código HTML para hacer botones
» ÍNDICE DE TEORÍA POÉTICA
» CÓDIGO PARA PONER TU WEB O TU FORO DE PÁGINA PRINCIPAL
» TEORÍA: EDITAR EN FOROS Y BLOGS CON TEXTO, MÚSICA E IMÁGENES
» Código HTML para hacer botones
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
|
|