Semana06 07

Fundamentos HTML
Qué es HTML?
Taller de Computación e Informática Básica
• Es un lenguaje de programación muy sencillo que permite

Linux describir hipertexto, es decir, texto presentado de forma
estructurada y agradable, con enlaces, inserciones
multimedia (gráficos, sonido...), texto con estructura lógica en
el contenido títulos, párrafos de texto normal, enumeraciones,
definiciones, etc.
Fundamentos HTML • Los documentos HTML son ficheros de texto (ASCII) que
se pueden crear con cualquier editor de texto (notepad, vi,
6
emacs, etc).
Ing. Jesús Bernardo Olavarría Paz
Fundamentos HTML Fundamentos HTML
Características del lenguaje HTML? Estructura HTML
<HTML>
• Las siguientes características son: <HEAD>
– El Web tenía que ser distribuido: La información repartida en <TITLE>Mi primera pagina</TITLE>
páginas no muy grandes enlazadas entre sí. </HEAD>
<BODY>
– El Web tenía que ser hipertexto y debía ser fácil navegar por él. <CENTER><H1>Mi primera
– Tenía que ser compatible con todo tipo de ordenadores (PCs, pagina</H1></CENTER>
<HR>
Macintosh, estaciones de trabajo...) y con todo tipo de sistemas
<P>Hola Mundo…
operativos (Windows, MS-DOS, UNIX, MAC-OS,...). </BODY>
– Debía ser dinámico: el proceso de cambiar y actualizar la </HTML>
información debía ser ágil y rápido.
Ing. Jesús Bernardo Olavarría Paz Ing. Jesús Bernardo Olavarría Paz
Cabeceras Cuerpo
• Uno de los elementos que se pueden incluir aquí son los META • Los parámetros que admite la etiqueta <BODY>:
Parámetros Descripción
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]"> BACKGROUND Permite definir un gráfico de fondo para la página.
BGCOLOR Permite definir el color de fondo de la página.
Propiedad Utilidad BGPROPERTIES Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá
inmóvil aunque utilicemos las barras de desplazamiento.
AUTHOR Autor de la página.
TEXT Cambia el color del texto.
GENERATOR Herramienta utilizada para hacer la página.
LINK Cambia el color de un enlace no visitado (por defecto azul).
CLASSIFICATION Palabras que permite clasificar la página dentro de un buscador
jerárquico (como Yahoo). VLINK Cambia el color de un enlace ya visitado (por defecto púrpura).
KEYWORDS Palabras clave por las que encontrarán la página en los buscadores. ALINK Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto
rojo).
DESCRIPTION Descripción del contenido de la página.
LEFTMARGIN Especifican el número de pixels que dejará de margen entre el borde de la ventana
TOPMARGIN y el contenido de la página. Se suelen utilizar para dejarlos a cero.
MARGINWIDTH
Más o menos equivalentes a los anteriores, pero éstos funcionan en Netscape.
MARGINHEIGHT
1
Formateo simple Formateo simple
<html> • pueden establecer varias categorías dentro de las etiquetas usadas

<head>
para formatear el texto.
<title>Formateo simple</title>
</head> Formato de párrafo
<body>
Etiqueta Utilidad
<h1>Formateo simple</h1>
<h2>Programador para LINUX</h2> <p> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.
<b>Negrita</b> tipo: <CENTER> ... Permite centrar todo el texto del párrafo.
</CENTER>
<p><tt>rm - rf /*</tt>
<PRE WIDTH=x> ... Representa el texto encerrado en ella con un tipo de letra de paso fijo. Muy útil a la
<p>Curso: </PRE> hora de representar código fuente. El parámetro WIDTH especifica el número
<h2>Taller de Computación</h2> máximo de caracteres en una línea.
<b>Ciclo: </b> II <br> <DIV ALIGN=x> ... Permite justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha
<i>Tipo<font color="red">Rojo</font> </DIV> (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY )
Botón</i>. <ADDRESS> ... Para escribir direcciones (de esas donde vive la gente, no electrónicas).
</body> </ADDRESS>
</html> <BLOCKQUOTE> ... Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a izquierda
</BLOCKQUOTE> como a derecha, razón por la que se usa habitualmente.
Formateo simple Formateo simple
Las 6 cabeceras Cambiando el tipo de letra

Etiqueta Utilidad
Etiqueta Resultado
<B> ... </B> Pone el texto en negrita.
<H1> ... </H1>
Cabecera de Nivel 1 <I> ... </I> Representa el texto en cursiva.
<U> ... </U> Para subrayar algo.
<H2> ... </H2> Cabecera de Nivel 2 <S> ... </S> Para tachar.
<H3> ... </H3> Cabecera de Nivel 3 <TT> ... </TT> Permite representar el texto en un tipo de letra de paso fijo.
<SUP> ... </SUP> Letra superíndice.
<H4> ... </H4> Cabecera de Nivel 4
<SUB> ... </SUB> Letra subíndice.
<H5> ... </H5> Cabecera de Nivel 5 <BIG> ... </BIG> Incrementa el tamaño del tipo de letra.
<H6> ... </H6> Cabecera de Nivel 6 <SMALL> ... </SMALL> Disminuye el tamaño del tipo de letra.
<BLINK> ... </BLINK> Hace parpadear el texto.
Formateo simple Caracteres especiales
Formato de frase Caracteres extendidos en HTML

Etiqueta Utilidad
Código Resultado
<CITE> ... </CITE> Para citar un texto ajeno. á, Á, é, É,... á, Á, é, É, í, Í, ó, Ó, ú y Ú
<CODE> ... </CODE> Para escribir código fuente. ñyñ ñyñ
<STRONG> ... </STRONG> La cosa es importante. ¿ ¿
<EM> ... </EM> Para dar énfasis. ¡ ¡
<KBD> ... </KBD> Texto tecleado por el usuario.
º º
<VAR> ... </VAR> Representar variables de un código.
ª ª
<SAMP> ... </SAMP> Para representar una serie de caracteres literalmente.
™ o ™o™
<ABBR> ... </ABBR> Abreviaturas.
© ©
Otros elementos ® ®

Etiqueta Utilidad (espacio en blanco que no puede ser usado para saltar de
línea)
<HR> Inserta una barra horizontal.
<BR> Salto de línea.

 Comentarios.
2
Caracteres especiales Enlaces
Caracteres de control • Un enlace es una zona de texto o gráficos que si son seleccionados
nos trasladan a otro documento de hipertexto o a otra posición
Código Resultado
dentro del documento actual.
< <
La etiqueta <A>
> >
Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que
& &
encerremos entre <A> y </A> , ya sea texto o imágenes.
" "
Para que el enlace sirva para algo debemos especificarle una

dirección. Lo haremos de la siguiente manera:
<A HREF="direccion">Siguiente</A>
Enlaces Enlaces
<html>
<head> Las URLs
<title>Enlace</title> Una URL nos indica tanto una dirección de Internet como el servicio que
</head>
<body> esperamos nos ofrezca el servidor al que corresponde la dirección.
<a href="pagina2.html" target="_blank">Siguiente</a>
</body>
</html> servicio://máquina:puerto/ruta/fichero@usuario
Enlaces Enlaces
Donde el servicio podrá ser uno de los siguientes: Anclas

Servicio Descripción Nos permite acceder a una posición del documento HTML .
http Es el servicio invocado para transmitir páginas web y el que usaremos normalmente en
los enlaces. <A NAME="ancla">
https Es una innovación sobre el anterior, que nos permite acceder a servidores
(generalmente comerciales) que nos ofrecen el uso de técnicas de
encriptación para proteger los datos que intercambiemos con él de terceras Ejemplo:
personas.
ftp Permite trasmitir ficheros desde servidores de ftp anónimo. Si no le pedimos un
fichero sino un directorio, en general el navegador se encargará de mostrarnos el <A HREF="#ancla“> ejemplo01</A>
contenido del mismo para que podamos escogerlo cómodamente. Utilizando la @
podremos acceder a servidores privados.
mailto Para poder mandar un mensaje. Por ejemplo, la URL añadiremos el nombre del ancla al URL así:
mailto:multivac@idecnet.com me mandaría un mensaje a mí.
news Para poder acceder a foros de discusión (mal traducidos a veces como grupos de noticias). Se
indica el servidor y el grupo. Por ejemplo news://news.ibernet.es/es.comp.demos nos <A HREF="enlaces.html#ancla">ejemplo02</A>
conectaría con el foro es.comp.demos en el servidor nacional de Telefónica.
telnet Nos permite conectarnos con otros ordenadores y entrar en ellos como si nuestro ordenador
fuese una terminal del mismo.
3
Listas Listas
<html> • Existen varios tipos de listas en HTML.

<head>
<title>Lista de frutas</title> Listas desordenadas
</head>
<body>
La etiqueta <UL> nos permite presentar listas de elementos sin
<h1>Listas de Frutas</h1> orden alguno.
<ul>
<li>Naranjas
<li>Peras <UL>
<li>Uvas <LI>Primer elemento
<li>Fresas
<li>Platanos <LI>Segundo elemento
<li>Mandarinas </UL>
</ul>
</body>
</html>
Listas Listas
La etiqueta <UL> admite estos parámetros: Listas ordenadas

La etiqueta <OL> nos permite presentar listas de elementos
Parámetro Utilidad
ordenados de menor a mayor.
COMPACT Indica al navegador que debe representar la lista
de la manera más compacta posible.
TYPE="disc", "circle", "square" Indica al navegador el dibujo que precederá a <OL>
cada elemento de la lista. Para mayor flexibilidad
se admite también como parámetro de <LI>. <LI>Primer elemento
<LI>Segundo elemento
</OL>
Listas Listas
La etiqueta <OL> admite estos parámetros: Listas de definiciones

Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener
Parámetro Utilidad
COMPACT
como objetivo presentar una lista de definiciones. Esto se hace por
Indica al navegador que debe representar la lista de la
manera más compacta posible. medio de las etiquetas <DT> y <DD>:
TYPE="1", "a", "A", "i", "I" Indica al navegador el tipo de numeración que precederá a
cada elemento de la lista. Para mayor flexibilidad se admite
también como parámetro de <LI>. <DL>
START="num" Indica al navegador el número por el que se empezará a <DT>Primer elemento<DD>Es un elemento 1.
contar los elementos de la lista.
<DT>Segundo elemento<DD>Es un elemento 2.
VALUE="num" Atributo de <LI>, actúa como START pero a partir de un elemento
predeterminado. </DL>
La etiqueta <DL> sólo admite como parámetro el ya conocido

COMPACT,
4
Imágenes Imágenes
<html> • Para incluir gráficos e imágenes en nuestras páginas utilizaremos la

<head>
<title>Images - Taller</title> etiqueta.
</head> <IMG>
<body>
<img src="images/linux.jpg" width="129" height="150" /> De esta manera:
</body>
</html>
<IMG SRC="fichero_grafico" ALT="descripcion">
Imágenes Tablas
<html>
Alineación respecto al texto <head>
<title>Tablas - Taller</title>
</head>
<body>
Valor de ALIGN Utilidad
<table border="1">
TOP Coloca el punto más alto de la imagen coincidiendo con más <tr>
alto de la línea de texto actual. <td>1.1</td>
<td>1.2</td>
MIDDLE Alinea el punto medio (en altura) de la imagen con la base del <td>1.3</td>
texto. <td>1.4</td>
</tr>
BOTTOM(Por defecto) Alinea el punto más bajo de la imagen con la base del texto. <tr>
<td>2.1</td>
LEFT Coloca la imagen a la izquierda del texto.
<td>2.2</td>
RIGHT Coloca la imagen a la derecha del texto. <td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</table>
</body>
Ing. Jesús Bernardo Olavarría Paz </html> Ing. Jesús Bernardo Olavarría Paz
Tablas Tablas
• Las tablas son posiblemente la manera más clara de Atributos de TABLE

organizar la información.
Atributos Descripción
Especifica el grosor del borde que se dibujará alrededor de las celdas.
<TABLE> BORDER
Por defecto es cero, lo que significa que no dibujará borde alguno.
<TR>
CELLSPACING Define el número de pixels que separarán las celdas.
<TD>1,1</TD>
Especifica el número de pixels que habrá entre el borde de una celda y
<TD>1,2</TD> CELLPADDING
su contenido.
<TD>1,3</TD>
Especifica la anchura de la tabla. Puede estar tanto en pixels como en
</TR>
WIDTH porcentaje de la anchura total disponible para él (pondremos "100%" si
<TR> queremos que ocupe todo el ancho de la ventana del navegador).
<TD>2,1</TD>
Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro
<TD>2,2</TD> ALIGN
(CENTER).
<TD>2,3</TD>
</TR>
</TABLE>
5
Tablas Tablas
Definir las filas Definir las celdas

Cada fila se define con una etiqueta TR, que tiene los Cada celda se define con una etiqueta TD y TH, que tiene los
siguientes atributos : siguientes atributos :
Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT)
ALIGN
Alinea el contenido de las celdas de la fila horizontalmente a o centro (CENTER).
ALIGN
izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro
VALIGN
Alinea el contenido de las celdas de la fila verticalmente (MIDDLE).
VALIGN
arriba (TOP), abajo (BOTTOM) o centro (MIDDLE). Especifica la anchura de la celda. También se puede especificar tanto en pixels como
WIDTH en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje
respecto al ancho total de la tabla (no de la ventana del navegador).
NOWRAP Impide que, en el interior de la celda, se rompa la línea en un espacio.
Especifica el número de celdas de la fila situadas a la derecha de la actual que se
COLSPAN unen a ésta (incluyendo la celda en que se declara este parámetro). Es por defecto
uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha.
Especifica el número de celdas de la columna situadas debajo de la actual que se
ROWSPAN
unen a ésta.
Fundamentos HTML
Tablas
Titulo de una tabla

El titulo se define con una etiqueta CAPTION:
<TABLE BORDER=1>
<CAPTION> Ejemplo de tablas </CAPTION>
...
</TABLE>

Semana06 07

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Semana06 07

Transféré par

Droits d'auteur :

Formats disponibles

Fundamentos HTML

• Es un lenguaje de programación muy sencillo que permite

Ing. Jesús Bernardo Olavarría Paz

Ing. Jesús Bernardo Olavarría Paz

Fundamentos HTML Fundamentos HTML

Características del lenguaje HTML? Estructura HTML

Fundamentos HTML Fundamentos HTML

Formateo simple Formateo simple

<html> • pueden establecer varias categorías dentro de las etiquetas usadas

Fundamentos HTML Fundamentos HTML

Formateo simple Formateo simple

Las 6 cabeceras Cambiando el tipo de letra

Fundamentos HTML Fundamentos HTML

Formateo simple Caracteres especiales

Formato de frase Caracteres extendidos en HTML

Otros elementos &reg; ®

<BR> Salto de línea.

Caracteres especiales Enlaces

Para que el enlace sirva para algo debemos especificarle una

Fundamentos HTML Fundamentos HTML

Fundamentos HTML Fundamentos HTML

Donde el servicio podrá ser uno de los siguientes: Anclas

<html> • Existen varios tipos de listas en HTML.

Fundamentos HTML Fundamentos HTML

La etiqueta <UL> admite estos parámetros: Listas ordenadas

Fundamentos HTML Fundamentos HTML

La etiqueta <OL> admite estos parámetros: Listas de definiciones

La etiqueta <DL> sólo admite como parámetro el ya conocido

<html> • Para incluir gráficos e imágenes en nuestras páginas utilizaremos la

Fundamentos HTML Fundamentos HTML

Fundamentos HTML Fundamentos HTML

• Las tablas son posiblemente la manera más clara de Atributos de TABLE

Definir las filas Definir las celdas

Titulo de una tabla

Ing. Jesús Bernardo Olavarría Paz

Vous aimerez peut-être aussi

Otros elementos ® ®