UNIDAD DIDCTICA 1.

CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS

1. EL DESARROLLO WEB
+20%)1+- 2+ $%&'

or ahora slo conocemos algunas eLlqueLas, pero para la programacin de la
parte cliente sera suficiente.

Notepad++

Lo podemos usar tanto para la programacin de la parte cliente (HTML, CSS,
JavaScript), como de la parte servidor (PHP).

Sin embargo, si consideramos solo para la programacin de la parte servidor
tambin necesitaremos XAMPP o algn paquete similar.

LlsLado de programas segun plaLaforma:

!""#$%%/3'&=>=#/.=1'+56%&=>=%A=)"B+0B?7@AB/.="+5)


-T'%)- U +-,T(0)-
'0/671 45 />?50

Hacer un salto de linea?

<br>

Ls una eLlqueLa vacla. no se suele cerrar
P1ML4
<br>

xP1ML y xML
<br />

Con hLml3 se pueden las dos
La segunda es ms compaLlble <br />

8egla

El elemento <br> se debe usar nicamente para insertar saltos de lnea que
son realmente parte del contenido.

EJEMPLO:

Poema
Direccin.

UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
1. EL DESARROLLO WEB
El elemento <br> no se debe utilizar para separar contenido en un prrafo
que realmente es independiente.

EJEMPLO:

Incorrecto:

<p>Quieres buscar en la web?<br />
<a href= http://www.google.es>Haz click aqu</a></p>

Correcto:

<p>Quieres buscar en la web?</p>
<p><a href= http://www.google.es>Haz click aqu</a></p>

nunca para una llsLa.

EJEMPLO:

una llsLa sln numerar <8A7665A@>K

<p>lormacln academlca: <br />

Curso 1<br />
Curso 2<br />
Curso 3</p>

Luego veremos cmo hacerla.


$1-0.>71 5? F/0?.7

En HTML existe una forma especial de representar un espacio en blanco que
es una referencia de carcter.

&nbsp;

nbsp indica no-break space.

Espacio en blanco que no se puede romper.

No se debe emplear para introducir espacios en blanco simplemente por una
cuestin de presentacin visual.




UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
1. EL DESARROLLO WEB
G$H$G$#!+9' C$ !9G9!&$G$'

Las referencias de caracteres es un mecanismo que ofrece HTML para incluir
en un texto caracteres que, de otra forma, no se podran incluir.

A este proceso en informtica se le suele llamar Escapar los caracteres,

HTML permite tres tipos de referencias de caracteres, y todas ellas deben
empezar con el carcter ampersand y deben terminar con el punto y coma.

a]""b

Las referencias de caracteres con nombre, emplean unos nombres que se
han definido para los caracteres especiales.

a87JH65b

En la especificacin de HTML existe un apartado con las referencias de
caracteres con nombre, que son bastantes.

http://www.w3.org/TR/html5/syntax.html#named-character-references

Tabla:
En la primera columna aparece el nombre de la referencia de carcter
En la segunda columna el cdigo Unicode
En la tercera columna el glifo, la representacin visual del carcter.
Acentuar vocales?

/ ^ aT>AD@5b
c ^ a+>AD@5b
d ^ a0>AD@5b
4 ^ a)>AD@5b
e^ a3>AD@5b

Pero no es necesario si empleamos el juego de caracteres adecuado:

ISO-8859-1, tambin llamado Latin1
UTF-8









UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
1. EL DESARROLLO WEB
'0-%T-

una llsLa sln numerar <8A7665A@>K

<p>lormacln academlca: <br />

Curso 1<br />
Curso 2<br />
Curso 3</p>



una llsLa sln numerar A7665A@>K

<p>lormacln academlca: </p>

<ul>
<ll>Curso 1</ll>
<ll>Curso 2</ll>
<ll>Curso 3</ll>
</ul>


$6>:;5601

<ul>

La etiqueta <ul> significa Unordered list o lista no ordenada. Sirve para
mostrar listados de elementos sin numerar.

Los elementos contedrn etiquetas <li>

<p>lormacln academlca: </p>

<ul>
<ll>Curso 1</ll>
<ll>Curso 2</ll>
<ll>Curso 3</ll>
</ul>







UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
1. EL DESARROLLO WEB
<ol>

La etiqueta <ol> significa Oredered list o lista ordenada y con ella
mostraremos listas con nmeros

<ol>
<ll>Curso 1</ll>
<ll>Curso 2</ll>
<ll>Curso 3</ll>
</ol>



<dl>

Lista de definiciones

<dl> viene de Definition list o lista de definiciones, y es un tipo de lista que se
utiliza para crear glosarios.

Sus etiquetas son dos <dt> y <dd> empezaremos por <dt>, significa trmino
de la definicin y representa exactamente eso, al ser una lista de definiciones
habr de seleccionarse un trmino a definir y para hacerlo se usar esta
etiqueta.

Primero usaremos una etiqueta <dt> y luego, al cerrar esa <dt> una <dd>
para describirla.

Se usan pares de etiquetas <dt> y <dd>


<dl>
<dL>Curso 1</dL>
<dd>Ll plmer curso</dd>
<dL>Curso 2</dL>
<dd>Ll segundo curso</dd>
<dL>Curso 3</dL>
<dd>Ll Lercer curso</dd>
</dl>


Listas anidadas

Las listas en las que otras se anidan suelen ser las listas <ul> u <ol> suele
ser muy raro observar listas <dl>

Para anidar listas lo que haremos ser incluir dentro de un elemento <li> de
una lista, otra lista.

UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
1. EL DESARROLLO WEB

<ul>
<li>Curso 1</li>
<li><ol>
<li>Curso 1A</li>
<li>Curso 1B</li>
</ol></li>
<li>Curso 2</li>
<li><ol>
<li>Curso 2A</li>
<li>Curso 2B</li>
</ol></li>
</ul>


Pero para que no se repitan los puntos de la lista principal como pasaba en el
ejemplo anterior podemos obviar la etiqueta <li>

<ul>
<ll>Curso 1</ll>
<ol>
<ll>Curso 1A</ll>
<ll>Curso 18</ll>
</ol>

<ll>Curso 2</ll>
<ol>
<ll>Curso 2A</ll>
<ll>Curso 28</ll>
</ol>
</ul>



UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2
!"#$"%

'() *)+,) -. /() 0123) 4- 2-52-.-(*)2 3/67) 8(0123)689( 4- 3)(-2)
-.:/-3)*8;)4)< 124-()4) = 6135)6*). Aunque Wlklpedla acepLa el cdlgo P1ML
para la creacln de Lablas como en cualquler pglna web, posee Lamblen un cdlgo
proplo, cuya slnLaxls basada en barras verLlcales resulLa basLanLe ms llmpla y
compacLa.

hLLp://es.wlklpedla.org/wlkl/Ayuda:1ablas

>2?)(8;)4). -( 08,). = 6-,4).
no fllas y columnas


!)+,- @1A
llla

!)+,- B)*) C-,,
Celda







UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2
!"#$%&"'(

D*8:/-*) !)+,-
1abla

<Lable></Lable>

D*8:/-*) !)+,- @1A
llla

<Lr></Lr>

D*8:/-*) !)+,- B)*) C-,,
Celda de daLos en la Labla

<Ld></Ld>

D*8:/-*) !)+,- E-)4-2 C-,,
Celda de cabecera
Los navegadores ponen las celdas en negrlLa. ara raba[ar esLllos

<Lh></Lh>


*+,%-', .#/'( &0 ",&( 1/2$%&( 3& &("#/2(

F2/51 4- 08,). 4- 6)+-6-2)

<Lhead></Lhead >

F2/51 4- 08,). 4- 6/-251
Ll grueso de los daLos

<Lbody></Lbody >

F2/51 4- 08,). 4-, 58- 4- ,) *)+,)

<LfooL></LfooL >







UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2
G@HC!IC"

J>!"% BD $>% "$'KJ>%

"$'KJ> J>!"
!avler 3,3
llar 7
Marlo 8,3
KDBI" L


CCulCC

<Lable>
<Lhead>
<Lr>
<Ld>ALuMnC</Ld>
<Ld>nC1A</Ld>
</Lr>
</Lhead>

<Lbody>
<Lr>
<Ld>!avler</Ld>
<Ld>3,3</Ld>
</Lr>
<Lr>
<Ld>llar</Ld>
<Ld>7</Ld>
</Lr>
<Lr>
<Ld>Marlo</Ld>
<Ld>8,3</Ld>
</Lr>
</Lbody>

<LfooL>
<Lr>
<Ld>MLulA</Ld>
<Ld>7</Ld> </Lr>
</LfooL>
</Lable>





UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2
MD.*8,1.N

ara Lraba[ar los esLllos, lo haremos con CSS

*",#1%"2( 3& /' &"#$%&"' 4"'1/&5

<Lable A84*7="200" +124-2="1">
</Lable>

*6'3#, %0 "7"%/2 ' /' "'1/'

D*8:/-*) C)5*81(
Anade un LlLulo sobre la Labla

<capLlon></capLlon >


G@HC!IC"

J>!"% BD $>% "$'KJ>%
"$'KJ> J>!"
!avler 3,3
llar 7
Marlo 8,3
KDBI" L

<Lable A84*7="200" +124-2="1">
<capLlon> J>!"% BD $>% "$'KJ>% </capLlon >

<Lhead>
<Lr>
<Ld>ALuMnC</Ld>
<Ld>nC1A</Ld>
</Lr>
</Lhead>

(..)

</Lable>

UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2
8291#0', :&/3'(

D*8:/-*) *4 61,.5)(
La celda ocupa x columnas

<Ld colspan= "x"> ..</Ld >

D*8:/-*) *4 21A.5)(
La celda ocupa x fllas

<Ld rowspan= "x"> ..</Ld >


G@HC!IC"

F"%!>% OPQR
100t Lnero
200t
100t lebrero
200t

noLa: ara que una celda pueda ocupar el espaclo de oLras es necesarlo que ese
espaclo no se rellene.
<Lable wldLh="200" border="1">
<Lr>
<Ld colspan= "2">CAS1CS 2012</Ld>
</Lr>
<Lr>
<Ld rowspan= "2"> LnL8C</Ld>
<Ld>100t</Ld>
</Lr>
<Lr>
<Ld>200t</Ld>
</Lr>
<Lr>
<Ld rowspan= "2">lL88L8C</Ld>
<Ld>100t</Ld>
</Lr>
<Lr>
<Ld>200t</Ld>
</Lr>
</Lable>


UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2

;'33#0+

D*8:/-*) *4 61,.5)(
La celda ocupa x columnas

<Ld colspan= "x"> ..</Ld >

D*8:/-*) *4 21A.5)(
La celda ocupa x fllas

<Ld rowspan= "x"> ..</Ld >


<&(%9&0

D*8:/-*). +S.86). *)+,-< *2< *4
!T*/,1 6)5*81(
D.*8,1 *7< *7-)4< *+14=< *011*< 61,?21/5< 61,
"*28+/*1. 61,.5)(< 21A.5)(


=>( (21,& /'( "'1/'(?

hLLp://www.desarrolloweb.com/arLlculos/627.php
hLLp://www.w3schools.com/hLml/hLml_Lables.asp

G@HC!IC"%


F"%!>% OPQR
LnL8C 100
lL88L8C 200


UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2
C-,4) :/- 16/5) O 61,/3().U
nombre 1elefono
Marlo lbanez 892 121 143 942 121 434


C-,4) :/- 16/5) O 61,/3().
nombre Marlo lbanez
892 121 143 1elefono
892 121 143



















UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2
DJ$"CD%

Los enlaces son el elemento principal que confiere a la Web su carcter de
hipertexto.

El hipertexto es un documento digital que se puede leer de forma no
secuencial y que est compuesto por:

o Nodos o secciones

Las partes del hipertexto que contienen informacin accesible para
el usuario (documentos o pginas web).

o Enlaces o hipervnculos

Las uniones o vnculos que se establecen entre nodos y facilitan la
lectura secuencial o no secuencial por los nodos del documento.

o Anclajes

Los puntos de activacin de los enlaces.


La Web est formada por millones de nodos interconectados por enlaces.

@#-2( 3& &0/':&(

En las pginas web existen dos tipos de hiperenlaces:
o Enlace intradocumental
o Enlace extradocumental

;%&3& A':&, ,&.&,&0:#' '?

o Un punto determinado de la pgina que lo contiene,
o Otra pgina HTML
o A un punto determinado de otra pgina HTML.

Apunte:
En los dos ltimos casos, la pgina destino puede estar en el mismo servidor
que la pgina que contiene el enlace o en otro servidor.



UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2

B':&, %0 &0/':&

D*8:/-*) -(,)6-

<a></a>

El enlace es lo que aparecer entre la etiqueta de inicio y la de cierre de la
etiqueta.
<a>enlace</a>

El objeto (texto o imagen) que al ser pulsado nos lleva a otro punto.

C&.#0#, &/ &0/':& D &/ 3&("#02

1. Enlace intradocumental
Enlace:
<a href=#nombre></a>

Destino:
<a name=nombre></a>

Tambin se puede escribir con id

<h1 id=nombre></h1>
<p id=nombre></p>


2. Enlace extradocumental
Enlace (a otra pgina web):
<a href=pagina.html></a>

Deberemos de indicar la URL de acceso al otro documento.



UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2

URL
Uniform Resource Locator, Localizador uniforme de recurso.

Es la forma estandarizada de hacer referencia a un documento, a un recurso,
en la Web.

Una URL se compone de:

o El servicio o protocolo que se est empleando.
o El host o servidor al que se accede.
o El puerto al que se realiza la conexin.
o La ruta de acceso al recurso (pgina web, o cualquier tipo de
documento)

Tipos de URL
Servicio web
http://www.cieep.com

Servicio de FTP
ftp://ftp.cieep.com

Servicio de correo.
mailto: maria@cieep.com


3. Enlace extradocumental a un punto en otro documento
Combinacin de los dos anteriores
Enlace:
<a href=pagina.html #nombre></a>

Destino:
<a name=nombre></a>

Tambin se puede escribir con id

<h1 id=nombre></h1>
<p id=nombre></p>


UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
4. HTML. CONCEPTOS BSICOS 2
*1,#, &/ &0/':& &0 %0' 0%&E' E&0"'0'

Le anadlmos el aLrlbuLo LargeL"
<a href=pagina.html target="_blank"></a>

L!LMLC:
<a href="http://www.cieep.com" target="_blank">Progresa</a>


F1(&,E':#20&( (21,& &/ "&G"2

o Me[or esclblrlo Lodo en mayusculas
o Slo usar caracLeres del alfabeLo lngles, numeros, _ , -
o Sln poner espaclos en blanco

F1(&,E':#20&( (21,& /2( &0/':&(

no poner enlaces a ruLas de Lu proplo ordenador, ya que al sublr la pglna al
servldor, el enlace no funclonar.