3. HTML (HYPERTEXT
MARKUP LANGUAJE)
HTML, siglas de HyperText Markup
Language («lenguaje de marcado de
hipertexto»), es el lenguaje de
marcado predominante para la
elaboración de páginas web. HTML se
escribe en forma de «etiquetas»,
rodeadas por corchetes angulares (<,>).
El HTML promovió el uso de los
hipervínculos.
4. COMO FUNCIONA?
LENGUAJE DE MARCADO
Un lenguaje de marcado o lenguaje de marcas es una forma de
codificar un documento que, junto con el texto, incorpora
etiquetas o marcas que contienen información adicional acerca de
la estructura del texto o su presentación. Suelen confundirse
con lenguajes de programación. Sin embargo, no son lo mismo, ya
que el lenguaje de marcado no tiene funciones aritméticas o
variables, como sí poseen los lenguajes de programación.
<?xml version="1.0"?>
<html> <note>
<head> …. </head> <to>Tove</to>
<body>……</body> <from>Jani</from>
</html> <heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
5. COMO FUNCIONA?
ETIQUETAS O ELEMENTOS
Los elementos son la estructura básica de HTML. Los elementos tienen dos
propiedades básicas: atributos y contenido. Cada atributo y contenido tiene
ciertas restricciones para que se considere válido al documento HTML. Un
elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-
elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los
atributos del elemento están contenidos en la etiqueta de inicio y el contenido
está ubicado entre las dos etiquetas (p.ej. <nombre-de-
elemento atributo="valor">Contenido</nombre-de-elemento>).
Etiqueta de Inicio Contenido Etiqueta Final
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
6. COMO FUNCIONA?
ATRIBUTOS
La mayoría de los atributos de un elemento son pares nombre-valor, separados
por un signo de igual «=» y escritos en la etiqueta de comienzo de un elemento,
después del nombre de éste.
7. VERSIONES Y
ESTRUCTURAS
La primera descripción de HTML disponible públicamente fue un
documento llamado HTML Tags (Etiquetas HTML), publicado por primera
vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos
comprendiendo el diseño inicial y relativamente simple de HTML. Trece de
estos elementos todavía existen en HTML.
1) HTML 4. ESTRUCTURA BASICA
<HTML>
<HEAD>
<TITLE> Titulo </TITLE>
</HEAD>
<BODY>
Contenido
</BODY>
</HTML>
8. VERSIONES Y
ESTRUCTURAS
2) XHTML. eXtensible Hypertext Markup Language (lenguaje extensible de
marcado de hipertexto), basicamente es el mismo HTML pero con reglas.
a) Los elementos deben estar bien anidados <b><i>…</i><b>
b) Los elementos deben estar cerrados <b>…</b>
c) Los elementos deben estar en minusculas <b> <body> <head>
d) El documento debe tener un elemento raiz <body>…</body>
e) Los nombres de los atributos en minuscula <table width=“100”>
f) Los valores de los atributos en comillas dobles <p class=“clase”>
g) La minimización no se usa <input checked=“checked” />
h) el documento debe tener un elemento !DOCTYPE , html, head,
title y body.
EL DOCTYPE DEFINE LA VERSION Y EL TIPO DE XHTML QUE SE USA EN EL
DOCUMENTO, CADA UNO TIENE SUS RESTRICCIONES.
9. VERSIONES Y
ESTRUCTURAS
XHTML 1.0 STRIC: No incluye elementos de presentación, tales como el font. Los
frames no estan permitidos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 TRANSITIONAL : Incluye elementos de presentación, tales como el font.
Los frames no estan permitidos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 FRAMESET: Incluye elementos de presentación, tales como el font. Los
frames estan permitidos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
10. VERSIONES Y
ESTRUCTURAS
2) Estructura Basica XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
Contenido…
</body>
</html>
11. VERSIONES Y
ESTRUCTURAS
3) HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión
importante del lenguaje básico de la World Wide Web, HTML. HTML 5
especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html),
la variante conocida como HTML5 y una variante XHTML conocida como
sintaxis XHTML5 que deberá ser servida como XML (XHTML)
(application/xhtml+xml).
<!DOCTYPE html> </section>
<html lang=”es”> <aside>…….</aside>
<head>....</head> <footer>……..</footer>
<body> </body>
<header>…….</header> </html>
<section>
<article>…..</article>
INCLUYE NUEVOS ELEMENTOS, TALES COMO: canvas, video, media, entre
otras. ADEMAS TIENE MEJOR SOPORTE CON EL LOCAL STORAGE Y NUEVOS
ATRIBUTOS COMO LAS VALIDACIONES
12. PRINCIPALES ETIQUETAS
PARRAFO < P >…</ P >
Es un contenedor de texto, normalmente formatea el texto como una
secuencia de palabras, envuelto margenes, y con una linea blanca que lo
separa de otros parrafos. La distribución del texto se adapta al tamaño del
explorador.
<p>….</p>
Atributos
align (center, justify, left, right)
<br /> Representa un salto de Linea
<nobr>…</nobr> Parrafo sin saltos de
linea.
13. PRINCIPALES ETIQUETAS
PRESENTACIÓN
Etiqueta EM: Texto de <em>prueba</em> Etiqueta VAR: Texto de <var>prueba</var>
Etiqueta B: Texto de <b>prueba</b>
Etiqueta STRONG: Texto de <strong>prueba</strong>
Etiqueta BIG: Texto de <big>prueba</big>
Etiqueta Q: Texto de <q>prueba</q>
Etiqueta I: Texto de <i>prueba</i>
Etiqueta CODE: Texto de <code>prueba</code>
Etiqueta S: Texto de <s>prueba</s>
Etiqueta ABBR: Texto de <abbr
title="Prueba">pr</abbr> Etiqueta SMALL: Texto de <small>prueba</small>
Etiqueta ACRONYM: Texto de <acronym Etiqueta STRIKE: Texto de <strike>prueba</strike>
title="Prueba">pr</acronym>
Etiqueta TT: Texto de <tt>prueba</tt>
Etiqueta DFN: Texto de <dfn title="Prueba">pr</dfn>
Etiqueta U: Texto de <u>prueba</u>
Etiqueta KBD: Texto de <kbd>prueba</kbd>
Etiqueta SUB: Texto de <sub>prueba</sub>
Etiqueta SAMP: Texto de <samp>prueba</samp>
Etiqueta SUP: Texto de <sup>prueba</sup>
14. PRINCIPALES ETIQUETAS
TÍTULOS < H 1>< H 2>< H 3>
Representan títulos en el documento, el numero representa el nivel del
titulo. Se le pueden dar estilos a cada uno.
15. PRINCIPALES ETIQUETAS
BLOCKQUOTE Y PRE
El blockquote es usado para definir El pre mantiene el formato exacto
un bloque de citas. como esta en el codigo fuente.
16. PRINCIPALES ETIQUETAS
FONT < FONT >…</ FONT >
Esta etiqueta sirve para dar formato al texto, actualmente ya no se usa, la
funcionalidad de esta etiqueta la realiza los css.
Atributos:
-face=“arial” Valores (Fuentes de Letras)
-size=“+1” Valores (Numeros, +1, +2, -1, -2)
-color=“red” Valores (Colores en ingles, Colores en hexadecimal: #0000FF)
17. PRINCIPALES ETIQUETAS
LISTAS < UL >< OL >< DL >
<ul>: listas sin ordenar, <ol>: listas ordenadas,
Atributos: Atributos:
-type=“circle”, El tipo de viñeta. -type=“1”, El tipo de viñeta.
Valores(circle, disc, square) Valores(1, a, A, i, I)
La etiqueta <li>…</li> representa La etiqueta <li>…</li> representa
cada elemento de la lista. cada elemento de la lista.
18. PRINCIPALES ETIQUETAS
LISTAS < UL >< OL >< DL >
<dl>: listas personalizadas, se usa <dl>…</dl> como contenedor de la lista,
<dt>…</dt> para definir la viñeta y <dd>…</dd> para definir los elementos de
la lista.
19. PRINCIPALES ETIQUETAS
IMAGEN < IMG … />
Representa una imagen en el documento, dicha imagen se alinea con el texto
por defecto. Estructura Basica: <img src=“url” alt=“…” />
Atributos:
-src=“url” Valores (URL relativos o absolutos)
-alt=“…” Valores(Texto)
-align=“left”
-width=“400px” Valores (Pixels 200px,
Porcentaje 20%)
-height=“20%” Valores (Pixels 200px,
Porcentaje 20%)
NOTA: la etiqueta <br /> usa el atributo clear (all, left, none, right) para
definir la alineación del texto con respecto a la imagen.
20. PRINCIPALES ETIQUETAS
VINCULO < A …>…</ A >
Representa un vínculo a una dirección especifica, el texto ubicado entre las
etiqueta representará es texto del vinculo. <a href=“url” title=“…”>link</a>
Atributos:
-href=“url” Valores (URL relativos o absolutos)
-title=“…” Valores(Texto)
-target=“_blank” Valores (_blank, _parent,
_self, _top, _framename)
TIP: vinculo con imagen ->
<a href=“url” title=“…”><img src=“url” alt=“…” /></a>
21. URL
(UNIFORM RESOURCE LOCATOR)
Un localizador de recursos uniforme, más comúnmente denominado URL es una
secuencia de caracteres, de acuerdo a un formato modélico y estándar, que se
usa para nombrar recursos en Internet para su localización o identificación, como
por ejemplo documentos textuales, imágenes, vídeos, presentaciones,
presentaciones digitales, etc. creado por ricardo roque rivas.
scheme://host.domain:port/path/filename
Explicación:
scheme - define el tipo del servicio de internet. El más popular es http.
host - define el domain host (por defecto es www)
domain - define el nombre del dominio, como www.google.com
:port - define el numero del puerto (por defecto 80)
path - define la rute del servidor (si es omitida, el documento se guardara en el
directorio raiz del sitio web)
filename - define el nombre del documento/recurso
22. URL
(UNIFORM RESOURCE LOCATOR)
URL ABSOLUTO: incluyen todas las partes de la URL (protocolo, servidor y ruta)
por lo que no se necesita más información para obtener el recurso enlazado.
http://www.w3schools.com/html/html_urlencode.asp
URL RELATIVO: prescinden de algunas partes de las URL para hacerlas más breves.
Como se trata de URL incompletas, es necesario disponer de información adicional
para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es
imprescindible conocer la URL del origen del enlace.
“pagina.html”
“ruta/pagina.html”
“../pagina.html”
23. PRINCIPALES ETIQUETAS
TABLAS < TABLE >…</ TABLE >
Se usa para crear tablas. Atributos:
-border
-cellpanding
-cellspacing
caption: titulo.
tr: fila.
td: celda.
th: celda tipo titulo.
thead: cabecera de la tabla.
tbody: cuerpo de la tabla.
tfoot: pie de la tabla.
24. PRINCIPALES ETIQUETAS
FRAMES < FRAMESET >
Se usa para dividir la pagina en varias partes
Atributos:
-cols
-rows
-name
-frameborder
-scrolling
25. PRINCIPALES ETIQUETAS
FRAMES < FRAMESET >
Se usa para dividir la pagina en varias partes
Atributos:
-cols
-rows
-name
-frameborder
-scrolling
26. FORMULARIOS
< FORM …>…</ FORM >
Son usados para pasar datos al servidor. Un formulario puede tener elemntos
de entrada de datos, tales como text, checkbox, radio-button, entre otras.
Atributos:
-action=“url” especifica la
direccion de envios de datos
-method=“get” Valores (get,
post) metodo de envio
-target=“_blank” Valores
(_blank, _self, etc)
27. FORMULARIOS
INPUTS < INPUT TYPE =“” … />
Los inputs representan elementos de entrada en un formulario. Los mas
comunes son del tipo: text, button, radio, submit, checkbox, entre otros.
Atributos:
-type=“text” tipo de input
-id=“…”
Los atributos cambian
dependiendo del tipo.
28. FORMULARIOS
SELECT < SELECT >…</ SELECT >
Representa una lista desplegable para ser usada en los formularios
29. FORMULARIOS
METODOS GET Y POST
Son metodos de envio de data al formulario.
METODO GET: manda la data a travez del URL, separando con signos de
interrogación.
METODO POST: la data es enviada dentro del body del formulario.
Generalmente cuando el envio de data involucra inserciones a la base de datos
se usa el metodo POST.
30. CSS
(CASCADING STYLE SHEET)
CSS es un lenguaje usado para definir la presentación de un documento
estructurado escrito en HTML o XML (y por extensión en XHTML).
El W3C (World Wide Web Consortium) es el encargado de formular la
especificación de las hojas de estilo que servirán de estándar para los agentes
de usuario o navegadores.
Existen tres maneras de darle estilo al documento:
1- A travez del atributo style asignandoselo a la etiqueta.
2- A travez de la etiqueta <style>…</style>, que va en el head y contiene el
codigo del estilo.
3- A travez de archivos con extension .css que contiene el codigo de estilo,
haciendo referencia a el en el documento.
31. CSS
(CASCADING STYLE SHEET)
Estructura Basica del atributo style Estructura Basica de la etiqueta
<style>…</style>
32. CSS
SELECTORES (. #)
Los selectores son la forma con la cual se definen los estilos en la hoja de
estilos, por ejemplo si se quiere aplicar estilo a las etiquetas h1 solo se debe
escribir h1 {…}. Pero si se quiere aplicar estilos a una(s) etiquetas en particular
se deben hacer uso de los selectores, para eso se usan atributos “class” e “id”
para clasificar e identificar las etiquetas.
LOS SELECTORES SON
-atributo: “class”
selector “.” punto
-atributo: ”id”
selector “#” numeral
33. CSS
< LINK … />
Si se tienen los estilos en un archivo .css se debe hacer relacion a este por
medio de la etiqueta <link … /> en el head del documento web.
34. CSS
LISTA DE ATRIBUTOS STYLE
Para una referencia de la mayoria de los style en css, pueden visitar la
siguiente pagina:
http://www.xhtml.com/en/css/reference/
35. LAYOUTS
Se trata de tecnicas de distribución de los elementos dentro de un documento
web. Los mas comunos son layouts basados en tablas, y layouts basados en
divs.
LAYOUTS CON TABLAS:
-Se usan las etiquetas <table><tr><td> para crear la distribucion.
36. LAYOUTS
La etiqueta div <div>…</div> se usa para definir un bloque o seccion en un
documento, visualmente no representa nada, pero con esta etiqueta,
aplicandole estilos se pueden realizar layouts de calidad.
LAYOUTS CON DIVS:
37. LAYOUTS
La etiqueta div <div>…</div> se usa para definir un bloque o seccion en un
documento, visualmente no representa nada, pero con esta etiqueta,
aplicandole estilos se pueden realizar layouts de calidad.
LAYOUTS CON DIVS:
38. EJERCICIOS VARIOS CSS
REALIZAR LAS SIGUIENTES REGLAS
1. Añade un estilo para el body para que se muestre el tipo de fuente Tahoma,
de 14 píxeles de tamaño, 1 píxel de separación entre caracteres y de color
negro.
2. Crea un estilo para una clase llamada titulo que establezca un tamaño de
fuente de 18 píxeles.
3. Crea un estilo para una clase llamada datos que establezca que el texto
esté alineado a la derecha, de 12 píxeles de tamaño, en cursiva y con un alto
de línea de 0.2.
4. Haz que todos los enlaces dentro de un párrafo o un elemento de lista no
tengan subrayado y sean de color negro.
5. Por último, haz que los elementos de lista dentro del bloque sección no
muestre viñetas.