mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
506 lines
16 KiB
HTML
506 lines
16 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
|
|
|
|
|
|
|
|
|
|
|
<title>Estructura general</title>
|
|
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<p>Cuando visitamos una página WEB vemos textos,
|
|
imágenes, colores de fondo, en algunos casos elementos que
|
|
se desplazan por la pantalla, en fin, todo el conjunto de elementos que
|
|
hacen de dicha página un espacio multimedia e interactivo. </p>
|
|
|
|
|
|
<p>Aunque podríamos pensar que todos esos elementos
|
|
están incluidos en la página no es
|
|
así. Realmente el único de todos ellos que
|
|
pertenece al código de la propia página es el
|
|
texto. Y, entonces,
|
|
¿cómo se ve lo que aparece en la
|
|
página? La respuesta es que una página WEB no es
|
|
más que un documento de texto acompañado de una
|
|
colección de etiquetas que sirven para que el navegador </p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>interprete de qué forma tiene que presentar el
|
|
texto</li>
|
|
|
|
|
|
<li>sepa de dónde tiene que obtener las
|
|
imágenes y sonidos y cómo mostrarlos</li>
|
|
|
|
|
|
<li>distribuya todos los contenidos de una forma determinada
|
|
dentro de la pantalla</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p> Podríamos decir que es el guión de la
|
|
película.</p>
|
|
|
|
|
|
<p>Al tratarse de documentos de texto podemos afirmar que nos
|
|
bastaría con cualquier programa genere texto plano para
|
|
crear nuestras páginas <acronym title="Hypertext Markup Language">HTML</acronym>. Aunque
|
|
este
|
|
procedimiento resultaría bastante incómodo para
|
|
su uso habitual, ya que nos obligaría a conocer todas las
|
|
etiquetas del <acronym title="Hypertext Markup Language">HTML</acronym>,
|
|
puede ser interesante para que comprendamos la
|
|
estructura de una página WEB y será lo primero
|
|
que hagamos.</p>
|
|
|
|
|
|
<h2>Familiarizándonos con el entorno de trabajo</h2>
|
|
|
|
|
|
<p>Nuestra herramienta de trabajo durante este curso va a ser el
|
|
editor N|VU y lo primero que nos conviene hacer es familiarizarnos con
|
|
las principales características de su entorno para lo cual
|
|
disponemos del siguiente vídeo.</p>
|
|
|
|
|
|
<p><span style="color: rgb(255, 0, 0); font-weight: bold;">Insertar
|
|
vídeo del entorno general de nvu</span></p>
|
|
|
|
|
|
<p>La configuración por defecto de N|VU opta por la
|
|
utilización de estilos <acronym title="Cascading Style Sheets">CSS</acronym> para
|
|
formatear los diferentes
|
|
elementos de la página. Es una opción acertada,
|
|
ya que la utilización de <acronym title="Cascading Style Sheets">CSS</acronym> es un
|
|
método mucho
|
|
más versátil y potente que será muy
|
|
interesante estudiar con detalle cuando se consoliden los conocimientos
|
|
básicos pero, para el nivel inicial,puede suponer una
|
|
dificultad porque no nos presentará algunas etiquetas
|
|
propias del lenguaje <acronym title="Hypertext Markup Language">HTML</acronym>.
|
|
Una de las formas más eficientes
|
|
de aprender el lenguaje <acronym title="Hypertext Markup Language">HTML</acronym>
|
|
es viendo cómo están
|
|
construidas otras páginas y, como muchas de ellas aun no
|
|
utilizan <acronym title="Cascading Style Sheets">CSS</acronym>,
|
|
nos interesa ir conociendo las diferentes etiquetas
|
|
propias del <acronym title="Hypertext Markup Language">HTML</acronym>
|
|
y por eso es preferible, para el nivel de
|
|
iniciación, desactivar el empleo de <acronym title="Cascading Style Sheets">CSS</acronym>. </p>
|
|
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px;" alt="Actividad 1" title="Actividad 1" src="../imagenes/numeracion/uno.gif">
|
|
<ul>
|
|
|
|
|
|
<li>Abre
|
|
N|VU</li>
|
|
|
|
|
|
<li>Accede al menú <span class="refmenu">Herramientas
|
|
</span> o<span style="font-weight: bold;">
|
|
<span class="refmenu">Preferencias</span></span><span class="refmenu"> </span><img class="imgcentr refmenu" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"><span class="refmenu" style="font-weight: bold;"> General</span></li>
|
|
|
|
|
|
<li>Encontrarás
|
|
marcada la casilla que indica que se utilicen estilos <acronym title="Cascading Style Sheets">CSS</acronym><acronym title="Cascading Style Sheets"> </acronym>en
|
|
lugar de elementos y atributos <acronym title="Hypertext Markup Language">HTML</acronym>.
|
|
Desmárcala si vas a
|
|
trabajar en el nivel de iniciación. <img style="width: 398px; height: 44px;" alt="Desmarcar la utilización de CSS" title="Desmarcar la utilización de CSS" src="img/desmarcarcss.png"></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="avisos">
|
|
<p>Si dejas activada la casilla de verificación para
|
|
la utilización de <acronym title="Cascading Style Sheets">CSS</acronym> es
|
|
posible
|
|
que algunas referencias que
|
|
aparezcan en la documentación no coincidan con lo que puedas
|
|
comprobar al ir realizando las prácticas propuestas. </p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h2>El formato de las etiquetas <acronym title="Hypertext Markup Language">HTML</acronym></h2>
|
|
|
|
|
|
<p>Las etiquetas <acronym title="Hypertext Markup Language">HTML</acronym>
|
|
se escriben encerradas entre
|
|
ángulos. Normalmente se utilizan dos etiquetas: una de
|
|
inicio y otra de fin para indicar que ha terminado el efecto que
|
|
queríamos presentar. La única diferencia entre
|
|
ambas es que la de cierre lleva una barra inclinada "/" antes del
|
|
código. </p>
|
|
|
|
|
|
<p><etiqueta>texto que
|
|
presentará el efecto</etiqueta><br>
|
|
|
|
|
|
Por ejemplo:<code><b>Esto va en
|
|
negrita</b></code> lo
|
|
veremos así: <b>Esto va en negrita</b></p>
|
|
|
|
|
|
<div>Es probable que una de las
|
|
primeras preguntas que te hagas sea si es obligatorio escribir las
|
|
etiquetas en minúsculas o en mayúsculas.<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
Hoy por hoy es indiferente escribirlas de una u otra manera: salvo
|
|
raras excepciones los navegadores las interpretan correctamente en
|
|
ambos casos. <br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
Sin embargo, las últimas especificaciones emitidas por el <span><acronym title="World Wide Web Consortium">W3C</acronym></span><sup>(*)</sup>
|
|
indican la necesidad de que vayan escritas <b>siempre </b>en
|
|
minúsculas para considerar que el documento está
|
|
correctamente creado si intentamos que cumpla con las normas del
|
|
más avanzado y estricto lenguaje <acronym title="Extended Hypertext Markup Language">XHTML</acronym>.
|
|
Así pues
|
|
ya que
|
|
es algo que no nos
|
|
cuesta trabajo acataremos la norma emitida por el <span><acronym title="World Wide Web Consortium">W3C</acronym></span>.<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<span>(*)El <acronym title="World Wide Web Consortium">W3C
|
|
</acronym>(World Wide Web
|
|
Consortium)
|
|
es el fórum internacional que se encarga desarrollar nuevas
|
|
tecnologías relacionadas con la WEB dictando las normas que
|
|
constituyen el estándar comúnmente aceptado para
|
|
la
|
|
creación de documentos web.</span></div>
|
|
|
|
|
|
<h2>La estructura básica de
|
|
una página WEB</h2>
|
|
|
|
|
|
<p>Para que un navegador reconozca que lo que está
|
|
viendo es una página WEB se utiliza la siguiente estructura:</p>
|
|
|
|
|
|
<div class="codigo">
|
|
<p><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
|
|
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></code><code></code> (Etiqueta
|
|
que indica le indica al navegador el tipo de documento que se
|
|
va a iniciar y le permite interpretarlo correctamente.</p>
|
|
|
|
|
|
<p><code><HTML>
|
|
</code>(Etiqueta que indica que lo que viene a
|
|
continuación es un
|
|
documento <acronym title="Hypertext Markup Language">HTML</acronym>)<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<code><head></code>
|
|
(Etiqueta de apertura de la Título)<br>
|
|
|
|
|
|
Aquí va la información sobre el título
|
|
de la página, el autor, palabras clave, etc. que no se
|
|
presentarán en la ventana del navegador, salvo el
|
|
título que aparecerá en la barra de
|
|
título de la parte superior <br>
|
|
|
|
|
|
<code></head></code>
|
|
(Etiqueta de cierre de la Título)<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<code><body></code>
|
|
(Etiqueta de apertura del cuerpo) <br>
|
|
|
|
|
|
Aquí va el contenido de la página que
|
|
será lo que se presente en pantalla. <br>
|
|
|
|
|
|
<code></body></code>
|
|
(Etiqueta de cierre del cuerpo)<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<code></HTML></code>
|
|
(Etiqueta de cierre del documento)</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>No te preocupes por la aparente complejidad de la etiqueta
|
|
inicial,
|
|
ya que prácticamente todos los editores se
|
|
encargarán de
|
|
escribirla por ti. </p>
|
|
|
|
|
|
<p>Antes de comenzar los ejercicios prácticos
|
|
comprueba que ya tienes creada una
|
|
carpeta con el nombre "CursoHTML" para poder almacenar en ella el
|
|
resultado de tu trabajo. </p>
|
|
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px;" alt="Actividad 2" title="Actividad 2" src="../imagenes/numeracion/dos.gif">
|
|
<ul>
|
|
|
|
|
|
<li>Arranca N|VU y abre el archivo empezando.htm que
|
|
encontrarás en la carpeta archivos del CD-ROM </li>
|
|
|
|
|
|
<li>No verás nada en la pestaña normal,
|
|
así que vamos a utilizar la pestaña
|
|
Código fuente.</li>
|
|
|
|
|
|
<li>Localiza las etiquetas que hemos mencionado antes y haz
|
|
clic con
|
|
el ratón para situarte en la zona correspondiente al cuerpo
|
|
de la
|
|
página (entre <code><body></code>
|
|
y <code></body></code>)</li>
|
|
|
|
|
|
<li>Dale contenido al cuerpo escribiendo un renglón
|
|
y pulsando la tecla <img style="width: 22px; height: 24px;" alt="Intro" title="Intro" src="../imagenes/teclaintro.png"> para saltar al siguiente
|
|
párrafo. </li>
|
|
|
|
|
|
<li>Escribe otro renglón y pulsar dos veces la
|
|
tecla <img style="width: 22px; height: 24px;" alt="Intro" title="Intro" src="../imagenes/teclaintro.png">. </li>
|
|
|
|
|
|
<li>Escribe un tercer renglón .</li>
|
|
|
|
|
|
<li>Si pulsas el icono <img src="img/icoguardar.png" title="Icono guardar" alt="Icono guardar" style="width: 36px; height: 37px;">
|
|
obtendrás un mensaje de error <img src="img/fallo.png" title="Mensaje de error" alt="Mensaje de error" style="width: 316px; height: 109px;">
|
|
puesto
|
|
que el archivo con el que trabajas procede del CD-ROM y no puedes
|
|
escribir en él. </li>
|
|
|
|
|
|
<li>Tendrás que utilizar el menú
|
|
Archivo / guardar como y salvar el fichero en la carpeta CursoHTML con
|
|
el nombre <strong>actividad2.html</strong> <strong></strong><br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>Utiliza la pestaña de Vista preliminar o bien el
|
|
botón <img style="width: 41px; height: 39px;" alt="Icono de Botón Navegar" title="Icono de Botón Navegar" src="img/iconavegar.png"> para cargar en el navegador el
|
|
documento que acabamos de salvar
|
|
y comprobar los resultados.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
La primera vez que utilices el botón navegar el programa
|
|
solicitará permiso para lanzar una aplicación
|
|
externa. Sería conveniente que marcaras la casilla para que
|
|
recordara esta decisión de forma que no te lo pregunte cada
|
|
vez que vuelvas a pulsarlo.<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<div style="text-align: center;"><img class="imgcentr" style="width: 547px; height: 198px;" alt="Petición de autorización para lanzar aplicación externa" title="Petición de autorización para lanzar aplicación externa" src="img/ejecutaraplicacion.png"><br>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h2>¡Vaya desastre!</h2>
|
|
|
|
|
|
<p>Supongo que coincidiremos en que lo que hemos visto al
|
|
comprobar cómo había quedado nuestra primera
|
|
creación no ha sido muy alentador. </p>
|
|
|
|
|
|
<p>La explicación del desaguisado es sencilla: en <acronym title="Hypertext Markup Language">HTML</acronym>
|
|
hacen falta unas etiquetas especiales para indicar los saltos de
|
|
línea y párrafo y no las habíamos
|
|
escrito. ¡Las cosas no son tan sencillas como en un
|
|
procesador de texto! </p>
|
|
|
|
|
|
<div class="codigo"><code><br></code>
|
|
es la
|
|
etiqueta que sirve para indicarle al navegador que debe hacer un salto
|
|
de línea y, dada su función, no necesita etiqueta
|
|
de cierre siempre que nos movamos en el tipo de documento determinado
|
|
por las especificaciones de <acronym title="Hypertext Markup Language">HTML</acronym> 4.01.<br>
|
|
|
|
|
|
<code><p>
|
|
</p></code> es la que nos sirve para
|
|
indicar que lo que está comprendido entra la etiqueta de
|
|
inicio y la de final forman un párrafo que se separa de lo
|
|
anterior y lo posterior mediante el espacio que corresponde a un doble
|
|
salto de línea. </div>
|
|
|
|
|
|
Vamos a intentar solucionar este lío y para ello volveremos
|
|
a
|
|
N|VU y crearemos un nuevo documento que aparecerá en una
|
|
nueva
|
|
pestaña. Una vez que dispongamos de esta nueva
|
|
pestaña
|
|
usaremos el icono abrir para abrir de nuevo nuestro primer trabajo (con
|
|
esto conseguiremos tener dos copias del mismo y podremos comparar las
|
|
diferencias que se producen al introducir alguna
|
|
modificación.)
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px;" alt="Actividad 3" title="Actividad 3" src="../imagenes/numeracion/tres.gif">
|
|
<ul>
|
|
|
|
|
|
<li> Volvemos a N|VU y vamos a abrir un abrir el el
|
|
editor de textos si lo
|
|
habíamos cerrado. </li>
|
|
|
|
|
|
<li> Cargamos nuestra anterior creación (<strong>actividad2.html</strong>).</li>
|
|
|
|
|
|
<li> introducimos la etiqueta <code><br></code>
|
|
donde
|
|
habíamos pulsado una vez la tecla INTRO.</li>
|
|
|
|
|
|
<li> Ponemos <code><p></code> donde
|
|
inicialmente habíamos pulsado dos veces la tecla INTRO y
|
|
cerramos el párrafo de texto con <code></p></code>. </li>
|
|
|
|
|
|
<li> Guardamos el archivo como <strong>actividad3.html</strong></li>
|
|
|
|
|
|
<li> Pasamos al navegador y cargamos esta nueva
|
|
página para comprobar el resultado.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<div class="estilo">Puede que te haya llamado la
|
|
atención que los nombres de los archivos no lleven la tilde,
|
|
a pesar de que parece claro que su sentido es el que corresponde al
|
|
sustantivo "práctica" y no a la forma verbal "practica".<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
La explicación de esta situación tiene que ver
|
|
con la forma en que los servidores van a tratar posteriormente los
|
|
nombres de los archivos que almacenan y las peticiones que les realicen
|
|
los navegadores: los caracteres no anglosajones (entre los que se
|
|
cuentan nuestras vocales con tilde y la "eñe")
|
|
así como los espacios en los nombres van a provocar errores
|
|
y el servidor va a contestar que no encuentra la página. <br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
La recomendación es que no utilices estos caracteres en los
|
|
nombres de las páginas o en sus archivos asociados. Si
|
|
quieres utilizar nombres largos y que las palabras queden separadas
|
|
hazlo sustituyendo el espacio por un guión bajo "<b>_</b>"<br>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="avisos"> ¡Cuidado! Cuando
|
|
veas las páginas en tu ordenador
|
|
no notarás ningún problema aunque utilices estos
|
|
caracteres al nombrar el archivo. Ten en cuenta que te las
|
|
está sirviendo tu propio ordenador, que tiene configurado el
|
|
teclado en castellano y con un sistema operativo que admite los
|
|
espacios.</div>
|
|
|
|
|
|
<p>Aunque pueda haber resultado algo duro para empezar puedes
|
|
respirar
|
|
con tranquilidad porque estos son los últimos trabajos que
|
|
realizamos directamente escribiendo los códigos. A partir de
|
|
aquí empezaremos a utilizar el editor
|
|
gráfico desde
|
|
la pestaña normal
|
|
que, básicamente, se encarga de escribir por nosotros las
|
|
etiquetas necesarias, pero es de suponer que gracias a esta
|
|
introducción hayamos podido comprender cómo se
|
|
escribe una página <acronym title="Hypertext Markup Language">HTML</acronym>. </p>
|
|
|
|
|
|
<p>La importancia de asimilar la estructura básica
|
|
reside en que una de las mejores formas de aprender a crear
|
|
páginas <acronym title="Hypertext Markup Language">HTML</acronym>
|
|
es viendo páginas creadas por otros
|
|
autores. Si tenemos claro el sistema utilizado podremos reconocer los
|
|
elementos que nos parezcan interesantes e irlos incorporando a nuestras
|
|
páginas. </p>
|
|
<p></p>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
</body>
|
|
</html>
|