HTML

CONSTRUCCIN DE ELEMENTOS DE
SOFTWARE WEB
2015
Qu es HTML?
HyperText
Markup
Language
(lenguaje
de
marcas
de
hipertexto). Es un estndar que
sirve
de
referencia
para
la
elaboracin de pginas web en sus
diferentes versiones, define una
estructura bsica y un cdigo
(denominado cdigo HTML)
Estructura bsica de un
documento HTML
<XYZ> este es el inicio de una

etiqueta.
</XYZ> este es el cierre de una
etiqueta.
<html> [Todo el documento] </html>
Un documento HTML est

dividido en dos zonas
principales:
1. El encabezamiento, comprendido
entre las etiquetas <head> y
</head>
2. El cuerpo, comprendido entre las
etiquetas <body> y </body>
<html>
<head>
<title> Ttulo de la pgina </title>
</head>
<body>
[Aqu van las etiquetas que visualizan la
pgina]
</body>
</html>
Color, tamao y tipo de letra

<font XYZXYZXY </font>
Atributo face:
<font
face="Comic
Sans
MS,arial,verdana">Este texto tiene otra
tipografa</font>
Atributo Size:
<font
size="4">Este
grande</font>
texto
es
ms
Color, tamao y tipo de letra

<font XYZXYXZX </font>
Atributo color:
<font color="red">Este texto
rojo</font>
est
en
Otras Etiquetas
<p> Aqu va el texto del prrafo que queramos
crear </p>
El <b>texto</b> en negritas. El texto en
negrita
El <i>texto</i> en cursiva.
El texto en
cursiva
El <u>texto</u>subrayado
El texto
subrayado
Otras Etiquetas
Titulares
<h1></h1> Sirven para poner ttulos en la
pgina
Estos ttulos van desde h1 hasta h6, del
mas
grande
al
mas
pequeo
respectivamente.
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Atributos para pginas
Estos atributos se definen en la etiqueta <body>

bgcolor: especificamos un color de fondo para la
pgina.
background: Sirve para indicar la colocacin de una
imagen como fondo de la
Pgina.
text: este atributo sirve para asignar el color del texto de
la pgina.
<body bgcolor="#000000" text="#ffffff" link="#ffff33"
alink="#ffffcc"
alink="ffff00">
Listas
1. Listas desordenadas
Son delimitadas por las etiquetas <ul> y </ul>
(unordered list). Cada uno de los elementos de la lista es
citado por medio de una etiqueta <li> (sin cierre, aunque no
hay inconveniente en colocarlo).
Ejemplo:
<p>Pases del mundo</p>
<ul>
<li>Argentina
<li>Per
<li>Chile
</ul>
Listas
<ul type="tipo de vieta">
donde tipo de vieta puede ser uno de los siguientes:
circle
disc
square
<ul type="square">
<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
<li type="circle">Elemento 4
</ul>
Listas
2. Listas ordenadas
En este caso usaremos las etiquetas <ol> (ordered list)
y su cierre. Cada elemento ser igualmente precedido de
su etiqueta <li>.
Ejemplo:
<p>Reglas de comportamiento en el trabajo</p>
<ol>
<li>El jefe siempre tiene la razn
<li>En caso de duda aplicar regla 1
</ol>
Listas
1
a
A
i
I
Para ordenar por nmeros

Por letras del alfabeto
Por letras maysculas del alfabeto
Ordenacin por nmeros romanos en minsculas
Ordenacin por nmeros romanos en maysculas
Listas
3. Listas de definicin
Cada elemento es presentado junto con su definicin. La
etiqueta principal es <dl> y </dl> (definition list). La
etiquetas del elemento y su definicin son <dt>
(definition
term)
y
<dd>
(definition
definition)
respectivamente.
<p>Diccionario de la Real Academia</p>
<dl>
<dt>Brujula
<dd>Serula montada en una escbula
<dt>Oreja
<dd>Sesenta minutejos
</dl
Listas
4.
Anidando listas
<p>Ciudades del mundo</p>

<ul>
<li>Argentina
<ol>
<li>Buenos Aires
<li>Bariloche
</ol>
</ul>
Actividad
Elabore un pgina que contenga los tres tipos
de
listas
(Ordenadas,
Sin
orden
y
de
definicin). Las listas de definicin deben estar
anidadas dentro de la lista ordenada.
Enlaces
Tipos de enlaces
Enlaces dentro de la misma pgina
Enlaces con otra pgina nuestra
Enlaces con una pgina fuera de nuestro
sistema
Enlaces con una direccin de e-mail
Enlaces con archivos: para que los usuarios
puedan descargarlos
Enlaces
<a href ="XXX"> YYY </a>
Donde XXX
es el destino del enlace
(Obsrvese las comillas). YYY es el
texto indicativo en la pantalla del enlace (con
un color especial y
generalmente subrayado)
Enlaces dentro de la misma

pgina
Su estructura es, entonces:
<a href="#MARCA"> YYY </a>
Y en el sitio exacto a donde queremos saltar,
debemos poner la siguiente etiqueta:
<a name ="MARCA"> YYY </a>
Enlaces con otra pgina nuestra

<a href="contactos.html"> si quiere contactarse
con nosotros </a>
Enlaces con una pgina fuera de nuestro
sistema
<a href="http://home.netscape.com/">
inicial de Netscape </a>
Pgina
Enlaces con una direccin de e-mail

<a href= mailto: direccin de e-mail> Texto del
enlace </a>
Enlaces con un archivo
<a
href="mi_archivo.zip">Descarga
mi_archivo.zip</a>
Actividad
Disee una pgina con sus aficiones principales
deben existir imgenes, enlaces dentro de las
misma pgina, y aplicar todos los conceptos vistos
en esta unidad.
Actividad
Formularios
Los formularios son definidos por medio de las
etiquetas <form> y </form>.
Action: Define el tipo de accin a llevar a cabo
con el formulario:
El formulario es enviado a una direccin de
correo electrnico
El formulario es enviado a un programa o script
que procesa su contenido
Formularios
Method: Este atributo se encarga de especificar la
forma en la que el formulario es enviado. Los dos
valores posibles que puede tomar esta
atributo son post y get.
Enctype: Se utiliza para indicar la forma en la que
viajar la informacin que se mande por
el
formulario. En el caso ms corriente, enviar el
formulario por correo electrnico, el valor
de este atributo debe de ser "text/plain". As
conseguimos que se enve el contenido del
formulario como texto plano dentro del email.
Formularios
<form action="mailto:direccion@correo.com (o
nombre del archivo de
proceso)" method="post" enctype="text/plain">
Elementos de los formularios

Texto corto:
<input type="text" name="nombre">
Size: Define el tamao de la caja en nmero de
caracteres. Si al escribir el usuario llega al final
de la caja, el texto ira desfilando a medida
que se escribe haciendo desaparecer la parte de
texto que queda a la izquierda.
Maxlength: Indica el tamao mximo del texto
que puede ser tomado por el formulario.

Texto corto:
Value: En algunos casos puede resultarnos
interesante asignar un valor definido al campo en
cuestin.
<input
type="text"
value="Pepito Perez">
name="nombre"

Texto oculto:
Podemos esconder el texto escrito por medio de
asteriscos de.
Este tipo de campos son
anlogos a los de texto con una
sola
diferencia:
remplazamos
el
atributo
type="text" por type="password":
<input type="password" name="nombre">

Texto largo
Rows: Define el nmero de lneas del campo de
texto.
Cols: Define el nmero de columnas del campo de
texto.
La etiqueta queda por tanto de esta forma:
<textarea name="comentario rows="10
cols="40"> </textarea>

Listas de opciones
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoo</option>
<option>Invierno</option>
</select>

Listas de opciones
Size: Indica el nmero de valores mostrados de la
lista. El resto pueden ser vistos por medio de la
barra lateral de desplazamiento.
Multiple: Permite la seleccin de ms varios
elementos de la lista
<select name="estacion" size="3" multiple>

Listas de opciones
Selected: Este atributo no toma ningn valor
sino que simplemente indica que la opcin que lo
presenta esta elegida por defecto.
Value: Define el valor de la opcin que ser
enviado al programa o correo electrnico.
<option value="1">Primavera</option>

Botones de radio
<input
type="radio"
value="1">Primavera
<br>
<input
type="radio"
value="2">Verano
<br>
<input
type="radio"
value="3">Otoo
<br>
<input
type="radio"
name="estacion"
name="estacion"
name="estacion"
name="estacion"

Botones de radio
Cabe sealar que es posible preseleccionar
por defecto una de las opciones. Esto puede
ser conseguido por medio del atributo checked:
<input type="radio" name="estacion" value="2"
checked>Verano

Cajas de validacin
Este tipo de elementos pueden ser activados
o desactivados por el visitante por un simple
clic sobre la caja en cuestin.
<input type="checkbox" name="pollo">Me gusta
el pollo

Botn de envo
<input type="submit" value="Enviar">
Botn de borrado
<input type="reset" value="Borrar">
Botones normales
<input type=button value="Texto escrito en el
botn">

nombre=juan jose restrepo
email= jjr@gmail.com
poblacion=Medelln, Antioquia
sexo=Varon
utilizacion=2
comentarios=No creo que sea una buena lnea.
Poner ms autobuses.
recibir_info=on
FRAMES ( MARCOS )
FRAMES ( MARCOS )
Lo primero que tenemos que hacer es crear un
documento HTML en el que definiremos cuntas
zonas va a haber, qu distribucin y tamao
van a tener, y cul va ser el contenido de
cada una de ellas.
PGINAS DE ESTILO EN
CASCADA Y JAVASCRIPT
El modo de funcionamiento de las CSS
consiste en definir, mediante una sintaxis
especial, la forma de presentacin que le
aplicaremos a:
Un web entero, de modo que se puede definir la
forma de todo el web de una sola vez.
Un documento HTML o pgina, se puede definir
la forma, en un pequeo trozo de cdigo en la
cabecera, a toda la pgina.
CSS
Una porcin del documento, aplicando estilos
visibles en un trozo de la pgina.
Una etiqueta en concreto, llegando incluso a
poder definir varios estilos diferentes para una
sola etiqueta.
USOS DE LAS CSS

Para definir estilos en secciones reducidas de una
pgina se utiliza la etiqueta <SPAN>. Con su
atributo style indicamos en sintaxis CSS las
caractersticas de estilos.
<p> Esto es un prrafo en varias palabras
<span
style="color:green">en
color
verde</span>. resulta muy fcil.
</p>
Estilo definido en una parte de

la pgina
Con la etiqueta <DIV> se pueden definir
secciones de una pgina y aplicarle estilos con el
atributo style, es decir, se pueden definir
estilos de una vez a todo un bloque de la
pgina.
<div style="color:#000099; font-weight:bold">
<h3>Estas
etiquetas
van
en
<i>azul
y
negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los
etilos
Estilo definido en una pgina
A grandes rasgos, entre de <STYLE> y

</STYLE>, se coloca el nombre de la
etiqueta que queremos definir los
estilos y entre llaves -{}- colocamos
en sintaxis CSS las caractersticas de
estilos.
Estilo definido para todo un sitio

web
1. Creamos el archivo con la declaracin
de estilos
2. Enlazamos la pgina web con la hoja
de estilos:
rel = "STYLESHEET" indicando que el
enlace es con una hoja de estilo
type = "text/css" porque el archivo es de
texto, en sintaxis CSS
href = "estilos.css" indica el nombre del
archivo fuente de los estilos
Declaracin de estilos con archivo

externo. (Para todo un sitio web)
Declaracin de estilos para toda la
pgina. (Con la etiqueta <STYLE>
en la cabecera de la pgina) Estilos
definidos en una parte de la pgina.
(Con la etiqueta <DIV>)
Definidos en una etiqueta en concreto.
(Utilizando el atributo style en la
etiqueta en cuestin)
Declaracin de estilo para una
porcin pequea del documento.
(Con la etiqueta<SPAN>)
Definir estilos utilizando clases

Una clase se puede definir entre las
etiquetas <STYLE> (en la cabecera del
documento), o en un archivo externo
a la pgina. Para definirlas se utiliza
la siguiente sintaxis, un punto seguido
del nombre de la clase y entre llaves los
atributos de estilos deseados. De esta
manera:
.nombredelaclase {atributo:
valor;atributo2:valor2; ...}
Definir estilos utilizando clases

Una vez se tiene una clase, se puede
utilizar en cualquier etiqueta HTML. Para
ello se utiliza el atributo class, ponindole
como valor el nombre de la clase, de esta
forma:
<ETIQUETA class="nombredelaclase">
Qu es JavaScript?
U
La sintaxis JavaScript
1.
2.
3.
4.
5.
Diferenciar MAYUSCULAS y minsculas

Palabras reservadas
Sentencias punto y coma
Comentarios
La etiqueta <Script>
Case Sensivity
1. Nombres JavaScript tales como: variables,
keywords, objects, functions y demas son
case sensivity.
2. trUe dar error
3. Algunos nombres son una mezcla de
maysculas y minsculas:
onClick
Math.floor
1. JavaScript ignora los espacios en blanco:
Var name=tom; Igual a: Var name = tom;
2. Los nombres de funciones no pueden contener
espacios en blanco:
onMouseOver(); no puede ser: on Mouse Over();
onClick();
no puede ser: on Click();
Var name = Suso document.write(hola+name);
Var name = Suso; document.write(hola+name);
// comentario en linea simple
/* Este es un bloque de
Comentarios que se extiende por
Varias lineas */
Atributos <script>
1. Language:
<script language="javascript>
</script>
2. Type
<script language="javascript
Type=text/javascript>
</script>
3. Src
<script language="javascript
Type=text/javascript src=ejemplo.js>
</script>
Combinar tareas usando

funciones
1. Funcin integrada
2. Declarar una funcin
3. Llamar una funcin
Document.write(ejemplo);
Entender los Objetos

Los objetos pueden almacenar datos:
Propiedades del objeto
Roberto.direccion
Roberto.telefono
Los objetos pueden
incluir mtodos
Funciones que trabajan con propiedades del
objeto
Roberto.mostrar
Declaraciones Condicionales
If(contador == 1) alert (El contador vale 1);
Declaraciones Condicionales
If(contador == 1)
{
alert (El contador vale 1);
}
Qu son los Arrays?

meses = new Array();
meses[0]=enero;
meses[1]=febrero;
meses[2]=marzo;
Arrays numrico
puntos = new Array(4);
puntos[0]=45;
puntos[1]=65;
puntos[2]=38;
puntos[3]=17;
Tamao de un Array
puntos = new Array(23);
Document.write(puntos.length);
Arrays String
paises = new Array(4);
paises[0]=colombia;
paises[1]=ecuador;
paises[2]=peru;
paises[2]=venezuela;
Uso de switch
Incluida en javascript 1,2 y superior
Uso de objetos de javascript

Objetos: Tipos de datos compuestos
Objetos: Modo de presentar y organizar datos
Propiedades: Adjetivos.
Objetos: Sustantivos.
Mtodos: Verbos
Estructura de un objeto
Crear Objetos
Podemos crear un objeto con el uso de la palabra
clave new y el uso del constructor Object().
El objeto Math
Math.PI;
Math.COS(x);
Busquemos propiedades del objeto Math.
mtodos del objeto Math.

HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML

Hochgeladen von

Copyright:

Verfügbare Formate

CONSTRUCCIN DE ELEMENTOS DE

<XYZ> este es el inicio de una

Un documento HTML est

Color, tamao y tipo de letra

Color, tamao y tipo de letra

Atributos para pginas

Estos atributos se definen en la etiqueta <body>

Para ordenar por nmeros

<p>Ciudades del mundo</p>

Enlaces dentro de la misma

Enlaces con otra pgina nuestra

Enlaces con una direccin de e-mail

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

Elementos de los formularios

USOS DE LAS CSS

Estilo definido en una parte de

Estilo definido en una pgina

A grandes rasgos, entre de <STYLE> y

Estilo definido para todo un sitio

Declaracin de estilos con archivo

Definir estilos utilizando clases

Definir estilos utilizando clases

Diferenciar MAYUSCULAS y minsculas

Combinar tareas usando

Entender los Objetos

Qu son los Arrays?

Uso de objetos de javascript

Das könnte Ihnen auch gefallen