HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
-
Upload
francisco-javier-ortega-cordero -
Category
Documents
-
view
236 -
download
0
Transcript of HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
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>
<!-- vacio--></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
<link >No tiene cierre
charset: UTF-8, ISO-8859-1(default). href. hreflang. media. rel: Alternat e, stylesheet, start, next, prev,
contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark, icon.
rev. target. type: MINE.
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