HTML

2,088 views
2,009 views

Published on

HTML básico

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,088
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
189
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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>

×