1
Contenido
HTML
Desarrollo web con dreamweaver.
Configuracin WAMP
Introduccin a PHP
Formularios PHP
Sesiones PHP
Evaluacin
4/27/16
Tecnologas WEB.
4/27/16
Arquitectura y tecnologas.
[Link]
4/27/16
Request HTTP
4/27/16
Que es HTML?
HyperText Markup
Language.
Basado en etiquetas.
Es un lenguaje para
describir la estructura
de una pagina web
HTML es solo texto, el
navegador web
interpreta y presenta la
visualizacin del sitio
web
Estandares HTML 4.01 y
HTML 5.
4/27/16
Estndar (WC3)
Sintaxis HTML
4/27/16
Estructura de un documento
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[Link]
<html>
<head>
<Mi primer documento HTML</TITLE>
</head>
<body>
<h1>Titulo de mi primer pagina</h1>
<P>Hello world!
</body>
</html>
4/27/16
Estructura de un documento
HTML
doctype
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
4/27/16
Estructura de un documento
HTML
Header
De acuerdo a los estndares de HTML solo un nmero reducido de etiquetas
pueden incluirse en la seccin head: <base> , <link>, <meta>, <title>,
<style>, <script>.
<HEAD>
<title>Mi primer documento HTML</title>
<base href="[Link]
<link href="[Link] type="text/css" rel="stylesheet">
<meta name="description" content=estructura HTML">
<style type="text/css">
p {color:blue}
h1 {color:red}
</style>
<script type="text/javascript" src="[Link]
</HEAD>
4/27/16
</script>
Mi primer pagina HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ES" "[Link]
<html>
<head>
<title>Mi primer documento HTML</title>
<meta name="description" content=estructura HTML">
<style type="text/css">
p {color:blue}
h1 {color:red}
</style>
<script type="text/javascript">
alert("Hello world");
</script>
</head>
<body>
<h1>Titulo de mi primer pagina</h1>
<P>Hello world!
</body>
</html>
4/27/16
10
11
Formateo bsico
Etiqueta
<p>
<br>
<center>...</center>
<pre>...</pre>
Utilidad
Sirve para delimitar un prrafo. Inserta una lnea en blanco antes del
texto.
Sirve para saltar a otra lnea.
Permite centrar todo el texto del prrafo.
Representa el texto encerrado en ella con un tipo de letra fijo. Muy til a
la hora de escribir un prrafo.
Permite justificar el texto del prrafo a la izquierda (ALIGN=LEFT),
<div
derecha (RIGHT), al centro (CENTER) o a ambos mrgenes (JUSTIFY ).
align="left">...<div>
<address>...</adderess Para escribir direcciones (de esas donde vive la gente, no electrnicas).
>
<blockquote>...</block
quote>
4/27/16
La razn por la que se usa es para citar un texto. Se suele implementar
dejando mrgenes tanto a izquierda como a la derecha.
12
Tipos de letra
Etiqueta
Utilidad
<b></b>
Pone el texto en negritas.
<i></i>
Representa el texto en cursiva.
<u></u>
Permite subrayar algo.
<s></s>
Para tachar.
<tt></tt>
Permite reperesentar el texto en un tipo de letra fija ms
pequeo.
<sup></sup>
Letra superindice.
<sub></sub>
Letra subindice.
<big>..</big>
Incrementa el tamao del tipo de letra.
<small>..</small>
Disminuye el tamao del tipo de letra.
<blink></blink>
Hace parpadear el texto.
4/27/16
13
Tamao de letra y otros elementos
relevantes
Etiqueta
Utilidad
Modifica el tamao de la letra dependiendo de su importancia <h1> es
<h1></h1> .. <h6> el mas importante (mas grande) y el <h6> es el menos importante
</h6>
(mas pequeo).
<hr>
Inserta un barra horizontal
<br>
Salto de lnea.
<!-- . -->
4/27/16
Inserta un comentario
14
Caracteres extendidos y caracteres
de control en HTML
Cdigo
á , $Aacute; , é , É
Ñ , ñ
Resultado
,, , ..
,
¿
¡
espacio en blanco
CARACTERES DE CONTROL
<
>
&
"
4/27/16
<
>
&
"
15
Enlaces y anclas
<ahref="[Link] hacia el sitio del CICIPN </a>
Atributo
Valor
Descripcion
download
filename
Especifica al navegador que realiza la descarga
del archivo al que apunta
href
URL
Especifica la URL del archivo
hreflang
language_code
Especifica el lenguaje del archivo que enlaza
(ES)
target
_blank
_parent
_self
_top
framename
media_type
Specifies the name of an anchor
Especifica como abrir el enlace
type
4/27/16
Especifica el tipo de archivo que enlaza
16
Listas
Listas desordenadas
<UL>
<LI>Primer
elemento
<LI>Segundo
elemento
</UL>
4/27/16
Listas ordenadas por nmeros
<OL>
<LI>Primer
elemento
<LI>Segundo
elemento
<OL>
17
Listas ordenadas
4/27/16
18
Listas desordenadas
4/27/16
19
Imgenes
<imgsrc=[Link]"alt=imagen de
prueba"height=200"width=100">
Atributo
align
Valor
Description
top
Coloca el punto ms alto de la
imagen coincidiendo con ms
alto
de la lnea de texto actual.
bottom
Alinea el punto ms bajo de la
imagen con la base del texto.
imagen con la base del texto.
Coloca la imagen a la
izquierda del
texto.
middle
left
right
4/27/16
Coloca la imagen a la derecha
del
texto.
20
Imgenes
Atributo
alt
Valor
text
border
pixels
height
hspace
pixels
pixels
src
URL
Especifica la URL de la imagen.
vspace
pixels
Especifica el espacio en blanco arriba y
debajo de la imagen
width
pixels
Especifica el ancho de la imagen
4/27/16
Description
Especifica un texto a mostrar si no se
puede cargar la imagen
Especifica el ancho del borde de la
imagen
Especifica el alto de la imagen
Especifica el espacio en blanco a la
derecha e izquierda de la imagen.
21
Ejercicio
4/27/16