UAJMS Ejercicios HTML
15.- Nuestro Primer Ejemplo.
Un editor de texto simple, como el bloque de Notas de Windows, es todo lo
necesario para crear una Página web.
16.- Comandos Básicos.
a) Centrar un texto
<CENTER>Texto Centrado</CENTER>
b) Párrafo
<P> Se puede incluir un todo un párrafo </P>
c) Salto de Linea.
<BR>
d) Tipos de cabeceras.
<H1>Cabecera #1</H1>
<H2>Cabecera #1</H2>
<H3>Cabecera #1</H3>
<H4>Cabecera #1</H4>
<H5>Cabecera #1</H5>
<H6>Cabecera #1</H6>
Taller I - Lic. Octavio Aguilar M. 11
UAJMS Ejercicios HTML
e) Para dar color a todo el texto del documento
<BODY TEXT=”blue”>
f) Para especificar el color de fondo del documento
<BODY BGCOLOR=”blue”>
g) Tipos de Letra.
<B>Negrita (Bold)</B>
<I>Cuersiva (Italic)</I>
<BLINK>Parpadeante (Blink)</BLANK>
<TT>Tamanio fijo (TypeWriter)</TT>
<EM>Enfasis (Emphasis)</EM>
<STRONG>Gran Enfasis (Strong)</STRONG>
<U>Subrayado (Underline)</U>
h) Comentar bloques de código
<!--> Bloque de líneas de código que no se verán en pantalla -->
i) Texto preformateado
<PRE>Escriba un párrafo</PRE>
j) Líneas Horizontales
<HR>
k) Listas Ordenadas
La marca para crear una lista ordenada es <OL> …</OL>
Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca
<LI> </LI>
l) Listas Desordenadas
También llamadas listas no numeradas, son listas en las que no es necesario
numerar de alguna manera los elementos que la componen, sino que cada elemento
tiene delante un símbolo.
La marca para la lista desordenada <UL> … </UL>
Cada elemento de la lista con la <LI> … </LI>
Taller I - Lic. Octavio Aguilar M. 12
UAJMS Ejercicios HTML
2.- Enlaces
Los enlaces (o Link) proporciona al que visita las páginas un mecanismo muy
sencillo para moverse entre documentos.
<A HREF=”dirección”> Texto enlace </A>
Donde:
dirección: es el destino del enlace.
Texto enlace: es el texto indicativo del enlace que aparece en la
pantalla.
Existen dos tipos de enlaces: relativas y absolutas.
Ubicación Relativa: Si indica especificando la posición del documento
en la estructura de subdirectorios a partir de la ubicación del documento
actual. Solo se puede usar para documentos ubicados en el mismo
ordenador.
<A HREF=”ubicación”> … </A>
Ubicación Absoluta: se indica especificando el URL (uniform resource
locator) de la página que se está referenciando.
<A HREF=”[Link] … </A>
Enlaces dentro de la página, se puede llegar a maquetar un página
excesivamente larga, con demasiado scroll, siendo necesario crear atajos
para moverse con rapidez y puntería. Esas herramientas son denominados
anclas o enlaces internos.
Ejemplo:
Taller I - Lic. Octavio Aguilar M. 2
UAJMS Ejercicios HTML
3.- Tablas.
Una tabla es una manera muy compacta y clara de mostrar la información.
Una tabla se entiende como un conjunto de filas (fila=horizontal), apiladas una
sobre otra. Casa fila contiene a su vez un conjunto de celdas, puestas una al
lado de otra.
Ejemplo:
Justificación del texto de las celdas.
HTML permite justificar horizontal y verticalmente el texto dentro de cada
celda. Para ello implementa los modificadores ALIGN y VALING dentro de
la etiqueta <TD>. La forma de hacerlo es:
Taller I - Lic. Octavio Aguilar M. 3
UAJMS Ejercicios HTML
Donde:
Vertical: puede tomar los valores TOP, MIDDLE, BOTTOM. Por
defecto es CENTER.
Horizontal: puede tomar los valores CENTER, LEFT y RIGHT. Por
defecto es LEFT.
Celdas de diferentes tamaños:
Por defecto, todas las celdas que constituyen una tabla en HTML tienen el
mismo tamaño. Sin embargo, es posible establecer el tamaño de una
determinada celda mediante dos modificadores <TD> que son WIDTH y
HEIGHT.
No es posible usar los modificadores WIDTH y HEIGHT para aplicarlos a
toda una fila. La única forma de hacerlo es poniendo en cada celda de la fila
los valores correspondientes.
Celdas Irregulares.
Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas.
La forma es introducir los modificadores COLSPAN y ROWSPAN en la
etiqueta <TD>
Taller I - Lic. Octavio Aguilar M. 4
UAJMS Ejercicios HTML
GUIA DE LABORATORIO #3
1.- Tablas.
1.1. Márgenes y separación de Celdas.
El atributo CELLSPACING controla el espaciado entre los bordes de cada una de las
celdas.
Con el atributo CELLPADDING podemos aumentar los márgenes entre el contenido de las
celdas y su borde.
1.2. Anidando Tablas.
Taller I - Lic. Octavio Aguilar M. 1
UAJMS Ejercicios HTML
GUIA DE LABORATORIO #4
1.- Imágenes.
Las imágenes son un elemento esencial para diseñar páginas atractivas. No
obstante, un excesivo número de imágenes en una página pueden hacer que
sea lento el proceso de visualización de la página.
La marca <IMG> no necesita cierre y su sintaxis correcta es:
Taller I - Lic. Octavio Aguilar M. 1
UAJMS Ejercicios HTML
Tamaño de las Imágenes
Con el uso de estos modificadores podemos ampliar, reducir las imágenes sin
deformarlas.
Ejemplo:
El atributo ALT.
El atributo ALT=”texto de sustitución” fue previsto en su origen para
proporcionar un texto de sustitución a los navegadores no gráficos o a aquellos
que tuvieran desactivada la opción de mostrar imágenes.
Ejemplo:
Bordes de la imagen.
Mediante el modificador BORDER se puede añadir bordes a nuestras
imágenes.
Ejemplo:
Taller I - Lic. Octavio Aguilar M. 2
UAJMS Ejercicios HTML
GUIA DE LABORATORIO #5
1.- Formularios.
En HTML, un formulario es una sección del documento destinada a que el usuario
introduzca datos que van a ser enviados a algún lado. En HTML un formulario puede
contener cosas muy variadas: texto normal, elementos especiales llamados controles
(checkboxs, radiobuttons, comboboxs, etc.), y otros elementos especiales denominados
etiquetas (labels). Explicaremos el significado de estos elementos especiales y cómo
generar formularios en HTML.
2.- La etiqueta FORM.
Los formularios están delimitados con la etiqueta <FORM> … </FORM>, que permite
reunir varios elementos de formularios, como botones y casillas de texto y que debe poseer
los siguientes atributos:
METHOD indica cómo se enviarán las respuestas "POST" es el valor que envía los
datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en
tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de
la dirección con un signo de interrogación (para aprender más sobre los métodos
POST y GET.
ACTION indica la dirección a la que se enviará la información.
Taller I - Lic. Octavio Aguilar M. 1
UAJMS Ejercicios HTML
3.- Dentro de la etiqueta FORM.
La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que
permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la
dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método
indicado en el atributo METHOD.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones,
tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos
interactivos son:
La etiqueta INPUT: Todos los botones y casillas de texto
La etiqueta TEXTAREA: una casilla de texto
La etiqueta SELECT: una lista de opciones múltiples
4.- La etiqueta INPUT.
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear
muchos elementos “interactivos”. La sintaxis de esta etiqueta es la siguiente:
El atributo TYPE se usa para especificar qué tipo de elemento se representa con la etiqueta
INPUT. Estos son los valores posibles:
checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked
(seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el
par nombre/valor se envía al CGI.
hidden: Este campo el navegador no lo muestra, envía información de manera
oculta.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva al
archivo que se enviará con el formulario.
image: Un botón de envío personalizado que aparece cuando se ubica una imagen
en la ubicación definida por el atributo SRC.
password: Una casilla de texto donde los caracteres escritos aparecen como
asteriscos para camuflar el texto de entrada.
radio: Un botón que permite al usuario elegir entre varias opciones. Cada uno de
estos botones debe tener el mismo atributo name. Al aplicar el atributo checked para
uno de estos botones se definirá como seleccionado de forma predeterminada.
reset: Un botón de restauración para quitar todos los elementos en el formulario.
submit: Un botón de envío para enviar el formulario. El texto en el botón puede
definirse usando el atributo value.
text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla
puede definirse usando el atributo size y la extensión máxima del texto con el
atributo maxlength.
Taller I - Lic. Octavio Aguilar M. 2
UAJMS Ejercicios HTML
5.- La etiqueta TEXTAREA.
La etiqueta TEXTAREA se usa para definir un cuadro de texto más grande que la línea
simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:
cols: representa el número de caracteres que puede contener un línea
rows: representa el número de líneas
name: representa el nombre asociado con el cuadro de texto, que permite su
identificación en el par nombre/valor.
readonly: impide que el usuario modifique el texto predeterminado en el campo
value: representa el valor predeterminado que se enviará al script si el usuario no ha
escrito nada en el cuadro de texto
6.- La etiqueta SELECT.
La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por
las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:
name: name: representa el nombre asociado con la casilla de texto, que permite su
identificación en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el número de líneas de la lista (este valor puede ser más grande que
el número de elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista
7.- Nuevos atributos de Formularios en HTML 5.
placeholder.- Indica que datos se debe ingresar.
autofocus.- Indica al navegador que atributo se enfoca cuando se carga la página.
required.- Indica que datos son obligatorios.
datalist.- Lista datos predefinidos dentro de un formulario.
8.- Nuevos tipos de Input en HTML 5.
serach.- ofrece un tipo de entrada de datos para buscar información.
email.- Valida entrada para correo electrónico.
url.- Valida entrada para una dirección web.
date.- visualiza un calendario para fecha.
month.- visualiza un calendario para mes.
number.- Entrada de tipo numérico
Taller I - Lic. Octavio Aguilar M. 3
UAJMS Ejercicios HTML
9.- Ejemplo de un Formulario.
Taller I - Lic. Octavio Aguilar M. 4
UAJMS Ejercicios HTML
8.- Realizar los siguientes Ejercicios:
a)
b)
Taller I - Lic. Octavio Aguilar M. 5
UAJMS Ejercicios CSS
Y se hace referencia con el atributo class.
Probar :
3.2.- Selección de IDENTIFICADORES.
La idea es parecida a la de las clases, pero ahora el nombre que indiquemos se referirá al
atributo identificador de un elemento, el cual se marca con el conocido atributo id de
HTML (presente en todas las etiquetas). Ejemplo:
Taller I - Lic. Octavio Aguilar M. 3
UAJMS Ejercicios CSS
4.- Colores.
El modelo RGB es una mezcla de colores que predice como serán percibidos por los
humanos respecto a los colores y luces experimentados en el mundo real. Está orientado
a pantallas digitales con tecnología compatible (CRT, LCD, plasma, OLED, quantum
dots, etc.). En la impresión se utiliza el modelo CMYK, que no es equivalente ya que
cada medio contiene unas particularidades propias. Sus siglas provienen de los 3 colores
primarios que son mezclados: El rojo, verde y azul. O en inglés: Red, Green y Blue. Al ser
mezclados producen toda la gama de colores que necesitamos para trabajar en Web.
Podemos hacer uso de 255 frecuencias por canal, o 24 bytes, que son en total 16.581.375
colores a utilizar.
Ejemplo:
4.1.- background-color.
Aplica un color de fondo.
Taller I - Lic. Octavio Aguilar M. 4
UAJMS Ejercicios CSS
4.2.- Opacity.
Aplica transparencia a todo su contenido, desde el texto al fondo.
Ejercicios:
1) Ejercicio 1
2) Ejercicio 2
3) Ejercicio 3
Taller I - Lic. Octavio Aguilar M. 5
UAJMS Ejercicios CSS
GUIA DE LABORATORIO #8
HOJAS DE ESTILO EN CASCADA
Cascading Style Sheets (CSS)
1.- Estilo de Texto
Los navegadores cuando no encuentran una fuente específica, estos tienen uno por defecto.
A.- font-family
CSS permite especificar estilos a los textos, los estilos más comunes son: serif, sans-serif,
monospace, cursive, fantasy.
En caso que el navegador no encuentre una fuente instalada, se pueden definir otras
opciones:
B.- font-size.- CSS puede definir tamaño en los textos.
Para definir tamaño en la fuente se está usando “px” (pixel), pero existe otras unidades de
medida :
Taller I - Lic. Octavio Aguilar M. 1
UAJMS Ejercicios CSS
CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas
relativas definen su valor en relación con otra medida, por lo que, para obtener su valor
real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas
establecen de forma completa el valor de una medida, por lo que su valor real es
directamente el valor indicado.
Unidades Absolutas:
pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.
pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.
px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que
se visualiza la página HTML.
Unidades Relativas:
em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de
letra del elemento.
ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño
de letra del elemento.
Ejemplo de Unidades Relativas:
Recomendaciones:
Taller I - Lic. Octavio Aguilar M. 2
UAJMS Ejercicios CSS
C.- font-style.- La propiedad font-style permite definir el aspecto de una familia
tipográfica entre los valores: normal, italic (cursiva) y oblique.
D.- font-weight.- La propiedad font-weight de CSS especifica el peso o grueso de la
letra. Algunos tipos de letra sólo están disponibles en normal y bold.
Valores:
normal .- Peso/grueso normal de la letra. Lo mismo que 400.
bold .- Grueso ancho (negrita). Igual que 700.
Lighter .- Corresponde a un tipo de letra menos gruesa que el tipo del elemento padre
(dentro de los valores disponibles).
Bolder.- Corresponde a un tipo de letra más gruesa que el tipo del elemento padre (dentro de
los valores disponibles).
100, 200, 300, 400, 500, 600, 700, 800, 900 .- Pesos numéricos para los tipos de letra que
nos permiten más flexibilidad que normal - bold. Si el peso especificado no existe en el tipo
de letra escogido, un valor entre 600 y 900 se presentará con el valor más próximo
disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se
presentará con el valor más próximo disponible para dar una letra más clara. Esto significa
que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y
500 será normal y entre 600 y 900, será bold.
2.- Quitar subrayado a un LINK.-
Otros valores: overline, line-through, blink.
Taller I - Lic. Octavio Aguilar M. 3
UAJMS Ejercicios CSS
3.- Definir un color de fondo.- CSS permite definir un color de fondo en
algunos elementos.
4.- Como justificar un texto.- CSS permite justificar textos.
Otros valores: right, left, center
5.- Selectores Peudo-Elemento.
:first-letter
Taller I - Lic. Octavio Aguilar M. 4
UAJMS Ejercicios CSS
:first-line
Como ejercicio define una clase llamado “especial” que tenga las características :first-line.
:before y :after
Los pseudo-elementos :before y :after se utilizan en combinación con la propiedad content
de CSS para añadir contenidos antes o después del contenido original de un elemento.
Taller I - Lic. Octavio Aguilar M. 5
UAJMS Ejercicios CSS
6.- Selectores Peudo-Clases.
:link ,se aplica a todos los enlaces que todavía no fueron visitados
:active ,se activa cuando el usuario activa un elemento.
:visited ,se aplica a todos los enlaces que han sido visitados.
:hover, se activa cuando el usuario pasa con el ratón o cualquier puntero.
:focus , se active cuando el elemento tiene el foco del navegador.
Ejercicios Propuesto: Implementar las siguientes páginas aplicando Hojas
de estilo en un archivo externo.
a)
Taller I - Lic. Octavio Aguilar M. 6
UAJMS Ejercicios CSS
GUIA DE LABORATORIO #9
HOJAS DE ESTILO EN CASCADA
Cascading Style Sheets (CSS)
1.- Entendiendo el modelo de Cajas
Una caja puede contener muchos tipos de objetos.
a.- Padding
Estilo que permite definir espacio entre el contenido y el borde del contenido.
Se pueden crear PADDING individuales:
Otras formas cortas:
Taller I - Lic. Octavio Aguilar M. 1
UAJMS Ejercicios CSS
b.- border
Estilo que permite definir el ancho de la línea en la caja.
Border-Style .-
Le da estilo al borde.
Border-radius.-
o simplemente se puede aplicar un solo valor a la propiedad.
Taller I - Lic. Octavio Aguilar M. 2
UAJMS Ejercicios CSS
d.- margin
Estilo que permite definir la separación de una etiqueta de otra.
e.- Display
Establece el tipo de caja generada por un elemento, algunos usos:
Ejemplo:
Taller I - Lic. Octavio Aguilar M. 3
UAJMS Ejercicios CSS
2.- Ejercicio #2.
3.- Ejercicio #3.
Características principales:
a) Las 2 cajas son idénticas y están sombreadas.
b) Usar : box-shadow (Sombras)
c) Usar: text-shados (Sombra del texto)
Taller I - Lic. Octavio Aguilar M. 5
UAJMS Ejercicios CSS
G U I A D E L A B O R A T O R I O # 10
HOJAS DE ESTILO EN CASCADA
Cascading Style Sheets (CSS)
1.- Tablas con CSS.
Podemos usar las siguientes propiedades CSS para configurar varios aspectos visuales de las
tablas:
a) Border.
b) Border-collapse.
c) Table size.
d) Table alignment.
Taller I - Lic. Octavio Aguilar M. 1
UAJMS Ejercicios CSS
Ejercicio #1.
Características principales:
a) Al colocar el Mouse, debe marcarse el fondo de la fila, pero no del encabezado ni de
los totales.
Ejercicio #2.
Características principales:
a) Cuando se coloque el puntero en cualquier fila, la fila debe marcarse de otro
color, menos el encabezado.
Taller I - Lic. Octavio Aguilar M. 2
UAJMS Ejercicios CSS
G U I A D E L A B O R A T O R I O # 11
HOJAS DE ESTILO EN CASCADA
Cascading Style Sheets (CSS)
1.- Selector Descendentes.
Los elementos que están dentro de otros elementos son sus descendientes.
1.- Selector Descendiente Directo.
CSS2 introduce el selector hijo especificado por “ > ”.
Taller I - Lic. Octavio Aguilar M. 1
UAJMS Ejercicios CSS
Pruebe que pasa con este ejemplo:
2.- Selector de Hermanos Adyacentes.
Este tipo de selectores está especificado por el símbolo “+”.
Son afectados todos los Párrafos que estén directamente después de H1.
Probar:
Taller I - Lic. Octavio Aguilar M. 2
UAJMS Ejercicios CSS
3.- Selectores General de Hermanos.
En CSS3 el símbolo “~” puede ser usado para definir un selector y afectar a todos los
hermanos que lo preceden.
4.- Selectores Atributo.
Permite reglas para relacionar elementos condicionados por los atributos del selector.
Taller I - Lic. Octavio Aguilar M. 3
