Chuleta Lenguaje de Marcas

LENGUAJE DE MARCAS UNIDAD 1
Versiones:
HTML 4:
<!DOCTYPE HMTL PUBLIC “-//w3w//DTD HTML 4.01 Transitional//EN”>
HTML 5:
<!DOCTYPE HTML>
Etiquetas:
<i> Texto en cursiva </i>
<u> Subraya el texto </u>
<b> Negrita </b>
<center> Centra el texto en la pagina </center>
Extension:
HTML 4:
<html> </html>
HTML 5:
<html lang=”es”> </html lang=”es”>
XHTML:
<html xmlns=http://www.w3org/1999/xhtmlxml:lang=”es”>
</html xmlns=http://www.w3org/1999/xhtmlxml:lang=”es”>
1
Estructura:
<head> Cabecera de la pagina </head>
<title> Titulo de la pagina </title>
<meta> información sobre la pagina </meta>
<meta name="author" content="Autor de la pagina">
<meta name="description" content="descripción de la pagina">
<meta name="keywords" content="palabras clave">
<meta name="classification" content="palabras para clasificar la pagina en

buscadores">
<meta name=”generator” content="programa utilizado para crear la pagina">
<meta http-equiv="refresh" content="10;http://brucespringsteen.net">
(Actualizar la pagina cada X segundos a la siguiente dirección)
Charset: Destinado a establecer la codificación de caracteres utilizada

(Charset)
HTML 4:
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8”/>
HTML 5:
<meta charset=”UTF-8”>
<body> Cuerpo de la pagina <body>
Dentro de la etiqueta body: (<body bgcolor=”#000000”>) Los colores planos también pueden
ponerse en ingles.
bgcolor=”#000000” color del fondo
background=”ruta de imagen” Imagen de fondo
text=”#FFFFFF” Color del texto
link=”00FF00” Color del texto de los enlaces
vlink=”FF0000” Color de enlaces visitados
(Pueden usarse varias en la misma línea de comandos.)
2
Espaciado:
<p> Doble enter en teclado </p>
Un enter </br>
<pre> Texto con preformato (no se recomienda su uso) </pre>
Atributo width Nº de caracteres x línea (No admitido en HTML 5)
<h1> Define diferentes tipos de tamaños de párrafos (h1-h6) </h1>
Se modifica con comandos como Align y valores como center, left, right
(HTML 5 no admite atributo align. Debe usarse CSS.
<hr> Introduce línea horizontal en el texto </hr>
Puede ser modificada con:
Color=”color de la regla”
Alig=”left, center, right”
Width=”anchura de la regla” (pixeles o %)
Size=”grosor de la regla” (pixeles o %)
<Font> Formato de las fuentes: (Fuente x defecto times new roman).
<Font face=X> Todo el texto dento tendrá estas tipografia </Font>
<Font Size=”+2”> Tamaño del texto </Font>
<Font color=”Green” Color del texto </Font>
- Caracteres especiales: los principales son el símbolo menor (<), símbolo del mayor (>),
copyright (©).
(HTML 5 no admite la etiqueta, debe usarse CSS)
3
<a> </a>Hiperenlaces:
<a href=”URL”Ir a Google </a>
Aparecerá asi: Ir a Google (Siendo la dirección del enlace la URL)
(Pueden agregarse ,después de la etiqueta de hiperenlace, títulos, imagenes etc como

hiperenlaces con los comandos correspondientes dentro de este.)
Se modifica con los siguientes atributos:
<a Href=”URL”texto del hiperenlace> Indica la URL de la pagina q se cargara y el texto

q lleva.
<a name=”nombre del ancla q llevara el enlace>
<a target=”_blank> Abre en nueva ventana </a>
_self> Abre en mismo marco </a>
_top> Abre en marco primario </a>
_parent> Abre en toda la ventana </a>
<a href=”#nombreancla”>texto del enlace del ancla </a>
Enlaces a mail
<a href="mailto:direccion_de_correo">Dirección mail</a>
Comentarios: 
<Img> Imágenes: (no necesita etiqueta de cierre)
<img scr=”donde esta la imagen(url o atajo)”>
<img alt=”texto alternativo”>
<img align=”top, middle, bottom, left, center, right”> Alinea la imagen respecto al texto
horizontal o vertical
<img border=”pone un borde o marco a la imagen (en pixeles)”>
<img height=”altura de la imagen (pixeles o porcentaje)”>
<img width=”ancho que debe tener la imagen (pixeles o porcentaje)”>
<img Hspace=”pixeles de separación horizontal entre el texto y la imagen”>
<Img Vspace=”Separacion vertical entre el texto y la imagen”>
(Se pueden o deben utilizar varios en la misma línea de comandos)
4
Listas:
- Ordenadas: <ol></ol>
<ol>
<li> elemento 1
<li> elemento 2
<li> elemento n
</ol>
Modificable con type: Circle, Square, Disc
- Desordenadas : <ul></ul>
Modificable con type: 1 (Lista ordenada con números), A (lista ordenada con letras en
mayúsculas), a (Ordenada con letras en minúscula), I (Ordenada con números romanos), i
(Numeros romanos en minúscula)
Start indica con que numero o letra debe comenzar,
Ej: <ol type=”A” start=”2”>
Los elementos de las listas se ponen con <li></li>
HTML 5 No admite el atributo type
- Listas de definición: <dl><dl> para declarar la lista, <dt></dt> para el término a definir y
<dd></dd> para la definición.
Ej: <dl>
<dt> concepto 1 </dt>
<dd> Definicion 1 </dd>
<dt> concepto n </dt>
<dd> Definicion n </dd>
</dl>
5
Tablas:
- Las tablas comienzan con la estructura <table></table>
-Puede ser formateada con diversos atributos: Border, Cellspading…
- Las filas se representan con <tr></tr>
- Los elementos dentro de las filas (columnas):
* Si es la primera fila: <th></th> (texto centrado y en negrita)
* El resto de filas: <td></td>
Ej:
<table>
<tr>
<th> encabezado 1-A </th>
<th> encabeado 1-B </th>
</tr>
<tr>
<td> Elemento 1-A </td>
<td> Elemento 1-B </td>
</tr>
</table>
Se veria asi:
Encabezado 1-A Encabezado 1-B
Elemento 1-A Elemento 1-B
6
HTML5. No se admiten los atributos: "align", "bgcolor", "border", "cellpadding",

"cellspacing", "frame", "rules", "summary", and "width"
En el caso de width, es mejor que el ancho se exprese en porcentaje, ya que así la tabla
quedará bien en la página sea cual sea el tamaño de la ventana.
La etiqueta <tr> acepta los siguientes atributos:
ALIGN: Controla la alineación vertical de la fila. Los valores que se pueden utilizar son:
LEFT, RIGHT, CENTER.
VALIGN: Controla la alineación horizontal de la fila. Los valores que se pueden utilizar
son: TOP, MIDDLE, BOTTOM.
BGCOLOR: Indica el color de fondo de la fila.
La etiqueta <td> acepta los siguientes atributos:
ALIGN: Controla la alineación vertical de la celda. Los valores que se pueden utilizar
son: LEFT, RIGHT, CENTER.
VALIGN: Controla la alineación horizontal de la celda. Los valores que se pueden

utilizar son: TOP, MIDDLE, BOTTOM.
WIDHT: Se utiliza para indicar el tamaño de la columna. Permitir utilizar el tamaño en

píxeles o en % de la tabla.
ROWSPAN: Nos permite indicar cuantas filas va abarcar la celda.
COLSPAN: Nos permite indicar cuantas columnas ocupara una celda.
BGCOLOR: Indica el color de fondo de la celda.
BACKGROUND: Utiliza una imagen como fondo de la celda.
Tablas anidadas: Es posible crear tablas anidadas, unas dentro de otras.
7
Creación de formularios con <form></form>:

Los elementos que introduciremos dentro del formulario serán:
o Cuadros de texto: <input type="text" ... />

o Cuadros para contraseña: <input type="password" ... />
o Checkbox: <input type="checkbox" ... />
o Radiobuttons: <input type="radio" ... /> Para que cuando se pincha en una
opción, se desmarque la otra, deben tener el mismo valor en el atributo
"name".
o Campo de observaciones: <textarea></textarea>
o Desplegable: <select><option value="valor1">Valor 1</option></select>
o Botón Enviar: <input type="submit" ... />
o Botón Limpiar: <input type="reset" ... />
Iframes:
Nos permite importar contenido de otra web dentro de la nuestra. Por ejemplo se utiliza
para insertar vídeos de Youtube o mapas de Google Maps.
<iframe width="640" height="360"
src="https://www.youtube.com/embed/76ZEIEbjlEg" frameborder="0"
allowfullscreen></iframe>
 XHTML: combinación de XML y HTML. Para que un documento sea válido en HHTML
debe cumplir las siguientes normas:
o Las primeras líneas del documento son:
<?xml version="1.0" encoding="UTF-8" ?>
<!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">
o Las etiquetas de apertura deberán tener su correspondiente de cierre.

o Las etiquetas válidas en XHTML deberán ir siempre en minúsculas.
o Los valores de los atributos se escriben siempre entre comillas dobles.
o Elementos vacíos que en HTML son correctos como <br>, en XHTML deben
escribirse como <br />
Para validar si la página es válida, lo deberemos comprobar en la URL validator.w3.org, desde

la pestaña "Validate by Direct Input" y copiando el código completo.

Chuleta Lenguaje de Marcas

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Chuleta Lenguaje de Marcas

Загружено:

Авторское право:

Доступные форматы

LENGUAJE DE MARCAS UNIDAD 1

<!DOCTYPE HMTL PUBLIC “-//w3w//DTD HTML 4.01 Transitional//EN”>

<i> Texto en cursiva </i>

<u> Subraya el texto </u>

<b> Negrita </b>

<center> Centra el texto en la pagina </center>

<html lang=”es”> </html lang=”es”>

<head> Cabecera de la pagina </head>

<title> Titulo de la pagina </title>

<meta> información sobre la pagina </meta>

<meta name="author" content="Autor de la pagina">

<meta name="description" content="descripción de la pagina">

<meta name="keywords" content="palabras clave">

<meta name="classification" content="palabras para clasificar la pagina en

<meta name=”generator” content="programa utilizado para crear la pagina">

<meta http-equiv="refresh" content="10;http://brucespringsteen.net">

(Actualizar la pagina cada X segundos a la siguiente dirección)

Charset: Destinado a establecer la codificación de caracteres utilizada

<meta http-equiv=”content-type” content=”text/html;charset=UTF-8”/>

<body> Cuerpo de la pagina <body>

bgcolor=”#000000” color del fondo

background=”ruta de imagen” Imagen de fondo

text=”#FFFFFF” Color del texto

link=”00FF00” Color del texto de los enlaces

vlink=”FF0000” Color de enlaces visitados

(Pueden usarse varias en la misma línea de comandos.)

<p> Doble enter en teclado </p>

<pre> Texto con preformato (no se recomienda su uso) </pre>

Atributo width Nº de caracteres x línea (No admitido en HTML 5)

<h1> Define diferentes tipos de tamaños de párrafos (h1-h6) </h1>

(HTML 5 no admite atributo align. Debe usarse CSS.

<hr> Introduce línea horizontal en el texto </hr>

Puede ser modificada con:

Alig=”left, center, right”

Width=”anchura de la regla” (pixeles o %)

Size=”grosor de la regla” (pixeles o %)

(Pueden usarse varias en la misma línea de comandos.)

<Font> Formato de las fuentes: (Fuente x defecto times new roman).

<Font face=X> Todo el texto dento tendrá estas tipografia </Font>

<Font Size=”+2”> Tamaño del texto </Font>

<Font color=”Green” Color del texto </Font>

(Pueden usarse varias en la misma línea de comandos.)

(HTML 5 no admite la etiqueta, debe usarse CSS)

<a href=”URL”Ir a Google </a>

Aparecerá asi: Ir a Google (Siendo la dirección del enlace la URL)

(Pueden agregarse ,después de la etiqueta de hiperenlace, títulos, imagenes etc como

Se modifica con los siguientes atributos:

<a Href=”URL”texto del hiperenlace> Indica la URL de la pagina q se cargara y el texto

<a name=”nombre del ancla q llevara el enlace>

<a target=”_blank> Abre en nueva ventana </a>

_self> Abre en mismo marco </a>

_top> Abre en marco primario </a>

_parent> Abre en toda la ventana </a>

<a href=”#nombreancla”>texto del enlace del ancla </a>

<a href="mailto:direccion_de_correo">Dirección mail</a>

Comentarios:

<Img> Imágenes: (no necesita etiqueta de cierre)

<img scr=”donde esta la imagen(url o atajo)”>

<img alt=”texto alternativo”>

<img border=”pone un borde o marco a la imagen (en pixeles)”>

<img height=”altura de la imagen (pixeles o porcentaje)”>

<img width=”ancho que debe tener la imagen (pixeles o porcentaje)”>

<img Hspace=”pixeles de separación horizontal entre el texto y la imagen”>

<Img Vspace=”Separacion vertical entre el texto y la imagen”>