clase html + css

HTML

Alexys Gonzalez

0412-435.84.67

AGENDA

•DEFINICION.•COMO FUNCIONA.•ESTRUCTURAS Y VERSIONES.•PRINCIPALES ETIQUETAS.•FORMULARIOS.•ESTILOS.•DISEÑOS Y PLANTILLAS.

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.

COMO FUNCIONA?LENGUAJE DE MARCADO

<html> <head> …. </head> <body>……</body> </html>

<?xml version="1.0"?><note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body></note>

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.

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 />

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.

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>


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.


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">


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>


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).

INCLUYE NUEVOS ELEMENTOS, TALES COMO: canvas, video, media, entre otras. ADEMAS TIENE MEJOR SOPORTE CON EL LOCAL STORAGE Y NUEVOS ATRIBUTOS COMO LAS VALIDACIONES

<!DOCTYPE html><html lang=”es”> <head>....</head> <body> <header>…….</header> <section> <article>…..</article> </section>

<aside>…….</aside> <footer>……..</footer> </body></html>

PRINCIPALES ETIQUETASPARRAFO <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>Atributosalign (center, justify, left, right)<br /> Representa un salto de Linea<nobr>…</nobr> Parrafo sin saltos de linea.

PRINCIPALES ETIQUETASPRESENTACIÓN

Etiqueta EM: Texto de <em>prueba</em>

Etiqueta STRONG: Texto de <strong>prueba</strong>

Etiqueta Q: Texto de <q>prueba</q>

Etiqueta CODE: Texto de <code>prueba</code>

Etiqueta ABBR: Texto de <abbr title="Prueba">pr</abbr>

Etiqueta ACRONYM: Texto de <acronym title="Prueba">pr</acronym>

Etiqueta DFN: Texto de <dfn title="Prueba">pr</dfn>

Etiqueta KBD: Texto de <kbd>prueba</kbd>

Etiqueta SAMP: Texto de <samp>prueba</samp>

Etiqueta VAR: Texto de <var>prueba</var>

Etiqueta B: Texto de <b>prueba</b>

Etiqueta BIG: Texto de <big>prueba</big>

Etiqueta I: Texto de <i>prueba</i>

Etiqueta S: Texto de <s>prueba</s>

Etiqueta SMALL: Texto de <small>prueba</small>

Etiqueta STRIKE: Texto de <strike>prueba</strike>

Etiqueta TT: Texto de <tt>prueba</tt>

Etiqueta U: Texto de <u>prueba</u>

Etiqueta SUB: Texto de <sub>prueba</sub>

Etiqueta SUP: Texto de <sup>prueba</sup>

PRINCIPALES ETIQUETASTÍTULOS <H1><H2><H3>

Representan títulos en el documento, el numero representa el nivel del titulo. Se le pueden dar estilos a cada uno.

PRINCIPALES ETIQUETASBLOCKQUOTE Y PRE

El blockquote es usado para definir un bloque de citas.

El pre mantiene el formato exacto como esta en el codigo fuente.

PRINCIPALES ETIQUETASFONT <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)

PRINCIPALES ETIQUETASLISTAS <UL><OL><DL>

<ul>: listas sin ordenar, Atributos:-type=“circle”, El tipo de viñeta.Valores(circle, disc, square)La etiqueta <li>…</li> representa cada elemento de la lista.

<ol>: listas ordenadas, Atributos:-type=“1”, El tipo de viñeta.Valores(1, a, A, i, I)La etiqueta <li>…</li> representa cada elemento de la lista.

PRINCIPALES ETIQUETASLISTAS <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.

PRINCIPALES ETIQUETASIMAGEN <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.

PRINCIPALES ETIQUETASVINCULO <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>

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

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”

PRINCIPALES ETIQUETASTABLAS <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.

PRINCIPALES ETIQUETASFRAMES<FRAMESET>

Se usa para dividir la pagina en varias partes Atributos:-cols-rows-name-frameborder-scrolling

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)

FORMULARIOSINPUTS <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.

FORMULARIOSSELECT

<SELECT>…</SELECT>Representa una lista desplegable para ser usada en los formularios

FORMULARIOSMETODOS 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.

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.

CSS(CASCADING STYLE SHEET)

Estructura Basica de la etiqueta <style>…</style>

Estructura Basica del atributo style

CSSSELECTORES (. #)

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

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.

CSSLISTA 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/

http://www.xhtml.com/en/css/reference/

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.

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:

EJERCICIOS VARIOS CSS

REALIZAR LAS SIGUIENTES REGLAS1. 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.

clase html + css

Documents