HTML

EDICIÓN EN HTML__________________________________________EDICIÓN EN HTML__________________________________________EDICIÓN EN HTML__________________________________________EDICIÓN EN HTML__________________________________________
INFORMÁTICA 4º E.S.O. PROFESOR: LUIS GONZALO Página 1 de 6
ficha 1ficha 1ficha 1ficha 1
INTRODUCCIÓNINTRODUCCIÓNINTRODUCCIÓNINTRODUCCIÓN
Las siglas HTML son las iniciales de la expresión en inglés HyperText Markup
Language. Traducido al castellano sería Lenguaje de Etiquetas de Hipertexto.
Consideramos hipertexto, al conjunto de información en soporte multimedia que se
estructura mediante enlaces entre los diversos elementos. Se trata de un conjunto de
etiquetas que se van intercalando entre el texto de forma que los programas que
utilizamos para navegar por la Red sepan qué es lo que tienen que mostrar cuando
accedemos a una página y cómo deben presentarlo en la pantalla.
Existe un organismo internacional independiente ( World Wide Web ConsortiumWorld Wide Web ConsortiumWorld Wide Web ConsortiumWorld Wide Web Consortium o W3CW3CW3CW3C)
que se encarga de ir fijando cuáles son las etiquetas válidas pero, a pesar de ello, la
batalla comercial que se ha desarrollado en torno a los navegadores para Internet, ha
originado situaciones en las que han aparecido etiquetas propietarias de un
determinado programa.
El lenguaje HTML surgió con la finalidad de permitir organizar de forma estructurada la
información (fundamentalmente textual) para su consulta por la red, pero no tenía
intención de preocuparse por el aspecto gráfico de dicha información.
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.
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 interprete de qué forma tiene que
presentar el texto sepa de dónde tiene que obtener las imágenes y sonidos y cómo
mostrarlos distribuya todos los contenidos de una forma determinada dentro de la
pantalla.
Podríamos decir que es el guión de la película.
INSTALACIÓNINSTALACIÓNINSTALACIÓNINSTALACIÓN
La instalación debe hacerse siempre desde la página Web del programa:
http:// www.nvu.com ya que están saliendo versiones continuamente y el hacerlo desde
una recopilación (por ejemplo un CD o DVD de una revista) no nos asegura que
instalemos la última versión. Los pasos a seguir para la instalación son muy sencillos e
intuitivos.

INICIARINICIARINICIARINICIAR NNNNVUVUVUVU
Para arrancar NVU podemos hacer dos cosas:
1º. Hacer doble clic sobre el icono de acceso directo que nos crea en el escritorio.
2º. Pinchar en el menú Inicio » Todos los programas » NVU » icono NVU.
Una vez abierto el programa, accede al menú HHHHERRAMIENTASERRAMIENTASERRAMIENTASERRAMIENTAS PPPPREFERENCIASREFERENCIASREFERENCIASREFERENCIAS
GGGGENERALENERALENERALENERAL,,,, EEEEncontrarás marcada la casilla que indica que se utilicen estilos CSS en
lugar de elementos y atributos HTML. Desmárcala ya que para un nivel inicial
supone una dificultad al no presentar algunas etiquetas propias del lenguaje HTML.
1.1.1.1. Abre el programa Nvu.
2.2.2.2. Comprueba que esté desmarcada la casilla de Usar estilos CSS en lugar de
elementos y atributos HTML. Si no es así, desmárcala.
3.3.3.3. Cierra el programa.
ELEMENTOS DE LA VENTANA DE TRABAJO DEELEMENTOS DE LA VENTANA DE TRABAJO DEELEMENTOS DE LA VENTANA DE TRABAJO DEELEMENTOS DE LA VENTANA DE TRABAJO DE NNNNVUVUVUVU

Barra de título.
A la izquierda de esta barra aparece el título de la página Web que estamos
editando y el nombre del archivo en caso de que ya lo hayamos guardado con
anterioridad. A la derecha los botones de control de la venta minimizar,
maximizar/restaurar y cerrar.
Barra de menús.
A través de estos menús podemos acceder a todas las opciones del
programa.
Barra de redacción.
En ella aparecen botones con las opciones de uso más habitual que se
encuentran en la barra de menú. A través de estos botones accedemos más
rápidamente a estas opciones.
Barras de formato.
Con botones que nos permiten acceder a opciones más básicas de formato de
texto y párrafos. Estas son similares a las de cualquier procesador de textos.
Bajo esta tenemos otra barra con más opciones de formatos y además de
otras relacionadas con el formato aplicando estilos y las capas.
Ventana de administración de sitios Web.
Si no se encuentra visible pulsar F9.
Esta situada a la izquierda y en ella configuraremos
nuestros sitios Web, para:
Publicar en Internet nuestras Webs.
Editar directamente las paginas ya publicadas
sin necesidad de tenerlas guardadas en
nuestro disco local.

Ventana de área de edición.
En esta área es donde diseñáramos y editaremos nuestras páginas. Es
nuestro espacio de trabajo. Cada página que estemos editando se mostrara
en esta área, pudiendo cambiar de una a otra mediante las pestañas que se
muestran en la parte superior con el titulo de cada página. También podemos
mostrar las reglas en esta área, que nos ayudaran a dimensionar diversos
objetos.
Barra de modo de edición.
Normal (o modo WYSIWYG).
Etiquetas HTML (muestra de forma esquemática las etiquetas
utilizadas).
Código Fuente (acceso al código HTML de la página).
Vista Preliminar (Como se vería la pagina en el navegador).
Barra de estado.
Es la barra de herramientas situada en la parte inferior de cualquier ventana de
Nvu. Muestra las etiquetas que rodean la posición actual del cursor.

A continuación, podemos ver las etiquetas necesarias para la creación de páginas
Web, pero nnnno nos preocupemoso nos preocupemoso nos preocupemoso nos preocupemos, el programa nos las crea de forma automática,
aunque si utilizamos la pestaña podemos crear o modificar nuestra
página, utilizando dicho código.
ESTRUCTURA DE UNA PÁGINA WEB ETIQUETAS DE FORMATO
<HTML>
<HEAD>
<TITLE>
Título de la página
</TITLE>
</HEAD>
<BODY>
Aquí dentro va el cuerpo del programa
</BODY>
</HTML>
<P> Sirve para separar en párrafos
dejando línea en blanco
<BR> Sirve para separar parrafos sin
dejar linea en blanco
<BR><P> Sirve para introducir lineas en
blanco
<HI > y </HI > Sirven para hacer
cabeceras
<CENTER> y </CENTER> sirve para
centrar el texto
<HR> Raya horizontal separadora
<B> y </B> Sirve para poner negrita
<I> y </I> Sirve para poner cursiva
DESORDENADA ORDENADA DE DEFINICIONLISTAS
<UL>
<LI> Una cosa
<LI> Otra cosa
<LI> Otra mas
<LI> Etc
</UL>
<OL>
<LI> Primera cosa
<LI> Segunda cosa
<LI> Tercera cosa
<LI> Etc
</OL>
<DL>
<DT>Termino A Definir <DD>Definicion
</DL>
ESTRUCTURA GENERAL: <A
HREF="#MARCA">YYY</A>
<A HREF="#MARCA">YYY</A>
Donde MARCA podrá ser cualquier palabra
YYY será el texto o palabra que aparecerá en forma de hipertexto.
En el sitio exacto a donde queremos saltar pondremos la siguiente
etiqueta:
<A NAME="MARCA"></A>
Por ejemplo queremos enlazar con mipag2.html:
<A HREF="mipag2.html'>YYY</A>
Si queremos enlazar con la misma página pero en algún sitio
concreto:
<A HREF="mipag2.html#MARCA"> YYY</A>
y en el destino concreto donde quiero ir pondremos
<A NAME="MARCA"></A>
Por ejemplo quiero ir a la página principal de Nestcape:
<A HREF="http://home.nestcape.com'>YYY</A>
ETIQUETAS PARA ENLACES
CON OTRAS PÁGINAS
<A HREF= "mailto: dirección de email">Texto de enlace</A>
<FONT SIZE=(Nº del 1 al 7)> y </FONT> Para dar tamaño al
texto que va en medio.
<FONT FACE="nombre de fuente"> y </FONT> Para cambiar
tipo de letra.
<FONT COLOR="#XXYYZZ"> y </FONT> Para cambiar
color del texto.
LA ETIQUETA FONT
#FF0000 - ROJO
#00FF00 - VERDE
#0000FF - AZUL
#FFFFFF- BLANCO
#000000 -
NEGRO
#FFFF00 -
AMARILLO
ETIQUETAS PARA FONDOS
<BODY BGCOLOR="#XXYYZZ"> Para poner un fondo de página con color.
Dentro de esta etiqueta puede añadirse color a los textos (TEXT), a los enlaces (LINK),
a los enlaces visitados (VLINK) y a los enlaces activos (ALINK).
<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK= "#XXYYZZ"
ALINK="#XXYYZZ">

ETIQUETAS PARA IMAGENES
<IMG SRC="imagen.gif"> Para introducir una imagen en nuestra página web.
<IMG SRC="imagen.gif" ALING=TOP> Para introducir una imagen con un texto alineado arriba.
<IMG SRC="imagen.gif" ALING=MIDDLE> Para introducir una imagen con un texto alineado en medio
<IMG SRC="irnagen.giF" ALING=BOTTOM> Para introducir una imagen con un texto alineado abajo.
<IMG SRC="irnagen.gif" ALING=RIGHT> Para alinear la imagen a la derecha.
<IMG SRC="imagen.gif" ALING=LEFT> Para alinear la imagen a la izquierda.
<IMG SRC="imagen.gif" WIDTH=nº HEIGHT=nº>Para cambiar el tamaño de la imagen tanto de ancho
como de alto.
<A HREF="rnipag2.htrnl"><IMG SRC="imagen.gif"></A> Para introducir una imagen como enlace a
otra página, en este caso mipag2.html
ETIQUETAS PARA FONDOS CON IMAGEN
<BODY BACKGROUND="imagen.gif"> Para introducir una imagen como fondo
<BODY BACKGROUND="imagen.jpg"> Para introducir una imagen como fondo
ETIQUETAS PARA TABLAS
<TABLE BORDER> Resto de etiquetas </TABLE> Para crear una tabla con bordes
<TR> y </TR> Para formar cada fila de la tabla
<TD> y </TD> Para formar las celdas de la tabla
<CAPTION> y </CAPTION> Sirven para poner un titular a la tabla.
<TABLE BORDER= nº> Para variar el espesor del borde de la tabla.
<TH> y </TH> Sirven para hacer celdas de cabecera, es decir, su contenido sale en negrita y centrado.
<TD ALIGN=CENTER> y </TD> Para alinear el contenido de una celda en el centro.
<TD ALIGN=RIGHT> y </TD> Para alinear el contenido de una celda a la derecha.
<TD ALIGN=LEFT> y </TD> Para alinear el contenido de una celda a la izquierda.
<TD VALIGN=TOP> y </TD> Para alinear verticalmente el contenido de una celda arriba.
<TD VALIGN=BOTTOM> y </TD> Para alinear verticalmente el contenido de una celda abajo.
<TABLE WIDTH= nº %> Para variar el ancho de las celdas.
<TABLE HEIGHT= nº %> Para variar la altura de las celdas.
<TD COLSPAN= nº> Para que una celda se extienda sobre determinadas columnas.
<TD ROWSPAN= nº> Para que una celda se extienda sobre determinadas filas.
<TABLE BORDER CELLSPACING= nº> Para variarla separación entre celdas.
<TABLE BORDER CELLPADDING= nº> Para variar la separación entre el borde y el contenido dentro de
las celdas.
MARQUESINAS (TEXTO EN MOVIMIENTO)
<MARQUEE> Texto que se desplaza </MARQUEE>
<MARQUEE WIDTH=50% HEIGHT=60>Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una
altura de 60 pixels </MARQUEE>
<MARQUEE WIDTH=50% HEIGHT=60>Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una
altura de 60 pixels </MARQUEE>
BEHAVIOR Define de que manera se va a efectuar el desplazamiento del texto. Si es igual a SCROLL (el
valor por defecto), el texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por él, y vuelve a
empezar. Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ahí. Si
es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los límites de la
marquesina.

HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a HTML

Similar a HTML (20)

HTML