Scribd
Cargar
4 vistas

Manual de HTML SNPP DISEÑO WEB (1)

html diseño web

Cargado por

Javier Gonzalez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
4 vistas

Manual de HTML SNPP DISEÑO WEB (1)

html diseño web

Cargado por

Javier Gonzalez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 23

HTML

Empecemos conociendo algo de HTML

ESTRUCTURA PRINCIPAL DE UNA PÁGINA WEB


Las etiquetas que están en negrita son las etiquetas principales que hacen a una
página WEB.
Copia el siguiente código en un editor de código como NOTEPAD++, que permite
colorear la sintaxis para comprender mejor el ejercicio.
<html>
<head>
<title>
Mi primera WEB
</title>
</head>
<body>
<p>Hola mundo! </p>
<br>
<p>Bienvenidos a mi sitio web, mi nombre es… </p>
</body>
</html>

Guarda el trabajo con el nombre de pagina1.html

Las etiquetas <html> y </html>, delimitan y engloban el cuerpo de la página web.


Las etiquetas <head> y </head>, definen el área de encabezado, en el ejemplo se
observa que en ella se escribe el título de la página. Más adelante observaremos que
en entre esas etiquetan incluiremos script y estilos.
Todo lo que escribamos dentro de las etiquetas <body> y </body>, será visualizado
como contenido de nuestra página.

Qué es HTML5 y el DOCTYPE


HTML: siglas de HyperText Markup Language (“lenguaje de marcado hipertextual”),
hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un
estándar que, en sus diferentes versiones, define una estructura básica y un código
(denominado código HTML) para la definición de contenido de una página web,
como texto, imágenes, etc. Es un estándar a cargo de la W3C, organización dedicada
a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo
referente a su escritura e interpretación.

HTML5: (HyperText Markup Language, versión 5) es la quinta revisión importante del


lenguaje básico de la World Wide Web, HTML.

DOCTYPE: del inglés document type declaration (declaración de tipo de documento),


es la primera declaración que va en una página web y le dice al navegador qué
especificación de HTML o XHTML estas usando.
Ejemplo: <!DOCTYPE html>
Ajustará el código html a los nuevos atributos admitidos por la versión 5 del HTML.

Otros ejemplos:

Moisés Osmar Avalos Torres 1


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<!DOCTYPE html>
<html>
Esta será la estructura inicial de nuestras páginas <head>
<title>
</title>
</head>
<body>
</body>
</html>

Etiquetas
Etiquetas especiales
<br>Salto de linea
<hr>Linea horizontal
Propiedades:
width: largor de linea,
size: grosor de linea.
title: agrega un texto que se visualiza al colocar el cursor sobre la línea.
align: alineación de línea.

Objetos de texto
Las etiquetas para formato a textos son:

ENCABEZADOS
<br>
<h1>texto con tamaño h1</h1>
<h2>texto con tamaño h2</h2>
<h3>texto con tamaño h3</h3>
<h4>texto con tamaño h4</h4>
<h5>texto con tamaño h5</h5>
<h6>texto con tamaño h6</h6>
<br>
RESALTADO DE TEXTOS
<br>
<p>Esto es un párrafo</p>
<b>texto con negrita</b> <br>
<strong>tambien equivale a negrita</strong> <br>
<big>texto grande</big> <br>
<em>texto con énfasis</em> <br>
<i>texto en cursiva</i> <br>
<small>texto muy pequeño</small> <br>
<sub>texto tipo subíndice</sub> <br>
<sup>texto superíndice,</sup> <br>

Moisés Osmar Avalos Torres 2


<u>texto subrayado</u> <br>
<del>texto tachado</del> <br>
<tt>texto teletipo</tt> <br>
<font color="green">texto de color verde</font> <br>
<font color="#00ff00">aquí el color se especificó en el
sistema RGB (red: 00, green: ff, blue: 00)</font> <br>
<font face="impact"> tipo de letra IMPACT </font> <br>
<font size="36">Otra forma de ajustar tamaño de letra </font> <br>
<font align=”right”> Este texto está alineado a la derecha </font><br>
<font size=”22” face=”tahoma” color=”#c45911” align=”center”>
Esto es otra línea de texto con color, tamaño, letra distinta
y está centrado
</font> <br>
ALINEACIÓN DE TEXTO
<center> Este texto está centrado usando la etiqueta center</center>

Caracteres especiales y colores en HTML


Mostrar caracteres especiales Algunos colores RGB
TEXTO DESCRIPCIÓN PANTALLA #4472c4 #c8c53b
&acute; Acento ´ #a6a6a6 #e64e1e
&ntilde; Ñ Ñ #c45911 #3781af
&aacute; a con acento Á #ffd966 #6e146a
&quot; Comillas dobles “ #a8d08d #11a31f
&deg; Grados º #70ad47 #006600
&lt; Menor que < #a10f0f #ffffff
&gt; Mayor que > #201a96 #000000

pagina2.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>MiPrimeraPagina</title>
6 </head>
7 <body>
8 <h1>Este es un ejemplo de uso de etiquetas en HTML</h1>
9 <br>
10 <b>texto con negrita</b> <br>
11 <strong>tambien equivale a negrita</strong> <br>
12 <big>texto grande</big> <br>
13 <em>texto con énfasis</em> <br>
14 <i>texto en cursiva</i> <br>
15 <small>texto muy pequeño</small> <br>
16 texto<sub> tipo subíndice</sub> <br>
17 texto<sup> superíndice,</sup> <br>

Moisés Osmar Avalos Torres 3


18 <u>texto subrayado</u> <br>
19 <del>texto tachado</del> <br>
20 <tt>texto teletipo</tt> <br>
21 <font color="green">texto de color verde</font> <br>
22 <font color="#00ff00">aquí el color se especificó en el
23 sistema RGB (red: 00, green: ff, blue: 00)</font> <br>
24 <font face="impact"> tipo de letra IMPACT </font> <br>
25 <font size="36">Otra forma de ajustar tamaño de letra </font> <br>
26 <font size="22" face="tahoma" color="#c45911">
27 Esto es otra línea de texto con color, tamaño y letra distinta
28 </font>
29 <p>La etiqueta p es para definir un párrafo </p>
30 <!- - esto es un comentario, esta línea no debería de verse - ->
31 </body>
32 </html>

Propiedades del body

bgcolor: color de fondo de la página. Los colores se indican en inglés o en la


escala hexadecimal. Por ejemplo: <body bgcolor= “black”> es lo mismo que
<body bgcolor= “#000000”>

background: etiqueta para colocar una imagen de fondo. Se requiere indicar la


ruta de donde está ubicada la imagen, nombre más su extensión. Por ejemplo:
<body background= “imagen/fondo.png”>

text: etiqueta para indicar color de texto. Por ejemplo:


<body bgcolor= “#000000” text= “#ffffff”>. Tendremos una página con fondo
negro y texto de color blanco.

Para practicar
1- Crear la siguiente página web utilizando las etiquetas estudiadas.

pagina3.html

Moisés Osmar Avalos Torres 4


1 <!DOCTYPE html>
2 <html lang=”es”>
3 <head>
4 <meta charset="utf-8">
5 <title>HTMLISCOOL</title>
6 </head>
7
8 <body bgcolor="#3781af">
9
10 <br>
11 <font color="#CCCCCC" face="Arial Black, Gadget, sans-serif" align="center" size=”30”>
12 <center><h1>
13 Diseño WEB
14 </h1></center
15 </font>
16 <hr size="5" color="#CCCCCC" >
17 <br>
18 <font color="#CCCCCC" face="Arial, Helvetica, sans-serif" size="4">
19 El mundo del diseño Web se encuentra en constante evolución.<br>
20 El que navega estas aguas, debe comprender que los conocimientos
21 de hoy no son suficientes para mañana.<br>
22 Procura actualizarte siempre.
23 </font>
24 <br>
25 <hr width="100" size="6" color="#1358CC" align="center" title="Somos del SNPP">
26 </body>
27 </html>

2- Cambiar sus propiedades y observar los resultados en


un navegador.
- Tipo de letra, tamaño, color,
alineación…
- Fondo de imagen

8 <body background="imagen/fondoDeColores.jpg">
13 Diseño WEB <font face="Webdings" size="6">a</font>

Para investigar
1- Que función cumple la siguiente línea de código en la página:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
_____________________________________________________________________

<meta charset="utf-8"/>
____________________________________________________________________________

Moisés Osmar Avalos Torres 5


Objetos de tablas
<table> </table> : Entre estas etiquetas se diseña la tabla.
<tr> </tr>: Etiquetas para agregar filas.
<th> </th>: Etiquetas para agregar columnas. Se utiliza para distinguir la
primera fila como header.
<td> </td>: Etiquetas para agregar columnas.

Propiedades de tabla y celda


width: ancho de tabla o columna, en porcentaje o pixeles.
height: alto de tabla o columna.
colspan: unir celdas de una fila.
rowspan: unir celdas de una columna.
bgcolor: color de fondo de tabla o celda.
align: alineación horizontal.
valign: alineación vertical.
border: para especificar borde de página.

Ejemplo de uso:

<table border=”1” width=”80%” height=”500” align=”center”>

Para practicar
1- Desarrollar la siguiente página web utilizando las etiquetas aprendidas.
pagina4.html

Moisés Osmar Avalos Torres 6


Código de la pagina4.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Navegadores Web</title>
6 <meta name="description" content="Navegadores Web, una puerta a la red"/>
7 <meta name="keywords" content="navegadores, web, google, chrome, mozilla, firefox"/>
8 </head>
9
10 <body bgcolor="#9dc3d1" text="#333333">
11 <br>
12 <table width="60%" height="600" border="0" align="center" bgcolor="#009999">
13 <tr><td>
14
15 <hr color="#9dc3d1">
16 <h1><font color="#CCCCCC" face="Arial, sans-serif">NAVEGADORES WEB</font></h1>
17 <hr color="#9dc3d1">
18 <br>
19
20 <font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="4">
21 <p>Un navegador o navegador web, o browser, es un software que
22 permite el acceso a Internet, interpretando la información de
23 archivos y sitios web para que éstos puedan ser leídos.</p>
24 <p>La funcionalidad básica de un navegador web es permitir la visualización
25 de documentos de texto, posiblemente con recursos multimedia incrustados.</p>
26 <p>Además, permite visitar páginas web y hacer actividades en ella, es decir,
27 podemos enlazar un sitio con otro, imprimir, enviar y recibir correo, entre
28 otras funcionalidades más.</p>
29 </font>
30 <br><br><br>
31
32 <!--aqui empieza la tabla contenedora-->
33 <table width="548" border="1" align="center" bgcolor="#FFFFFF" >
34 <tr>
35 <td colspan="2" bgcolor="#333333" height="50" align="center">
36 <font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="5">
37 <u>Navegadores más usados</u>
38 </font>
39 </td>
40 </tr>
41 <tr>
42 <td width="132" align="center" bgcolor="#999999"><strong>Navegador</strong></td>
43 <td width="123" align="center"
bgcolor="#999999"><strong>Desarrollador</strong></td>
44 </tr>
45 <tr>
46 <td bgcolor="#999999"><strong>Google Chrome</strong></td>
47 <td bgcolor="#CCCCCC"> </td>

Moisés Osmar Avalos Torres 7


48 </tr>
49 <tr>
50 <td bgcolor="#999999"><strong>Mozilla Firefox</strong></td>
51 <td bgcolor="#FFFFFF"> </td>
52 </tr>
53 <tr>
54 <td bgcolor="#999999"><strong>Internet Explorer</strong></td>
55 <td bgcolor="#CCCCCC"> </td>
56
57 </tr>
58 <tr>
59 <td bgcolor="#999999"><strong>Safari</strong></td>
60 <td> </td>
61 </tr>
62 <tr>
63 <td colspan="2" bgcolor="#CCCCCC"><em>Datos actualizados al : </em></td>
64 </tr>
65 </table>
66
67 <td><tr>
68 </table><!--fin de la tabla contenedora-->
69 </body>
70 </html>

Tomar tus apuntes aquí


_______________________________________________________________
_______________________________________________________________

Objetos multimedia (imagen, video y sonido).


Etiqueta para insertar imagen
<img>
Como funciona

<img src= "imagen/logo.png" width="30%" height="30%"/>

Inserta una imagen llamada logo, ubicada en la carpeta imagen, cuya extensión es
png. Con tamaño ajustado al treinta por ciento en ancho y alto.
También puede especificarse en pixeles (px).

Etiqueta para insertar sonido


<audio> </audio>

Como funciona

<audio controls autoplay preload>


<source src="micancion.ogg" type="audio/ogg" />
<source src="micancion.mp3" type="audio/mp3" />
</audio>

Moisés Osmar Avalos Torres 8


El atributo controls se incluye para ordenar al navegador que presente un elemento
gráfico mediante el cual el usuario pueda manejar, como mínimo, las características de
play y pause de su reproductor.

Autoplay es el atributo que le indica al navegador que inicie la reproducción una vez
que el audio haya sido cargado en la página.
Loop es un atributo que informa al navegador utilizado que debe repetir la
reproducción desde el principio cada vez que ésta concluya.
Preload: permite cargar unos segundos el audio antes de empezar la reproducción

Etiqueta para insertar video


<video> </video>

Como funciona

<video controls autoplay width=”800” height=”450”>


<source src="mipelicula.mp4" type="video/mp4" />
<source src="mipelicula.webm" type="video/webm" />
<source src="mipelicula.ogg" type="video/ogg" />
</video>

La inclusión de diferentes formatos de video, tales como mp4, webm y ogg, descritos
mediante la etiqueta source, permiten a los navegadores seleccionar el primer formato
que sea compatible con su sistema de reproducción.

Los formatos de video consisten en la combinación de dos formatos diferentes: el de


video y el de audio. En particular, los tres formatos señalados anteriormente, están
constituidos de la siguiente forma:

Mp4 es la combinación de H.264 (video) y AAC (audio).


Los formatos ogg y ogv se constituyen por la unión de los formatos Theora para video
y Vorbis para la reproducción del audio asociado.
En el caso de web, sus componentes son Vp8 (video) y Vorbis (audio).

Atributos principales de la etiqueta video de HTML5


Además de source, la etiqueta video puede condicionar su funcionamiento a través de
otros atributos. Algunos de ellos son:
Width y height, que establecen el tamaño del rectángulo donde se reproducirá el
video. Si se omiten estos dos parámetros, el navegador asumirá las dimensiones, lo
cual podría afectar a la distribución de los elementos dentro de nuestra página web.
Autoplay es el atributo que le indica al navegador que inicie la reproducción una vez
que el video haya sido cargado en la página.
Loop es un atributo que informa al navegador utilizado que debe repetir la
reproducción desde el principio cada vez que ésta concluya.
Controls avisa al navegador que debe mostrar los controles necesarios para que el
usuario interactúe con el video reproducido. Es la típica imagen gráfica con los
controles play, pause, stop.

Moisés Osmar Avalos Torres 9


Etiqueta de vínculo
<a></a>
Como funciona
<a href=”link.html”>Pulse aquí</a>

Al hacer clic en el texto “Pulse aquí” se abrirá la página con el nombre de link.html

Propiedades
target: sirve para definir la forma en la que se accederá a la nueva url.
_blank: Para hacer que ese enlace se abra en una ventana a parte.
new:
self:
ancla: sirve para dirigir al usuario a otra parte distinta pero dentro del mismo fichero en
el que estamos. Para crear un ancla debemos crear primero el lugar al que queremos
acceder. Debemos escribir lo siguiente:
<a name=“ancla”>
Y después debemos escribir un enlace con el código siguiente:
<a href= “#ancla”>Enlace para acceder al ancla</a>

Etiqueta de lista
<ul>: contenedor de lista sin ordenar.
<ol>: contenedor de lista ordenada.
<li>: utilizado para citar listas dentro de los contenedores.

Propiedades de ul:
type : para especificar el tipo de lista. Los valores posibles son: square,
circle.
Ejemplo: <ul type=”circle”>, <ul type=”square”>
Propiedades de ol:
type : permite indicar un carácter numérico o alfabético para la secuencia.
Ejemplo: <ol type:”I”>, <ol type=”1”>, <ol type=”A”>

pagina5.html
Este es un ejercicio libre, agrega efectos e imágenes según el tema.
Utiliza la mayor cantidad de etiquetas ya estudiadas.
Esto ayudará a fijar tus conocimientos.

<center>
<h1>Consejos para Automovilistas</h1>
</center>
<hr width="50%"><br>
<br>
<h2>Debemos tener en cuenta siempre:</h2><br>

Moisés Osmar Avalos Torres 10


<ul>
<li>No conducir cansado o con sueño</li>
<li>Disminuir la velocidad en los cruces, aunque le corresponda el paso</li>
<li>Usar las luces de giro</li>
<li>Revisar el vehículo periódicamente</li>
<li>Evitar el consumo de bebidas alcohólicas antes de conducir</li>
</ul>
<br>
<h2>Recuerda:</h2><br>
<ol type="I">
<li>No ocupar toda la calle, toda maniobra que realiza avísela a los demás con
anterioridad</li>
<li>Utiliza las luces bajas en los días de niebla o lluvia</li>
<li>No encandile. Mantenga las luces bajas aunque el que viene de frente no lo
haga</li>
<li>Acompañe la velocidad del tránsito: Respete los límites de velocidad.</li>
<li>No acelerar en zigzag entre vehículos, adelántese por la izquierda.</li>
<li>Mantener la derecha para dejar que otro auto pase si lo desea.</li>
</ol>
<br>
<h2>Costumbres que debemos tener:</h2><br>
<ol type=i>
<li>Mueva los ojos, no la cabeza. Vigile continuamente la calle o camino: hacia delante,
a los lados o por los espejos retrovisores.</li>
<li>Respete a los peatones. Deles prioridad para cruzar.</li>
<li>Si desea conducir a poca velocidad, manténgase en el carril derecho</li>
<li>Para doblar ubíquese en el carril apropiado y haga a tiempo la señal que
corresponde</li>
<li> Asegúrese que lo vean cuando se adelanta o en un cruce. Si duda, toque la bocina
o haga señales de luces.</li>
</ol>

Tomar tus apuntes aquí


_______________________________________________________________
_______________________________________________________________
Para practicar
1- Desarrolla la siguiente página web utilizando los elementos estudiados.

Moisés Osmar Avalos Torres 11


pagina6.html

Tomar tus apuntes aquí


_______________________________________________________________
_______________________________________________________________

Para desarrollar la página


1. Crear una tabla con 7 filas y 3 columnas
2. Combinar las celdas de la fila 1, 2, 3 y la fila 7.
3. Agregar la imagen de fondo
4. Ajusta el ancho total de la tabla.
5. Agregar la imagen de título en la primera fila.
6. Agregar los textos.
7. Agregar las imágenes, los audios y los videos según corresponda.

Moisés Osmar Avalos Torres 12


8. Colocar enlaces a las últimas dos imágenes.
9. Realizar los ajustes necesarios: fondo de tabla color de letras.
Para investigar
1- ¿Qué es canvas en HTML5?
_____________________________________________________________________
_____________________________________________________________________

Objetos de formulario
<form> </form>
El objeto form posee las siguientes propiedades:
Propiedad Descripción
name : es el nombre único del formulario.
action : es el lugar al cual se envía el formulario para ser procesado. El action
define la URL a la cual se envía dicho formulario.
method : método de envío de los datos insertados en un formulario.
El method puede ser:
GET = envía los datos en una cadena "visible". Conveniente para enviar
pocos datos.
POST = envía los datos en forma "invisible". Conveniente para enviar
una gran cantidad de datos.
target : define la ventana o marco (frame) en la que se mostrarán o procesarán
los resultados del formulario.
El valor es el mismo que el utilizado en HTML (blank, self, top,
nombre_marco, etc..)
Sintaxis básica
<form name="nombre_formulario" action="procesar.asp" method="POST"
target="_blank">
.......campos.......
</form>
Métodos del objeto form
El objeto form posee dos métodos:
método descripción
submit : envía el formulario.
reset : restablece el formulario a los valores por defecto.
Sintaxis básica
<form name="nombre_formulario" action="procesar.asp" method="POST"
target="_blank">
.......campos....
<input type="submit" value="enviar formulario">
<input type="reset" value="borrar">
</form>

Entrada:
<input type=”text” > Cuadro de texto.

Moisés Osmar Avalos Torres 13


<input type=”password” Campo para contener contraseñas, los
caracteres se muestran en forma de puntos o
asteriscos.

<input type="email" /> Cuadro para inserción de correo. Utilizando el


atributo pattern se puede comprobar si la
dirección escrita es válida.

<input type="url" /> Cuadro de inserción de direcciones web

<input type="date" /> Cuadro que permite al usuario seleccionar la


fecha

<input type="time" /> Define un control para seleccionar la hora.

<input type="datetime" /> Define un control que permite al usuario


seleccionar la fecha y la hora.

<input type="month" /> Define un control para seleccionar mes y año.

<input type="week" /> Define un control para seleccionar número de


semana y año.

<input type="number" /> Agrega un campo cuyo contenido debería de


ser numérico.

<input type="range" /> Es usado para insertar una etiqueta


desplazable que permite la selección de un
valor numérico.

<input type="tel" /> Define un campo para la inserción de número


telefónico.

<input type="search" /> Define un campo de búsqueda.

<input type="color" /> Agrega un campo para seleccionar colores.

<textarea> </textarea> Define una área para insertar textos multilineas.

<select> <option> </option></select> : para visualizar un campo con menú


seleccionable.
<input type=”radio”> : permite a los usuarios elegir entre dos valores
posibles: marcado y no marcado. La diferencia
radica en la exclusividad: cuando muchos
botones radio comparten un mismo valor en el
atributo "name", sólo uno de ellos puede ser
marcado, y cuando ocurre, todos los demás
son automáticamente desmarcados.

<input type=”checkbox”> : es un control que permite a los usuarios


cambiar entre dos valores: marcado y no

Moisés Osmar Avalos Torres 14


marcado. Este tipo de control puede resultar útil
para hacer simples preguntas "sí ó no" a los
visitantes de la página. Un buen ejemplo de su
uso puede ser un formulario donde el usuario
debe seleccional hobbies o intereses (películas,
radio, compras, etc.).

Atributos:
autofocus : al escribirlo como atributo dentro de una etiqueta, el cursor
se posiciona en esa celda una vez cargada la página. Debe
ser usado una sola vez en un formulario.

min : es usado con la etiqueta range para definir el valor mínimo.


max : es usado con la etiqueta range para definir el valor máximo.

step : especifica los intervalos válidos para el campo de entrada (si


step="3", los números válidos 3,6,9,12, etc.).

pattern : especifica una expresión regular usada para validar los


valores del elemento input. Este atributo funciona con los
tipos de entrada input siguientes: texto, búsqueda, url,
teléfono, correo electrónico y contraseña.

placeholder : para especificar un texto explicativo en el interior del campo.

required : Al incluir el atributo required dentro de un elemento <input>,


automáticamente se hace obligatorio su llenado y al ser un
atributo tipo booleano, solo se requiere su presencia sin más.
<input type="text" name="nombre" required/>

En el momento en que se encuentra un error de validación se


ejecuta la acción por defecto del navegador, normalmente
aparece un pequeño globo emergente (tooltip) conteniendo un
texto de advertencia. Añadiendo el atributo title en la etiqueta
<input>, se puede extender la información mostrada.

<input title="Se necesita un nombre" type="text"


name="nombre" required/>

name : asigna un identificador a la variable que se introduzca en la


caja de texto.

value : para especificar el valor por defecto en campos o el nombre


de un botón.

maxlenght : longitud máxima posible de caracteres que se pueden


escribir en un campo.

Moisés Osmar Avalos Torres 15


pagina7.html

Etiqueta FIELDSET y LEGEND


Crea un recuadro que rodea a los elementos del formulario colocados dentro de ella.
LEGEND sirve para nombrar o etiquetar un grupo creado con FIELDSET.
1 <!DOCTYPE html>
2 <html>
<head>
<title>Formulario</title>
</head>
3 <body>
4 <form>
5 <fieldset>
6 <legend>Datos personales:</legend>
7 Nombre: <input type="text"><br>
8 Email: <input type="text"><br>
9 Cumpleaños: <input type="date">
10 </fieldset>
11 </form>
12 </body>
13 </html>

Tomar apuntes aquí


_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________

pagina8.html
Desarrollar la siguiente página tipo formulario para recaudar datos curriculares de los
usuarios.
9 <form>
10 <fieldset>
11 <legend>Formulario de Inscripción </legend>
12 <fieldset>
13 <legend>Datos personales</legend>
14 <input type="text" name="nombre">Nombre y apellido<br>
15 <input type="text" name="direccion">Dirección<br>
16 <input type="date" name="fecha">Fecha de nacimiento<br>
17 <input type="tel" name="telefono">Teléfono<br>
18 <input type="email" name="correo">Correo electrónico<br>
19 <input type="radio" name="quesos">Hombre
20 <input type="radio" name="quesos">Mujer
21 <br>
22 <select name="ciudad">
23 <option>M.R.Alonso</option>
24 <option>Asunción</option>

Moisés Osmar Avalos Torres 16


25 <option>Limpio</option>
26 <option>San Lorenzo</option>
27 <option>Fdo. De La Mora</option>
28 <option>no esta aqui</option>
29 </select>Ciudad
30 </fieldset>
31
32 <fieldset>
33 <legend>Datos académicos</legend>
34 <select name="academico">
35 <option>Universitario</option>
36 <option>B. Científico</option>
37 <option>B. Técnico</option>
38 <option>Técnico Superior</option>
39 <option>Ninguna</option>
40 </select>Estado académico<br>
41 Conocimientos profesionales<br>
42 <textarea cols="30" rows="3"
maxlength="160"></textarea><br>
43 </fieldset>
44
45 <fieldset>
46 <legend>Experiencias Laborales</legend>
47 <textarea cols="30" rows="3"
maxlength="200"></textarea><br>
48 Disponibilidad de tiempo<br>
49 <input type="checkbox" name="tiempo1" value=”m”>Mañana
50 <input type="checkbox" name="tiempo2" value=”t”>Tarde
51 <input type="checkbox" name="tiempo3" value=”n”>Noche
52 </fieldset>
53
54 <fieldset>
55 <input type="submit" name="enviar" value="Enviar">
56 <input type="reset" value="Hoy no">
57 </fieldset>
58 </fieldset>
59 </form>

Para practicar:
1- Agregar otro input del tipo number en datos personales que permita cargar la
edad.
2- Agregar un input del tipo range que permita seleccionar la aspiración salarial.
El rango debe estar entre 1.000.000 y 2.500.000.
Etiqueta OBJECT
Etiqueta para establecer marcos en HTML5
<object type="text/html" data="direccionDeSitio.html" width="400" height="400"
name=”centro”> </object>
Inicio etiqueta object con el tipo de datos correspondiente + URL de la página que
queramos embeber + dimensiones (anchura y altura) + cierrre etiqueta object.

Moisés Osmar Avalos Torres 17


Con la etiqueta data podemos indicar que tipo de archivo queremos mostrar
type="image/png" type="image/jpeg"
type="text/pdf" type=”text/html”
pagina9.html

CREAR UNA PÁGINA WEB SOBRE ALGÚN GRUPO MUSICAL.


1-Crear una carpeta con el nombre de “OBJECT”.
2- Dentro del mismo crear:
a- Una carpeta con el nombre de “imagen”.
b- Cuatro archivos html: titulo.html, botonera.html, principal.html e
index.html. (posteriormente se crearán más páginas: biografia.html,
letrasdecanciones.html, galeria.html, temas.html, escribenos.html).
3- Escribir el código necesario, en la página título.html, de modo que se visualice una
imagen relacionado al grupo elegido.
4- Escribir el código necesario, en la página botonera.html, de modo que se visualice
en forma de vínculos los siguientes textos:
INICIO BIOGRAFÍA
LETRAS DE CANCIONES
GALERIA TEMAS
ESCRIBENOS
5- Escribir el código necesario, en la página
principal.html, de modo que se visualice
una breve descripción del grupo musical
seleccionado.
6- Dividir la página index.html con la
etiqueta “object” para que pueda contener
las páginas creadas.

El código en el body de la página “index.html”:


9 <body>
<object type="text/html" data="titulo.html" width="90%" height="200"
10
name=”titulo”> </object>
<object type="text/html" data="botonera.html" width="20%" height="500"
11
name=”botonera”> </object>
<object type="text/html" data="principal.html" width="70%" height="400"
12
name=”principal”> </object>
13 </body>

El propósito de la página que estamos creando será mostrar tres zonas separadas.
Las zonas son creadas con la etiqueta “object”.
7- Una vez terminado, los puntos indicados, lo siguiente será crear todas las páginas
solicitadas y vincular con su correspondiente texto de la página botonera.html.

Moisés Osmar Avalos Torres 18


Marquesina: texto con movimiento
La etiqueta es <MARQUEE> </MARQUEE>
<MARQUEE> SNPP </MARQUEE>
Por defecto: ocupa todo el ancho del cuadro, tiene
la altura de la línea de texto y va de derecha a
izquierda.
Atributos:
Width y height: ancho y alto de área de la
marquesina.
<MARQUEE WIDTH=”70%” HEIGHT=”40”> SNPP
</MARQUEE>

BGCOLOR:
<MARQUEE BGCOLOR=#1458AF> SNPP </MARQUEE>
BEHAVIOR: su valor por defecto es scroll que significa que aparece por la derecha, se
va a la izquierda y de forma continuada. Si le damos el valor slide y alternate tenemos:
<MARQUEE BEHAVIOR=”slide”> SNPP </MARQUEE>

<MARQUEE BEHAVIOR=”alternate”> SNPP </MARQUEE>


DIRECTION: sentido de movimiento: right, down, up.
<MARQUEE DIRECTION=”right”>SNPP</MARQUEE>
<MARQUEE HEIGHT=”50” DIRECTION=”up”> SNPP</MARQUEE>
SCROLLAMOUNT, SCROOLDELAY: velocidad y retraso de movimiento.
<MARQUEE SCROLLAMOUNT=”40”> SNPP
</MARQUEE>
<MARQUEE SCROLLDELAY=”1000”> SNPP</MARQUEE>
LOOP: número de veces que vamos a ver moverse el texto.
<MARQUEE LOOP=”2”> SNPP </MARQUEE>
HSPACE Y VSPACE: definirían el espacio horizontal y vertical del texto fuera de la
marquesina.
<MARQUEE BGCOLOR=”yellow” VSPACE=”20”> SNPP </MARQUEE>
Marquesina de imágenes
<MARQUEE BEHAVIOR="alternate"><IMG SRC="imagen.gif"> </MARQUEE>

Listas y marquesinas
1- Desarrolla una página de descarga de juegos
2- Da formato a los textos
3- Agrega link informativos sobre los juegos (Wikipedia)
4- En la parte inferior de la página crea un formulario para conocer los gustos de los
visitantes sobre los juegos y sus sugerencias

Moisés Osmar Avalos Torres 19


Faviicon
Un favicono, del inglés favorites icon (icono
de favoritos), también conocido como icono
de página, es una pequeña imagen
asociada con una página o sitio web en
particular. Los navegadores gráficos suelen
mostrar el favicono de la página visitada, si
ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña
correspondiente. Asimismo los utilizan para identificar más fácilmente las páginas,
presentándolos junto a sus respectivos títulos, en las listas de marcadores
(navegadores web) o favoritos, en los historiales (navegador web) de páginas visitadas
y de navegación reciente, y toda vez que deban hacer referencia a ellas.
Se utiliza HTML para indicar la localización de un icono para cada página servida, el
cual es identificado añadiendo dos elementos link en la sección <head> del
documento. De esta manera, cualquier imagen de un tamaño apropiado (16×16
pixeles o más) puede ser usada, y aunque todavía muchos usan el formato ICO, otros
navegadores ahora también soportan los formatos de imagen animada GIF y PNG.

Ejemplo del favicono:

<link rel="shortcut icon" href="http://www.unapagina.com/favicon.ico" />


<link rel="icon" href="favicon.ico" type="image/x-icon" />

Dependiendo del formato, el atributo “type” cambiará:


Formato png: image/png
Formato gif: image/gif
Formato jpeg (extensión jpg o jpeg): image/jpeg

<head>
<link rel="shortcut icon" href="imagen/favicon.png" type="image/png" />
</head>

<head>
<link rel="icon" href=" imagen/favicon.png" type=" image/png" />
</head>

Metadatos
Los metadatos son datos o información acerca de la página. Los metas generalmente
son utilizados para especificar ciertos aspectos de la página: descripción, autor del
documento, fecha de modificación, sistema de codificación, contenido del sitio, etc.
Los metadatos pueden ser usados por los navegadores para clasificar el tipo de
contenido del sitio en las búsquedas. Es soportado por los navegadores más
utilizados.

La etiqueta <meta> siempre va dentro del elemento <head>


Siempre se pasa por pares nombre/valor y las mismas deben estar definidos.

Ejemplos de uso:
1- Definir palabras claves para motores de búsqueda:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Moisés Osmar Avalos Torres 20


2- Definir una descripción del sitio:
<meta name="description" content="Descarga de manuales gratuitos">
3- Define el autor de la página:
<meta name="author" content=”Moisés Avalos">
4- Actualizar la página cada 60 segundos:
<meta http-equiv="refresh" content="60">
5- Definir la codificación de caracteres para la página HTML:
<meta charset="UTF-8">

Comentarios en HTML
<!- - Esto es un comentario - ->
Puede ser agregado en cualquier zona del document HTML

Códigos ISO Idioma


El atributo HTML lang se puede utilizar para declarar el idioma de una página Web o
una parte de una página Web. Esto es para ayudar a los motores de búsqueda y los
navegadores.

De acuerdo con la recomendación del W3C usted debe indicar el idioma principal de
cada página Web con el atributo lang dentro de la etiqueta <html>, así:

<html lang="es">
<!- - aquí el resto del código - ->
</html>

Inglés: en
Español: es
Guaraní: gn
Francés: fr
Alemán: de
Japones: ja
Portugés: pt

Códigos ISO País


Códigos de país ISO definen las abreviaturas de los países.
En HTML se pueden utilizar como una adición al valor de idioma en el atributo lang.
Los dos primeros caracteres de un código de lenguaje define el idioma. Los dos
últimos se define el país.

EE.UU
<html lang="en-US">
<!- - aquí el resto del código - ->
</html>

Paraguay: PY
<html lang="es-PY">
<!- - aquí el resto del código - ->
</html>

Moisés Osmar Avalos Torres 21


Fuentes
http://www.lawebera.es/diseno-web-html-5/etiquetas-html5-audio-video-canvas.php#
http://html.hazunaweb.com/
http://desarrolloweb.dlsi.ua.es/cursos/2012/nuevos-estandares-desarrollo-sitios-web
http://www.desarrolloweb.com/articulos/1375.php
http://www.w3schools.com/html

Moisés Osmar Avalos Torres 22

También podría gustarte