HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

CaracteristicasUn lenguaje de marcado.Puede incluir un script (por ejemplo

Javascript).Es de MIME (text/html) (Extensiones de

Correo de Internet Multipropósito).Está definido en términos del SGML.

TagsEtiquetas (Tags).

Etiqueta de apertura y de cierre.Contenido. Atributos.Eventos.

Estructura General<!DOCTYPE><html>

<head></head><body>

</body>

</html>Ejemplo

<!DOCTYPE>. • declaración de tipo de documento (DTD)

– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">

– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd”>

<head><meta>: no tiene cierre.

name: author, description, keywords, generator, revised, otro. http-equiv: Allow, Content-Encoding , Content-Length, Content-

Type (MIME), Date, Expires, Last-Modified, Location (URL) , Refresh, Set-Cookie, WWW-Authenticate.

Scheme: formato, URI. content: descripcion.

<title> Ejemplo

<base >: no tiene cierre. href: URL. target: _blank, _parent, _self, _top, nombre de marco(frame).

Ejemplo

Atributos comuniestitle: información extra.lang.style.class.id.xml:lang.

Eventos comunes– Mouse:

• onclick• ondblclick• onmousedown• onmousemove• onmouseout• onmouseover• onmouseup

– Teclado:• onkeydown• onkeypress• onkeyup

<body>• <h1> a <h6>: Titulos.• <p>: Parrafo.• <pre>: Textual y por defecto.• <br />: salto de linea.• <hr />: linea horizontal.• <a>: enlaces o saltos.• <img /> : insertar imágenes.• <table>: tablas.• <form>: formularios.• <frame>: marcos.• <styte>: estilos.

Estilos de Texto• <em>: énfasis.• <strong>: fuerte.• <i>: cursiva.• <b>: negrita.• <big>:grande.• <small>:pequeña.• <sub>: sub-indice.• <sup>: indice superior.• <bdo>: direcion de texto (dir=“rtl” o dir=“ltr”).• <del>: eliminado (tachar)

» cite: URL» datetime: AAAA-MM-DDThh:mm:ssTZD

• <ins>:inserta (subrayar)

Presentaciones<dfn>: definicon de termino.<samp>: ejemplo computadora.<code>: tipo codigo.<kbd>: keyboard.<tt>: teletipo.<var>: variable.<cite>: cita.

Ejemplo de todo lo anterior

Bloques<acronym>: resaltar acronimo.<abbr>: abreviatura.<address>: direcion (fisica o digital).<blockquote>: cita larga<q>: cita corta.

<a> charset. href. hreflang. coords: (x1,y1,x2,y2),(x,y,radio), (x1,y1,x2,y2,…..). shape: rect, circle, poly, default. name. rel. rev. target. type: MINE.Ejemplo

<img />• alt: nombre alterno.• src: URL.• height: altura en pix o %.• width: ancho.• usemap: mapear. (#nombre).

• <map >: mapeo (name).– <area>

» alt.» coords.» href.» nohref: (nohref).» shape.» target.

Ejemplo

<table>• border: pixeles.• cellpadding: contenido.• cellspacing: entre celdas.• frame:void, above, below, hsides, vsides, lhs,

rhs, box, border (borde exterior).• rules:none, groups, rows, cols, all (borde

interior).• summary: resumen.• width: ancho en pixeles o %.

Dentro de <table>• <caption>: titulo (depues de <table>).• <tr>:

– align: right, left, center, justify, char.– char– charoff– valign: top, middle, bottom, baseline.

• <th>:– abbr– axis: categoria– colspan: n columnas– rowspan: n filas– scope: col, colgroup, row, rowgroup.– width– height

• <td>.• <col>.

– spam• <colgroup>• <thead>• <tbody>• <tfoot>

Ejemplo

<form>• action: URL.• accept: MIME (subida de archivo).• accept-charset.• enctype: application/x-www-form-urlencoded,

multipart/form-data, text/plain.• method: POST, GET.• name• target

<input>• accept• type: button, checkbox, file, hidden, image, password,

radio, reset, submit, text.• alt: solo para type=“image”.• src• checked: por defecto (checkbox, radio).• disabled• maxlength• name• readonly• size• value

Ejemplo

HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

Documents

Transcript of HyperText Markup Language (Lenguaje de Marcas de Hipertexto)