INSTITUTO TECNOLÓGICO DE SALINA CRUZ

ACTIVIDAD:

T2-03 Ejercicios diversos

NOMBRE (S):

Fernando Hernández Rodríguez

ASIGNATURA:

Programación Web

GRADO Y GRUPO:

5E

CARRERA:

Ing. en Tecnologías de la Información y Comunicaciones

FACILITADOR:
ING. JULISSA ANDREA ALQUISIRIS SIBAJA

SALINA CRUZ, OAX. A <01/07/2018>

 Texto
El texto básico de un documento HTML puede escribirse con etiquetas. Cada navegador lo
visualiza entonces con el tipo y tamaño de caracteres escogidos en su configuración por
defecto, e introduce un salto de línea cuando los caracteres alcanzan el borde de la ventana.

• Una de las etiquetas es el <h1> que se utiliza para titulares, es importante

utilizar un <h1> por página para que se haga de la manera correcta
• Otra de las etiquetas es el <p> es una etiqueta especial para los párrafos y
dentro de la etiqueta <p> el texto.
• Otra de las etiquetas es el <b> sirve para agregar negritas de un estilo bold
y hay otra forma de hacerlo <strong> y la diferencia entre estos dos es que
la etiqueta <b> simplemente se utiliza un estilo visual y <strong> nos permite
es darle un poco más de énfasis para el navegador y sobre todo para los
buscadores.
• Otras de las etiquetas <span> con css decimos que el contenido que está
dentro <span> le vamos agregar si es tu estilo entonces <span> podemos
hacer que las negritas las letras sean bold sin necesidad de hacer énfasis
para que el navegador lo busque.
• Otras de las etiquetas <i> es para agregar letras itálicas.
• Otras de las etiquetas <blockquote> nos permite agregar una cita es decir
cuando nosotros estamos haciendo una referencia a alguna cita que en algún
libro, etc.
• Otras de las etiquetas <cite> nos permite agregar más que nadie el autor de
quien lo escribe.
• Otras de las etiquetas <hr> nos permite agregar una línea separadora entre
cada elemento que nosotros queramos y darle una mejor estructura a nuestro
sitio web.

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: á => &aacute; é => &eacute; í => &iacute; ó => &oacute;
ñ = &ntilde;
 Navegador Explorer

Navegador Google Chrome

Navegador Morzilla FireFox

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:

1. Enlace externo: otro documento HTML situado en un ordenador remoto.

2. Enlace local: otro documento HTML situado en el mismo ordenador.
3. Ancla: otro lugar dentro del mismo documento HTML
• Otra enlace importante <link rel=”stylesheet” href=””> el href es donde va
nuestro archivo y rel=”stylesheet” nos esta indicando que va ser un link de
tipo stage y que es hoja de cascada y esta manera estaríamos nuestra hoja
de estilos css.
• Otro link <script> y este link nos permite es que si le agregamos un s recent
que será un atributo en el cual agregamos la ruta en este caso archivo.js en
el cual vamos a poder ejecutar código sin ensuciar todo este documento html.
• Otro link <link rel=”shortcut icon” type=”image/x-icon”
href=”imágenes/favicon.ico”> es para hacer un icono y debe ser .ico para que
pueda detectar
Navegador Explorer
Navegador Google Chrome
Navegador Morzilla FireFox
Navegador Opera
 Listas
• Las listas son elementos que, como los títulos, permiten presentar niveles
jerarquizados de texto.
• Los documentos HTML permiten dos tipos de listas:
1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>…</UL>.
2. Listas ordenadas o numeradas (numbered list): su etiqueta principal
es <OL>…</OL>.
3. Listas de definiciones (definition list): su etiqueta principal es <DL>…</DL>
• Una vez definido el tipo de lista deseada, los elementos que la componen se
marcan de distinta manera según el tipo:
1. En las listas ordenadas (<OL>…</OL>) o no ordenadas (<UL>…</UL>),
cada elemento de dicha lista se marca con la etiqueta <LI>…</LI> (list item).
2. En las listas de definición (<DL>…</DL>), se utilizan dos: cada elemento que
se define se marca con <DT>…</DT> y el texto de cada definición se marca
con <DD>…</DD>. Esta etiqueta se puede repetir si se necesita introducir
varios elementos de definición.
• Las listas se pueden encajar unas dentro de otras, además de con el resto
de las etiquetas disponibles.
 Navegador Explorer

Navegador Google Chrome

Navegador Morzilla FireFox

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:

Otros ejemplos básicos para colocar videos en nuestra página:

A continuación tenemos un listado de los formatos/codecs más conocidos y

utilizados:
Navegador Explorer
Navegador Google Chrome
Navegador Morzilla FireFox
Navegador Opera
 Aplicaciones
Las HTML applications o aplicaciones en HTML son programas ejecutados por
parte de Internet Explorer bajo un programa llamado mshta.exe que hace que un
código de HTML sea ejecutado como si fuera una aplicación.
Ejemplo:
 Formularios
La etiqueta FORM
Los formularios están delimitados con la etiqueta <FORM> … </FORM>, que
permite reunir varios elementos de formulario, 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,
consulte el artículo sobre protocolo HTTP)
• ACTION indica la dirección a la que se enviará la información (un script CGI
o dirección de correo electrónico (mailto:pumas01_01234 @hotmail.com))

Esta es la sintaxis para la etiqueta FORM:

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
Envío de datos
Cuando se envía un formulario (haciendo clic en el botón de envío), los datos del
formulario se envían a un script CGI bajo la forma de pares nombre/valor, es decir
conjuntos de datos representados por el nombre del elemento formulario, un signo
igual (“=”) y luego el valor asociado. Estos pares nombre/valor se separan unos de
otros mediante el símbolo de unión (“&”). Por lo tanto, los datos que se envían al
script se verán así:

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 Google Chrome

Navegador Morzilla FireFox

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

Navegador Morzilla FireFox

Navegador Opera
 Selectores
La estructura general de los selectores y atributos es de la siguiente manera:

El selector de elemento
El selector de elementos selecciona elementos basándose en su nombre.

Por ejemplo, se pueden seleccionar todos los elementos <p> de la siguiente

manera: (todos los elementos <p> estarán centrados, y serán de color rojo)

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:

Es importante mencionar que los nombres de clase no deben de empezar con

numero.
Agrupando selectores
Si se tienen elementos con las mismas definiciones de estilos así:
se pueden agrupar los selectores para minimizar el código.
Para agrupar selectores, solo separe cada selector con una coma.
En el ejemplo a continuación tenemos los selectores del código anterior ya
agrupados: