Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Diseño de una publicación digital Curso: Nuevos medios de comunicación Dra. Lyudmyla Yezers´ka
Lenguaje HTML <ul><li>HTML – Hyper Text Markup Lenguage – Lenguaje de Marcas para Hipertexto </li></ul><ul><li>Documento H...
Lenguaje HTML <ul><li>Para empezar el diseño de un site: </li></ul><ul><ul><li>Tener una idea de lo que quieres hacer </li...
Estructura de un documento HTML <ul><li><HTML> </li></ul><ul><li>   <HEAD> </li></ul><ul><li><TITLE>  Título  </TITLE> </l...
Formato de los caracteres <ul><li>Formatos físicos: </li></ul><ul><ul><li>< B > ...< /B > Negrita </li></ul></ul><ul><ul><...
Formato de los caracteres <ul><li>Formatos lógicos: </li></ul><ul><ul><li>< CITE > ...< / CITE > texto con formato cita   ...
Características de párrafo <ul><li>Etiquetas más frecuentes: </li></ul><ul><ul><li>< P >  Salto de párrafo </li></ul></ul>...
Comandos de encabezamiento <ul><li>Existen 7 niveles de encabezamientos: </li></ul><ul><ul><li>< H1 > Nivel de encabezamie...
Etiqueta <FONT> <ul><li>Size  – atributo de tamaño de fuente </li></ul><ul><ul><li>Directo:   <FONT size=4> El tamaño de l...
Etiqueta <FONT> <ul><li>Color  – atributo de color de fuente </li></ul><ul><ul><li><FONT color = “blue”> Frase de color az...
Etiqueta <FONT> <ul><li>Face  – atributo de tipo de fuente </li></ul><ul><ul><li><FONT face = “Comic Sans MS, Arial, Helve...
Alineación de texto <ul><li><P  ALIGN = LEFT> .....  </P> </li></ul><ul><li><P  ALIGN = RIGHT>  .....  </P> </li></ul><ul>...
Listas Ordenadas <ul><li>< OL> </li></ul><ul><li><LI> Introducción </li></ul><ul><li><LI> Primer capítulo </li></ul><ul><l...
<ul><li>Ejemplo: </li></ul><ul><ul><li>< OL Type = I > </li></ul></ul><ul><ul><li>< LI > Introducción </li></ul></ul><ul><...
Listas No-Ordenadas <ul><li><UL> </li></ul><ul><li><LI> Introducción </li></ul><ul><li><LI> Primer capítulo </li></ul><ul>...
Listas de Definición <ul><li>Ejemplo: </li></ul><ul><li><DL> </li></ul><ul><li><DT> Introducción </li></ul><ul><li><DD> Br...
Enlaces <ul><li>Estructura general:<A  HREF = “xxx” > yyy </A> </li></ul><ul><ul><li>xxx – destino, “target” – URL de otra...
Imágenes <ul><li>Estructura general: </li></ul><ul><li>< IMG src = “imagen.gif” >  - archovo de imagen esta en misma carpe...
Atributos de Imágenes <ul><li>alt = “Texto”  –  mostrar texto de ayuda al poner mouse </li></ul><ul><li>align = TOP / MIDD...
Ejemplos:  <A  HREF = “xxx.html” > yyy </A> destino ancla <ul><li>1. Enlace a otra página </li></ul><ul><li><A HREF = “mip...
Atributos de tag  <BODY> <ul><li>Color de fondo de Web :   </li></ul><ul><li><BODY  bgcolor = “aqua” > .......  </BODY> </...
Tablas <ul><li>Para insertar la Tabla:  <TABLE> y </TABLE> </li></ul><ul><li>Tabla esta compuesta por: </li></ul><ul><ul><...
Ejemplo <ul><li><TABLE > </li></ul><ul><li><TR> </li></ul><ul><li><TD>Fila1 Col1</TD> </li></ul><ul><li><TD>Fila1Col2</TD>...
Atributos de la directiva <TABLE> <ul><li>border = num   – ancho de borde de la tabla en puntos </li></ul><ul><li>cellspac...
Atributos de las directivas  <TD>y <TH> <ul><li>align = LEFT / CENTER / RIGHT / JUSTIFY   – alineaci ón  horizontal del co...
Cabecera del documento html <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><meta NAME=&quot;Creator&quot; CONTE...
<ul><li><body BACKGROUND=&quot;rt/fon.gif&quot; BGCOLOR=&quot;F7E7DE&quot; TEXT=&quot;#000000&quot; LINK=&quot;#6666bb&quo...
Mapas Para transformar una imagen en mapa sensible, hay que hacer 3 tareas:   <ul><li>1. Reconocer las coordenadas interns...
Mapas <ul><li>2.  Confección de “mapa” de direcciones. Definición de zonas. (Al principio del documento, luego de < body >...
Frames <ul><li>1. <FRAMESET> - indica como se divide ventana </li></ul><ul><li><FRAMESET cols = “120, *, 100”> - subventan...
Upcoming SlideShare
Loading in …5
×

HTML

5,870 views

Published on

Published in: Education
  • Be the first to comment

HTML

  1. 1. Diseño de una publicación digital Curso: Nuevos medios de comunicación Dra. Lyudmyla Yezers´ka
  2. 2. Lenguaje HTML <ul><li>HTML – Hyper Text Markup Lenguage – Lenguaje de Marcas para Hipertexto </li></ul><ul><li>Documento HTML – es un archivo de texto </li></ul><ul><li>Los interpretes HTML no toman en cuenta: </li></ul><ul><ul><li>Las tabulaciones </li></ul></ul><ul><ul><li>Los saltos de línea </li></ul></ul><ul><ul><li>Los espacios en blanco </li></ul></ul><ul><li>Los comandos (tags o marcas) se escriben en los símbolos < > </li></ul><ul><li>Símbolo & se usa para escribir caracteres especiales (símbolos matemáticos, comerciales, acentos...) </li></ul>
  3. 3. Lenguaje HTML <ul><li>Para empezar el diseño de un site: </li></ul><ul><ul><li>Tener una idea de lo que quieres hacer </li></ul></ul><ul><li>¿ Que necesitas ? </li></ul><ul><ul><li>Un editor de textos simple – Bloc de Notas – para escribir código HTML </li></ul></ul><ul><ul><li>Un navegador de Internet (Browser) para visualizar la Página Web. </li></ul></ul><ul><ul><ul><li>Firefox </li></ul></ul></ul><ul><ul><ul><li>Internet Explorer </li></ul></ul></ul><ul><ul><ul><li>Otr. </li></ul></ul></ul>
  4. 4. Estructura de un documento HTML <ul><li><HTML> </li></ul><ul><li>  <HEAD> </li></ul><ul><li><TITLE> Título </TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li>  <BODY> </li></ul><ul><li>Texto y gráficos </li></ul><ul><li>.................... </li></ul><ul><li><ADRESS> </li></ul><ul><li>Nombre autor, organización, Fecha, etc... </li></ul><ul><li></ADRESS> </li></ul><ul><li></BODY> </li></ul><ul><li>  </HTML> </li></ul>Cabecera Pie Cuerpo
  5. 5. Formato de los caracteres <ul><li>Formatos físicos: </li></ul><ul><ul><li>< B > ...< /B > Negrita </li></ul></ul><ul><ul><li>< I > ... < /I > Cursiva </li></ul></ul><ul><ul><li>< U > ... < /U > Subrayado </li></ul></ul><ul><ul><li>< S > ... < /S > Tachado </li></ul></ul><ul><ul><li>< SUB > ... < /SUB > Subíndice </li></ul></ul><ul><ul><li>< SUP > ... < /SUP > Superíndice </li></ul></ul><ul><ul><li>< TT > ... < /TT > Máquina escribir </li></ul></ul>
  6. 6. Formato de los caracteres <ul><li>Formatos lógicos: </li></ul><ul><ul><li>< CITE > ...< / CITE > texto con formato cita </li></ul></ul><ul><ul><li>< DFN > ... < /DFN > texto formato definición </li></ul></ul><ul><ul><li>< CODE > ... < /CODE > texto con formato código </li></ul></ul><ul><ul><li>< KBD > ... < /KBD > texto con formato teclado </li></ul></ul><ul><ul><li>< SAMP > ... < /SAMP > texto con formato ejemplo </li></ul></ul><ul><ul><li>< VAR > ... < /VAR > texto con formato variable </li></ul></ul><ul><ul><li>< STRONG > ... < /STRONG > texto con formato importante </li></ul></ul><ul><ul><li>< EM > ... < /EM > texto con formato énfasis </li></ul></ul><ul><ul><li>< ADDRESS > ... < /ADDRESS > texto con formato énfasis </li></ul></ul><ul><ul><li><PRE> … </PRE> texto preformateado </li></ul></ul>
  7. 7. Características de párrafo <ul><li>Etiquetas más frecuentes: </li></ul><ul><ul><li>< P > Salto de párrafo </li></ul></ul><ul><ul><li>< BR > Salto de línea </li></ul></ul><ul><ul><li>< HR > Línea de separación </li></ul></ul>
  8. 8. Comandos de encabezamiento <ul><li>Existen 7 niveles de encabezamientos: </li></ul><ul><ul><li>< H1 > Nivel de encabezamiento 1 < /H1 > Más grande </li></ul></ul><ul><ul><li>< H2 > Nivel de encabezamiento 2 < /H2 > </li></ul></ul><ul><ul><li>< H3 > Nivel de encabezamiento 3 < /H3 > </li></ul></ul><ul><ul><li>< H4 > Nivel de encabezamiento 4 < /H4 > </li></ul></ul><ul><ul><li>< H5 > Nivel de encabezamiento 5 < /H5 > </li></ul></ul><ul><ul><li>< H6 > Nivel de encabezamiento 6 < /H6 > </li></ul></ul><ul><ul><li>< H7 > Nivel de encabezamiento 7 < /H7 > Más pequeño </li></ul></ul>
  9. 9. Etiqueta <FONT> <ul><li>Size – atributo de tamaño de fuente </li></ul><ul><ul><li>Directo: <FONT size=4> El tamaño de letra es 4 </FONT> </li></ul></ul><ul><ul><li>Por incremento: Size= +n o size= -n </li></ul></ul><ul><ul><ul><li><FONT size=+2> Tamaño será 5 (3+2) </FONT> </li></ul></ul></ul><ul><ul><li>Tamaño base del documento (por defecto 3) </li></ul></ul><ul><ul><ul><li>............... </li></ul></ul></ul><ul><ul><ul><li><BODY> </li></ul></ul></ul><ul><ul><li><BASEFONT size=4> </li></ul></ul><ul><ul><li>........................................... </li></ul></ul><ul><ul><li></BASEFONT> </li></ul></ul><ul><ul><li></BODY> </li></ul></ul>
  10. 10. Etiqueta <FONT> <ul><li>Color – atributo de color de fuente </li></ul><ul><ul><li><FONT color = “blue”> Frase de color azul </FONT> </li></ul></ul><ul><ul><li><FONT color = “#0000FF”> Frase de color azul </FONT> </li></ul></ul><ul><li>Ejemplo: </li></ul><ul><li><FONT color = “red” size=5 > Frase de color rojo </FONT> </li></ul><ul><li>Códigos hexadecimales de colores básicos: </li></ul><ul><li>Blanco: # FFFFFF Azul: #0000FF </li></ul><ul><li>Negro: # 000000 Violeta: #9900DD </li></ul><ul><li>Amarillo: #FFFF00 Rosa: #FFDDFF </li></ul><ul><li>Rojo: #FF0000 Verde: #00FF00 </li></ul><ul><li>http://www.hypersolutions.org/pages/rgbhex.html - dirección de colores </li></ul><ul><li>http://www.lynda.com/ - recursos en general sobre diseño y color. </li></ul>
  11. 11. Etiqueta <FONT> <ul><li>Face – atributo de tipo de fuente </li></ul><ul><ul><li><FONT face = “Comic Sans MS, Arial, Helverica”> Tipos de fuente </FONT> </li></ul></ul><ul><li>Colores del documento en la etiqueta <BODY> </li></ul><ul><li><BODY BGCOLOR = “#FFFFFF” TEXT = “#FF0000” LINK = “#00AEFF” > </li></ul><ul><ul><ul><li>............... </li></ul></ul></ul><ul><ul><ul><li></BODY> </li></ul></ul></ul>
  12. 12. Alineación de texto <ul><li><P ALIGN = LEFT> ..... </P> </li></ul><ul><li><P ALIGN = RIGHT> ..... </P> </li></ul><ul><li><P ALIGN = CENTER> .... </P> </li></ul><ul><li><CENTER> ....... </CENTER> </li></ul><ul><li><pre> preformateado. Respeta espacios, saltos de línea y los retornos utilizados </li></ul><ul><li>Separadores horizontales </li></ul><ul><ul><li><HR WIDTH = 75%> - cabiar ancho </li></ul></ul><ul><ul><li><HR WIDTH = 50% ALIGN = LEFT> - alineación </li></ul></ul><ul><ul><li><HR SIZE = 20 > - espesor </li></ul></ul>
  13. 13. Listas Ordenadas <ul><li>< OL> </li></ul><ul><li><LI> Introducción </li></ul><ul><li><LI> Primer capítulo </li></ul><ul><li><LI Segundo capítulo </li></ul><ul><li></OL> </li></ul><ul><li>Resultado: </li></ul><ul><li>Introducción </li></ul><ul><li>Primer capítulo </li></ul><ul><li>Segundo capítulo </li></ul><ul><li>Atributos: </li></ul><ul><li><OL START= 4> - inicio de la lista del número distinto de 1 </li></ul><ul><li><OL TYPE = I > - numeración romana </li></ul><ul><li>Valores para TYPE: </li></ul><ul><li>I – numer. Romana mayúsculas </li></ul><ul><li>i – numer. Romana minúsculas </li></ul><ul><li>A – letras mayúsculas </li></ul><ul><li>a – letras minúsculas </li></ul>
  14. 14. <ul><li>Ejemplo: </li></ul><ul><ul><li>< OL Type = I > </li></ul></ul><ul><ul><li>< LI > Introducción </li></ul></ul><ul><ul><li>< LI > La Primera Página </li></ul></ul><ul><ul><li>< LI > Escribir texto </li></ul></ul><ul><ul><li>< /OL > </li></ul></ul>
  15. 15. Listas No-Ordenadas <ul><li><UL> </li></ul><ul><li><LI> Introducción </li></ul><ul><li><LI> Primer capítulo </li></ul><ul><li><LI> Segundo capítulo </li></ul><ul><li></UL> </li></ul><ul><li><UL Type = “square” </li></ul><ul><li><UL Type = “Circle” </li></ul><ul><li>Listas anidadas: </li></ul><ul><li><UL> </li></ul><ul><li><LI> Mamíferos </li></ul><ul><li><LI> Peces </li></ul><ul><li><UL> </li></ul><ul><li><LI> Sardina </li></ul><ul><li><LI> Bacalao </li></ul><ul><li></UL> </li></ul><ul><li><LI> Aves </li></ul><ul><li></UL> </li></ul>
  16. 16. Listas de Definición <ul><li>Ejemplo: </li></ul><ul><li><DL> </li></ul><ul><li><DT> Introducción </li></ul><ul><li><DD> Breve introducción al lenguaje </li></ul><ul><li><DT> La primera página </li></ul><ul><li><DD> Como hacer la primera página </li></ul><ul><li><DT> Escribir texto </li></ul><ul><li><DD> Empieza a dar formato al texto </li></ul><ul><li></DL> </li></ul><ul><li>Resultado: </li></ul><ul><li>Introducción </li></ul><ul><li>Breve introducción al lenguaje </li></ul><ul><li>La primera página </li></ul><ul><li> Como hacer la primera página </li></ul><ul><li>Escribir texto </li></ul><ul><li>Empieza a dar formato al texto </li></ul>
  17. 17. Enlaces <ul><li>Estructura general:<A HREF = “xxx” > yyy </A> </li></ul><ul><ul><li>xxx – destino, “target” – URL de otra página o ruta/nombre de la página </li></ul></ul><ul><ul><li>yyy – ancla “anchor” – (texto o objeto gráfico) </li></ul></ul><ul><li><A HREF= “otrapag.html”>Ir a otra página en mismo proyecto</A> </li></ul><ul><li><A HREF= “http://www.yahoo.html”>Ir al Yahoo</A> </li></ul><ul><li><A HREF= “#marca”>Ir a la marca</A> </li></ul><ul><li>............................... </li></ul><ul><li><A Name= “marca”> </A> </li></ul><ul><li><A HREF= “mailto: luyezer@udep.edu.pe”> Mi E-Mail </A> </li></ul><ul><li><A HREF= “manual.zip”> Pulsa aquí para llevar manual </A> </li></ul>
  18. 18. Imágenes <ul><li>Estructura general: </li></ul><ul><li>< IMG src = “imagen.gif” > - archovo de imagen esta en misma carpeta que la pág. Web. </li></ul><ul><li>< IMG src = “subdir / imagen.gif” > - archivo de imagen esta en otra carpeta respecto la pág. Web </li></ul><ul><li>< IMG src = “ .. / imagen.gif” > - la pág. Web esta en otra carpeta respecto al archivo de imagen </li></ul>
  19. 19. Atributos de Imágenes <ul><li>alt = “Texto” – mostrar texto de ayuda al poner mouse </li></ul><ul><li>align = TOP / MIDDLE / BOTTOM – alinea texto </li></ul><ul><li>border = tamaño – tamaño del borde </li></ul><ul><li>height = tamaño - alto de la imagen en puntos o % </li></ul><ul><li>width = tamaño – ancho de la imagen en puntos o % </li></ul><ul><li>hspace = margen – separa imagen del texto horisontalmente </li></ul><ul><li>vspace = margen - separa imagen del texto verticalmente </li></ul>
  20. 20. Ejemplos: <A HREF = “xxx.html” > yyy </A> destino ancla <ul><li>1. Enlace a otra página </li></ul><ul><li><A HREF = “mipag2.html”> <IMG SRC = “isla.gif”> </A> </li></ul><ul><li>2. Enlace imagen con otra imagen </li></ul><ul><li>< A HREF = “casa.jpg” > <IMG SRC = “casa.gif” > </A> </li></ul><ul><li>3. Texto para enlazar con una imagen </li></ul><ul><li>< A HREF = “isla.gif” > un paraíso tropical </A> </li></ul><ul><li>Recursos para Web: </li></ul><ul><li>http://www.areas.net/colorvivo/home.htm </li></ul>
  21. 21. Atributos de tag <BODY> <ul><li>Color de fondo de Web : </li></ul><ul><li><BODY bgcolor = “aqua” > ....... </BODY> </li></ul><ul><li>Imagen de fondo </li></ul><ul><li><BODY background = “image.gif” > ....... </BODY> </li></ul><ul><li>Color de texto </li></ul><ul><li><BODY bgcolor = “aqua” text = “orange” > ....... </BODY> </li></ul><ul><li>Color de enlaces </li></ul><ul><li>LINK = “color” – color de vinculo </li></ul><ul><li>VLINK = “color” – color de vínculos visitados </li></ul><ul><li>ALINK = “color” – color de vínculos activos </li></ul>
  22. 22. Tablas <ul><li>Para insertar la Tabla: <TABLE> y </TABLE> </li></ul><ul><li>Tabla esta compuesta por: </li></ul><ul><ul><li>Filas que se definan: <TR> y </TR> </li></ul></ul><ul><ul><li>Celdas que se definan: <TD> y </TD>-celda normal </li></ul></ul><ul><ul><li>Celdas: <TH> y </TH>- celda de cabecera </li></ul></ul><ul><li>Titular de tabla: </li></ul><ul><ul><li><CAPTION> Texto </CAPTION> </li></ul></ul>
  23. 23. Ejemplo <ul><li><TABLE > </li></ul><ul><li><TR> </li></ul><ul><li><TD>Fila1 Col1</TD> </li></ul><ul><li><TD>Fila1Col2</TD> </li></ul><ul><li></TR> </li></ul><ul><li><TR> </li></ul><ul><li><TD >Fila2 Col1</TD> </li></ul><ul><li><TD> Fila2 Col2</TD> </li></ul><ul><li></TR> </li></ul><ul><li></TABLE> </li></ul>Fila1 Col1 Fila1 Col2 Fila2 Col1 Fila2 Col2
  24. 24. Atributos de la directiva <TABLE> <ul><li>border = num – ancho de borde de la tabla en puntos </li></ul><ul><li>cellspacing = num – espacio en puntos que separa las celdas que estan dentro de la tabla </li></ul><ul><li>cellpadding = num – espacio en puntos que separa el borde de la celda y el contenido </li></ul><ul><li>width = num o % – anchura de la tabla </li></ul><ul><li>height = num o % – altura de la tabla </li></ul><ul><li>bgcolor = código de color – color de fondo de la tabla </li></ul>
  25. 25. Atributos de las directivas <TD>y <TH> <ul><li>align = LEFT / CENTER / RIGHT / JUSTIFY – alineaci ón horizontal del contenido de la celda </li></ul><ul><li>valign = TOP / MIDDLE / BOTTOM – alineaci ón vertical del contenido de la celda </li></ul><ul><li>rowspan = num – número de filas que ocupará la celda </li></ul><ul><li>colspan = num – número de columnas que ocupará la celda </li></ul><ul><li>width = num o % – anchura de la columna </li></ul><ul><li>height = num o % – altura de la columna </li></ul><ul><li>bgcolor = código de color – color de fondo de elemento de la tabla </li></ul>
  26. 26. Cabecera del documento html <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><meta NAME=&quot;Creator&quot; CONTENT=&quot;Lyudmyla Yezers´ka&quot;> </li></ul><ul><li><meta NAME=&quot;Subject&quot; CONTENT=&quot;Mi Página personal&quot;> </li></ul><ul><li><meta NAME=&quot;Reply-To&quot; CONTENT=&quot;luyezer@udep.edu.pe&quot;> </li></ul><ul><li><meta NAME=&quot;Publisher&quot; CONTENT=&quot;Facultad de Comunicacion. UDEP&quot;> </li></ul><ul><li><meta NAME=&quot;keywords&quot; CONTENT=&quot; palabras clave para el buscador &quot;> </li></ul><ul><li><title> Currículo de Lyudmyla Yezerska </title> </li></ul><ul><li></head> </li></ul>
  27. 27. <ul><li><body BACKGROUND=&quot;rt/fon.gif&quot; BGCOLOR=&quot;F7E7DE&quot; TEXT=&quot;#000000&quot; LINK=&quot;#6666bb&quot; ALINK=&quot;#0000ff&quot; VLINK=&quot;9955566&quot; FACE=&quot;Verdana, Arial, Helvetica&quot;> </li></ul><ul><li>……………………… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  28. 28. Mapas Para transformar una imagen en mapa sensible, hay que hacer 3 tareas: <ul><li>1. Reconocer las coordenadas interns de los sectores activos de la imágen </li></ul>0,0 x1, y1 radio x1, y1 x2, y2 x1, y1 x2, y2 x3, y3 x4, y4 menu.jpg
  29. 29. Mapas <ul><li>2. Confección de “mapa” de direcciones. Definición de zonas. (Al principio del documento, luego de < body > </li></ul><ul><li><MAP name = “mi_mapa”> </li></ul><ul><li><AREA shape = “rect” coords = “21, 101, 35, 138” href= “rectan.html” > </li></ul><ul><li><AREA shape = “circle” coords = “80, 76, 21” href= “circ.html” > </li></ul><ul><li><AREA shape = “poly” coords = “2, 62, 57, 62, 28, 1” href= “polig.html”> </li></ul><ul><li>< / MAP> </li></ul><ul><li>3. Insertar instrucción en la etiqueta de la imagen </li></ul><ul><li><IMG src = “ menu.jpg” USERMAP = “ # mi_mapa” > </li></ul>
  30. 30. Frames <ul><li>1. <FRAMESET> - indica como se divide ventana </li></ul><ul><li><FRAMESET cols = “120, *, 100”> - subventanas verticales </li></ul><ul><li><FRAMESET rows = “25%, 50%, 25%”> - subventanas horizontales </li></ul><ul><li>2. <FRAME> - indica propiedades de cada ventana </li></ul><ul><li>ej. <FRAME name=“nom” src=“mipag.html”> </li></ul><ul><li>name = “nombre” – indica nombre de la ventana </li></ul><ul><li>src = “mipag1.html” – ventana mostrara el contenido de esta página </li></ul><ul><li>scrolling = “yes /no / auto” – aparece o no barra de desplazamiento </li></ul><ul><li>border = num – indica borde que separa frames </li></ul>

×