|
[Índice de Consejos]
|
|
 |
Intentaré explicarlo lo mas sencillo que
pueda (a mi manera) y tened en cuenta que no soy informático ni un
entendido en el tema. |
|
Partes de una página Web
La página que construyamos se pueden visualizar de tres maneras (más o menos,
según que programa se utilice):
Normal
HTML Vista previa:
-
Normal:
Es donde se verá la página tal y como se verá en el
Navegador Web (Internet Explorer)
más o menos. Aquí pondremos el texto, las imágenes, etc... .
Cuando insertes las cosas podrás comprobar en la vista HTML que aparecerán símbolos
y palabrejas incluso en Ingles que no habíamos puesto en vista Normal. Esto
es debido a que el programa en cuestión lo hace automáticamente el solo. También
tiene algunos efectos con asistente (como la barra de herramientas DHTML)
que nos ayudarán a crear la página sin tener que saber escribir HTML.
Sin embargo, para crear
otros efectos, menús, formularios, buscas, comandos,
etc..., si que necesitemos saber escribir en HTML, JavaScript y otros. El
programa
no nos puede ayudar a todo lo demás y
por este motivo, os ofrecemos en esta Web los códigos para que los copiéis, peguéis
y donde aplicarlos sin tener que saber de HTML.
-
HTML:
Es donde está
todo el contenido de la página con el lenguaje HTML y algunos códigos se deben
de aplicar aquí dentro.
Todo
el documento HTML debe estar entre las etiquetas <HTML> y </HTML>:
El documento
en sí está dividido en dos zonas principales:
<HEAD> y
</HEAD>
El cuerpo,
comprendido entre las etiquetas <BODY> y </BODY>
<HEAD>
Dentro de las
etiquetas <head> y </head> está la información de la
página como el título, los metas, los keywords, las palabras
clave, algunos códigos, etc...
Este código sería
uno de los metatag ideal para una página, contiene el título de
página, descripción, palabras clave, e-mail, idioma.
Si quieres poner
este código en tu página, selecciónalo con el ratón y haz clic con
el botón derecho del ratón y selecciona el comando Copiar y
lo Pegas entre las etiquetas <head> y </head>
en la vista HTML de tu página.
Sustituye la
información de ejemplo de cada etiqueta por la tuya.
<BODY>
Dentro de las
etiquetas <body> y </body> está todo el texto e
imágenes que se verán en el navegador de Internet y la mayor parte
de los códigos.
-
Vista previa: es donde podemos visualizar la página como si fuese en el
Explorer, donde veremos las imágenes en movimiento, los efectos insertados,
etc...En mi caso, no se ve exactamente igual y por ello prefiero verlo en el
Navegador Web en "Vista previa en el Explorador" esta opción la tendréis
en la barra de herramientas en un icono o en los comandos "Archivo"
+ "Vista previa en el Explorador".
A continuación, tenéis mas información sobre el tema que proviene de una
Web muy interesante que explica mas técnicamente y profesionalmente esto del
HTML.
Empezamos con la
página
Bueno, empezaremos
a crear nuestra primera página. Iremos a la barra de herramientas
de comandos y seleccionamos Nuevo+Página se nos abrirá una
página en blanco donde pondremos el texto, las imágenes, los
códigos, etc...
Ves a tu
Explorador de Windows y selecciona algunas imágenes, cópialas y
pégalas en la página donde quieras. Cuando guardes la página
emergerá una ventana donde podrás ver tus carpetas Web y abajo
donde pone Nombre de archivo le pondrás el nombre que
quieras. Si metiste imágenes te preguntará en que carpeta quieres
guardar las imágenes. En ese momento puedes cambiar el nombre de
la imagen y seleccionar otra carpeta donde guardarla.
Una vez guardada,
selecciona Vista previa con el explorador y comprobarás que
ya habrás creado tu primera página.
(Ir
a la barra de herramientas de comandos seleccionaremos Archivos
+ Vista previa en el explorador)
NOTA IMPORTANTE:
la página principal con la que empieza una Web se debe de llamar
siempre index.htm las demás páginas como quieras...
Recuerda:
NO pongas los nombres de carpetas y archivos con formato html
gif jpg js css etc... nunca con acentos, siempre en
minúsculas, sin espacios y sin símbolos especiales como < + - (
= % el guión bajo si es válido ( _ ), ejemplo:
ASÍ NO=
mis imágenes
ASÍ SI= mis_imagenes
Bueno, espero que
con estos apuntes hallas podido crear tu primera página Web sin
problemas.
Para situar el
texto y las imágenes en zonas concretas te recomendamos que
utilices las tablas. Empieza a probar con ellas y verás como
sitúas las cosas mejor...
|
Información recopilada de la Red
El principio esencial
del lenguaje HTML (Hyper Text Markup Language) es el uso de las etiquetas (tags).
Funcionan de la siguiente manera:
<XXX>
Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas,
indiferentemente. Por claridad, se usarán en este manual solamente las
mayúsculas.
Lo que haya entre
ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el
documento HTML debe estar entre las etiquetas <HTML> y </HTML>:
<HTML>
[Todo el documento] </HTML>
El documento
en sí está dividido en dos zonas principales:
-
El encabezamiento,
comprendido entre las etiquetas <HEAD> y
</HEAD>
-
El cuerpo,
comprendido entre las etiquetas
<BODY> y
</BODY>
Dentro
del encabezamiento hay información del documento, que no se ve en la
pantalla principal, principalmente el título del documento, comprendido
entre las etiquetas <TITLE> y </TITLE>. El título debe ser
breve y descriptivo de su contenido, pues será lo que vean los demás
cuando añadan nuestra página a su bookmark (o agenda de
direcciones).
Dentro del cuerpo está
todo lo que queremos que aparezca en la pantalla principal (texto, imágenes,
etc.)
Por tanto, la
estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Antes de crear nuestra primera página, unas consideraciones sobre el
texto: Cuando escribimos en el documento el texto que queremos que
aparezca en la pantalla, veremos que éste se acomoda a ella, sin que
tengamos que pulsar el retorno del carro. Si queremos separar el texto en
distintos párrafos debemos usar la etiqueta <P>, (que no tiene su
correspondiente etiqueta de cierre </P>)
El texto puede tener
unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>,
<H2> y </H2>, etc. (hasta el número 6), siendo el número
indicativo del tamaño. El tamaño mayor es el correspondiente
al número 1. Puedes experimentar en el ejemplo que sigue, cambiando el número
para comprobar el efecto que se logra.
Una etiqueta muy
interesante es la de centrado <CENTER> y </CENTER> (no la
soportan todos los navegadores, aunque sí la mayoría de ellos). Nos
centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.
También tenemos los
separadores (horizontal rules), que se consiguen con la etiqueta <HR>
(no existe la correspondiente de cierre). Con ella se obtiene una raya
horizontal tan ancha como la pantalla, y con la apariencia de estar
embutida sobre el fondo, como se puede observar a continuación:
|
En resumen, la cuestión es que hay tres partes esenciales:
-
<html> </html> : es donde está todo el contenido de la página
incluso los códigos que ofrecemos. En algunos pocos casos (muy pocos) se
precisa poner el código fuera de ellos. Dentro de estas etiquetas están las de
<head> y las de <body>
-
<head< </head> : es donde está la información sobre la página,
como el título, autor, palabras metas para que nos encuentren en los
buscadores que nos anunciemos, mail, etc... y también algunos códigos o
parte de ellos. Para insertar un código dentro del <head> sitúa el
cursor a la izquierda del último </head> que tendrá la barra inclinada
y dale al Intro o Enter, se creará una nueva línea en blanco, es aquí donde pegarás
el código.
-
<body> </body> : es donde se coloca todo lo que insertemos en
vista "Normal", texto, imágenes, etc... En algunos casos, ciertos códigos
no se insertan bien desde la vista "Normal" con "Pegado
especial" + "Tratar como HTML" y se deben de insertar desde la
vista "HTML"
(más información
 ).
[Índice de Consejos]
WebMaster de
www.yomaster.com
::::::::::FIN:::::::::
|
CÓDIGOS
aquí
