Notas 2015
44
Instituto Politécnico Nacional CECyT NO. 1 “GONZALO VÁZQUEZ VELA” Apuntes de computación Básica II María Ramírez Díaz 2015
-
Upload
maria-ramirez -
Category
Documents
-
view
217 -
download
2
description
Etiquetas básicas de html
Transcript of Notas 2015
Instituto Politécnico Nacional
CECyT NO. 1
“GONZALO
VÁZQUEZ VELA”
Apuntes de
computación Básica II
María Ramírez Díaz
2015
COMPUTACIÓN BÁSICA II
Unidad II
Creación de páginas
web
Código html
Profesora: María Ramírez Díaz
2015
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Conceptos básicos
HTML es un lenguaje o código utilizado para crear páginas web. Este código fue creado
por Tim Berners-Lee en el año de 1991. A través de este lenguaje que utiliza directivas
o etiquetas es cómo podemos, usando un visualizador , crear nuestras páginas web.
HTML significa “Lenguaje de Marca de Hipertextos” (Hyper Text Markup Language),
hipertexto es un conjunto de textos o subtextos vinculados a través de enlaces.
El código HTML indica al navegador de internet los formatos de textos, imágenes,
multimedia, etc.
El código html se genera a través del uso de <directivas> o <etiquetas>, las directivas se
colocan dentro de los signos < >, esto indica al navegador cuando inicia o termina una
instrucción.
Una directiva o etiqueta puede ser abierta o cerrada, aunque la mayoría de los
visualizadores en la actualidad ya dan por hecho donde termina la instrucción, esto es, la
dan por terminada cuando se inicia otra, es importante como todo lenguaje saber cuáles
son etiquetas abiertas y cuáles son cerradas, para escribir de manera correcta.
Etiquetas Abiertas: Se colocan al inicio de nuestra indicación, no es necesario
cerrarlas, por ejemplo:
<BR> indica dar un salto de línea.
<HR> indica colocar una línea o regla.
Etiquetas Cerradas: Se colocan al inicio para indicar la acción y se cierran al final
de la instrucción, acompañada del símbolo /.
Por ejemplo:
<FONT> </FONT> Indica donde empieza y termina el tipo de fuente.
<BODY></BODY>Indica donde empieza y donde termina el contenido de la web.
Las etiquetas pueden escribirse con mayúsculas o minúsculas, usan el idioma inglés y si no
está bien escrito el visualizador las ignora.
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Atributos
Además de la instrucción establecida por etiquetas, cada etiqueta tiene atributos. Los
atributos sirven para modificar los parámetros establecidos o las características de las
etiquetas.
Por ejemplo la etiqueta ALIGN (alineación) sirve para alinear un texto o una
imagen, por default siempre se alinea a la izquierda, pero si deseamos cambiar la
alineación del texto o imagen debemos de cambiar los atributos: ALIGN=”CENTER
indica que la alineación del párrafo o imagen será al centro.
FONT FACE=”ARIAL” SIZE=”5” COLOR=”BLUE” En este caso la etiqueta es FONT y sus
atributos: face es el tipo de fuente Arial, size es el tamaño indicado que será 5, y
color será el color de la fuente,azul.
Para crear una web solo basta el uso adecuado de las etiquetas, un procesador de textos
básicos como el bloc de notas y un visualizador como Internet Explorer ó Firefox.
Para generar tu código html y crear tu web debes de considerar lo siguiente:
Existe una estructura básica que nos permite indicar que es una página web.
Las etiquetas como mencionamos pueden escribirse con mayúsculas o
minúsculas pero sin errores gramaticales.
Tanto las etiquetas como los atributos usan el idioma inglés o códigos establecidos
(por ejemplo para el color)
En ocasiones los valores de los atributos pueden ser sensibles a las mayúsculas, por
ejemplo en el nombre de un archivo o estilo de una fuente.
Los nombres de las etiquetas o directivas no pueden contener espacios.
Los valores de los atributos pueden contener espacios si está encerrado entre
comillas por ejemplo: <Font face=”Century Gothic”>
Los visualizadores de páginas ignoran los espacios en blanco o enters, para crear
espacios en blanco o saltos de línea hay que utilizar los caracteres especiales o las
etiquetas específicas.
La primera etiqueta en abrir es la última en cerrar.
Los visualizadores ignoran las etiquetas o atributos mal escritos o desconocidos
para el visualizador.
Parara diseñar una web debes de considerar lo siguiente:
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
La primera página debe de ser el índice o página principal que lo identifique
como el documento inicial de un sitio.
Las páginas Web relacionan entre sí a través de ligas, links o hipervínculos.
Para guardar los documentos y archivos que conforman la página web es
necesario crear una carpeta y guardar toda la información dentro de la misma
carpeta.
Se guarda el documento como Documento Texto (en el block de notas o en
wordpad) con la extensión htm esto nos permite generar un archivo con el icono
de página web, por ejemplo PAGINA 1.htm
Una vez creadas la página web se puede visualizar en un buscador, se puede
trabajar sin conexión.
La página Web mostrará en su contenido el texto o imágenes establecidas en el
cuerpo (BODY) de nuestra página. El ancho de nuestra página será el indicado a
través de los botones de control del tamaño de la ventana, esta permitirá ajustar el
texto en forma automática.
Si se desea modificar el contenido de la página se debe abrir la página y en el
menú ver seleccionar la opción Código fuente, esto nos llevará al block de notas,
se hacen los cambios, guardamos y cerramos el block de notas y actualizamos la
página web con el botón de Actualizar de la barra o también si oprimes F5.
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Estructura basica de un documento html
La estructura básica de un documento escrito en HTML contendría básicamente
las siguientes etiquetas:
<HTML> Inicio de la página
<HEAD> Cabecera
<TITLE> Titulo del documento
</TITLE> Cierre título del documento.
</HEAD> Cierre de cabecera.
<BODY> Inicio del cuerpo del documento: texto, tablas, imágenes, etc.
</BODY> Cierre del cuerpo de la página.
</HTML> Cierre o final de la página.
Cabecera y título del documento
<HEAD></HEAD>
La etiqueta <HEAD></HEAD> delimita el inicio del documento. Dentro de <head> es
importante definir el título de la página por medio de la etiqueta <TITLE></TITLE>. Este título
será el que aparezca en la barra de nuestro navegador de nuestras páginas Web.
Ejemplo:
<HEAD><TITLE>Las Drogas en México </TITLE></HEAD>
Cuerpo del documento
<Body></Body>
La etiqueta Body (Cuerpo) es la que nos permite incluir dentro de ella todo el contenido
que se verá a través de visualizador en la pantalla, o sea en nuestra página web.
Body es una etiqueta cerrada <BODY></BODY>
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Los siguientes son atributos de la etiqueta Body es decir modifican o especifican las
características, al ser atributos de body van dentro de la etiqueta <Body>
Atributo Acción Ejemplo:
Background="URL\imagen.tipo"
Coloca una imagen de
fondo a nuestra página
Deberá usar imágenes tipo:
jpg, gif,jpeg, tif
Background=”imagen1.jpg”
Bgcolor=”COLOR o CODIGO” Indica un color para el fondo
de nuestra página.
Bgcolor=”purple”
Bgcolor= #74DF00
Text=”COLOR o CODIGO”
Indica un color para el texto
que incluyamos en nuestro
documento. Por defecto es
negro. Solo se ve alterado
cuando se usa <Font>.
Text=”orange”
Text=”#DF0174”
Alink=”COLOR o CODIGO”
Indica el color de los enlaces
activos, es decir, los enlaces
seleccionados con un clic
sostenido.
Alink=”red”
Alink= #088A08
Link=“COLOR o CODIGO”
Indica el color de los textos
que dan acceso a un
enlace. Por defecto es azul.
Link=”purple” Link=”#DF0174”
Vlink=”COLOR o CODIGO”
Indica el color de los textos
que dan acceso a un enlace
que ya hemos visitado con
nuestro navegador. Por
defecto es púrpura.
Vlink=”yellow”
Link=”#DF0101”
Bgproperties=”FIXED”
El parámetro “fixed”,
inmoviliza el fondo de la
página con respecto al
desplazamiento del texto.
Solo funciona con Internet
Explorer.
Bgproperties=”fixed”
Ejemplo
<Body bgcolor=black text=yellow Alink=#088A08 link=#DF0174 link=#6E6E6E>
El código hexadecimal usa 3 colores: rojo, verde y azul. El código de color se antecede
del símbolo #.
Ejemplos:
#000000 – Negro
#FF0000 – Rojo
#00FF00 – Verde
#0000FF – Azul
#FFFFFF – Blanco
Las primeras dos cifras corresponde al color Rojo, las dos siguientes al Verde y las dos
últimas al color Azul. El código hexadecimal incluye toda la gama de tonalidades.
Ejemplo de la estructura básica
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Espacios y Saltos de línea
En HTML los espacios entre caracteres con barra espaciadora no existen, solo reconoce
un espacio, si deseas más espacios hay que usar el comando   por cada uno de los
espacios que desees colocar.
Para indicar un salto de línea se utiliza la etiqueta <BR>, cada BR indica un enter o punto y
aparte.
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Formato de párrafo
Párrafos <P></P>
Es una etiqueta cerrada, se abre al inicio del párrafo y se cierra al finalizarlo. El atributo
para párrafo es ALIGN, ALIGN nos permite cambiar la alineación de un texto:
Ejemplo Se verá como
<P Align=right>México Mágico.</P> México Mágico
<P Align=center> México Mágico</P> México Mágico
Regla
<HR>
Coloca una línea horizontal en nuestra página, estas líneas, son muy usadas para dividir
secciones de textos. La etiqueta es:
Atributo Acción
ALIGN=”LEFT/RIGHT/CENTER” Alinea línea a la izquierda (left), a la
derecha (right) ó al centro (center). Align=”Left”
SIZE=“PIXELES”
Indica el grosor de la línea en pixeles.
Size=”15”
WIDTH=”PIXELES o %”
Indica el ancho de la línea en tanto por
ciento en función del ancho de la ventana
del navegador: 25%,50%,etc. ó en pixeles
Width=”75%”
Atributo Acción
Align=”LEFT/RIGHT/CENTER” Alinea el párrafo a la izquierda (left), a la derecha (right) o al
centro (center).
Style=”Line-height=%” Cambia el interlineado en el párrafo
Ejemplo:
<p align=right Style=”line-height=200%>
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
COLOR=”COLOR o CODIGO” Define el color de la línea en código o la
palabra en inglés. Color=”Blue”
Ejemplo:
<HR align= center size=20 width=50% color=blue>
Formato de texto
Cabeceras <Hn></Hn>
Las cabeceras son estilos de textos prediseñados, por lo tanto usan tipos de fuentes y
tamaños preestablecidos.
Hay seis tipos de cabeceras (tamaños de letra):
<H1>, <H2>,<H3>,<H4>,<H5> y <H6>
Es una etiqueta cerrada. El texto que escribamos entre el inicio y el fin de la etiqueta será
el afectado por las cabeceras.
La cabecera <H1> será la que muestre el texto en mayor tamaño.
Ejemplo Se vería como <H1>México Mágico</H1>
México Mágico <H2> México Mágico </H2>
México Mágico <H3> México Mágico </H3> México Mágico <H4> México Mágico </H4> México Mágico <H5> México Mágico </H5> México Mágico <H6> México Mágico </H6> México Mágico
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Estilos de texto
Para aplicar estilos de texto (negrilla, subrayado, etc…) tenemos varias etiquetas.
Efecto Etiqueta Ejemplo
Texto en negrita <B></B> <B>Mis amigos </B> Mis amigos
Texto en cursiva <I></I> <I> Página </I> Mis amigos
Texto más
grande <BIG></BIG> <BIG> Página </BIG> Mis amigos
Texto subrayado <U></U> <U> Página </U> Mis amigos
Texto tachado <S></S> <S> Página </S> Mis amigos
Texto en
superíndice <SUP></SUP> m<SUP>3</SUP> m3
Texto en
subíndice <SUB></SUB> H<SUB> 2 </SUB>O H2O
Texto centrado <CENTER></C
ENTER>
<CENTER> Animales
</CENTER>
Animales
Tipo, tamaño y color de fuente <Font> </Font>
La etiqueta <Font> nos sirve para dar las características al texto (tipo de fuente, color, y
tamaño) es una etiqueta cerrada, afecta todo el texto que se encuentra entre la
etiqueta, es necesario cerrarla para delimitar el cambio de fuente.
Atributo Acción Ejemplo
Face=”Nombre de la fuente”
Establece el tipo de fuente, no
todos los tipos de fuentes son
aceptados por el visualizador por
eso es necesario hacer pruebas.
Si la fuente tiene más de dos
palabras es necesario poner el
nombre entrecomillado y
respetando las mayúsculas.
Face=”Times New Roman”
Size=”Tamaño”
El tamaño de la fuente es de 1 a
7, se usa el signo + o – para
establecer tamaños intermedios.
Size=”5”
Color=”código de color”
Asigna un color a la fuente,
puede ser el nombre del color
escrito en inglés o el código
hexadecimal correspondiente.
Color=”#5E610B”
Ejemplo:
<Font face=”Times New Roman” size=”5” color=”#3B0B39”
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Fuente base
Marquesina
<Marquee> </Marquee> Una marquesina es un texto o imagen animada, es una etiqueta cerrada. Funciona
únicamente con Ms-Explorer. Sus atributos deben de estar dentro de la etiqueta
<Marquee> y son los siguientes:
Atributo Acción Ejemplo
Bgcolor=“código de color”
Indica el color del fondo de la
marquesina Bgcolor=”blue”
Direction=”LEFT/RIGHT/UP/DOWN”
Indica en qué dirección se
desplaza el texto, hacia la
izquierda (left) o hacia la derecha
(right),arriba (up), hacia abajo
(down)
Direction=”left”
Height=“número o %”
Indica la altura de la marquesina
en puntos o porcentaje en
función de la ventana del
navegador.
Height=”10%”
Height=”35”
Width= “número ó %”
Indica el ancho de la marquesina
en puntos o porcentaje en
función de la ventana del
navegador
Widht=”50%”
Width=”400”
Loop=”número/infinite”
Indica el número de veces que se
desplazará el texto por la
marquesina antes de detenerse.
Loop=”5”
Loop=”infinite”
Scrolldelay=”número”
Define la velocidad del texto que
está dentro de la marquesina. A
menor numeración, mayor
velocidad.
Scrolldelay=10
(más rápido)
Scrolldelay=200
(más lento)
Scrollamount=”número”
Define la cantidad de píxeles que
queremos que se desplace el
texto en cada movimiento.
A mayor número avanza más
rápido
Scrollamount="3"
(menor desplazamiento)
Scrollamount=”75”
(mayor desplazamiento
Behavior=”ALTERNATE/SCROLL/SLIDE”
Este atributo controla el
movimiento de la marquesina, sus
valores pueden ser:
ALTERNATE la marquesina se
mueva de un lado a otro.
SCROLL la marquesina sale y
entra
SLIDE la marquesina se detiene
cuando llega al lado opuesto.
Behavior=”Alternate”
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Ejemplo
<MARQUEE bgcolor = “#FFFFFF” width = 50% scrolldelay =250> Bienvenidos </MARQUEE>
Formatos de imagen
<IMG>
Para colocar una imagen se usa la etiqueta <IMG> es una etiqueta abierta.
Es recomendable guardar las imágenes en la misma carpeta en donde se guarda la web,
de lo contrario es posible que no la muestre.
Si la imagen está en otra carpeta es necesario indicar la dirección (URL) en donde se
encuentra y asegurarse que siempre se tenga esta carpeta.
Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las
imágenes GIF,TIP, PNG y JPG. Por lo general las imágenes de paint (mapa de bits) no se
usan pues su tamaño es muy grande y tardan mucho en cargarse.
Atributo Acción
Ejemplo
src=”URL\imagen.tipo” Indica el nombre del archivo gráfico a
mostrar
src=”recursos\caballo.jpg”
src=dibujo.png
Align=”TOP / MIDDLE /
BOTTOM/RIGHT/LEFT”
Indica cómo se alineará el texto que siga a la
imagen. TOP alinea el texto con la parte
superior de la imagen, MIDDLE con la parte
central, y BOTTOM con la parte inferior, RIGHT
y LEFT. Si quiere centrar la imagen deberá
usar la etiqueta <CENTER></CENTER>
Align=”Right”
Align=”Top”
Border =”número” Indica el grosor del “borde” de la imagen en
pixeles. Border=”15%”
Height =”número ó %”
Indica el alto de la imagen en pixeles o en
porcentaje. Se usa para variar el tamaño de
la imagen original.
Height=”25%”
Height=”300”
Width=”numero ó %”
Indica el ancho de la imagen en pixeles o en
porcentaje. Se usa para variar el tamaño de
la imagen original.
Width=”75%”
Width=”600”
Hspace =”número”
Indica el número de espacios horizontales, en
pixeles, que separarán la imagen texto que le
siga y la anteceda.
Hspace=”50”
Vspace =”número”
Indica el número de pixeles verticales que
separaran la imagen del texto que le siga y la
anteceda.
Vspace=”15”
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Ejemplo:
<IMG Src=Animales\jaguar.jpg alt=”En peligro” width=250 height=250 vspace=40 hspace=15
border=10>
Cuando la imagen no se muestra es que el URL o dirección en donde el navegador la
busca no es la correcta.
El siguiente es un ejemplo del uso de tamaño y posición de imagen con respecto al texto:
El siguiente es un ejemplo del uso de imágenes:
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Listas
Existen tres tipos de listas:
Numeradas <OL>
Sin numerar <UL>
Definición <DL>
LISTAS NUMERADAS <OL></OL>
Se usa la etiqueta <OL> para iniciar la lista se auxilia de la etiqueta <LI> para indicar
cada uno de los elementos y la etiqueta </OL> para cerrar el listado.
Atributo Acción
start=”número” Indica que número será el primero de la
lista. Si no se indica se entiende que
empezará por el número 1
Ejemplo:
start=”4”
Empezará el listado en
el 4
type =”tipo” Indica el tipo de numeración utilizada.
Si no se indica se entiende que será
una lista ordenada numéricamente.
Los tipos posibles son :
1 = Números arábigos (1,2,3,4,… etc.)
a = Letras minúsculas. (a,b,c,d,… etc.)
A = Letras mayúsculas. (A,B,C,D,… etc.)
i = Números romanos en minúsculas.
(i.ii,iii,iv,v,… etc.)
I = Números romanos en mayúsculas.
(I,II,III,IV,V,… etc.)
type=A
LISTAS SIN ORDENAR O DE VIÑETAS <UL> </UL>
Las listas sin numerar representan los elementos de la lista con una viñeta o marca que
antecede a cada uno de ellos.
Se usa la etiqueta <UL> para iniciar la lista, la etiqueta <LI> para indicar cada uno de los
elementos y la etiqueta </UL> para cerrar el listado.
Atributo Acción Ejemplo
Type=”tipo” Indica el tipo de viñeta, pueden
ser, circle o square. Los valores
de type, puede ser un círculo o
un cuadrado.
Type=”Circle”
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
LISTA DE DEFINICIÓN <DL></DL>
Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición.
Se utiliza para ellas la etiqueta <DL> al iniciar la lista y la etiqueta</DL> para cerrar el
listado.
Además se integran dos etiquetas más:
<DT> para indicar el término y
<DD> para indicar la definición del término
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
LISTAS ANIDADAS
Es posible crear lista anidada, es decir una lista dentro de otra lista, para esto basta con
tomar en cuenta la secuencia del listado y considerar que cada lista en forma individual
debe abrirse y cerrarse.
Un ejemplo de un listado anidado es:
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Tablas
Para crear una tabla es necesario varias etiquetas:< TABLE> en donde se establecen los
atributos generales de la tabla, <TR> que establece los atributos para las filas que
conforman las tablas, y <TD> para cada celda de la tabla:
<TABLE></TABLE>
Las tablas son de gran ayuda para distribuir los elementos en nuestra web: textos,
imágenes, listados, etc. Los parámetros opcionales de esta etiqueta son:
Atributo Acción
Aling=”LEFT/RIGHT/CENTER/JUSTUFY”
Alinea la tabla con
respecto del texto que
lo rodea, pueden ser
LEFT, RIGHT, CENTER y
JUSTIFY.
Align=”Center”
Background=”URL\imagen.tipo”
Asigna una imagen de
fondo especificando
el URL
Background=”Fondo1.jpg”
Bgcolor=”código de color” Asigna un color de
fondo a la tabla
Bgcolor=”Black”
Border=”número”
Indica el ancho del
borde de la tabla en
puntos
Border=”16”
Bordercolor=”código o color” Especifica el color del
borde de la tabla.
Bordercolor=”Yellow”
Cellspacing=”número”
Indica el espacio en
puntos que separa
luna celda de otra.
Cellspacing=”20”
Cellpadding= “número”
Indica el espacio en
puntos que separa el
borde de cada celda
y el contenido de
esta.
Cellspacing=”30”
Width=”número ó %”
Indica el ancho de la
tabla en % p pixeles.
De no indicarlo el
ancho de la tabla se
ajusta al contenido.
Width=”75%”
Height=”número ó %”
Indica la altura de la
tabla en puntos o en
porcentaje. De no
colocar alto, este se
ajusta al contenido.
Height=”1200”
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Cabecera de la tabla:
<TH></TH>
Indica una celda de “cabecera” o de títulos de columna, es decir, el contenido será
resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros
opcionales son:
Atributo Acción
Align=”LEFT/RIGHT/CENTER/JUSTIFY”
Este atributo especifica la alineación del
texto de las celdas, sus valores pueden ser
LEFT, RIGHT, CENTER y JUSTIFY.
Background=”URL\imagen.tipo” Especifica el archivo de imagen de fondo
de las celdas
Bgcolor=”código o color” Especifica el color de fondo de las celdas
Bordercolor=”código o color” Especifica el color del borde de las celdas
Colspan=”número”
Indica el número de columnas que
ocupará la celda (combinar celdas). Por
defecto ocupa una sola columna.
Valign=”TOP/MIDDLE/ BOTTOM”
Indica la alineación vertical del contenido
de la celda, en la parte superior (TOP), en
la inferior (BOTTOM), o en el centro
(MIDDLE).
Rowspan=”número” Indica el número de filas que ocupará la
celda. Por defecto ocupa una sola fila
Height=”número ó %”
Indica la altura de las celdas en puntos o
en porcentaje. Se ajusta automáticamente
al contenido de las celdas.
Width=”número ó %”
Indica la anchura de la columna en puntos
o en porcentaje. Se ajusta
automáticamente al contenido
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Filas
<TR></TR>
Las tablas están formadas por filas para ello se usa esta etiqueta
La etiqueta <TABLE>, encierra a la directiva< TR>
Esta etiqueta define el comienzo y fin de una fila en la tabla, para cada fila habrá <tr>,
esta etiqueta debe cerrase al terminar la fila.
Atributo Acción
Align=”LEFT/RIGHT/CENTER/JUSTIFY”
Este atributo especifica la alineación del texto de
las celdas, sus valores pueden ser LEFT, RIGHT,
CENTER y JUSTIFY.
Background=”URL\imagen.tipo” Especifica el archivo de imagen de fondo,
mediante un URL para la fila.
Bgcolor=”código o color” Especifica el color de fondo para la fila.
Bordercolor=”código o color” Especifica el color del borde de la fila.
Datos de la tabla (celda)
<TD></TD>
La etiqueta <TD> </TD> definen las características de cada celda, en las celdas van los
contenidos de las tablas: imágenes o textos, los <td> deben cerrarse para limitar la celda
y a su vez, se encuentran incluidos en los <TR>.
Atributo Acción
Align=”LEFT/RIGHT/CENTER/JUSTIFY”
Este atributo especifica la alineación del texto
que se encuentra dentro de la calda, sus
valores pueden ser LEFT, RIGHT, CENTER y
JUSTYFY.
Background=”URL\imagen.tipo” Especifica el archivo de imagen de fondo,
mediante un URL para la celda.
Bgcolor=”código o color” Especifica el color de fondo para la celda.
Bordercolor= “código de color” Especifica el color del borde de la celda.
Colspan=número Especifica el número de columnas que ocupará
la celda, su valor es numérico.
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Height=”número ó%” Indica la altura de la celda en píxeles o en
valores de porcentaje.
Rowspan=”número” Especifica el número de filas que ocupará la
celda, su valor es numérico.
Valign=”BASELINE/BOTTOM/MIDDLE/TOP”
Ajusta los elementos de la celda de una forma
vertical, sus valores pueden ser BASELINE,
BOTTOM, MIDDLE Y TOP.
Width= “numero ó %” Indica la anchura de la celda en píxeles o en
valores de porcentaje.
EJEMPLO DE TABLAS
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Enlaces
Un enlace puede ser una porción de texto, una imagen o una porción de una imagen,
realmente un enlace, puede ser casi cualquier elemento de bloque.
Un enlace es más conocido por su nombre en inglés (link) y al punto final de un enlace se
le denomina ancla (anchor).
La forma general de un enlace es:
<A #REF=”Destino del enlace”>Texto o imagen de la página que servirá de enlace </A>
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
ENLACES INTERNOS O LOCALES
La etiqueta que nos permite hacer enlaces internos o locales es:
<A> </A> (Ancla)
Este elemento se utiliza para indicar una parte de la página web, generalmente texto o
imágenes, que será un enlace a determinada parte de nuestro documento ó página, se
utiliza cuando la página es grande y se desea un acceso más rápido a un tema
ATRIBUTO ACCIÓN
Href=#nombre Indica el URL de enlace.
Name=”nombre” Indica un nombre para los enlaces Locales.
Title=”texto” Proporciona una descripción del enlace si se mantiene el ratón un
momento sobre el hipertexto.
Y recuerde que para los enlaces en la directiva body se habían especificado las
directivas:
ATRIBUTO ACCIÓN
Alink= “código de color” Este atributo asigna el color a los enlaces activos, es decir,
enlaces seleccionados con un clic sostenido.
Link=”código de color” Asigna un color a los enlaces en la página web si no se
define un color el valor por defecto será el azul.
Vlink=”código de color” Define el color de un enlace ya visitado su valor por defecto
es el violeta.
Los enlaces locales se consiguen utilizando el atributo NAME, este sería un ejemplo.
<A NAME=”INICIO”></A> A esta sección de entrada le dimos el nombre de INICIO y la
directiva:
<A HREF=”#CONTINUAR”>Haz click para continuar </A> indica la otra sección a la que
ligara el enlace.
Para completar el enlace se debe de establecer una entrada con el nombre que le dimos
en este caso de CONTINUAR que está en la sección a donde llevará el enlace con la
directiva:
<A NAME=”CONTINUAR”></A> e indicar el regreso que es la sección inicial con la directiva
<A HREF=”#INICIO”>Haz click para REGRESAR</A>
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
ENLACES GLOBALES O EXTERNOS
Llamaremos enlaces globales, a los enlaces que son fuera de nuestra página a otras
páginas aunque pertenezcan a un mismo sitio.
En estos enlaces no se usa la etiqueta Name ni el #
Existen tres casos de enlaces globales o externos:
I.-A otro documento del mismo u otro sitio.
<A HREF=URL> Texto o imagen de la página que servirá de enlace </A>
Ejemplo fuera del sitio:
<A HREF=http://www.google.com.mx>Quieres realizar búsquedas </A>
Si está dentro del mismo sitio es:
<A HREF=nombre de la página>Texto que servirá de enlace</A>
Ejemplo:
<A HREF=listas1.htm> Deseas conocer las actividades</A>
Si se desea regresar por ejemplo:
<A HREF=enlaces.htm>REGRESAR</A>
II.- Usar una imagen como hipervínculo:
<A HREF=hojaweb.htm><IMG SRC=“imagen.gif”></A>
<a href=paleontología.htm><img src=trilobite.jpg></A>
III.- A un correo electrónico
<A HREF=mailto:dirección email>Texto del enlace</A>
Ejemplo:
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Inserción de sonido y música
<BGSOUND>
SONIDO DE FONDO
Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta
característica de Ms Explorer utiliza la etiqueta <BGSOUND> y tiene los siguientes
parámetros:
ATRIBUTO ACCIÓN
Src=”URL\nombre.tipo” Indica el nombre del archivo que contiene
el sonido (.waw, .mid, mp3).
Loop=”número / infinite”
Indica el número de veces que se
reproducirá el sonido. Si se indica infinite, el
sonido se reproducirá de forma continua
hasta que abandonemos la página
Volumen=número”
Determina el volumen de reproducción del
sonido, y que puede variar entre 0 y 100. En
caso de Internet Explorer, el valor del
volumen por defecto es 50 en plataformas
PC
Un ejemplo de esta etiqueta sería :
<BGSOUND src= "yesterday.mid" loop= infinite >
Otro ejemplo es:
<bgsound src=tiburon.mid loop=infinite>
Para insertar sonido en una página la etiqueta es:
<A HREF=nombre del archivo.wav>Texto de enlace</A>
Ejemplo:
<A HREF=Perro.WAV>Este es el ladrido de un perro </A>
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Insertar video
<EMBED>
Nuestra página Web puede tener un video (wmv) la etiqueta es <EMBED> y tiene los
siguientes parámetros:
ATRIBUTO ACCIÓN
Src=”URL\nombre.tipo” Indica la ubicación y el nombre del archivo
Loop=”true/false” Indica si se reproduce constantemente
Autostart=”True/False” Indica si se reproduce en automático o no
Width=”pixeles ó %” Indica el ancho del video
Height=”pixeles ó %” Indica el alto del video
Hidden=true/False Indica si se ocultan o no los controles
Un ejemplo de esta etiqueta sería :
<EMBD src= "VIDEO1.WAV" autostart=true width=500 height=500 hideen=true >
O también puede ser:
<img dynsrc>
Loop=”número/infinite”
Indica el número de veces que se
reproducirá el video. Si se indica infinite, el
sonido se reproducirá de forma continua
hasta que abandonemos la página
Height=”pixeles ó %” Indica el alto del video
Width=”pixeles ó %” Indica el ancho del video
Start=fileopen Se reproduce al hacer clic en el video
Start=mouseover Se reproduce al pasar el mouse
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Marcos
Las frames o marcos se usan para para dividir la pantalla principal del navegador en
varias ventanas, independientes una de otra, es decir el contenido que se muestra puede
ser manipulado por nosotros mostrando páginas web diferentes en cada momento.
Por lo general los marcos o frames se utilizan en la página principal (denominada en la
mayoría de los casos index) para distribuir contenidos a través de un índice general.
<FRAMESET> </FRAMESET>
ATRIBUTO ACCIÓN
Rows=”pixeles ó % de la pantalla” Indica el tamaño de los frames en puntos o
porcentaje. La posición de los frames es en
filas.
Cols=”pixeles ó % de la pantalla” Indica el tamaño de los frames en puntos o
porcentaje. La posición de los frames es en
columnas.
<FRAMESET rows = "25%,50%,25%">
<FRAMESET cols = "120,*,100">
Border=”pixeles” Indica el ancho del borde del marco en
pixeles
Bordercolor=”color” Indica el color del borde
En caso de utilizar rows los tamaños de las frames se entienden indicados de arriba a
abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la
ventana inmediatamente inferior, etc...
En el caso de cols los tamaños se aplican de izquierda a derecha.
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Ejemplo:
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
<FRAME>
Establece las propiedades de los marcos o frames. Es necesario determinar las
características de cada uno de los frames.
La definición de las frames debe ir antes de la definición del cuerpo <body> de
documento
ATRIBUTO ACCIÓN
name="nombre" Asigna el nombre del marco o frame
src="URL" El frame mostrará en principio el contenido del
documento HTML que se indica.
marginwidth=“número”. Indica el margen izquierdo y derecho de la
ventana en puntos.
marginheight=”número”
Indica el margen superior e inferior de la ventana
en puntos.
scrolling="yes / no / auto".
Coloca o no una barra de desplazamiento a la
ventana en el caso de que la página que se
cargue en ella no quepa en los límites de la
ventana. el valor " yes " muestra siempre la barra de
desplazamiento, " no " no la muestra nunca (la
zona de la página que no quepa en la ventana no
la veremos), y " auto " la muestra solo en caso de
que sea necesario para poder ver la página
noresize Fija el tamaño de la ventana y no puede ser
modificado.
border=”número” Indica el ancho del borde que separara un frame
del otro Si se indica cero (0) no se mostrara borde
entre las frames.
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Ejemplo:
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
<TARGET>
Al usar los frames, si deseamos cambiar el contenido de ellos a través de ligas o
hipervínculos desde la misma ventana principal, se utiliza la etiqueta
<A href= > </A> junto con la etiqueta Target.
ATRIBUTO ACCIÓN
target="nombre del frame" Muestra el Hyperenlace en el frame o marco que
se indica.
target="_blank" Abre una nueva copia del navegador y muestra
el Hyperenlace en ella.
target="_self" Se muestra el Hyperenlace en el frame o marco
activo
target="_parent".
El Hyperenlace se muestra en el <FRAMESET>
definido anteriormente al actual. Si no hay ningún
<FRAMESET> anterior se muestra a pantalla
completa suprimiendo todas los frame de la
pantalla
target="_top". Suprime todas las frames de la pantalla y muestra
el Hyperenlace a pantalla completa
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
Código HTML CECyT GONZALO VAZQUEZ VELA
Academia de computación
Turno Matutino
