html xhtml

33
Unidad 1 Asignatura “Diseño y Desarrollo Mul3media para la Educación” Profesorado de Informá3ca Ins3tuto Normal de Enseñanza Técnica Gabriela Pérez Caviglia hIp://crea3vecommons.org/licenses/byncnd/3.0/ HTML/XHTML

Upload: gabriela-perez-caviglia

Post on 13-Jun-2015

422 views

Category:

Education


1 download

TRANSCRIPT

Page 1: Html Xhtml

     

Unidad  1        

Asignatura  “Diseño  y  Desarrollo  Mul3media  para  la  Educación”    Profesorado  de  Informá3ca  -­‐  Ins3tuto  Normal  de  Enseñanza  Técnica  

Gabriela  Pérez  Caviglia        

hIp://crea3vecommons.org/licenses/by-­‐nc-­‐nd/3.0/  

HTML/XHTML  

Page 2: Html Xhtml

HTML  

Page 3: Html Xhtml

¿Qué  es?  

HTML  es  lo  que  se  u2liza  para  crear  la  mayoría  las  páginas  web  de  Internet  

 HTML  

Lenguaje  Estructurado  de  Marcación  de  contenidos  (HyperText  Markup  Lenguage)  

 Es  un  estandar  

W3C  (World  Wide  Web  Consor3um)  

Page 4: Html Xhtml

Especificación  Oficial  

Son  las  normas  de  codificación  que  se  deben  seguir  para  codificar  el  html.    

 W3C    

Especificación  oficial  de  HTML  4.01  (hIp://www.w3.org/TR/  html401/)  Especificación  oficial  de  XHTML  1.0  (hIp://www.w3.org/TR/  xhtml1/)  

 El  estándar  XHTML  1.0  =  95%  HTML  4.01  +  mejoras  

Page 5: Html Xhtml

HTML  y  XHTML  

Page 6: Html Xhtml

HTML  y  CSS  

Originalmente  las  páginas  incluían  además  de  sus  contenidos,  información  sobre  el  aspecto  de  los  mismos,  todo  en  un  mismo  archivo,  lo  que  dificultaba  su  

mantenimiento.    

CSS    

Mecanismo  que  permite  separar  los  contenidos  del  aspecto  que  deben  presentar.  Cascade  Style  Sheet  –  Hojas  de  es3lo  en  Cascada  

 

Page 7: Html Xhtml

Lenguaje  de  e3quetas  Al  inicio  se  almacenaba  información  sin  formato,  

esto  se  solucionó  a  través  de  una  tabla  de  conversión  que  vincula  las  letras  del  alfabeto  a  un  

valor.    

¿Y  como  hacemos  con  los  textos  con  formato?    ¿Como  almacenamos  un  texto  de  color  azul  o  en  

negrita?    

La  solución  fue  crear  una  zona  reservada  en  el  archivo  donde  se  “marca”  y  se  guarda  la  información  sobre  el  formato.  

 <parrafo>    Contenido  de  texto  con  <importante>algunas  palabras</  importante>  resaltadas  de  forma  

especial.    </parrafo>              

   

Page 8: Html Xhtml

HTML  lenguaje  de  e3quetas  

 <html>    <head>    <2tle>El  primer  documento  HTML</2tle>    </head>    <body>    <p>El  lenguaje  HTML  es  <strong>tan  sencillo</strong>  que    prác3camente  se  en3ende  sin  estudiar  el  significado    de  sus  e3quetas  principales.</p>    </body>    </html>    

Page 9: Html Xhtml

E3quetas  y  Atributos  HTML  define  91  e2quetas  

Los  atributos  agregan  información  adicional  sobre  las  e3quetas  

 <html>  <head>  <2tle>Ejemplo  de  atributos  en  las  e3quetas</3tle>  </head>  <body>  <p>  Los  enlaces  son  muy  fáciles  de  indicar:  <a>Soy  un  enlace  incompleto,  porque  no  tengo  dirección  de  des3no</a>.  <a  href=”hTp://www.google.com”>Este  otro  enlace  apunta  a  la  página  de  Google</a>.  </p>  </body>  </html>    

   

Page 10: Html Xhtml

Sintaxis  

Page 11: Html Xhtml

Texto  

Page 12: Html Xhtml

Párrafos  <p></p>  

de  las  e3quetas  más  u3lizadas  de  HTML    

<html>  <head>  <2tle>Ejemplo  de  texto  estructurado  con  párrafos</3tle>  </head>  <body>  <p>Este  es  el  texto  que  forma  el  primer  párrafo  de  la  página.  Los  párrafos  pueden  ocupar  varias  líneas  y  el  navegador  se  encarga  de  ajustar  su  longitud  al  tamaño  de  la  ventana.</p>  <p>El  segundo  párrafo  de  la  página  también  se  define  encerrando  su  texto  con  la  e3queta  p.  El  navegador  también  se  encarga  de  separar  automá3camente  cada  párrafo.</p>  </body>  </html>  

Page 13: Html Xhtml

Secciones  Jerárquicas  <h1>  <h2>  <h3>  <h4>  <h5>  <h6>  

Son  las  e3quetas  que  definen  ptulos  de  sección      <html>  <head>  <2tle>Ejemplo  de  texto  estructurado  con  secciones</2tle>  </head>  <body>  <h1>Titular  de  la  página</h1>  <p>Párrafo  de  introducción...</p>  <h2>La  primera  sub-­‐sección</h2>  <p>Párrafo  de  contenido...</p>  <h2>Otra  subsección</h2>  <p>Más  párrafos  de  contenido...</p>  </body>  </html>  

Page 14: Html Xhtml

Secciones  Jerárquicas  

Page 15: Html Xhtml

Espacios  y  saltos  de  línea  <br></br>  o  <br/>  

Salto  de  línea  &nbsp;  

Espacios  adicionales    

En  html  si  se  inserta  texto  y  se  define  el  salto  de  línea  o  mas  de  un  espacio,  por  más  que  visualmente  cuente  con  él,  no  se  verá  así.  Ejemplo:  

 <html>  <head><2tle>Ejemplo  de  e3queta  p</2tle></head>  <body>  <p>Este  primer  párrafo  no  con3ene  saltos  de  línea  ni  otro  3po  de  espaciado.</p>  <p>Este            segundo  párrafo            sí  que              con3ene  saltos  de  línea  y                      otro          3po            de          espaciado.</p>  </body>  </html>      

Page 16: Html Xhtml

Espacios  y  saltos  de  línea  Como  se  vé:  

 

Page 17: Html Xhtml

Espacios  y  saltos  de  línea  <br></br>  o  <br/>  Salto  de  línea  

 En  html  si  se  inserta  texto  y  no  se  define  el  salto  de  línea,  por  más  que  

visualmente  cuente  con  él,  no  se  verá  así.  Ejemplo:    

<html>  <head><2tle>Ejemplo  de  e3queta  p</2tle></head>  <body>  <p>Este  primer  párrafo  no  con3ene  saltos  de  línea  ni  otro  3po  de  espaciado.</p>  <p>Este  segundo  párrafo  sí  que  con3ene  saltos<br/>  de<br/>  línea<br/>  y  &nbsp;&nbsp;otro&nbsp;  3po  &nbsp;de  &nbsp;espaciado.</p>  </body>  </html>      

Page 18: Html Xhtml

Espacios  y  saltos  de  línea  Como  se  vé:  

 

Page 19: Html Xhtml

Espacios  y  saltos  de  línea    

<pre>  </pre>  Texto  preformateado  

Muestra  el  texto  tal  y  como  esta  escrito    

 <html>  <head><2tle>Ejemplo  de  e3queta  pre</2tle></head>  <body>  <pre>  La  e3queta  pre  respeta  los  espacios  en  blanco  y  muestra  el  texto  tal  y  como  está  escrito  </pre>  

Page 20: Html Xhtml

Enlaces  

Page 21: Html Xhtml

Enlaces    

<a>  </a>  Pueden  ser  rela3vos  Pueden  ser  absolutos  

Pueden  apuntar  a  una  parte  del  mismo  documento.  Algunos  ejemplos:  

 <a  href=”hIp://www.google.com”>Página  principal  de  Google</a>  

 URL  absoluta:  hIp://www.ejemplo.com/ruta1/ruta2/ruta3/index.html    

URL  rela2va:  index.html      URL  rela2va:  ../index.html    

URL  rela2va:  ruta4/index.html              

   

Page 22: Html Xhtml

Listas  

Page 23: Html Xhtml

No  ordenadas    

<html>    <head><2tle>Ejemplo  de  e3queta  UL</2tle></head>    <body>    <h1>Menú</h1>    <ul>    <li>Inicio</li>    <li>No3cias</li>    <li>Arpculos</li>    <li>Contacto</li>    </ul>    </body>    </html>      

Page 24: Html Xhtml

Ordenadas    

<html>    <head><2tle>Ejemplo  de  e3queta  OL</2tle></head>    <body>    <h1>Instrucciones</h1>    <ol>    <li>Enchufar  correctamente</li>    <li>Comprobar  conexiones</li>    <li>Encender  el  aparato</li>    </ol>    </body>    </html>    

Page 25: Html Xhtml

Imágenes  

Page 26: Html Xhtml

Imágenes  <img>  

Imágenes    

<img  src=”logo2po.gif”  alt=”Logo2po  de  Mi  Si2o”  />    

Algunos  de  los  atributos  más  importantes    src  =  Indica  la  URL  de  la  imagen  que  se  muestra    alt  =  Descripción  corta  de  la  imagen    height  =  Indica  la  altura  con  la  que  se  debe  mostrar  la  imagen  (no  es  obligatorio  que  coincida  con  la  altura  original  de  la  imagen)    width  =  Indica  la  anchura  con  la  que  se  debe  mostrar  la  imagen  (no  es  obligatorio  que  coincida  con  la  anchura  original  de  la  imagen)      

Page 27: Html Xhtml

Tablas  

Page 28: Html Xhtml

Conceptos  Las  tablas  en  HTML  u3lizan  los  mismos  conceptos  de  filas,  columnas,  cabeceras  y  

[tulos  que  los  que  se  u3lizan  en  cualquier  otro  entorno  de  publicación  de  documentos,  como  por  ejemplo  una  planilla  de  cálculo  

Page 29: Html Xhtml

Tablas  Básicas  Las  tablas  más  sencillas  de  HTML  se  definen  con  tres  e3quetas:  <table>  para  crear  la  

tabla,  <tr>  para  crear  cada  fila  y  <td>  para  crear  cada  columna.    

<html>  <head><2tle>Ejemplo  de  tabla  sencilla</2tle></head>  <body>  <h1>Listado  de  cursos</h1>  <table>  <tr>  <td><strong>Curso</strong></td>  <td><strong>Horas</strong></td>  <td><strong>Horario</strong></td>  </tr>  <tr>  <td>CSS</td>  <td>20</td>  <td>16:00  -­‐  20:00</td>  </tr>    <tr>  <td>HTML</td>  <td>20</td>  <td>16:00  -­‐  20:00</td>  </tr>    <tr>  <td>Dreamweaver</td>  <td>60</td><td>16:00  -­‐  20:00</td>  </tr>    </table>    </body>  </html>  

Page 30: Html Xhtml

Tablas  Básicas  

Page 31: Html Xhtml

Fusión  de  columnas  

<table>    <tr>    <td  colspan=”2”>A</td>    </tr>    <tr>    <td>B</td>    <td>C</td>    </tr>    </table>    

Page 32: Html Xhtml

Fusión  de  filas  

<table>    <tr>    <td>A</td>    <td  rowspan=”2”>B</td>    </tr>    <tr>    <td>C</td>    </tr></table>    

Page 33: Html Xhtml

Fusión  de  filas  y  columnas  <table  border=”1”><tr>    <td  colspan=”3”>A</td>    <td>B</td>    </tr>    <tr>    HTML    39    <td>C</td>    <td  colspan=”2”>D</td>    <td>E</td>    </tr>    <tr>    <td  colspan=”4”>F</td>    </tr>    <tr>    <td>G</td>    <td>H</td>    <td>I</td>    <td>J</td>    </tr>    </table>