HTML

PROGRAMACIN WEB
Y PHP
INSTRUCTOR
Enrique Ivan Len Monterrosas.
Programacin WEB y PHP
4/27/16
Centro de Investigacin en Computacin
Contenido
HTML
Desarrollo web con dreamweaver.
Configuracin WAMP
Introduccin a PHP
Formularios PHP
Sesiones PHP
Evaluacin
Contenido
4/27/16
Tecnologas WEB.
4/27/16
Arquitectura y tecnologas.
https://validator.w3.org/
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" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<Mi primer documento HTML</TITLE>
</head>
<body>
<h1>Titulo de mi primer pagina</h1>
<P>Hello world!
</body>
</html>
4/27/16
HTML
doctype
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4/27/16
HTML
Header
10
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="http://www.virtualnauta.com/imagenes/">
<link href="http://www.susitio.com/fuentes.css" 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="http://misitio.com/calculos/calculos.js">
</HEAD>
</script>
4/27/16
Mi primer pagina HTML
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ES" "http://www.w3.org/TR/html4/strict.dtd">

<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
12
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>
La razn por la que se usa es para citar un texto. Se suele implementar

dejando mrgenes tanto a izquierda como a la derecha.
4/27/16
13
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
14
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.

Inserta un comentario
4/27/16
15
Caracteres extendidos y caracteres

de control en HTML
Cdigo
á , $Aacute; , é , É
Ñ , ñ
Resultado
,, , ..
,
¿
¡

espacio en blanco
CARACTERES DE CONTROL
<
>
&amp
&quot
<
>
&
"
4/27/16
16
Enlaces y anclas
<ahref="http://www.cic.ipn.mx>Enlace 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
Especifica el tipo de archivo que enlaza
4/27/16
17
Listas
Listas desordenadas
<UL>
<LI>Primer
elemento
<LI>Segundo
elemento
</UL>
Listas ordenadas por nmeros

<OL>
<LI>Primer
elemento
<LI>Segundo
elemento
<OL>
4/27/16
18
Listas ordenadas
4/27/16
19
Listas desordenadas
4/27/16
20
Imgenes
<imgsrc=imagen.jpg"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
Coloca la imagen a la derecha

del
texto.
4/27/16
21
Imgenes
Atributo
alt
Valor
text
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.
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
22
Ejercicio
4/27/16
23
Muchas Gracias!
Enrique Ivn Len Monterrosas

eleon@cic.ipn.mx
4/27/16

HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

PROGRAMACIN WEB

Centro de Investigacin en Computacin

Centro de Investigacin en Computacin

Centro de Investigacin en Computacin

Centro de Investigacin en Computacin

Centro de Investigacin en Computacin

Centro de Investigacin en Computacin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Centro de Investigacin en Computacin

HTML 4.01 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

XHTML 1.0 Strict

Centro de Investigacin en Computacin

De acuerdo a los estndares de HTML solo un nmero reducido de etiquetas

Centro de Investigacin en Computacin

Mi primer pagina HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ES" "http://www.w3.org/TR/html4/strict.dtd">

Centro de Investigacin en Computacin

Permite justificar el texto del prrafo a la izquierda (ALIGN=LEFT),

La razn por la que se usa es para citar un texto. Se suele implementar

Centro de Investigacin en Computacin

Pone el texto en negritas.

Representa el texto en cursiva.

Permite subrayar algo.

Permite reperesentar el texto en un tipo de letra fija ms

Incrementa el tamao del tipo de letra.

Disminuye el tamao del tipo de letra.

Hace parpadear el texto.

Centro de Investigacin en Computacin

Tamao de letra y otros elementos

<h1></h1> .. <h6> el mas importante (mas grande) y el <h6> es el menos importante

Inserta un barra horizontal

Centro de Investigacin en Computacin

Caracteres extendidos y caracteres

Especifica al navegador que realiza la descarga

Especifica la URL del archivo

Especifica el lenguaje del archivo que enlaza

Specifies the name of an anchor

Especifica el tipo de archivo que enlaza

Centro de Investigacin en Computacin

Listas ordenadas por nmeros

Centro de Investigacin en Computacin

Centro de Investigacin en Computacin

Centro de Investigacin en Computacin

Coloca el punto ms alto de la

Alinea el punto ms bajo de la

Coloca la imagen a la derecha

Centro de Investigacin en Computacin

Especifica la URL de la imagen.

Especifica el espacio en blanco arriba y

Especifica el ancho de la imagen

Centro de Investigacin en Computacin

Centro de Investigacin en Computacin

Enrique Ivn Len Monterrosas

Centro de Investigacin en Computacin

También podría gustarte