HTML

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.
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
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>
4/27/16
</script>
Mi primer pagina HTML

<!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
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
<
>
&amp
&quot
4/27/16
<
>
&
"
15
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
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=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
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

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

1

HTML 4.01 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

XHTML 1.0 Strict

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

Mi primer pagina HTML

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

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.

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

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

Listas ordenadas por nmeros

Coloca el punto ms alto de la

Alinea el punto ms bajo de la

Coloca la imagen a la derecha

Especifica la URL de la imagen.

Especifica el espacio en blanco arriba y

Especifica el ancho de la imagen

S-ar putea să vă placă și