PPT1.4 - Introduccion A HTML

Analista Programador
PROGRAMACIN I

INTRODUCCION A HTML

Qu es HTML?
Una de las funciones bsicas del navegador de
Internet es recibir informacin e interpretarla para
mostrarla en la pantalla.

Las pginas que se visualizan estn formadas,
fundamentalmente, por textos e imgenes, con una
estructura y un formato especficos.

El HTML (Hipertext Markup Language) es lo que
nos permite decirle al navegador cmo debe
mostrar la informacin: formato de los textos,
colores, orden de los prrafos, etc.
Fuente: http://www.elcodigo.net/cgi-bin/DBread.cgi?tabla=herramientas&campo=0&clave=47&info=1
Qu es HTML?
A menudo observamos como una misma pgina
puede visualizarse de manera diferente
(colores, ancho de tablas, formato de textos,
etc.) en funcin del navegador que se utilice.

HTML no es una forma de codificar la
informacin, sino de especificar el formato que
debe darse a la informacin. Por ejemplo,
podemos indicar al navegador que muestre la
palabra "Hola!. Pero, cmo decirle al
navegador que la muestre de color rojo y
centrada? El HTML es la respuesta.
Pginas HTML
Una pgina HTML es bsicamente un
archivo de texto con extensin .htm o
.html que se ejecuta utilizando un
navegador de internet. Por ejemplo
index.htm
El texto incluido en el archivo es
interpretado por el navegador y mostrado
en pantalla.
Concepto de etiqueta (TAG)
El HTML describe el aspecto visual que
debe tener una pgina mediante la
utilizacin de etiquetas (tags).
Las etiquetas le indicarn al navegador la
posicin relativa de los elementos de la
pgina, su tamao, las tipografas y
colores a utilizar, etc.

Existen dos tipos de etiquetas:
Etiquetas Vacas
Etiquetas Contenedoras
Etiquetas Vacas
Se utilizan para introducir saltos de lnea,
lneas horizontales, y otros elementos no
asociados al formato de textos o imgenes
Formato: <etiqueta>
Etiquetas contenedoras
Dan un formato al texto o porcin del
documento que engloban. Este tipo de
etiquetas tiene una marca inicial, y una marca
final igual que la inicial, pero con el carcter
"/".
Todo lo que est contenido entre ambas
marcas quedar sujeto al formato indicado
por la etiqueta
Formato: <etiqueta> ..</etiqueta>
Etiquetas Contenedoras
Por ejemplo, podemos mostrar la palabra
"Hola!" en cursiva de la siguiente forma:
<i>Hola!</i>
La mayora de estas etiquetas pueden, a su
vez, contener otras etiquetas, de cualquiera
de los dos tipos
Por ejemplo, para mostrar la palabra "Hola!"
en cursiva y negrita:
<i><b>Hola!</b></i>
Etiqueta - Atributos
Las etiquetas pueden especificar, por
ejemplo, que cierta palabra aparezca en
negrita. Pero si queremos que cierta
palabra aparezca de color rojo,
necesitamos suministrar un atributo: el
color.
La mayora de las etiquetas tienen
parmetros para indicar mltiples
aspectos del formato, como el color, el
tamao, la posicin, etc.
Etiqueta - Atributos
El formato de una etiqueta con parmetros es
el siguiente:

<etiqueta parametro1="valor1" parametro2="valor2" ... > ... ..</etiqueta>

Por ejemplo, para mostrar la palabra "Hola!"
en rojo, utilizamos la etiqueta font con el
parametro color igual a red:

<font color="red">Hola!</font>

Estructura de pgina HTML
<HTML>
<HEAD>

Informacin adicional que contiene la pgina (titulo, autor,
otras caractersticas, etc). No se muestra en el
navegador.
</HEAD>

<BODY>
Contenido de la pgina - La ve el usuario
</BODY>
</HTML>
Etiqueta Head (cabezal)
Es el cabezal de la pgina HTML.
Contiene informacin para buscadores o
para el propio navegador.
No es visible por el usuario (excepto el
ttulo)
Puede contener meta informacin (meta
data). Describen el contenido de una
pgina. La metadata se utiliza
frecuentemente para indexar informacin
en una base de datos para localizar
fcilmente un documento, archivo u
objeto.
Head - Titulo
<HEAD>
<TITLE> Nombre de la pgina </TITLE>
.......
</HEAD>

Es muy importante poner el ttulo.
Se despliega en la barra del navegador.
Aparece cuando se imprime.
Aparece como ttulo en los motores de
bsqueda.
Slo puede haber un ttulo en cada pgina.

Head Ejemplo de MetaData
<HEAD>
<TITLE> Nombre de la pgina </TITLE>

<META name=Keywords content=palabras
claves>

<META name=Description content=este
sitio contiene informacin acerca de ...>

<META name=Author content=nombre y e-
mail>

<META name =Copyright content =derechos
reservados>
</HEAD >

BODY
Debe existir la etiqueta BODY de cierre.
<BODY> </BODY >

Contiene el documento en s.

Lo que est fuera de BODY puede ser no
representable en algunos navegadores.

Sin embargo es ledo e interpretado (caso
lenguajes de script).

Body - Atributos
bgcolor: color de fondo del documento HTML.
El valor debe estar en formato Hexadecimal o por el nombre
del color, p.ej.: #000000 Black, #FFFFFF White,
#FF0000 Red

background: imagen de fondo del documento.

text: color del texto en el documento.

Estos atributos no son recomendados en la versin
4.01 de HTML, se recomienda el uso de hojas de
estilos css, ya que se refieren a la apariencia del
documento.

Ejemplo Body con atributos
<html>
<head>
<title> Pagina de prueba atributos del body </title>

</head>

<body bgColor="red" text="blue >

Texto de prueba

</body>

</html>
Ejemplo Body con atributos
<html>
<head>

</head>

<body text="blue background="fondo.gif">

Texto de prueba

</body>

</html>
Saltos de lnea y comentarios
Para que en el navegador aparezca un
salto de lnea debe ingresarse la siguiente
etiqueta vaca: <BR>

Ejemplo: Lo siguiente va abajo <BR>
BIENVENIDOS A P1

Los comentarios son porciones de texto
incluidas en el cdigo, pero que no se
interpretan por el navegador.


Ejemplo
<html>
<head>

</head>

<body bgColor="red" text="blue">

<! Esto es una prueba de texto con salto de linea -->
Lo siguiente va abajo <BR>
BIENVENIDOS A P1

</body>

</html>
BODY - ENCABEZADOS
Definen distintos tamaos de texto con destaque
(negrita).
Las etiquetas se nombran Hn siendo n un
nmero entre 1 y 6.
A menor valor de n, mayor destaque tiene el
texto.

Ejemplos:
<h1> .... </h1>
<h2> .... </h2>
<h3> .... </h3>
<h4> .... </h4>
<h5> .... </h5>
<h6> .... </h6>

Ejemplo
<HTML>
<HEAD>
<TITLE> Pgina de Prueba Encabezados </TITLE>
</HEAD>
<BODY bgColor=green>
<H1> Encabezado H1 </H6>

TEXTO DE PRUEBA PRIMERA FILA <BR>
TEXTO DE PRUEBA SEGUNDA FILA

</BODY>
</HTML>

Formateo de texto
Existen varias etiquetas HTML que
permiten dar formato al texto que
queremos que se muestre en nuestra
pgina.
A continuacin veremos alguna de las
principales etiquetas utilizadas en este
sentido.
Todas las etiquetas presentadas son
etiquetas contenedoras
Formateo de texto
Formato fsico

<I> Cursivas </I>
<B> Negritas </B>
<TT> Tipo de letra monoespaciada de mquina de escribir </TT>
<U> Subrayado </U>
<S> Tachado </S>
<BIG> Tamao ms grande que el del texto circundante </BIG>
<SMALL> Tamao ms pequeo </SMALL>
<SUB> Subndice </SUB>
<SUP> Superndice/exponente </SUP
<BLINK> Texto intermitente</BLINK>

Ejemplo
<HTML>
<HEAD>

</HEAD>

<BODY>
<I> Cursivas <I><BR>
<B> Negritas </B><BR>
<TT> Tipo de letra monoespaciada de mquina de escribir </TT><BR>
<U> Subrayado </U><BR>
<S> Tachado </S><BR>
<BIG> Tamao ms grande que el del texto circundante </BIG><BR>
<SMALL> Tamao ms pequeo </SMALL><BR>
Subindice A<SUB>0</SUB><BR>
Superndice/Exponente 2<SUP>3</SUP> A<SUP>Superindice</SUP><BR>
<BLINK> Texto intermitente</BLINK>
</BODY>
</HTML>
ETIQUETA FONT
Permite, a travs de sus atributos, definir
propiedades de la fuente utilizada como
ser tipo, tamao, color, etc.

Uso: <FONT atributo=..> texto </FONT>

Ejemplo:
<FONT color="blue"> TEXTO EN COLOR AZUL </FONT>
ETIQUETA FONT
Atributos
face=Tipo de fuente Ej: face="Courier
size=Tamao Ej: size=5
color=color Ej: color=blue
Align=alineacion Ej: align=center

Ejemplo:
<FONT face=Courier size=24 color=blue align=center> TEXTO </FONT>
Nota: Esta etiqueta no es recomendada en la versin 4 de HTML.
En su lugar se recomienda utilizar hojas de estilo. Veremos el
tema ms adelante en estas transparencias.
ETIQUETA P
El texto de una pgina puede agruparse
en prrafos. Para ello, el texto de cada
uno de los prrafos debe insertarse entre
las etiquetas <p> y </p>.
No es necesario insertar la etiqueta <br>
para que un nuevo prrafo aparezca
debajo del anterior, ya que las etiquetas
<p> y </p> hacen que se cambie de lnea
automticamente.
ETIQUETA P
Atributos
align=valor Permite indicar la alineacin.
Los valores pueden ser left (izquierda), right
(derecha), center (centrado) o justify
(justificado).
Ejemplo:
<p align="center">Bienvenidos a P1.</p>
Lneas separadoras
Se utiliza etiqueta vaca <HR>
Se emplea para representar una lnea
horizontal.
Atributos:
ALIGN="left" , ALIGN="right" , para alinearla a
la izquierda o a la derecha. Por defecto
aparece centrada
WIDTH="66%" SIZE="3", para especificar el
ancho en % y el alto en pxels
COLOR=Red" , para especificar el color

Ejemplo lnea separadora
<HR COLOR = "Red" ALIGN="left" WIDTH="66%" SIZE="3">
Manejo de imgenes
La etiqueta vaca <IMG> servir para
situar imgenes en una pgina.
Requiere un origen de datos obligatorio
dado por el atributo SRC=ubicacin de la
imagen
Ejemplo:
<IMG src=caricatura.jpg alt=descripcion>
Etiqueta IMG Otros Atributos
width="x Predetermina el ancho en pixles que tendr
tu imagen.
height="x Predetermina el alto en pixles que tendr tu
imagen.
border="x" Para aadir o eliminar un borde, donde la x
ser un valor numrico.
align="xxx Alinear una imagen horizontal y/o
verticalmente (left, right, top, middle, bottom)
alt="descripcin_de_la_imagen Permite describir la
imagen para los navegadores de slo texto, as como
etiquetar la imagen antes de que se cargue en una
pgina.
Nota: El atributo alt es obligatorio para que la pgina. sea validada en la versin
4.01 de HTML.
Etiqueta IMG - Ejemplo
<IMG SRC=caricatura.jpg WIDTH="640"
HEIGHT="480" BORDER="3"
ALIGN="Top" ALT="Pinky y Cerebro">
Vnculos / Enlaces
Un enlace aparece generalmente como un texto azul
subrayado y cuando situamos el cursor sobre l se
transforma en una mano con el dedo ndice extendido
Si pulsamos sobre el enlace saltamos a otra parte del
documento, a otro documento situado en cualquier
lugar, o incluso se abre el programa de correo para
enviar un mensaje a la direccin indicada.
En general los enlaces tienen la siguiente estructura:
<A HREF="URL"> Texto del enlace</A>
El texto del enlace es lo que se visualizar en el
navegador.
La URL es la direccin donde apunta el enlace. A
continuacin veremos los tipos de URL que podemos
utilizar

Vnculos / Enlaces Tipos de URL
Enlace a otro lugar del mismo documento
La URL se sustituye por un marcador en la misma
pgina.
El marcador puede ser texto colocado en el lugar al
que queremos saltar. No importa lo que sea ya que
no se ver.

Ejemplo:
<A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar,
debemos poner la siguiente etiqueta:

<A NAME="inicio"> </A>

Enlace a otro lugar del mismo documento - Ejemplo

<HTML>
<HEAD>

</HEAD>

<BODY>
<A NAME="inicio"> </A>
<I> Cursivas <I><BR>
<B> Negritas </B><BR>
<TT> Tipo de letra monoespaciada de mquina de escribir </TT><BR>
<U> Subrayado </U><BR>
<S> Tachado </S><BR>
<BIG> Tamao ms grande que el del texto circundante </BIG><BR>
<SMALL> Tamao ms pequeo </SMALL><BR>
Subindice A<SUB>0</SUB><BR>
Superndice/Exponente 2<SUP>3</SUP> A<SUP>Superindice</SUP><BR>
<BLINK> Texto intermitente</BLINK> <BR>
<HR COLOR = "Red" ALIGN="left" WIDTH="66%" SIZE="3">
<FONT face=Courier size=24 color=blue align=center> TEXTO </FONT> <BR>
<FONT face=Courier size=16 color=red align=center> Texto de prueba </FONT> <BR>
<A HREF="#inicio"> Ir al Inicio</A>

</BODY>
</HTML>
Enlace a otra pgina local
La URL se dar de forma relativa.
Por ejemplo si tenemos dos pginas en el mismo
directorio pagina1.htm y pagina2.htm y queremos
poner un enlace desde la pagina1.htm a la
pagina2.htm debemos escribir:
<a href="pagina2.htm">Ir a pagina2</a>

En caso de querer ir a un sitio concreto de la
pagina2.htm debemos indicarlo de la siguiente
manera:

<a href="pagina2.htm#sitio>Ir a sitio de la pgina 2</a>

Enlace a pgina de Internet
La URL debe darse de forma absoluta, tal como la
ves en la ventana de direccin del navegador, es
decir:
<A HREF="http://www.ort.edu.uy"> Sitio ORT </A>

Enlace como imagen
Con frecuencia se emplean imgenes como
enlaces.
Para que una imagen sea un enlace hay que
colocarla en el lugar del texto del enlace
Ejemplo:

<A HREF=" #inicio"><img src="gifs/imagen.gif"></A>

Enlace con una direccin de correo
Al hacer clic sobre el enlace se abre el
programa de correo que est configurado por
defecto en el PC, con la direccin en el
campo correspondiente

<A HREF="mailto: baldassini@gmail.com"> Enviar
correo a Jorge </A>

Enlace que se abre en nueva ventana
Si el resultado que queremos es que la pgina a
enlazar aparezca en una nueva ventana del
navegador, debemos utilizar el atributo
target="nombre" en el tag <A>
Ejemplo:

<A HREF=http://www.ort.edu.uy target=nueva> Sitio ORT </A>

Listas
En html podemos crear listas con vietas
o numeradas.
Para listas con vietas usaremos el tag
<ul> y <li>
Para indicar el tipo de vieta usaremos el
atributo type (circle, square, disc)
Por ejemplo si queremos armar la
siguiente lista:
Materias del primer semestre
Programacin 1
Introduccin a la computacin
Listas con vietas
Cdigo HTML
<html>
<body>
Lista de materias del primer semestre
<ul type=disc>
<li> Programacin 1 </li>
<li> Introduccin a la computacin </li>
</ul>
</body>
</html>

Listas numeradas
Para listas con vietas usaremos el tag
<ol> y <li>
Para indicar el valor en donde comienza la
lista usaremos el atributo value.
Por ejemplo para crear la siguiente lista:
Lista de pasos
1. Paso 1
2. Paso 2
3. Paso 3

Listas numeradas
Cdigo HTML
<html>
<body>
Lista de pasos
<ol value="1">
<li> Paso 1 </li>
<li> Paso 2 </li>
<li> Paso 3 </li>
</ul>
</body>
</html>
TAG DIV
Se utiliza para dividir el cdigo en
diferentes secciones
A cada seccin se le puede definir
atributos comunes a todo el contenido que
aplican a toda esa seccin.
Por ejemplo se le puede aplicar un estilo
(fuente, fondo, color, borde, etc.) a todo el
contenido de una seccin.
TAG DIV
Ejemplo

<DIV style="border-style:solid; border-width: 4px; border-color:blue;
font-size:48;color:white;background-color:red">
SECCION <BR>
DE CODIGO NUMERO 1 <BR>
</DIV>
TAG DIV
Atributo ID
Para cada tag DIV es importante asignarle un
valor al atributo ID
<DIV id=identificador1> .. </DIV>
Mas adelante utilizaremos el id como
marcador, lo que me permitir colocar
contenido en forma dinmica en esta seccin
de mi pgina.
Ser de mucha utilidad cuando lo
combinemos con cdigo JavaScript
Ejercicio
Escribir en el cdigo html necesario para
disear una pgina web con el siguiente
aspecto:
Ejercicio
Insumos:
Imagen: Buscar en http://www.ort.edu.uy
Tipo de letra por defecto: Courier
Tamao letra titulo temas: 3
Tamao de letra por defecto: 14
Tamao de letra temas 1: 14
Correo para contacto: baldassini@gmail.com
Link material: http://ctcsalto.edu.uy/moodle
Usando Tablas en HTML
Tablas - Definicin
Las tablas HTML permiten acomodar datos en
filas y columnas de celdas.
En HTML se utiliza el tag <TABLE>
Debe utilizarse etiqueta de cierre </TABLE>

Ejemplo:
<TABLE>
...
</TABLE>

Tablas - Estructura
CELDA
FILA
COLUMNA
TABLA 4 x 4
Tablas - Secciones
Las filas de la tabla pueden estar agrupadas en:
_ cabezal de tabla (THEAD),
_ pie de tabla (TFOOT) y
_ uno o ms cuerpos de tabla (TBODY)

THEAD y TFOOT deben aparecer antes del TBODY,
as el navegador puede representarlos mientras recibe
los datos de las filas del cuerpo de la tabla.

Las secciones THEAD, TFOOT y TBODY deben
contener el mismo nmero de columnas.

Tablas - Estructura
Nombre Apellido Edad Sexo
Pedro Surez 26 M
Juan Lpez 23 M
Erika Ruis 34 F
Elmer Henz 29 M
THEAD
TFOOT
TBODY
Tablas - Cdigo HTML
<TABLE>
<THEAD>
...Informacin del cabezal...
</THEAD>

<TFOOT>
...Informacin del pie...
</TFOOT>

<TBODY>
...Informacin del cuerpo...
</TBODY>
</TABLE>
Tablas - Tamao
Para determinar el tamao de la tabla utilizamos
el atributo width

El valor puede ser expresado en pixeles o
como porcentaje.

Ejemplo:
<TABLE width=100%>
...
</TABLE>

Tablas Filas y Celdas
El elemento TR acta como contenedor de una
fila de celdas.

Las celdas de una tabla pueden contener
dos tipos de informacin: cabezal (TH) y
datos (TD).

La diferencia entre ambos contenidos es
la forma en que se representa en el
navegador, generalmente la informacin
de cabezal (TH) se representa en negrita.

Tablas Ejemplo
<TABLE widht=300 border=1>
<CAPTION>
Tabla de Prueba
</CAPTION>
<THEAD style="font-size:14;color:red;background-color:cyan">
<TR>
<TH>Nombre</TH>
<TH>Apellido</TH>
</TR>
</THEAD>
<TFOOT style="font-size:12;color:black;background-color:#CEF6F5">
<TR>
<TH>Fin Nombre</TH>
<TH>Fin Apellido</TH>
</TR>
</TFOOT>
<TBODY>
<TR>
<TD>Juan</TD>
<TD>Prez</TD>
</TR>
<TR>
<TD>Ana</TD>
<TD>Lpez</TD>
</TR>
</TBODY>
</TABLE>
Tablas Celdas Extendidas
Se pueden extender celdas para que
comprendan varias columnas o varias filas.

Para esto se utiliza el atributo colspan y
rowspan de las celdas de tabla
respectivamente.

El valor ser numrico igual a la cantidad de
celdas que se extender.

Tablas Rowspan
1 2 3
4 6
<TABLE>
<TR>
<TD>1</TD>
<TD rowspan=2>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>6</TD>
</TR>
</TABLE>
Tablas Colspan
1 2 3
4 6
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD colspan=2>4</TD>
<TD>6</TD>
</TR>
</TABLE>
Ejercicio
Nombre Tazas Tipo de caf Azcar?
J. Prez 5 Express Si
A. Lpez 8 Descafeinado No
M. Surez Sin informacin
Tablas Formato Visual
border
toma un valor numrico que expresa el tamao en
pixeles del borde de la tabla.
la forma en que se representar el borde depender
del navegador utilizado.

rules
especifica dnde se representarn lneas divisorias
en la tabla.
valores:
rows (slo las filas)
cols (slo las columnas)
all (columnas y filas)
frames
especifica que lados de la tabla se harn visibles.
valores:
above (borde superior)
below (borde inferior)
box o border (los cuatro lados)
hsides (arriba y abajo)
vsides (izq y derecha)
lhs (borde izq)
rhs (borde derecho)

cellpadding
determina el espacio entre el borde de la celda y su
contenido, en pixeles.
cellspacing
determina el espacio entre celdas, en pixeles.

align
determina la alineacin horizontal del contenido de
una celda
valores: left, right, center
valign
determina la alineacin vertical celda
valores: top, middle, bottom
Contenido
cellspacing cellpadding
De utilidad Colores
Hexadecimal
BLANCO = FFFFFF
NEGRO = 000000
ROJO = FF0000
VERDE = 00FF00
AZUL = 0000FF
CIAN = 00FFFF
MAGENTA = FF00FF
AMARILLO = FFFF00
GRIS = 808080
ROSA = FF8080
VIOLETA = 800080
CELESTE = 80FFFF
MARRON = 800000
NARANJA = FF8000
LAVANDA = 8000FF
TURQUESA = 00FF80
ORO VIEJO = BBBB20

Sitio para convertir colores a hexadecimal:

http://html-color-codes.info/codigos-de-colores-
hexadecimales/

HTML y Hojas de Estilo
Las hojas de estilo (CSS) se utilizan para
darle determinado formato visual al
contenido de una pgina HTML.
Al utilizar hojas de estilo, no debemos
preocuparnos por aspectos de diseo
grfico a la hora de generar nuestra
pagina HTML, sino que nos
preocuparemos solamente porque la
estructura HTML est correcta y con el
contenido adecuado.
Hojas de Estilo
Una hoja de estilo es un archivo
independiente a la pgina HTML
El mismo tiene extensin .CSS
Contiene los detalles grficos (tipo de
fuente, color, tamao, etc.) que se pueden
aplicar a uno o mas TAG HTML. A cada
definicin se le denomina regla
Cada regla de la hoja de estilo esta
formada por un selector y una declaracin
Estructura de una regla CSS:
SELECTOR {Declaracin}
Hojas de estilo
La declaracin indica "qu hay que hacer" y el
selector indica "a quin hay que aplicrselo".
Por lo tanto, los selectores son imprescindibles
para aplicar de forma correcta los estilos CSS
en una pgina.

Una hoja de estilo podra por ejemplo contener
lo siguiente:
table {border:1px solid #c8c8c8}
.negrita {font-weight:bold;}
.cursiva {font-style:oblique;}
.tachado {text-decoration:line-through;}

Hojas de Estilo
Una hoja de estilo podra por ejemplo
contener lo siguiente:

.negrita {font-weight:bold;}
.cursiva {font-style:oblique;}
.tachado {text-decoration:line-through;}
Algunos Tipos de selectores
Selector de Etiqueta: La regla definida
se aplica de igual forma cada vez que
aparece en el cdigo HTML la etiqueta
indicada en la regla.
Ejemplo:

Selector de clase: Permite definir una
regla con un determinado nombre (clase).
La regla definida puede aplicarse luego a
cualquier etiqueta HTML utilizando el
atributo class.
Ejemplo:
<p>Ademas de textos en <span
class="negrita">negrita</span>, tambin se
pueden poner en <span
class="cursiva">cursiva</span>
Algunos Tipos de selectores
Utilizar hojas de estilo en pgina HTML
Para utilizar una determinada hoja de estilo en
una pgina HTML debemos incluir la siguiente
lnea en el tag <head> de nuestra pgina:
<head>
<link rel="stylesheet" type="text/css"
href="estilo.css" />
</head>
estilo.css es el nombre del archivo donde est
definida cada una de las reglas. El archivo debe
estar almacenado en el mismo lugar donde est
guardado la pgina HTML a la cual queremos
aplicarlo.
Etiqueta SPAN
La etiqueta <span> permite agrupar varios
elementos en lnea seguidos dentro de un
mismo bloque (por ejemplo, varias palabras
seguidas en un prrafo), para despus
darles formato con la hoja de estilo.
Ejemplo:
<p>El primer servidor web de la historia se instal
en el CERN en <span class=negrita>
diciembre de 1990</span></p>
Hojas de Estilo
En el curso de Programacin 1 no
veremos en detalle como crear reglas en
una hoja de estilo, sino que
incorporaremos en nuestros HTML una
hoja de estilo ya creada
Las hojas de estilo a utilizar estarn
publicadas en el sitio de la mat. en moodle
y les indicaremos el nombre de cada uno
de los selectores que contengan.

ACLARACION

PPT1.4 - Introduccion A HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

PPT1.4 - Introduccion A HTML

Caricato da

Copyright:

Formati disponibili

Analista Programador

Potrebbero piacerti anche