SlideShare una empresa de Scribd logo
1 de 38
Descargar para leer sin conexión
HTML
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
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>
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>
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.
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">
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>
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
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.
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>
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.
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.
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)
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.
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.
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.
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>
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 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.
PRINCIPALES ETIQUETAS
                            FRAMES < FRAMESET >
Se usa para dividir la pagina en varias partes
                                                 Atributos:
                                                 -cols
                                                 -rows
                                                 -name
                                                 -frameborder
                                                 -scrolling
PRINCIPALES ETIQUETAS
                            FRAMES < 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)
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.
FORMULARIOS
                   SELECT < SELECT >…</ SELECT >
Representa una lista desplegable para ser usada en los formularios
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.
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 del atributo style   Estructura Basica de la etiqueta
                                       <style>…</style>
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
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.
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/
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:
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 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.

Más contenido relacionado

La actualidad más candente (18)

Html
HtmlHtml
Html
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Introducción a XHTML
Introducción a XHTMLIntroducción a XHTML
Introducción a XHTML
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Html
HtmlHtml
Html
 
Html axel martinez, julio casasola
Html axel martinez, julio casasolaHtml axel martinez, julio casasola
Html axel martinez, julio casasola
 
Html
HtmlHtml
Html
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
HTML HyperText Markup Language
HTML HyperText Markup LanguageHTML HyperText Markup Language
HTML HyperText Markup Language
 
C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
 
Arquitectura del Web 2
Arquitectura del Web 2Arquitectura del Web 2
Arquitectura del Web 2
 
Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
Clase1
Clase1Clase1
Clase1
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 

Destacado

Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyParadigma Digital
 
HTML5 la revolución!
HTML5 la revolución!HTML5 la revolución!
HTML5 la revolución!maspixel
 
4 hiperenlace
4 hiperenlace4 hiperenlace
4 hiperenlaceMarianmv
 
6 marquesinas
6 marquesinas6 marquesinas
6 marquesinasMarianmv
 
1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaverMarianmv
 
5 hiperenlace con web
5 hiperenlace con web5 hiperenlace con web
5 hiperenlace con webMarianmv
 
3 configurar un sitio web tablas y imgenes
3 configurar un sitio web tablas y imgenes3 configurar un sitio web tablas y imgenes
3 configurar un sitio web tablas y imgenesMarianmv
 
10 formulario
10 formulario10 formulario
10 formularioMarianmv
 
Ug html.pptx
Ug html.pptxUg html.pptx
Ug html.pptxzezeiko
 
7 comportamiento de capas
7 comportamiento de capas7 comportamiento de capas
7 comportamiento de capasMarianmv
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a htmlromeprofe
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion htmlElim Aqp
 

Destacado (20)

Apuntes de HTML 2
Apuntes de HTML 2Apuntes de HTML 2
Apuntes de HTML 2
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
Html
HtmlHtml
Html
 
HTML5 la revolución!
HTML5 la revolución!HTML5 la revolución!
HTML5 la revolución!
 
4 hiperenlace
4 hiperenlace4 hiperenlace
4 hiperenlace
 
6 marquesinas
6 marquesinas6 marquesinas
6 marquesinas
 
8 marcos
8 marcos8 marcos
8 marcos
 
1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaver
 
5 hiperenlace con web
5 hiperenlace con web5 hiperenlace con web
5 hiperenlace con web
 
3 configurar un sitio web tablas y imgenes
3 configurar un sitio web tablas y imgenes3 configurar un sitio web tablas y imgenes
3 configurar un sitio web tablas y imgenes
 
10 formulario
10 formulario10 formulario
10 formulario
 
Ug html.pptx
Ug html.pptxUg html.pptx
Ug html.pptx
 
9 menús
9 menús9 menús
9 menús
 
HTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas SemanticasHTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas Semanticas
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Todo sobre HTML5
Todo sobre HTML5Todo sobre HTML5
Todo sobre HTML5
 
7 comportamiento de capas
7 comportamiento de capas7 comportamiento de capas
7 comportamiento de capas
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
Apuntes de HTML 1
Apuntes de HTML 1Apuntes de HTML 1
Apuntes de HTML 1
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion html
 

Similar a Clase Html + CSS (20)

C2 lenguaje html
C2 lenguaje htmlC2 lenguaje html
C2 lenguaje html
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Lenguaje HTML y CSS
Lenguaje HTML y CSSLenguaje HTML y CSS
Lenguaje HTML y CSS
 
Programacion en html
Programacion en htmlProgramacion en html
Programacion en html
 
Una Página WEB
Una Página WEBUna Página WEB
Una Página WEB
 
Los lenguajes de marcas
Los lenguajes de marcasLos lenguajes de marcas
Los lenguajes de marcas
 
HTML_Estructura Basica.pptx
HTML_Estructura Basica.pptxHTML_Estructura Basica.pptx
HTML_Estructura Basica.pptx
 
05introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp0205introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp02
 
Informatika 1111111
Informatika 1111111Informatika 1111111
Informatika 1111111
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Informatika 1111111
Informatika 1111111Informatika 1111111
Informatika 1111111
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Html conceptos basicos presentacion no1
Html conceptos basicos presentacion  no1Html conceptos basicos presentacion  no1
Html conceptos basicos presentacion no1
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Introducción a XML: Sintaxis y documentos bien formados
Introducción a XML: Sintaxis y documentos bien formadosIntroducción a XML: Sintaxis y documentos bien formados
Introducción a XML: Sintaxis y documentos bien formados
 
Qué es xml
Qué es xmlQué es xml
Qué es xml
 
Html
HtmlHtml
Html
 
CLASE DE HTML
CLASE DE HTML CLASE DE HTML
CLASE DE HTML
 
2. html
2. html2. html
2. html
 

Más de Alexys González

Más de Alexys González (7)

Introduccion a la Programacion Orientada a Objetos
Introduccion a la Programacion Orientada a ObjetosIntroduccion a la Programacion Orientada a Objetos
Introduccion a la Programacion Orientada a Objetos
 
Reverbs
ReverbsReverbs
Reverbs
 
Dynamic processors
Dynamic processorsDynamic processors
Dynamic processors
 
php Fundamentos
php Fundamentos php Fundamentos
php Fundamentos
 
Introduccion al sql query
Introduccion al sql queryIntroduccion al sql query
Introduccion al sql query
 
Introducción a la base de datos
Introducción a la base de datosIntroducción a la base de datos
Introducción a la base de datos
 
Conceptos basicos de internet
Conceptos basicos de internetConceptos basicos de internet
Conceptos basicos de internet
 

Clase Html + CSS

  • 2. AGENDA •DEFINICION. •COMO FUNCIONA. •ESTRUCTURAS Y VERSIONES. •PRINCIPALES ETIQUETAS. •FORMULARIOS. •ESTILOS. •DISEÑOS Y PLANTILLAS.
  • 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.