Formulario HTML

01
02
03
04
05
06
07
08
FORMULARIO
COMPUTACIÓN
09
SLIDESMANIA.COM
Contreras Domínguez Thania

10
01
Table of Contents
02
SECTION CONTENTS
01 Introducción a HTML
03
02 Encabezados
04
03 Formato de Fuente
05
04 Formato de Texto
05 Marquesina
06
06 Tablas
07
07 Tablas de Color
08
08 Anexo
Anexo Tablas
09
09
SLIDESMANIA.COM
10 Formulario
10
01 02 03 04 05 06 07 08 09 10
Introducción a HTML
01
SLIDESMANIA.COM
01
SINTAXIS DEL CÓDIGO
Las instrucciones se acompañan de un tag que abre y cierra el
02
código de instrucción, siendo este el símbolo operacional “ < “
menor que abre y el símbolo “ > “ mayor que, que es el que
03
cierra y completa la instrucción.
Ejemplo:
04
< CÓDIGO - INSTRUCCIÓN >
< Abre la instrucción o código
05
> Cierra la instrucción o código
< HTML > Aquí se utilizó un espacio para identificar la
06
instrucción en su apertura y cierre; pero lo correcto es utilizarlo
sin espacio, siendo <HTML>
07
Ejemplo:
<BODY > La instrucción en texto “ BODY ” significa que 08
empezaremos el bloque de inicio de procedimientos en CÓDIGO
HTML.
09
SLIDESMANIA.COM
10
01
APERTURA Y CIERRE
La mayor parte de los códigos o instrucciones, llevan un cierre
02
por bloque o sección con el símbolo matemático de división “ / ”,
Esto significa que la terminación de la instrucción o código solo
03
afectará a una sección dentro de la programación.
Sintaxis:
04
SINTAXIS
<CODIGO>
05
< / CODIGO>
Ejemplo 1:
06
<H1> INICIO DE ENCABEZADO EN TAMAÑO 1
TEMA O TITULO DE LA PAGINA
07
(CONTENIDO O TITULO DEL ENCAB EZADO)
< / H1> CIERRE DE ENCABEZADO EN TAMAÑO 1
08
09
SLIDESMANIA.COM
10
01
MODIFICADORES
Un modificador se coloca siempre dentro de los operadores o
02
tags, “ < ” y “ > ”, y van después del código o instrucción,
manifiestan una alternativa y s e declara con el símbolo
03
matemático “ = ” y la opción entre comillas textuales “opción” .
Si se desea agregar una alternativa más, se separa por coma “ , “.
LA OPCION INDICA UNA CARACTERISTICA DEL
04
OBJETO.
05
Sintaxis:
<CODIGO ALTERNATIVA 1=”OPCION 1” >
<CODIGO ALTERNATIVA 1= ”OPCION 1”, ALTERNAT IVA
06
2= ”OPCION 2” >
07
UNA OPCION TAMBIEN
PUEDE SER NUMERICA; 08
CUANDO SE TRATA DE
DIMENSIONAR
OBJETOS. UN OBJETO ES
09
SLIDESMANIA.COM
CUALQUIER ELEMENTO
DE LA PAGINA DESDE
UN TEXTO, LINEA,
TABLA, IMAGEN O
10
VIDEO.
01
MODIFICADORES EJEMPLO
EL CODIGO P ( PARAGRAPH ) INDICA la declaración de un texto
02
como párrafo NORMAL.
<P> Inicia la declaración de un texto como párrafo
CONTE NI DOTE XTUAL
03
</P> Cierra el párrafo declarado .
Con una opción Aquí se indica una modificación con texto en párrafo
04
centrado.
<P ALIGN=”CENTER” >
Inicia la presentación de un párrafo de texto , con ALTERNATIVA
05
ALINEACION ( ALIGN ), opción CENTRADO, =”CENTER”
CONTE NI DOTE XTUAL
</P> Cierra el párrafo declarado .
06
Con dos opciones o más. Aquí se indica un cambio de fuente, color y
tamaño
07
<FONT FACE=”VERDANA”,COLOR=”LIGHTGREEN”
, SIZE=”7” >
Indica la modificación de fuente ( FONT ) de un texto, tipo ( FACE ) 08
=“VERDANA” , en ( COLOR ) opción =”LIGHTGREEN” , verde
claro, con tamaño ( SIZE ) de la fuente de 7 pixeles por pulgada =”7”
CONTE NI DOTE XTUAL
09
SLIDESMANIA.COM
</FONT > Cierra la modificación del texto

10
01
ESTRUCTURA DE UNA PÁGINA
WEB
02
LA SIGUIENTE SECUENCIA MUESTRA QUE CUALQUIER
PAGINA WEB, DEBERA CONTENER LA SIGUIEN TE
ESTRUCTURA DE MANERA OBLIGATORIA, DE LO
03
CONTRARIO NO FUNCIONARIA EN EL NAVEGADOR. ES
IMPORTANTE SEÑALAR LA OBSERVACION DE LA SINTAXIS
04
EN CUANTO A LA APERTURA Y CIERRE DE CODIGO, ASI
COMO EN LOS BLOQUES.
05
<HTML>
<! -- comentarios >
06
<! -- información del autor o desarrollador >
<! -- versión utilizada >
<HEAD>
07
<TITLE>
Nombre de la página WEB </TITLE>
</HEAD>
08
<BODY>
09
SLIDESMANIA.COM
PROCEDIMIENTOS
</BODY>
</HTML>
10
01 02 03 04 05 06 07 08 09 10
02
Encabezados
SLIDESMANIA.COM
01
ETIQUETA DE CÓDIGO H
Esta se utiliza para los Encabezados de los textos o título de los
02
párrafos. Indica el tamaño del mismo añadiendo un número del
uno al seis; siendo el tamaño uno el más grande y seis el más
03
pequeño. Los Encabezados pueden ser alineados o incrustarse en
una marquesina que da efecto de movimiento, también pue de
aplicarse formato de texto, Fuente y formato de fuente. H # Lleva
04
apertura y cierre de bloque precisamente para indicar el título del
párrafo.
05
SINTAXIS
<H1> Contenido Textual , tamaño 1 </H1>
06
<H2 > Contenido Textual , tamaño 2 </H2 >
07
<H6 > Contenido Textual , tamaño 6 </H6 > 08
09
SLIDESMANIA.COM
10
01
MODIFICADORES DE ALINEACIÓN
02
Un encabezado se puede centrar , o colocar a la derecha, no es
necesario indicar su alineación a la izquierda, ya que si no lo
03
contiene automáticamente se alineará a la izquierda. ESTE
MODIFICADOR VA INCLUIDO SOLAMENTE EN LA
APERTURA DEL CODIGO.
04
SINTAXIS
align = ”CENTER” El encabezado queda centrado
05
align = ”RIGHT” El encabezado queda a la derecha.
06
NO UTILICES
<CENTER> CUANDO ESTES ALINEANDO TEXTO O
07
IMÁGENES DENTRO DE UNA TABLA EN ESE CASO
UTILIZA EL MODIFICADOR DE ALINEACIÓN NORMAL
align= ”CENTER” 08
<CENTER> CUANDO LOS REGLONES DE LOS
ENCABEZADOS DEBAN PRESENTAR DISTINTAS
09
SLIDESMANIA.COM
POSICIONES DE ALINEACIÓN. UTILIZA EL

MODIFICADOR DE ALINEACIÓN NORMAL align=
”CENTER”
10
01 02 03 04 05 06 07 08 09 10
Formato de Fuente
03
SLIDESMANIA.COM
01
ETIQUETA DE FUENTE (FONT) y FORMATO DE FUENTE
02
La FUENTE (FONT).
03
Se refiere a la tipografía o estilo en el texto, llamadas
anteriormente como cartas o mapas litográficas. Se destaca
04
esencialmente por medio del uso de las fuentes en la presentación
de las páginas web. Se utiliza el código <FONT> y se acompaña
de tres modificadores siendo el primero,
05
FACE (Tipo de fuente). El FORMATO DE FUENTE se
06
compone de las características que llevará la fuente como son
SIZE (Tamaño) y COLOR (Color). Los tipos de fuente, tamaño y
color a utilizar dependen de las listas de cartas litográficas
07
contenidas en los programas de procesadores de texto, en este
caso de la Ficha Fuente de la cinta de Opciones. Es decir, si se
08
desea aplicar estilo en el texto de una página Web, se deberá
verificar en la casilla Fuente los estilos disponibles y declararlo
en el modificador FACE.
09
SLIDESMANIA.COM
10
01
SINTAXIS
En su sintaxis regularmente el código de fuente <FONT> lleva apertura
02
con modificadores de tipo de fuente (face) que define la fuente y de
manera opcional, el formato de fuente definido por su tamaño (size) y
color (color) . Seguido del cierre de código </FONT>
03
Ejemplos:
04
a)
<FONT face=“Tipo de fuente”, size=“5”, color=“nombre o código del
05
color”>
</FONT>
b)
06
<FONT face=“tipo de fuente”, size=“5”>
</FONT>
07
c)
08
<FONT face=“Tipo de fuente”, color=“nombre o código del color”>
</FONT>
d)
09
SLIDESMANIA.COM
<FONT face=“Tipo de fuente”>

</FONT>
10
01
FUENTES TRUE TYPE
face=“VERDANA”
02
Arial Black
03
Times New Roman
04
Calibri
05
Arial
Verdana
06
Courier
07
08
09
SLIDESMANIA.COM
10
01 02 03 04 05 06 07 08 09 10
Formato de Texto
04
SLIDESMANIA.COM
MANEJO DE PARRAFOS
01
El código <P> (PARAGRAPH) en su apertura y cierre </P>
02
pueden definir tantos párrafos, como sea necesario.
PRIMER PARRAFO
03
<P>
Contenido Textual
04
< / P>
PARRAFO SIGUIENTE
<P>
05
Contenido Textual
< / P>
06
Otra manera de presentar párrafos es por: PARRAFOS
SEPARADOS.
07
<BR> (BACK RETURN) Permite insertar un espacio en blanco
entre los párrafos. De esta forma solo se declaran una sola vez
los párrafos. En estos se puede justificar y aplicar Fuente y 08
Formato de Fuente.
<BR> NO LLEVA CIERRE DE BLOQUE.
09
SLIDESMANIA.COM
10
01
EJEMPLOS
Opciones de interlineado
<P> Espacio y medio
"line-height:150%"
02
(Primer párrafo)
<BR> Doble espacio
"line-height:200%"
(Segundo párrafo)
03
<BR> Triple espacio
(Tercer párrafo) "line-height:300%"
04
</P>
a)
<P aling= ”CENTER”>
05
Contenido Textual
< / P>
06
b)
<P align= ”RIGHT”>
Contenido Textual
07
< / P>
c) <P align= ”JUSTIFY”> 08

Contenido Textual
< / P>
d)
09
SLIDESMANIA.COM
<P align= "JUSTIFY" , style ="line-height:150%">

Contenido Textual
10
< / P>
01
FORMATO DE TEXTO
Recomendación: Utilízalos siempre antes del código
02
Coloca negritas al texto.
03
<B> Contenido Textual o código < / B> (bold)
Coloca cursivas
04
<I> Contenido Textual o código < / I> (italic) al texto.
05
Coloca subrayado al texto.
<U> Contenido Textual o código < / U> (underline)
06
Coloca tachado directo al texto. Formato numérico
<STRIKE> Palabra o Contenido Textual < / STRIKE> (rayar)
07
(Utilizado para formulas o notas al pie de página)
Coloca SUPERINDICE al texto. ( cm 3 ) 08

( cm <SUP> 3 < / SUP> ) (superindex)
09
SLIDESMANIA.COM
Coloca subíndice ( a 1 + a 2)
( a <SUB> 1 < / SUB> + a <SUB> 2 < / SUB> ) (subindex)
10
01
EJEMPLOS
NEGRITAS
02
<B>
<P align= "JUSTIFY" , style ="line-height:150%" >
Contenido Textual
03
< / P>
< / B>
04
ENCABEZADO SUBRAYADO
<U>
05
<H1 align= "CENTER">
Contenido Textual
< / H1>
06
<FUENTE
/ U> ARIAL EN NEGRITAS
CURSIVAS
07
<B>
<I>
<FONT face= ”ARIAL” >
08
<P align= "JUSTIFY" >
Contenido Textual
09
SLIDESMANIA.COM
</ P>
< / FONT>
< / I>
10
</B>
01
CONFIGURACIONES PARA MANEJO DE PÁRRAFOS DE TEXTO
02
<LITOGRAPH> Contenido Textual <LITOGRAPH>
03
Presenta el párrafo de manera sencilla, ubica el párrafo ocupando
todo el espacio de margen izquierdo a margen derecho, no
04
respeta sangrías editadas en el bloc de notas, ni tampoco espacio
entre párrafos. Respeta acentos ortográficos.
05
<PRE> Contenido Textual </PRE>
Presenta el párrafo tal cual se presenta en el bloc de notas, si el
06
párrafo se presenta con sangrías se respetarán. La justificación se
hará de forma manual si se requiere. Es parecido a la forma de
escritura en máquinas de escribir antiguas. Acepta interlineado,
07
Fuente y Formato de texto solamente. Respeta acentos.
08
<BLOCKQUOTE> Contenido Textual </BLOCKQUOTE>
Presenta el párrafo con sangría tabulada para todo el texto, de
manera forzada. Acepta interlineado, Fuente y formato de texto.
09
SLIDESMANIA.COM
10
01 02 03 04 05 06 07 08 09 10
05
Marquesina
SLIDESMANIA.COM
01
ALTERNATIVAS DE MARQUESINA
02
CODIGO MARQUEE (MARQUESINA)
Permite resaltar un Encabezado o párrafo, puede ser aplicado a
03
imágenes conformando una galería de fotos, puede aceptar color
de fondo de texto, Fuente y formato de fuente. Igual que una
marquesina el texto presenta efectos de movimientos de
04
aparición en distintas direcciones. Y se puede vincular a otras
páginas, diseñando un menú móvil de imágenes, por medio de
05
hipervínculos. Este complemento debe presentar apertura de
código con alternativas y opciones y cierre de bloque de código.
Si es utilizado en encabezados es recomendable quitar la
06
alineación.
07
SINTAXIS:
<MARQUEE 08
alternativa1=”OPCION 1”,
alternativa2=”OPCION 2”>
OBJETOS: CONTENIDO
TEXTUAL, ENCABEZADO,
09
SLIDESMANIA.COM
IMAGEN
</MARQUEE>
10
01
ALTERNATIVAS
SENCILLA
02
<MARQUEE>
</MARQUEE>
03
1.-
BEHAVIOR: Comportamiento
04
OPCIONES:
SLIDE: Deslizamiento
ALTERNATE: ALTERNADO
05
SCROLL: PASO DEL OBJETO
behavior=”SLIDE”
06
behavior=”ALTERNATE”
behavior=”SCROLL”
07
2.-
DIRECTION: Dirección
OPCIONES: 08
direction=”UP”
direction=”DOWN”
09
direction=”LEFT”
SLIDESMANIA.COM
direction=”RIGHT”
10
01
ALTERNATIVAS
COMBINADO
02
behavior=”SLIDE”,
direction=”RIGHT”
03
3.-
bgcolor=”COLOR” Ó CODIGO DE COLOR”
04
4.-
scrollamount=”30”
05
scrolldelay=”400”
06
07
08
09
SLIDESMANIA.COM
10
01 02 03 04 05 06 07 08 09 10
06
Tablas
SLIDESMANIA.COM
01
CREACIÓN DE TABLAS
Las tablas se pueden insertar y nos permiten clasificar y ordenar
02
los objetos como texto o imágenes. En HTML podemos diseñar
tablas a través del código correspondiente, con el mismo fin.
03
Para ello contaremos con una estructura, misma que debemos
tomar en cuenta.
04
Antes de la Estructura abordaremos las abreviaturas: <TABLE>
Indica el inicio del objeto tabla
05
<TH> (Table Head) Encabezado de la Tabla
</TH>
06
<TR> (Table Row) Indica el inicio de una fila
07
</TR>
<TD> (Table Data) Indica el Contenido de datos en una celda 08

</TD>
09
SLIDESMANIA.COM
10
01
MODIFICADORES
Agrega un color especificado a la tabla
02
<TABLE BGColor=”color”>
Agrega una imagen a la tabla, es necesario dimensionar la imagen, una
03
vez terminada la tabla. Para su ajuste.
<TABLE BACKGROUND=”IMAGEN.ext”>
04
BORDER indica el espesor de la línea de la tabla, para este caso tendrá
un borde de 1 PPP (Punto por píxel). Si el valor es cero o no se indica el
05
borde no se visualizará.
<TABLE BORDER=”1”>
06
Colocará un color determina al borde de la tabla.
<TABLE BORDERCOLOR=”COLOR”>
07
Indica el ancho de la tabla de 300 PPP
<TABLE WIDTH=”300”>
08
Indica que la tabla tomará el 75% del ancho de la ventana del navegador,
para este caso, se deberá tomar el tamaño o números de palabra, para
09
SLIDESMANIA.COM
que al autoajustarse, no se alteré su proporción. O bien, las imágenes

contenidas
en las celdas sean del mismo tamaño.
10
<TABLE WIDTH=”75%”>
01
MODIFICADORES
<TABLE CELLPADDING=”10”, CELLSPACING=”10”>
02
Indica el espacio entre bordes o celdas de la tabla
CELLPADDING=”10”
03
Indica el espacio entre el texto y el borde de la celda a manera de
margen
CELLSPACING=”10”
04
05
EJEMPLO DE APLICACIÓN
Como ejemplo, escribiremos el hipotético supuesto de querer una
06
tabla que sea ancha al 100%, con un borde azul de un píxel de
grosor y con un cellpadding de 10 y con un cellspacing de 10. El
07
código quedaría de la siguiente forma.
<TABLE WIDTH="100%", BORDER="1", 08

BORDERCOLOR="#0000FF", CELLSPACING="10",
CELLPADDING="10">
09
…. ….
SLIDESMANIA.COM
</TABLE>
10
01
MODIFICADORES DE FILAS
ALINEACION VERTICAL DE LOS OBJETOS DE TEXTO EN LA FILA
02
Alineación vertical superior
<TR VALIGN=”top”>
03
Alineación vertical en la parte media
<TR VALIGN=”middle”>
04
Alineación vertical en la parte inferior
<TR VALIGN=”bottom”>
05
ALINEACION HORIZONTAL DE LOS OBJETOS DE TEXTO EN LA
FILA
06
Alineación centrada
<TR ALIGN=”center”>
07
Alineación a la izquierda (omitida por defaut)
<TR ALIGN=”left”>
08
Alineación a la derecha
09
<TR ALIGN=”right”>
SLIDESMANIA.COM
Alineación justificada
10
<TR ALIGN=”justify”>
01
MODIFICADORES
COLOR
<TR>
02
Agrega color de fondo indicado a la fila
<TR BGCOLOR=”COLOR”>
03
Agrega color al borde a la fila
<TR BORDERCOLOR=”COLOR”>
04
AGRUPAMIENTO DE CELDAS
Las celdas poseen unos atributos que nos ayudan a poder agrupar
05
tantas celdas o tantas columnas como indiquemos en él. Para
agrupar una celda en dos filas se usa el atributo “rowspan”, para
06
agrupar una celda en dos columnas utilizaríamos el atributo
“colspan”.
Por ejemplo, para agrupar en una celda 2 columnas tenemos que
07
escribir:
<td colspan=”2″> 08
</td>.
Y para agrupar dos filas, la indicación sería la siguiente:
09
<td rowspan= “2”>

SLIDESMANIA.COM
</td>.
10
01
IMÁGENES
Para insertar una imagen, recuerda que esta deberá estar
02
contenida dentro de tu carpeta, la misma donde guardas tus
archivos. Ya que al momento de ejecutar el archivo HTML, el
03
navegador buscará la imagen dentro de la misma carpeta. La
única instrucción que deberás indicar es:
04
SINTAXIS:
<IMG SRC=”ARCHIVO_DE_IMAGEN.ext”>
05
Donde:
IMG = Imagen
SRC = Search
06
“Archivo_de_Imagen. Nombre de la Imagen
.ext= Extensión del archivo
07
ESTE código no lleva cierre
08
09
SLIDESMANIA.COM
10
01
MODIFICADORES
MODIFICADORES: El ajuste de dimensiones
02
de una imagen es
Definición del ancho de la imagen sumamente importante
cuando se utilizan imágenes
WIDTH
en tablas, ya que no todas
03
las imágenes a insertar
Definición del alto de la imagen poseen el mismo tamaño o
HEIGHT
dimensiones.
04
EJEMPLO:
<IMG SRC=”ARCHIVO_DE_IMAGEN.ext”, width=”100”, height=”80”>
05
Proporción de la Imagen. En los casos en los que para no deformar la
imagen a través de sus dimensiones del ejemplo anterior, se utiliza el
06
símbolo de porcentaje.
EJEMPLO:
07
<IMG SRC=”ARCHIVO_DE_IMAGEN.ext”, width=”50%”,
height=”50%”>
La imagen será presentada al 50% de su tamaño original, si rebasa el
08
100%, la imagen se incrementará en proporción a sus dimensiones.
<IMG SRC=”ARCHIVO_DE_IMAGEN.ext”, width=”50%.*”,

09
SLIDESMANIA.COM
height=”50%.*”>
Al agregar el asterisco la imagen se autoajusta a una tabla o ventana de
aplicación
10
01 02 03 04 05 06 07 08 09 10
Tablas de Color
07
SLIDESMANIA.COM
01
Colores HTML
Nombre del color Código del color Apariencia
02
White #FFFFFF
03
Red #FF0000
Green #00FF00
Blue #0000FF
04
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
05
Black #000000
Aqua #70DB93
Baker’s Chocolate #5C3317
06
Blue Violet #9F5F9F
Brass #B5A642
07
Bright Gold #D9D919
Brown #A62A2A
Bronze #8C7853 08
Bronze II #A67D3D
Cadet Blue #5F9F9F
Cool Copper #D98719
09
SLIDESMANIA.COM
Copper #B87333
10
Colores HTML
01
02
Coral #FF7F00
03
Corn Flower Blue #42426F
Dark Brown #5C4033
Dark Green #2F4F2F
04
Dark Green Copper #4A766E
Dark Olive Green #4F4F2F
Dark Orchid #9932CD
05
Dark Purple #871F78
Dark Slate Blue #6B238E
Dark Slate Grey #2F4F4F
06
Dark Tan #97694F
Dark Turquoise #7093DB
07
Dark Wood #855E42
Dim Grey #545454
Dusty Rose #856363 08
Feldspar #D19275
Firebrick #8E2323
Forest Green #238E23
09
SLIDESMANIA.COM
Gold #CD7F32
10
Colores HTML
01
02
Goldenrod #DBDB70
03
Gray #C0C0C0
Green Copper #527F76
Green Yellow #93DB70
04
05
06
07
08
09
SLIDESMANIA.COM
10
01 02 03 04 05 06 07 08 09 10
08
Anexo
SLIDESMANIA.COM
ANEXO
01
Código Carácter Descripción
" “ Comillas dobles
02
< < Menor que
Espacio sin ruptura
03
¦ ¦ Barra vertical partida
« « Ángulo izquierdo
° ° Signo de grado
04
² ² Signo de “al cuadrado”
&acuate; ´ Acento agudo
¶ · Punto medio
05
º º Ordinal masculino
¼ ¼ Fracción un-cuarto
06
¾ ¾ Fracción tres-cuartos
Á Á A mayúscula, acento agudo
Í Í I mayúscula, acento agudo
07
Ú Ú U mayúscula, acento agudo
Ü Ü U mayúscula, diéresis
é é e minúscula, acento agudo 08

ó ó o minúscula, acento agudo
ü ü u minúscula, diéresis
÷ ÷ Signo de división

09
SLIDESMANIA.COM
&tilde; ˜ Tilde minúscula
— — Guion largo

10
’ ’ Comilla simple derecha

ANEXO
01
Código Carácte Descripción
r
02
” “ Comilla doble derecha
& & Ampersand
> > Mayor que
03
¡ ¡ Exclamación invertida
ª ª Ordinal femenino
¬ ¬ Signo no
04
± ± Mas/menos
³ ³ Signo de “al cubo”
05
µ µ Signo de micro
¹ ¹ Signo de “a la uno”
» » Ángulo derecho
06
½ ½ Fracción un-medio
¿ ¿ Interrogación abierta
É É E mayúscula, acento agudo
07
Ó Ó O mayúscula, acento agudo
Ñ Ñ N mayúscula, tilde
á á a minúscula, acento agudo 08

í í i minúscula, acento agudo
ú ú u minúscula, acento agudo

09
SLIDESMANIA.COM
&circ; ˆ Acento circunflejo
ñ ñ n minúscula, tilde
– – Guion
10
‘ ‘ Comilla simple izquierda

01
ANEXO
Código Carácter Descripción
“ “ Comilla doble izquierda
Esta es una tabla de códigos, 02

03
04
05
06
07
08
símbolos y caracteres especiales
generados para HTML
09
SLIDESMANIA.COM
10
01 02 03 04 05 06 07 08 09 10
Anexo Tablas
09
SLIDESMANIA.COM
01
ANEXO TABLAS
Nombre Descripción Código
02
NOWRAP Es un atributo que le podemos colocar a <td nowrap>
la etiqueta de la celda y que obligará al
navegador a no romper esa línea, o sea, a
no hacer ningún salto de línea. Con este
atributo en la celda, el navegador no
respeta el ancho predefinido de la tabla, si
03
es que lo hubiera, y respeta el ancho de la
frase, ya que no puede partirla.
Por tanto, si la frase es más larga que el
ancho definido de la tabla, ésta se estirará
todo lo necesario para albergar la frase sin
04
saltos de línea. El siguiente código nos
mostrará como escribir este atributo en la
etiqueta de la celda
CAPTION Esta etiqueta sirve para poder ponerle un <caption align="bottom">
05
título o encabezado a la tabla. Puedes </caption>
poder el encabezado arriba o abajo, dónde
tu prefieras, mediante la etiqueta “align”:
“align=top” para ponerlo arriba y
“align=bottom” para ponerlo abajo. En el
06
siguiente
ejemplo nosotros lo hemos puesto abajo.
07
08
Funcionan como
modificadores al
09
momento de hacer una

SLIDESMANIA.COM
tabla en HTML
10
01 02 03 04 05 06 07 08 09 10
10
Formulario
SLIDESMANIA.COM
01
FORMULARIO
CÓDIGO
02
<! -- DATOS >
<HTML>
03
</HTML>
04
<HEAD> <TITLE>
</TITLE>
</HEAD>
05
Modificadores de alineación:
06
align=”CENTER” centrado
align=”RIGHT”
<H1 align=”CENTER”>
07
</H1>
08
<FONT face=”VERDANA”, color=”GREEN” >
<P>
09
</P>
SLIDESMANIA.COM
</FONT>
10
01
FORMULARIO
<FONT face=”COURIER”, color=””#2F4F2F”” >
02
<H1 align=”CENTER”>
</H1>
03
</FONT>
<P>
04
(PRIMER PARRAFO)
<BR>
05
(SEGUNDO PARRAFO)
<BR>
(TERCER PARRAFO)
06
</P>
07
PARRAFO ALINEADO A LA DERECHA
<P align=”RIGHT”>
</P> 08
PARRAFO JUSTIFICADO
09
SLIDESMANIA.COM
<P align=”JUSTIFY”>
</P>
CÓDIGO
10
01
FORMULARIO
Tachado directo al texto (rayar).
02
<STRIKE>
</STRIKE>
03
PARRAFO CON NEGRITAS.
<B>
04
<P align="JUSTIFY", style="line-height:150%" >
</P>
05
</B>
Coloca SUPERINDICE al texto( cm3 ).
06
( cm <SUP> 3 </SUP> )
(superindex)
07
Coloca subíndice (a1+ a2)
( a<SUB> 1 </SUB> + a<SUB> 2 </SUB> ) 08
(subindex)
09
SLIDESMANIA.COM
CÓDIGO
10
01
FORMULARIO
CÓDIGO
<PRE>
02
Presenta el párrafo tal cual se presenta en el bloc de notas, si el
párrafo se presenta con sangrías se respetarán. La justificación se
03
hará de forma manual si se requiere. Es parecido a la forma de
escritura en máquinas de escribir antiguas. Acepta interlineado,
Fuente y Formato de texto solamente. Respeta acentos.
04
</PRE>
05
<LITOGRAPH>
Presenta el párrafo de manera sencilla, ubica el párrafo ocupando
todo el espacio de margen izquierdo a margen derecho, no
06
respeta sangrías editadas en el bloc de notas, ni tampoco espacio
entre párrafos. Respeta acentos ortográficos.
07
</LITOGRAPH>
<BLOCKQUOTE> 08
Presenta el párrafo con sangría tabulada para todo el texto, acepta
interlineado y fuente. Acepta interlineado, Fuente y formato de
09
SLIDESMANIA.COM
texto.
</BLOCKQUOTE>
10

Formulario HTML

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Formulario HTML

Cargado por

Copyright:

Formatos disponibles

01

Contreras Domínguez Thania

Las instrucciones se acompañan de un tag que abre y cierra el

< HTML > Aquí se utilizó un espacio para identificar la

La mayor parte de los códigos o instrucciones, llevan un cierre

Un modificador se coloca siempre dentro de los operadores o

EL CODIGO P ( PARAGRAPH ) INDICA la declaración de un texto

</FONT > Cierra la modificación del texto

Esta se utiliza para los Encabezados de los textos o título de los

<H1> Contenido Textual , tamaño 1 </H1>

POSICIONES DE ALINEACIÓN. UTILIZA EL

<FONT face=“Tipo de fuente”, size=“5”, color=“nombre o código del

<FONT face=“Tipo de fuente”>

c) <P align= ”JUSTIFY”> 08

<P align= "JUSTIFY" , style ="line-height:150%">

Recomendación: Utilízalos siempre antes del código

Coloca SUPERINDICE al texto. ( cm 3 ) 08

Las tablas se pueden insertar y nos permiten clasificar y ordenar

<TD> (Table Data) Indica el Contenido de datos en una celda 08

Agrega una imagen a la tabla, es necesario dimensionar la imagen, una

que al autoajustarse, no se alteré su proporción. O bien, las imágenes

<TABLE CELLPADDING=”10”, CELLSPACING=”10”>

Como ejemplo, escribiremos el hipotético supuesto de querer una

<TABLE WIDTH="100%", BORDER="1", 08

<td rowspan= “2”>

Para insertar una imagen, recuerda que esta deberá estar

<IMG SRC=”ARCHIVO_DE_IMAGEN.ext”, width=”50%.*”,

Nombre del color Código del color Apariencia

&quot; “ Comillas dobles

&nbsp; Espacio sin ruptura

&laquo; « Ángulo izquierdo

&deg; ° Signo de grado

&acuate; ´ Acento agudo

&para; · Punto medio

&frac14; ¼ Fracción un-cuarto

&Aacute; Á A mayúscula, acento agudo

&Iacute; Í I mayúscula, acento agudo

&Uuml; Ü U mayúscula, diéresis

&eacute; é e minúscula, acento agudo 08

&uuml; ü u minúscula, diéresis

&divide; ÷ Signo de división

&tilde; ˜ Tilde minúscula

&mdash; — Guion largo

&rsquo; ’ Comilla simple derecha

&amp; & Ampersand

&gt; > Mayor que

&ordf; ª Ordinal femenino

&sup3; ³ Signo de “al cubo”

&sup1; ¹ Signo de “a la uno”

&raquo; » Ángulo derecho

&iquest; ¿ Interrogación abierta

&Eacute; É E mayúscula, acento agudo

&Ntilde; Ñ N mayúscula, tilde

&aacute; á a minúscula, acento agudo 08

&uacute; ú u minúscula, acento agudo

&circ; ˆ Acento circunflejo

&ntilde; ñ n minúscula, tilde

&lsquo; ‘ Comilla simple izquierda

&ldquo; “ Comilla doble izquierda

Esta es una tabla de códigos, 02

momento de hacer una

<FONT face=”COURIER”, color=””#2F4F2F”” >

Tachado directo al texto (rayar).

" “ Comillas dobles

Espacio sin ruptura

« « Ángulo izquierdo

° ° Signo de grado

¶ · Punto medio

¼ ¼ Fracción un-cuarto

Á Á A mayúscula, acento agudo

Í Í I mayúscula, acento agudo

Ü Ü U mayúscula, diéresis

é é e minúscula, acento agudo 08

ü ü u minúscula, diéresis

÷ ÷ Signo de división

— — Guion largo

’ ’ Comilla simple derecha

& & Ampersand

> > Mayor que

ª ª Ordinal femenino

³ ³ Signo de “al cubo”

¹ ¹ Signo de “a la uno”

» » Ángulo derecho

¿ ¿ Interrogación abierta

É É E mayúscula, acento agudo

Ñ Ñ N mayúscula, tilde

á á a minúscula, acento agudo 08

ú ú u minúscula, acento agudo

ñ ñ n minúscula, tilde

‘ ‘ Comilla simple izquierda

“ “ Comilla doble izquierda