HTML

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    HTML - Presentation Transcript

    1. Laboratorio N° 1 pacd1985
      • H yper T ext M arkup L anguage
      • Es un lenguaje utilizado para describir páginas web.
      • No es un lenguaje de programación, es un lenguajes de marcas.
      • Busca separar el contenido de la presentación; de esta última se encargarán otros mecanismos.
      • Con HTML Markup Tags o simplemente Tags.
      • Existen distintos tipos de Tags que describen distintos tipos de contenidos.
      • Un Tag es una palabra contenida dentro de angle brackets , como <html> .
      • Normalmente vienen en pares, como <b> y </b> .
      • <html> Todo va dentro de tags html
      • <head>
      • … Informaci ón sobre el documento
      • </head>
      • <body>
      • … Contenido del documento
      • </body>
      • </html>
      • Identifica al documento como html.
      • <html>
      • <head>
      • <title> Página WEB </title>
      • …
      • </head>
      • <body>
      • …
      • </body>
      • </html>
      • Contiene informaci ón del documento, como el título y la metadata.
      • <html>
      • <head>
      • <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=windows-1250&quot;>
      • <meta name=&quot;generator&quot; content=&quot;PSPad editor, www.pspad.com &quot;>
      • <title>Página Web</title>
      • </head>
      • <body>
      • …
      • </body>
      • </html>
      • Aqu í va todo el contenido del documento, lo que se verá.
      • <html>
      • <head>
      • …
      • </head>
      • <body>
      • <h1>Este es un encabezado.</h1>
      • <p>Este es un p árrafo. </p>
      • </body>
      • </html>
      • Editor simple de texto. Ejemplo: Notepad
      • Editor asistente. Ejemplo: PSPad
      • Editor WYSIWYG. Ejemplo: Publisher
      • Un elemento html es todo lo que est á contenido entre tags html.
      • La mayoría tiene atributos.
      • Pueden estar anidados; es decir, pueden haber elementos html dentro de otros elementos html.
      • Existen elementos html vacíos, como por ejemplo: <br />
      • Los atributos dan informaci ón adicional sobre un elemento html.
      • Son siempre especificados en el tag inicial.
      • Presentan el siguiente formato :
      • <nom_tag nom_atr1=“val1” nom_atr2=“val2”..>
      • …
      • </nom_tag>
      • <a href=&quot;http://mi.ing.udep.edu.pe/&quot;>Mi ING</a>
      • <img src='http://www…./img/foto.gif'/>
      • <table border=0 width=100% >…</table>
      • Cerrar los tags. La mayoría de los browsers lo podrían pasar, pero en futuras versiones no se permitirá.
      • Cerrar bien los tags vacíos. En el caso del tag
      • <br /> tambi én se admite poner <br> , pero en futuras versiones no se admitirá.
      • Los tags ponerlos en min úsculas. Las futuras versiones de HTML lo demandarán.
      • Se recomienda usarlos solo para encabezados de p ágina y no simplemente para formatear un texto.
      • Son usados por los motores de búsqueda para indexar las páginas web.
      • h1 define el heading más grande y h6 el más pequeño.
      • El elemento anchor es utilizado para definir hyperlinks y anclas. Ambos son links y son así:
      • <a href=&quot;url&quot;>Texto del link</a>
      • Atributos importantes son:
      • href : Define la dirección url del link.
      • target : Define donde será abierto el documento linkeado. Ejemplo:
      • <a href=&quot;http://mi.ing.udep.edu.pe/&quot; target=&quot;_blank&quot;>
      • mi ING
      • </a>
      • name : Sirve para identificar anclas en un documento html. Ejemplo:
      • <a href=&quot;#cap1&quot;>Cap. I</a>
      • …
      • <a name=“cap1&quot;>Cap. I</a>
      • El primer anchor linkea al segundo anchor, el cual está en el mismo documento.
      • Listas sin orden
      • <ul> <li>item1</li> <li>item2</li>
      • ...
      • </ul>
      • Listas ordenadas
      • <ol> <li>item1</li> <li>item2</li>
      • ...
      • </ol>
      • Listas de definici ón
      • <dl> <dt>item1</dt> <dd>este item es un …</dd> <dt>item2</dt> <dd>este item es un …</dd>
      • </dl>
      • <img src=“http://.../foto.gif/&quot; alt=&quot;Big Boat&quot; />
      • src : Este atributo define el url de la imagen a cargar.
      • alt : Define un texto que se mostrará en caso el browser no pueda cargar la imagen.
      • GIF
      • Es apropiado para logotipos ya que comprime la imagen sin pérdida de información y puede contener zonas transparentes. Este formato soporta un máximo de 256 colores. Es el único soportado por cualquier browser.
      • JPEG
      • Apropiado para imágenes complejas o fotografías. Comprime y destruye parte de la información, aunque esta pérdida no es perceptible por el ojo humano. No puede ser transparente y soporta hasta 16,6 millones de colores.
      • Utilizando frames se puede mostrar más de un documento html en un misma página.
      • <frameset cols=&quot;25%,75%&quot;>    <frame src=&quot;frame_a.html&quot;>    <frame src=&quot;frame_b.html&quot;>
      • </frameset>
      • No se pueden utilizar <frameset> y < body> a la vez.
      • <html>
      • <frameset cols=&quot;25%,50%,25%&quot;>
      • <frame src=&quot;frame_a.html&quot;>
      • <frame src=&quot;frame_b.html&quot;>
      • <frame src=&quot;frame_c.html&quot;>
      • <noframes>
      • <body>El browser no soporta el uso de frames.</body>
      • </noframes>
      • </frameset>
      • </html>
      • Si se quiere utilizar un frame incrustado en un documento html, se debe utilizar el tag iframe.
      • <iframe src=“index.html&quot;></iframe>
      • <p>Este es un párrafo</p>
      • Los comentarios se hacen así:
      • <!– Este es un comentario-->
      • El cambio de línea de logra con el tag: <br />
      • Se puede crear una línea de separación horizontal con el tag: <hr />
      • <b>,<strong> : Ponen el texto en negritas.
      • <big> : Agrandan el texto.
      • <i>,<em> : Ponen el texto en cursiva.
      • <small> : Achican el texto.
      • <sub> : Ponen el texto como sub índice.
      • <sup> : Ponen el texto como superíndice.
      • Son definidas con el tag <table> y est án divididas en filas (con <tr> ), donde cada una está dividida en celdas (con <td> ).
      • Para poner celdas como encabezado, se utiliza <th> en vez de <td> .
      • Cada celda puede contener texto, imágenes, listas, párrafos, etc.
      • <table border=&quot;1&quot;> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr>
      • </table>
    31.  
    SlideShare Zeitgeist 2009

    + Piero Angelo Cáceres DiazPiero Angelo Cáceres Diaz Nominate

    custom

    320 views, 0 favs, 0 embeds more stats

    Principal tags, frames and tables

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 320
      • 320 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 11
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.