Documente Academic
Documente Profesional
Documente Cultură
ACTIVIDAD:
NOMBRE (S):
ASIGNATURA:
Programación Web
GRADO Y GRUPO:
5E
CARRERA:
FACILITADOR:
ING. JULISSA ANDREA ALQUISIRIS SIBAJA
Esto en HTML es un problema, pues no todo hay forma de mostrarlo más que con entidades HTML
(códigos especiales que muestran estos caracteres).
Por ejemplo: á => á é => é í => í ó => ó
ñ = ñ
Navegador Explorer
Navegador Opera
Enlaces o vínculos
• La sintaxis general de la etiqueta es muy simple: <A
HREF=”destino”>…</A>. (Los puntos suspensivos representan el elemento
enlazado.)
• Para que el destino se abra en una ventana nueva, hay que indicar el
siguiente atributo: <A HREF=”destino” target=”_blank”>…</A>
• El destino de un hiperenlace puede ser de tres tipos:
Navegador Opera
Tablas
• Las tablas permiten ordenar y alinear los elementos de un documento de
una manera precisa.
• Las tablas son mucho más frecuentes de lo que parece a primera vista,
puesto que, en la mayor parte de los casos, las líneas que las definen
permanecen ocultas.
• Las etiquetas fundamentales que definen una tabla son las siguientes:
Navegador Explorer
Navegador Google Chrome
Navegador Morzilla FireFox
Navegador Opera
Imágenes
• La etiqueta básica para insertar una imagen es: <IMG SRC=”dirección de la
imagen”>. De esta manera, el navegador visualizará la imagen contenida en
la dirección especificada.
• Como puede verse, la imagen no forma parte de un documento HTML: éste
sólo indica al navegador dónde puede descargarla.
• Otra etiqueta <title> sirve para tener una pequeña descripción sobre la
imagen
• Esta etiqueta básica posee varios atributos, que se muestran en la siguiente
tabla:
Navegador Explorer
Navegador Google Chrome
Navegador Morzilla FireFox
Navegador Opera
Objetos
Además de las imágenes, HTML permite incluir en las páginas web otros elementos
mucho más complejos, como applets de Java y vídeos en formato QuickTime o
Flash. La mayoría de este tipo de contenidos no los interpreta el navegador
directamente, sino que hace uso de pequeños programas llamados plugins y que
se encargan de tratar con este tipo de elementos complejos.
La etiqueta <object> es la que permite “embeber” o incluir en las páginas HTML
cualquier tipo de contenido complejo:
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:
• heckbox: 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, que el navegador no muestra, es para definir una
configuración única que se enviará al CGI como par nombre/valor.
• file: Un campo que permite al usuario especificar una ruta de archivo que
lleva al archivo que se enviará con el formulario. Los tipos de archivo que
pueden ser enviados deben especificarse utilizando el atributo ACCEPT de
la etiqueta FORM.
• 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. El par nombre/valor del
botón radio seleccionado se enviará al CGI. 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 y restablecer sus valores predeterminados.
• 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.
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
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
Navegador Explorer
Navegador Opera
Implementación de estilos
Una regla de css es la regla fundental de body{background:#000000;}, y que es
una regla css es todo el conjunto digamos de grupos que vamos a estar haciendo
para poder darle estilos a un elemento pero esta regla css se compone de varias
cosas:
• Se compone de un selector que nos indica a que aspecto nosotros le
vamos a modificar la propiedad
• Body hace referencia a todo el documento entonces Body nosotros decimos
que queremos modificar todo el documento y luego background que va a
gran de ahora es nuestra propiedad decimos que queremos modificar de lo
que es el body de lo que es nuestro selector.
• Con background queremos cambiar el fondo y después tenemos el valor
• El valor nos va a decir a que valor queremos cambiarle la propiedad.
• Otra propiedad color nos agrega el color de nuestra fuente de la tipografía
Navegador Explorer
Navegador Google Chrome
El selector de elemento
El selector de elementos selecciona elementos basándose en su nombre.
El selector de id
El selector de id utiliza el atributo id de un elemento HTML para seleccionar un
elemento en especifico.
Un id siempre debe de ser único, por lo cual el selector de id es utilizado cuando se
desea seleccionar un elemento único.
Para seleccionar un elemento con un id especifico, se utiliza el caracter hash (#),
seguido del id del elemento.
El estilo a continuación sera aplicado al elemento HTML con id=”para1″:
Es importante mencionar que los nombres de id no deben de empezar con numero.
El selector de clase
El selector de clase selecciona elementos con un atributo clase especifico.
Para seleccionar elementos con una clase especifica, se escriba un caracter punto
seguido del nombre de la clase:
En el ejemplo que se muestra a continuación, todos los elementos HTML con la
class=”center” serán alineados:
También es posible especificar que elementos HTML deben de ser afectados por
una clase.
En el ejemplo a continuación, todos los elementos <p> con la class=”center” estarán
alienados al centro: