Clase Html + CSS

1,667 views

Published on

Presentacion Referencial de HTMl y CSS

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,667
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
100
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Clase Html + CSS

  1. 1. HTML
  2. 2. AGENDA•DEFINICION.•COMO FUNCIONA.•ESTRUCTURAS Y VERSIONES.•PRINCIPALES ETIQUETAS.•FORMULARIOS.•ESTILOS.•DISEÑOS Y PLANTILLAS.
  3. 3. HTML (HYPERTEXT MARKUP LANGUAJE)HTML, siglas de HyperText MarkupLanguage («lenguaje de marcado dehipertexto»), es el lenguaje demarcado predominante para laelaboración de páginas web. HTML seescribe en forma de «etiquetas»,rodeadas por corchetes angulares (<,>).El HTML promovió el uso de loshipervínculos.
  4. 4. COMO FUNCIONA? LENGUAJE DE MARCADOUn lenguaje de marcado o lenguaje de marcas es una forma decodificar un documento que, junto con el texto, incorporaetiquetas o marcas que contienen información adicional acerca dela estructura del texto o su presentación. Suelen confundirsecon lenguajes de programación. Sin embargo, no son lo mismo, yaque el lenguaje de marcado no tiene funciones aritméticas ovariables, 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>Dont forget me this weekend!</body> </note>
  5. 5. COMO FUNCIONA? ETIQUETAS O ELEMENTOSLos elementos son la estructura básica de HTML. Los elementos tienen dospropiedades básicas: atributos y contenido. Cada atributo y contenido tieneciertas restricciones para que se considere válido al documento HTML. Unelemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Losatributos del elemento están contenidos en la etiqueta de inicio y el contenidoestá 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. 6. COMO FUNCIONA? ATRIBUTOSLa mayoría de los atributos de un elemento son pares nombre-valor, separadospor un signo de igual «=» y escritos en la etiqueta de comienzo de un elemento,después del nombre de éste.
  7. 7. VERSIONES Y ESTRUCTURAS La primera descripción de HTML disponible públicamente fue undocumento llamado HTML Tags (Etiquetas HTML), publicado por primeravez en Internet por Tim Berners-Lee en 1991. Describe 22 elementoscomprendiendo el diseño inicial y relativamente simple de HTML. Trece deestos elementos todavía existen en HTML.1) HTML 4. ESTRUCTURA BASICA <HTML> <HEAD> <TITLE> Titulo </TITLE> </HEAD> <BODY> Contenido </BODY> </HTML>
  8. 8. VERSIONES Y ESTRUCTURAS2) XHTML. eXtensible Hypertext Markup Language (lenguaje extensible demarcado 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 ELDOCUMENTO, CADA UNO TIENE SUS RESTRICCIONES.
  9. 9. VERSIONES Y ESTRUCTURASXHTML 1.0 STRIC: No incluye elementos de presentación, tales como el font. Losframes 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. Losframes estan permitidos.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  10. 10. VERSIONES Y ESTRUCTURAS2) 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. 11. VERSIONES Y ESTRUCTURAS3) HTML 5 (HyperText Markup Language, versión 5) es la quinta revisiónimportante del lenguaje básico de la World Wide Web, HTML. HTML 5especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html),la variante conocida como HTML5 y una variante XHTML conocida comosintaxis 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, entreotras. ADEMAS TIENE MEJOR SOPORTE CON EL LOCAL STORAGE Y NUEVOSATRIBUTOS COMO LAS VALIDACIONES
  12. 12. PRINCIPALES ETIQUETAS PARRAFO < P >…</ P >Es un contenedor de texto, normalmente formatea el texto como unasecuencia de palabras, envuelto margenes, y con una linea blanca que losepara de otros parrafos. La distribución del texto se adapta al tamaño delexplorador. <p>….</p> Atributos align (center, justify, left, right) <br /> Representa un salto de Linea <nobr>…</nobr> Parrafo sin saltos de linea.
  13. 13. PRINCIPALES ETIQUETAS PRESENTACIÓNEtiqueta 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 <abbrtitle="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. 14. PRINCIPALES ETIQUETAS TÍTULOS < H 1>< H 2>< H 3>Representan títulos en el documento, el numero representa el nivel deltitulo. Se le pueden dar estilos a cada uno.
  15. 15. PRINCIPALES ETIQUETAS BLOCKQUOTE Y PREEl blockquote es usado para definir El pre mantiene el formato exactoun bloque de citas. como esta en el codigo fuente.
  16. 16. PRINCIPALES ETIQUETAS FONT < FONT >…</ FONT >Esta etiqueta sirve para dar formato al texto, actualmente ya no se usa, lafuncionalidad 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. 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> representacada elemento de la lista. cada elemento de la lista.
  18. 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 dela lista.
  19. 19. PRINCIPALES ETIQUETAS IMAGEN < IMG … />Representa una imagen en el documento, dicha imagen se alinea con el textopor 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. 20. PRINCIPALES ETIQUETAS VINCULO < A …>…</ A >Representa un vínculo a una dirección especifica, el texto ubicado entre lasetiqueta 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. 21. URL (UNIFORM RESOURCE LOCATOR)Un localizador de recursos uniforme, más comúnmente denominado URL es unasecuencia de caracteres, de acuerdo a un formato modélico y estándar, que seusa para nombrar recursos en Internet para su localización o identificación, comopor 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. 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.aspURL 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 adicionalpara obtener el recurso enlazado. En concreto, para que una URL relativa sea útil esimprescindible conocer la URL del origen del enlace. “pagina.html” “ruta/pagina.html” “../pagina.html”
  23. 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. 24. PRINCIPALES ETIQUETAS FRAMES < FRAMESET >Se usa para dividir la pagina en varias partes Atributos: -cols -rows -name -frameborder -scrolling
  25. 25. PRINCIPALES ETIQUETAS FRAMES < FRAMESET >Se usa para dividir la pagina en varias partes Atributos: -cols -rows -name -frameborder -scrolling
  26. 26. FORMULARIOS < FORM …>…</ FORM >Son usados para pasar datos al servidor. Un formulario puede tener elemntosde 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. 27. FORMULARIOS INPUTS < INPUT TYPE =“” … />Los inputs representan elementos de entrada en un formulario. Los mascomunes son del tipo: text, button, radio, submit, checkbox, entre otros. Atributos: -type=“text” tipo de input -id=“…” Los atributos cambian dependiendo del tipo.
  28. 28. FORMULARIOS SELECT < SELECT >…</ SELECT >Representa una lista desplegable para ser usada en los formularios
  29. 29. FORMULARIOS METODOS GET Y POSTSon metodos de envio de data al formulario.METODO GET: manda la data a travez del URL, separando con signos deinterrogación.METODO POST: la data es enviada dentro del body del formulario.Generalmente cuando el envio de data involucra inserciones a la base de datosse usa el metodo POST.
  30. 30. CSS (CASCADING STYLE SHEET)CSS es un lenguaje usado para definir la presentación de un documentoestructurado escrito en HTML o XML (y por extensión en XHTML).El W3C (World Wide Web Consortium) es el encargado de formular laespecificación de las hojas de estilo que servirán de estándar para los agentesde 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 elcodigo del estilo.3- A travez de archivos con extension .css que contiene el codigo de estilo,haciendo referencia a el en el documento.
  31. 31. CSS (CASCADING STYLE SHEET)Estructura Basica del atributo style Estructura Basica de la etiqueta <style>…</style>
  32. 32. CSS SELECTORES (. #)Los selectores son la forma con la cual se definen los estilos en la hoja deestilos, por ejemplo si se quiere aplicar estilo a las etiquetas h1 solo se debeescribir h1 {…}. Pero si se quiere aplicar estilos a una(s) etiquetas en particularse 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. 33. CSS < LINK … />Si se tienen los estilos en un archivo .css se debe hacer relacion a este pormedio de la etiqueta <link … /> en el head del documento web.
  34. 34. CSS LISTA DE ATRIBUTOS STYLEPara una referencia de la mayoria de los style en css, pueden visitar lasiguiente pagina:http://www.xhtml.com/en/css/reference/
  35. 35. LAYOUTSSe trata de tecnicas de distribución de los elementos dentro de un documentoweb. Los mas comunos son layouts basados en tablas, y layouts basados endivs.LAYOUTS CON TABLAS:-Se usan las etiquetas <table><tr><td> para crear la distribucion.
  36. 36. LAYOUTSLa etiqueta div <div>…</div> se usa para definir un bloque o seccion en undocumento, visualmente no representa nada, pero con esta etiqueta,aplicandole estilos se pueden realizar layouts de calidad.LAYOUTS CON DIVS:
  37. 37. LAYOUTSLa etiqueta div <div>…</div> se usa para definir un bloque o seccion en undocumento, visualmente no representa nada, pero con esta etiqueta,aplicandole estilos se pueden realizar layouts de calidad.LAYOUTS CON DIVS:
  38. 38. 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 colornegro.2. Crea un estilo para una clase llamada titulo que establezca un tamaño defuente de 18 píxeles.3. Crea un estilo para una clase llamada datos que establezca que el textoesté alineado a la derecha, de 12 píxeles de tamaño, en cursiva y con un altode línea de 0.2.4. Haz que todos los enlaces dentro de un párrafo o un elemento de lista notengan subrayado y sean de color negro.5. Por último, haz que los elementos de lista dentro del bloque sección nomuestre viñetas.

×