Manual de HTML

7/13/2019 Manual de HTML

1/26

Manual de HTMLQu es HTML?HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.

Este lenguaje est constituido de elementos que el navegador interpreta y las despliega

en la pantalla de acuerdo a su objetivo. eremos que !ay elementos para disponer

imgenes sobre una pgina" !iperv#nculos que nos permiten dirigirnos a otra pgina"

listas" tablas para tabular datos" etc.

Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes

trabaj$ con el mismo. %o pretende mostrar todas los elementos HTML en &orma al&abtica.

Estructura interna de una pgina HTMLLas instrucciones HTML estn encerradas entre los caracteres' ( y ).

Muc!os elementos HTML requieren una marca de comien*o y otra de +nali*aci$n. Todo

aquello que est &uera de las marcas del lenguaje se imprime en la pantalla ,dentro del

navegador-.

La estructura bsica de una pgina HTML es'

(!tml)

(!ead)(!ead)(body)

Hola Mundo/.

(body)(!tml)


2/26

0na pgina HTML es un arc!ivo que generalmente tiene como e1tensi$n los caracteres

!tml. 2or ejemplo podemos llamar a nuestra primera pgina con el nombre'

HolaMundo.!tml

Ejercicio:3rear una pgina que muestre los nombres de 4 lenguajes de programaci$n

separados por un gui$n.

Salto de lnea

En !tml no e1iste la tecla Enter" 2ara indicarle al navegador que queremos que contin5e

en la pr$1ima l#nea debemos !acerlo con el elemento HTML (br).

PHP

JavaScript

Java

C

C++

Ejercicio:3rear una pgina que muestre los nombres de 4 lenguajes de programaci$n"cada uno en una l#nea aparte.

2rra&o (p)

0n prra&o es una oraci$n o conjunto de oraciones re&erentes a un mismo tema. Todo lo

que encerremos entre las marcas (p) y (p) aparecer separado por un espacio con

respecto al pr$1imo prra&o.

Estaba internndose en lo desconocido.

Durante todo el trayecto hasta

Woodfield no dej de pensar en los aspectos econmicos, con el

temor de estar cometiendo...


3/26

Ttulos

6tros elementos HTML muy utili*ados son para indicar los t#tulos" para esto contamos con

los elementos'

(!7)(!8)(!9)(!:)(!4)(!;)

El t#tulo de mayor nivel es (!7)" es decir el que tienen una &uente mayor ,veremos que es

el navegador el responsable de de+nir el tama


4/26


5/26

i!er"n#ulo a un #liente de #orreo

El elemento a@ permite direccionar un !iperv#nculo a un programa de env#o de correos

que tengamos con+gurado en nuestra computadora.

ReclamosEnviar mail.

Reclamos

Enviar mail.

'n#las llamadas desde la misma !$gina

6tra posibilidad que nos brinda el HTML es disponer una re&erencia dentro de la pgina

para poder posteriormente disponer un !iperv#nculo a dic!a marca.

Es una prctica com5n cuanda queremos despla*arnos dentro de una pgina de gran

tama


6/26

SQL, Structure Query Language

show databases

Una base de datos es

Creacin de una tabla y mostrar sus campos

Una base de datos almacena .

'n#las llamadas desde otra !$gina

Tambin es per&ectamente vlido la llamada a anclas desde otra pgina ,no importa si se

encuentra en el mismo sitio o en otro-

!ntroduccinpagina7.!tml(!tml)(!ead)(!ead)(body)(!7)Tutorial de MyCQL(!7)(a !re&D@pagina8.!tmlintroduccion@)Fntroducci$n(a)(br)(a !re&D@pagina8.!tmlmostrarbasedatos@)s!oG databases(a)(br)(body)(!tml)pagina8.!tml(!tml)(!ead)(!ead)(body)(a nameD@introduccion@)(a)(!8)Fntroducci$n(!8)(p)CQL" Ctructure Query Language (p)(a !re&D@pagina7.!tml@)Ietornar(a)(br)


7/26

(a nameD@mostrarbasedatos@)(a)(!8)s!oG databases(!8)(p)0na base de datos.

(p)(a !re&D@pagina7.!tml@)Ietornar(a)(br)(body)(!tml)

ista ordenada ()

La marca (ol) y su correspondiente marca de cerrado es (ol).

Ensu interior cada uno de los items se los dispone con el elemento li" que tambin tiene la

marca de comien*o (li) y la marca de +n de item (li)

Rodriguez Pablo

Gonzalez Raul

Lopez Hector

ista no ordenada ()

0na lista no ordenada como su nombre lo indica no utili*a un n5mero delante de cada

items sino un peque


8/26

ista de de*ni#iones ()

3omo su nombre lo indica se utili*a para asociar un trmino y la de+nici$n del mismo. El

navegador se encarga de destacar y separa el trmino y su de+nici$n.

C++

Es un lenguaje de programacin,.

Java

Es un lenguaje de programacin .

JavaScript

Es un lenguaje interpretado, es

istas anidadas

El lenguaje HTML nos permite insertar una lista dentro de otra. Ce pueden anidar listas de

distinto tipo" por ejemplo podemos tener una lista no ordenada y uno de los item puede

ser una lista ordenada.

Argentina

La Nacin

Clarn

Espaa
http://www.lanacion.com.ar/http://www.clarin.com.ar/http://www.lanacion.com.ar/http://www.clarin.com.ar/


9/26

El Pas Digital

ABC

Mxico

La Jornada

El Univesa

Tabla ()

El objetivo &undamental de las tablas es mostrar una serie de datos en &orma ordenada"

organi*ado en +las y columnas.

(table) y (table) Es la marca de comien*o de la tabla.

(tr) y (tr) Es la marca de comien*o de una +la. Jebe estar dentro del elemento table.

(td) y (td) Es la marca de comien*o de una celda. Jebe estar dentro del elemento tr.

China1300 millones

India1080 millones

Estados Unidos295 millones

Tabla #on en#abe+ado ()

La primera caracter#stica que le vamos a agregar a una tabla son las celdas de

encabe*ado. %ormalmente la primera +la de una tabla puede representar los t#tulos para

cada columna.

2ara indicar que se trata de una celda de encabe*ado utili*amos el elemento (t!) en

lugar de (td)
http://www.elpais.es/http://www.abc.es/http://www.jornada.unam.mx/http://www.el-universal.com.mx/http://www.elpais.es/http://www.abc.es/http://www.jornada.unam.mx/http://www.el-universal.com.mx/


10/26

PaisesCantidad de habitantes

China1300 millones

India1080 millones


Tabla #on ttulo ()

2ara disponer un t#tulo a una tabla debemos incorporar el elemento caption

inmediatamente despus que abrimos la marca table. El elemento caption requiere la

marca de apertura y cierre.

Poblacin de los paises con mayor cantidad de

habitantes.

PaisesCantidad de habitantes

China1300 millones

India1080 millones


Tabla & #ombina#i,n de #eldas

En algunas situaciones se necesita que una celda ocupe el lugar de dos o ms celdas en

&orma !ori*on*al o vertical" para estos casos el elemento td o t! dispone de dos

propiedades llamadas roGspan y colspan. = estas propiedades se les asigna un valor

entero a partir de 8.

Ci queremos que una celda ocupe tres columnas luego iniciali*amos la propiedad roGspan

con el valor 9'

acturacin de los 0ltimos tres mesesCi por el contrario queremos que una celda se e1tienda a nivel de +las luego !acemos'

1ecciones

RecursosFacturacin

de los ltimos tres meses


11/26

Discos Duros230002720026000

CPU730006730051000

Monitores530007200088000

Contenido de la cabecera de la pgina ()

0n elemento que no se visuali*a es el meta" que tiene por objetivo especi+car

in&ormaci$n sobre el propio documento.

eamos las dos propiedades &undamentales de la marca meta y los valores ms

comunes con lo que podemos iniciali*arlos'

%ame almacena el nombre de la propiedad y content el valor de la propiedad.

eamos las propiedades y valores ms co

munes

Los buscadores tienen en cuenta los metadatos. Ci en la pgina iniciali*amos lapropiedad name del elemento meta con el valor BeyGords luego buscar en la

propiedad content las distintas palabras claves ms representativas para dic!a

pgina. Esto es muy 5til para posicionar nuestra pgina seg5n el contenido que

provee.

eamos otras iniciali*aciones del elemento meta'

-omentarios dentro de una !$gina


12/26

0n comentario es un te1to que solo le interesa a la persona que desarroll$ la

pgina" el navegador ignora todo el contenido que se encuentra dentro de esta

marca.

Los comentarios son muy 5tiles para el desarrollador de la pgina. 0no deja

anotaciones para &acilitar el mantenimiento del sitio.

(/KK =qu# va el comentario KK)

(body)

(/KK 3orresponden a datos del a


13/26

0n &ormulario permite que el visitante al sitio cargue datos y sean enviados al

servidor.

Es el medio ideal para registrar comentarios del visitante sobre el sitio" solicitar

productos" sacar turnos etc.

(body)

(&orm [email protected]!p@ met!odD@post@)

Fngrese su nombre'

(input typeD@te1t@ nameD@nombre@ si*eD@8@)(br)(input typeD@submit@ valueD@enviar@)

(&orm)

(body)

ormulario / in!ut t&!ete0t in!ut t&!e!assord

En el concepto anterior vimos c$mo implementar un &ormulario bsico.

eamos a!ora con ms detenimiento el elemento input. Este elemento !emos

visto que nos permite de+nir cuadros de te1to y bot$n para subir los datos al

servidor. =!ora veremos que tambin podemos de+nir cuadros para el ingreso deuna clave y botones para borrar el contenido de todos los controles del &ormulario.

body)


Fngrese su nombre'


14/26

(input typeD@te1t@ nameD@nombre@ si*eD@8@)

(br)

Fngrese su clave'(input typeD@passGord@ nameD@clave@ si*eD@78@)(br)(input typeD@submit@ valueD@enviar@)(input typeD@reset@ valueD@borrar@)

(&orm)

(body)

ormulario / in!ut t&!e#he#bo0

El elemento c!ecBbo1 es otro control que se puede insertar en un &ormulario. 0n

c!ecBbo1 es una casilla de selecci$n que puede tomar dos valores

,seleccionadono seleccionado-

(body)


Fngrese su nombre'

(input typeD@te1t@ nameD@nombre@ si*eD@9@)(br)

Celeccione los lenguajes que conoce'

(br)

(input typeD@c!ecBbo1@ nameD@java@)ava(br)

(input typeD@c!ecBbo1@ nameD@cmasmas@)3RR(br)

(input typeD@c!ecBbo1@ nameD@c@)3(br)

(input typeD@c!ecBbo1@ nameD@cs!arp@)3(br)

(input typeD@submit@ valueD@Enviar@)

(&orm)

(body)


15/26

Formulario - input type=radio

3uando tenemos un conjunto de opciones pero solo una puede ser seleccionada

debemos emplear controles visuales de tipo radio.

2ara de+nir controles de tipo radio tambin utili*amos el elemento input

iniciali*ando la propiedad type con el valor radio@

(body)


Fngrese su nombre'


Celeccione el m1imo nivel de estudios que tiene'

(br)

(input typeD@radio@ nameD@estudios@ valueD@7@)Cin

estudios(br)(input typeD@radio@ nameD@estudios@ valueD@8@)2rimario(br)

(input typeD@radio@ nameD@estudios@ valueD@9@)Cecundario(br)

(input typeD@radio@ nameD@estudios@ valueD@:@)0niversitario(br)

(input typeD@submit@ valueD@Enviar@)

(&orm)

(body)

Formulario - select (cuadro de seleccin individual)

Este elemento HTML nos permite seleccionar una opci$n entre un conjunto.

eremos en el concepto pr$1imo que seg5n como la con+guramos podemos

seleccionar varias opciones.


16/26

(body)


Fngrese su nombre'


Celeccione su pais'

(select nameD@pais@)

(option valueD@7@)=rgentina(option)(option valueD@8@)Espauatemala(option)(option valueD@4@)Honduras(option)(select)(br)(input typeD@submit@ valueD@Enviar@)

(&orm)

(body)

Formulario - select (cuadro de seleccin mltiple)

0na variante del cuadro de selecci$n que vimos en el concepto anterior es permitir

que el visitante del sitio pueda seleccionar varias opciones.

Cupongamos que tenemos un cuadro de selecci$n con una lista de colores yqueremos que el visitante pueda elegir varios y no uno solo.

(body)


Celeccione uno o varios colores ,2resione 3trl para seleccionar

varios colores-(br)

(select nameD@coloresUV@ si*eD@:@ multiple)

(option valueD@7@)Iojo(option)

(option valueD@8@)erde(option)

(option valueD@9@)=*ul(option)

(option valueD@:@)=marillo(option)

(option valueD@4@)Wlanco(option)


17/26

(option valueD@;@)%egro(option)

(option valueD@X@)%aranja(option)

(option valueD@Y@)ioleta(option)

(select)(br)(input typeD@submit@ valueD@Enviar@)

(&orm)

(body)


18/26

Formulario - select (agrupamiento de opciones)

Hemos visto que podemos crear cuadros de selecci$n individual o de selecci$n

m5ltiple. =!ora veamos que podemos agrupar las opciones que tiene el cuadro de

selecci$n" esto tiene sentido si el cuadro de selecci$n tiene muc!os items.

Ce cuenta con un nuevo elemento llamado optgroup que agrupa un conjunto de

elementos option.

(body)


Celeccione una &ruta o verdura'

(select nameD@articulo@)

(optgroup labelD@Zrutas@)(option valueD@7@)%aranjas(option)

(option valueD@8@)Man*anas(option)

(option valueD@9@)Candia(option)

(optgroup)(optgroup labelD@erduras@)

(option valueD@X@)Lec!uga(option)

(option valueD@Y@)=celga(option)

(option valueD@[@)\apallo(option)

(option valueD@7@)2apas(option)

(option valueD@77@)Watatas(option)

(option valueD@79@)\ana!orias(option)

(option valueD@7:@)Iabanitos(option)

(option valueD@74@)3alaba*a(option)


19/26

(optgroup)

(select)(br)(input typeD@submit@ valueD@Enviar@)

(&orm)

(body)

Formulario - button

El elemento button es un control visual que se puede utili*ar para sustituir los

controles'


20/26

Entre otras las ventajas de este elemento es que podemos agregar imgenes

dentro del bot$n.

La sinta1is de este elemento es la siguiente'

Texto a mostrar dentro del botn.

(body)

(&orm actionD@!tmlyaregistrardatos.p!p@ met!odD@post@)

Fngrese su nombre'


(br)

(button typeD@submit@)Enviar(img [email protected]&@

altD@envio@)(button)

(button typeD@reset@)Worrar(img [email protected]&@

altD@borrado@)(button)

(&orm)

(body)

Formulario - input type=button

6tro tipo de bot$n que podemos crear es mediante el elemento input y +jando en

la propiedad type el valor button@.

Este tipo de bot$n no se lo puede !acer que act5e como los botones de tipo submit

o reset" su actividad depender de un programa desarrollado generalmente en

avaCcript.


21/26

(body)(&orm [email protected]!p@ met!odD@post@)(!7)Iesultado'(!7)

(input typeD@button@ nameD@botonX@ valueD@ X )(input typeD@button@ nameD@botonY@ valueD@ Y )(input typeD@button@ nameD@boton[@ valueD@ [ )(input typeD@button@ nameD@botondiv@ valueD@ )(br)(input typeD@button@ nameD@boton:@ valueD@ : )(input typeD@button@ nameD@boton4@ valueD@ 4 )(input typeD@button@ nameD@boton;@ valueD@ ; )(input typeD@button@ nameD@botondiv@ valueD@ S )(br)(input typeD@button@ nameD@boton7@ valueD@ 7 )(input typeD@button@ nameD@boton8@ valueD@ 8 )

(input typeD@button@ nameD@boton9@ valueD@ 9 )(input typeD@button@ nameD@botonmas@ valueD@ R )(br)(input typeD@button@ nameD@boton@ valueD@ )(input typeD@button@ nameD@botonigual@ valueD@ D )(input typeD@button@ nameD@botonmenos@ valueD@ K )(&orm)(body)

Formulario - input type=ile

El control de tipo +le nos permite enviar un arc!ivo al servidor. %uevamente el

HTML solo indica al navegador que debe enviar el arc!ivo al servidor pero debe

!aber en el servidor un programa que lo almacene en una carpeta del servidor.

eamos la sinta1is para disponer un control de tipo +le'

(input typeD@+le@ nameD@arc!i@)

(body)

(&orm [email protected]!p@ met!odD@post@

enctypeD@multipart&ormKdata@)


22/26

Fngrese su nombre'


Celeccione la &oto'(input typeD@+le@ nameD@&oto@)

(br)(input typeD@submit@ valueD@Enviar@)

(&orm)

(body)

Formulario - input type=!idden

0n campo !idden se lo denomina campo oculto. Este tipo de control no visuali*a

nada dentro del &ormulario.

Cu utilidad se presenta cuando desde el servidor se genera una pgina dinmica

por ejemplo mediante 2H2 y se almacena en un campo oculto un valor que se

rescatar al subir el &ormulario al servidor.

(body)


(input typeD@!idden@ valueD@7'8@ nameD@!ora@)

Fngrese su nombre'


(br) (input typeD@submit@ valueD@Enviar@)

(&orm)

(body)


23/26

Formulario - agrupamiento de controles

El HTML dispone de un elemento llamado +eldset que solo tiene el objetivo de

recuadrar y agrupar un conjunto de controles de un &ormulario.

Jebemos encerrar todos los controles a agrupar entre las marcas (+eldset) y

(+eldset). =dems para agregar un t#tulo a este recuadro debemos agregar otro

elemento HTML llamado legend.

(body)


(+eldset)

(legend)Jatos personales(legend)=pellido y nombre'


Jocumento de identidad'

(input typeD@te1t@ nameD@dni@ si*eD@Y@)(br)

Zec!a de nacimiento'

(input typeD@te1t@ nameD@&ec!anacimiento@ si*eD@78@)(br)

Jirecci$n'

(input typeD@te1t@ nameD@direccionpersona@ si*eD@9@)(br)

(+eldset)(+eldset)

(legend)Jatos Laborales(legend)

%ombre de la empresa'

(input typeD@te1t@ nameD@nombreempresa@ si*eD@9@)(br)

=ctividad'

(input typeD@te1t@ nameD@actividad@ si*eD@4@)(br)

Jirecci$n'

(input typeD@te1t@ nameD@direccionempresa@ si*eD@9@)(br)


24/26

(+eldset)(input typeD@submit@ valueD@Enviar@)(&orm)

(body)

Formulario - controles con valores iniciales

0n control puede aparecer cargado con un valor por de&ecto. eamos como

iniciali*ar con valores por de&ecto para cada uno de los controles que !emos visto.

2ara iniciali*ar un control de tipo te1t debemos dar un valor a la propiedad value'

(input typeD@te1t@ valueD@aqui su nombre@ nameD@nombre@

si*eD@8@)

Formulario - orden de oco de controles

Todos los controles de &ormulario pueden de+nir una propiedad llamada tabinde1

que es un valor entero entre y 98X;X. Este n5mero indica el orden en que los

controles toman &oco. 3uando se presiona la tecla tab el navegador pasa el &oco al

siguiente control.

(body)(&orm [email protected]!p@ met!odD@post@)(input typeD@te1t@ nameD@te1t7@ si*eD@4@ tabinde1D@7@)(input typeD@te1t@ nameD@te1t8@ si*eD@4@ tabinde1D@:@)(br)

(input typeD@te1t@ nameD@te1t:@ si*eD@4@ tabinde1D@8@)(input typeD@te1t@ nameD@te1t4@ si*eD@4@ tabinde1D@4@)(br)(input typeD@te1t@ nameD@te1t;@ si*eD@4@ tabinde1D@Y@)(input typeD@te1t@ nameD@te1tX@ si*eD@4@ tabinde1D@9@)(br)(input typeD@submit@ valueD@enviar@ tabinde1D@7@)(&orm)


25/26

(body)

Formulario - "n!abilitar controles

Todos los controles que !emos visto podemos !acer que apare*can in!abilitados.

(body)


Celeccione la secci$n donde desea ingresar'

(br)

(input typeD@radio@ nameD@seccion@ valueD@7@

disabled)%i


26/26

(br)(input typeD@submit@ valueD@enviar@)

(&orm)

(body)

Formulario - te#t$pass%ord$te#tarea y readonly

6tra propiedad que podemos asignarle a los controles que creamos con el

elemento input y tambin el elemento te1tarea es readonly.

(body)

(&orm actionD@!tmlyaregistrardatos.p!p@ met!odD@post@)

Fngrese su nombre'

(input typeD@te1t@ nameD@nombre@ si*eD@9@ valueD@Fnterpolacion@readonly)(br)3ontrato'(br)(te1tarea nameD@comentarios@ roGsD@4@ colsD@;@ readonly)

2or la presente ..............................

(te1tarea)(br)(input typeD@submit@ valueD@Enviar@)

(&orm)

(body)

Manual de HTML

Documents

Transcript of Manual de HTML