Get Started. It's Free
or sign up with your email address
Rocket clouds
Lenguaje HTML by Mind Map: Lenguaje HTML

1. TAGS GENERALES

1.1. Marcas especiales

1.1.1. Van entre los caracteres <>

1.1.2. Dobles, una al comienzo y otra al final

1.2. Contenido

1.2.1. Va un Tag al inicio y otra al final con /

1.2.2. Se escriben en letras mayúsculas

1.3. Ejemplos

1.3.1. Doble

1.3.1.1. <COMANDO> Texto afectado </COMANDO>

1.3.2. <P>

1.4. Anidación

1.4.1. Debe hacerse de manera coherente

1.4.2. La última tag en abrirse debe ser la primera en cerrarse

2. Formato de Texto

2.1. Generales

2.1.1. Tag BODY

2.1.1.1. Nombre Color

2.1.1.1.1. BGCOLOR

2.1.1.2. Fondo del Documento

2.1.1.2.1. BACKGROUND="imagen.ext":

2.2. Comentarios

2.2.1. Documento mas claro

2.2.2. No aparecen en el buscador

2.2.3. Ejemplo: <!-- Comentario -->

2.3. Caracteres de separación

2.3.1. Espacio en blanco, tabulador y salto de línea

2.3.2. Comprobar en el buscador el diseño

2.4. Organización o partición de documento

2.4.1. Párrafo <P></P>

2.4.2. Alineación ALING [LEFT, CENTER o RIGHT]

2.4.3. Salto de línea <BR>

2.4.4. Línea Horizontal <HR>

2.4.4.1. Longitud de la línea <WIDTH>

2.4.4.2. Alineación de la línea <ALIGN>

2.4.4.3. Anchura o Grosor <SIZE>

2.4.4.4. Línea sombreada <NOSHADE>

2.5. Formato de texto sin particiones

2.5.1. Formato específico de texto <PRE>…</PRE>

2.5.2. Salto de párrafo <BLOCKQUOTE>…</BLOCKQUOTE>

2.6. Centrado de párrafo

2.6.1. Centrar <CENTER>…</CENTER>

2.7. Formato en texto

2.7.1. Nivel de título <H>...</H>

2.7.2. Negrita <B>... </B>

2.7.3. Cursiva <I>... </I>

2.7.4. Subrayado <U>... </U>

2.7.5. Estilo teletipo <TT>…</TT>

2.7.6. Tamaño, color y tipo de letra <FONT>…</FONT>

2.7.6.1. Tamaño SIZE=n

2.7.6.2. Aumentar o disminuir tamaño SIZE=+n ó SIZE=-n

2.7.6.3. Color COLOR=”nombre_color”

2.7.6.4. Tipo de letra FACE=”tipo_letra”,

2.7.7. Tamaño de letra base <BASEFONT SIZE=n>

2.7.8. Superíndice <SUP>…</SUP>

2.7.9. Subíndice <SUB>…</SUB>

2.7.10. Texto mas grande <BIG>…</BIG>

2.7.11. Texto mas pequeño <SMALL>…</SMALL>

2.8. Caracteres especiales

2.8.1. Vocales Acentuadas

2.8.1.1. Mayúsculas &(LETRAMAYÚSC)acute

2.8.1.2. Minúsculas &(letramin)acute

2.8.1.3. Ñ &Ntilde, ñ &ntilde

3. Links

3.1. Hipertexto

3.1.1. Convierte texto en enlace <A> ... </A>

3.1.2. Otra página Web

3.1.3. Correo electrónico

3.1.4. Archivo local

3.1.5. Dirección

4. Listas

4.1. Desordenadas

4.1.1. Comienzo de una lista no ordenada <UL>...</UL>

4.1.2. Nuevo elemento de la lista <LI>

4.2. Ordenadas

4.2.1. Comienzo de una lista ordenada <OL>...</OL>

4.2.2. Nuevo elemento de la lista <LI>

4.3. De definiciones

4.3.1. Comienzo de la definición de la lista <DL>...</DL>

4.3.2. Nueva definición <DT>

4.3.3. Cuerpo o descripción de la definición <DD>

5. Imágenes

5.1. Insertar imagen

5.1.1. Ubicación de imagen SRC=”imagen.ext”

5.1.2. Reemplazar imagen por texto ALT=”texto”

5.1.3. Tamaño de la ventana WIDTH y HEIGHT

5.1.4. Alineación texto de acuerdo a la imagen ALIGN

5.1.5. Añadir borde BORDER=n

5.1.6. Espacio horizontal y vertical HSPACE=n y VSPACE=n

5.1.7. Cargar imagen de baja resolución y luego alta LOWSRC=URL

6. Tablas

6.1. Definición

6.1.1. <TABLE> y </TABLE>

6.1.2. Celdas en fila <TR> </TR>

6.1.3. Celda de datos <TD></TD>

6.1.4. Celda de texto resaltado <TH>...</TH>

6.2. Atributos

6.2.1. Ancho de la tabla WIDTH

6.2.2. Borde de la tabla <TABLE BORDER(=n)> ... </TABLE>

6.2.3. Alineación de la tabla ALIGN

6.2.4. Espacio entre celdas CELLSPACING

6.2.5. Ancho del borde a la celda CELLPADDING(=n)

6.2.6. Color del fondo de la tabla BGCOLOR

6.3. TR

6.3.1. Alineación contenido ALIGN

6.3.2. Posición vertical VALIGN

6.3.3. Color fondo fila BGCOLOR

6.4. TH y TD

6.4.1. Número de filas ROWSPAN(=n)

6.4.2. Número de columnas COLSPAN (=n)

6.4.3. Alineación contenido ALIGN

6.4.4. Posición vertical VALIGN

6.4.5. Ancho de la celda WIDTH

6.4.6. Altura de la celda HEIGHT

6.4.7. Color del fondo de la celda BGCOLOR

7. Frames

7.1. Fijo o Estático

7.1.1. Ventana con Frames frameset

7.2. Atributos

7.2.1. dividir verticalmente la ventana en dos partes <FRAMESET COLS="20%, 80%">

7.2.2. dos áreas horizontales <FRAMESET ROWS="80, 160, *”>

7.2.3. rejilla de 2x3 ventanas <FRAMESET rows="30%,70%" cols="33%,34%,33%">

7.3. Divisiones

7.3.1. Nombre de frame NAME="nombre"

7.3.2. Distancia horizontal MARGINWIDTH="n_pixels"

7.3.3. Distancia vertical MARGINHEIGHT="n_pixels"

7.3.4. Barras de desplazamiento SCROLLING="YES/NO/AUTO

7.3.5. Tamaño del frame NORESIZE

7.3.6. Buscadores que no admiten frames <NOFRAMES> y </NOFRAMES>

7.4. Salida a ventanas

7.4.1. Aparición en ventana TARGET en la TAG <A>…</A>

7.4.2. Todos los link de documento en la misma ventana TARGET con la TAG <BASE>

7.4.3. Ventana tipo formulario TARGET con la TAG <FORM>

7.5. Nombres de TARGET

7.5.1. Cualquier nombre que inicie con alfanumérico

7.5.2. Caracteres especiales

7.5.2.1. Nueva ventana en blanco TARGET="_blank

7.5.2.2. Propia ventana TARGET="_self"

7.5.2.3. Ventana padre TARGET="_parent"

7.5.2.4. Ventana principal TARGET="_Top"

8. Mapas de imágenes

8.1. Imágenes procesadas

8.1.1. Zonas geométricas <AREA>

8.1.1.1. URL destino HREF="URL"

8.1.1.2. Descripción textual ALT="texto"

8.1.1.3. Forma de la zona activa SHAPE="forma"

8.1.1.4. Lista de coordenadas COORDS=”x1,y1,x2,y2,…”

9. Editores y conversores

9.1. Editor de texto

9.1.1. Crear fichero Notepad

9.1.2. Editores automáticos WYSIWYG

9.1.3. Editores semiautomáticos CMED y HotDog

9.2. Conversores

9.2.1. Word, Excel y Powerpoint a HTML