Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Elementos HTMLCreación de páginas web básicas
Índice del curso
1.Introducción a Internet. Lenguaje HTML.
2.Elementos HTML.
3.Creación y gestión de imágenes con GIMP.
4.Hojas de estilo.
5.Creación de páginas con un editor WYSIGYG.
Elementos HTML
Elementos de texto
Estilos en línea
Enlaces
Imágenes
Listas
Tablas
Composición de páginas
HTML5
Elementos de texto
Encabezados
Los encabezados se definen con las etiquetas <h1> a <h6>
!"#$"#%&'()*+&!,"#$
!"-$"-%&'()*+&!,"-$
!".$".%&'()*+&!,".$
!"/$"/%&'()*+&!,"/$
!"0$"0%&'()*+&!,"0$
!"1$"1%&'()*+&!,"1$
Elementos de texto
Párrafos
Los párrafos se especifican con la etiqueta <p>
!*$2"34%34%*(5(65(*"%#!,*$
!*$2"34%34%*(5(65(*"%-!,*$
Elementos de texto
Línea horizontal
Podemos insertar una línea divisoria con la etiqueta <hr>
!*$2"34%34%*(5(65(*"%#!,*$
!"5$
!*$2"34%34%*(5(65(*"%-!,*$
Elementos de texto
Salto de línea
Podemos insertar un salto de línea dentro de un párrafo con la etiqueta <br>
!*$.-%7(44(5%895&&9!:5$
;():53<6&=%>?%@-#.A
!,*$
Elementos de texto
Comentarios HTML
Los comentarios no son mostrados por el navegador. Se insertan así:
<!-- Esto es un comentario -->
Formateo de texto
Podemos dar formato al texto con las siguientes etiquetas:
Etiqueta Descripción
<b> negrita
<big> texto grande
<i> cursiva
<small> texto pequeño
<strong> texto marcado
<sub> subíndice
<sup> superíndice
Ejercicio 1
Crea una página web de texto que utilice todos los elementos de texto vistos hasta el momento.
Súbela por FTP a tu directorio raíz y comprueba que es accesible por web.
Estilos HTML
Los atributos de estilo permiten dar formato a los elementos HTML.
Los estilos se definen dentro de la etiqueta de apertura del elemento con la siguiente sintaxis*:49B+&%C%D*5E*3&<(<F%G(+E5H
Se pueden definir varios estilos a la vez:49B+&%C%D*5E*3&<(<#F%G(+E5#I%*5E*3&<(<-F%
G(+E5-H
* esta sintaxis es la misma que la de las hojas de estilo (CSS)
Estilos HTML
Ejempos de estilo HTML:
Color de fondo:!:E<B%49B+&C%D:(JK65ELM<NJE+E5FB&++EOH$
Fuente, color y tamaño:!*%49B+&C%DPEM9NP()3+BFG&5<(M(I%JE+E5F5&<I%PEM9N
43Q&F-@*'H$
Alineación del texto:!"#%49B+&C%D9&'9N(+36MFJ&M9&5H$
(las opciones son: left, right, center, justify)
Estilos HTML
Más ejempos de estilo de texto:
Sangrado:!*%49B+&CD9&'9N3M<&M9F0@*'H$
Decoración:!*%49B+&CD9&'9N<&JE5(93EMFLM<&5+3M&H$
(las opciones son: overline, underline, blink, line-through, none)
Separación entre líneas:!"#%49B+&CD+3M&N"&36"9F#-@RH$
Estilos HTML
Más ejempos de estilo de fuente:
Estilo:!*%49B+&CDPEM9N49B+&F39(+3JH$
(las opciones son: normal, italic, oblique)
Anchura:!*%49B+&CDPEM9NO&36"9F:E+<H$
(las opciones son: normal, bold, bolder, lighter)
Familia:!*%49B+&CDPEM9NP()3+BF(53(+=S4(M4%4&53PTH$
Ejercicio 2
Modifica la página web creada en el ejercicio anterior para que incluya los siguientes estilos:
Define un color para el fondo de la página.
Define una fuente para los encabezados y otra para los párrafos de texto.
Aumenta el espacio entre líneas de los párrafos y su sangría.
Súbela por FTP a tu directorio raíz y comprueba que es accesible por web.
Enlaces y marcadores
La etiqueta !($ crea enlaces y marcadores.
Un enlace es una referencia (dirección URL) a un recurso en la red:
El atributo "5&P define la dirección de destino.
El atributo 9(56&9 define dónde se abrirá el archivo enlazado (opciones: _blank, _self, _parent, _top, framename).
Ejemplo:!(%"5&PCD"99*F,,&4UO3K3*&<3(UE56H%
9(56&9CDV:+(MKH$W3K3*&<3(!,($
Enlaces y marcadores
Un marcador define un destino de enlace dentro del mismo documento HTML.
El atributo M()& define el nombre y posición del marcador dentro del documento:!(%M()&CDLMEH$8&JJ3XM%#!,($
También podemos especificar un marcador en un elemento existente con el atributo 3<:
!"#%3<CDYLMEH$8&JJ3XM%#!,"#$
Enlaces y marcadores
El enlace al marcador se realiza de la siguiente manera:!(%"5&PCDYLMEH$Z5%(%+(%4&JJ3XM%#!,($
También podemos enlazar a un marcador dentro de otro documento:!(%"5&PCD"99*F,,&)(JULGU&4,O&:,
3M<&'U"9)+YLMEH$Z5%(%+(%4&JJ3XM%#%<&+%
[M<3J&!,($
Enlaces y marcadores
La dirección de destino de un enlace puede ser absoluta o relativa:
Absoluta: contiene la dirección de red completa del enlace (URL)
Relativa: contiene la dirección del recurso respecto a la ruta del documento actual
Enlaces y marcadores
Absoluta: contiene la dirección de red completa del enlace (URL):
!(%"5&PC\"99*F,,OOOU6EE6+&UJE),\$]E%9E%]EE6+&!,($
Enlaces y marcadores
Relativa: contiene la dirección del recurso respecto a la ruta del documento actual. Ejemplos:
Mismo directorio:
!(%"5&PC\:U"9)+\$^M+(J&%(%_%<&4<&%;!,($
Enlaces y marcadores
Relativa: contiene la dirección del recurso respecto a la ruta del documento actual. Ejemplos:
Directorio superior:
!(%"5&PC\UU,(U"9)+\$^M+(J&%(%?%<&4<&%;!,($
Enlaces y marcadores
Relativa: contiene la dirección del recurso respecto a la ruta del documento actual. Ejemplos:
Subdirectorio:
!(%"5&PC\```,JU"9)+\$^M+(J&%(%;%<&4<&%?!,($
Imágenes HTML
Las imágenes se definen con la etiqueta <img>, que solo tiene atributos pero no contenido.
La sintaxis es:
<img src=“url”>
Atributos de imagen: atributo descripción
width ancho de la imagen
height alto de la imagen
align alineado
alt texto alternativo
Ejercicio 3
Crea una página web con varias imágenes y enlázala con la página creada en el ejercicio anterior.
Alinea las imágenes en distintas posiciones respecto al texto, y crea enlaces en la propia imagen.
Ejemplo:"99*F,,&)(JULGU&4,O&:,&a&)*+E#U"9)+
Súbela por FTP a tu directorio raíz y comprueba que es accesible por web.
Tablas HTML
Se pueden definir tablas en HTML mediante la etiqueta <table>.
Una tabla está dividida en filas (mediante la etiqueta <tr>), y cada fila en celdas de datos (etiqueta <td>).
Se puede poner filas de encabezado con <th>.
Cada celda puede cualquier cualquier elemento HTML (incluso otra tabla).
Se pueden unir varias celdas en horizontal (atributo colspan) o en vertical (atributo rowspan).
Tablas HTML
Ejemplo básico:
!9(:+&%:E5<&5C\#\$
!95$
!9<$P3+(%#=%JE+L)M(%#!,9<$
!9<$P3+(%#=%JE+L)M(%-!,9<$
!,95$
!95$
!9<$P3+(%-=%JE+L)M(%#!,9<$
!9<$P3+(%-=%JE+L)M(%-!,9<$
!,95$
!,9(:+&$
Tablas HTML
!2?_b^%:E5<&5C\#\$
!2c$!2d%5EO4*(MC\-\$!,2d$
!2d%JE+4*(MC\-\$?G&5(6&!,2d$
!2d%5EO4*(MC\-\$c&<!_c$&B&4!,2d$!,2c$
!2c$!2d$"&36"9!,2d$
!2d$O&36"9!,2d$!,2c$
!2c$!2d$>(+&4!,2d$
!2e$#UA!,2e$!2e$@U@@.!,2e$!2e$/@R!,2e$!,2c$
!2c$!2d$f&)(+&4!,2d$
!2e$#Ug!,2e$!2e$@U@@-!,2e$!2e$/.R!,2e$!,2c$
!,2?_b^$
Tablas HTML
Más ejemplos en:
!""#$%%&'()*+,*&-%.&/%&0&'#123*!"'1
Atributos de tabla: atributo descripción
border borde de la tabla
bgcolor color del fondo
background imagen de fondo
cellpadding relleno de celda
cellspacing espacio entre celdas
Ejercicio 4
Crea una página web con una tabla como ésta:
valor día 1 día 2
a23
45
b23
12
c 11
d 62 63
esin datossin datos
fsin datossin datos
Listas HTML
Se pueden crear distintos tipos de listas en HTML:
ordenadas
desordenadas
de definición
Listas HTML
Las listas desordenadas se crean con el elemento <ul>:!L+$
!+3$;(Ph!,+3$
!+3$b&J"&!,+3$
!,L+$
Listas HTML
Las listas ordenadas se crean con el elemento <ol>:!E+$
!+3$;(Ph!,+3$
!+3$b&J"&!,+3$
!,E+$
Listas HTML
Las listas de definiciones están formadas por un grupo de pares de nombre (elemento 45"6) y valor (elemento 4556)
!<+$
!<9$;(Ph!,<9$
!<<$;(Ph%JEM%+&J"&!,<<$
!<<$;(*LJJ3ME!,<<$
!<9$b&J"&!,<9$
!<<$b&J"&%<&4M(9(<(!,<<$
!<<$b&J"&%&M9&5(!,<<$
!,<+$
Composición de páginas
Se pueden utilizar tablas HTML para componer páginas web con una estructura determinada.
El truco consiste en utilizar una tabla sin bordes y con un pequeño espaciado de celda ()&11#(55789), e insertar todo el contenido del documento dentro de las celdas.
Ejemplo:
!""#$%%&'()*+,*&-%.&/%&0&'#12:*!"'1
Ejercicio 5
Crea una página web, compuesta con tablas, que contenga:
Una sección de cabecera con un fondo de imagen.
Una sección central de texto con dos columnas de texto:
En la columna izquierda inserta una lista ordenada.
En la columna derecha combina texto con imágenes.
Un pie de página con un color de fondo distinto.
Marcos (frames)
Los marcos permiten mostrar varios documentos HTML en una única ventana del navegador web.
Su uso más extendido consiste en crear un menú lateral cuyo contenido es cargado en otro marco.
Ejemplo:!""#$%%&'()*+,*&-%.&/%&0&'#12:/*!"'1
Marcos (frames)
Sintaxis (documento contenedor):!"9)+$
!"&(<$
% !939+&$^a&)*+E%<&%)(5JE4!,939+&$
!,"&(<$
!P5()&4&9%JE+4C\.@R=i\$
!P5()&%M()&C\)&ML\%45JC\)&MLU"9)+\$
!P5()&%M()&C\JEM9&M9\%45JC\JEM9&M9U"9)+\$
!,P5()&4&9$
!,"9)+$
Marcos (frames)
Para que las páginas enlazadas se abran en un marco:
Especificamos el destino en el enlace:
!(%"5&PC\&a&)*+E-U"9)+\%9(56&9C\JEM9&M9\$%
^a&)*+E%-%!,($
O especificamos un destino base para todos los enlaces:
!:(4&%9(56&9C\JEM9&M9\$
Contenido embebido (iframe)
Otra manera de insertar un documento HTML dentro de otro documento es usar el elemento 47;<('&6:
4!"'16= 4!&(56= = 4'&"(=!""#>&?+7,@A)28"&8">"B#&A=)28"&8"@A"&C"%!"'1D=)!(<-&"@EFG>HA6= = 4"7"1&6I28"&8752=&'/&/7524%"7"1&6= 4%!&(56= 4/25B6= = 4!J6K0&'#12=5&=)28"&8752=&'/&/7524%!J6= = 47;<('&=-<)@A!""#$%%...*+,*&-A=.75"!@ALMM#CA=!&79!"@ANHM#CA64%7;<('&6= 4%/25B64%!"'16
Contenido embebido (iframe) HTML5
HTML5 es el nuevo estándar del lenguaje HTML (actualmente en borrador).
Diseñado para facilitar las aplicaciones web y la estandarización de la navegación.
HTML5 está soportado por los principales navegadores de escritorio y móviles.
HTML5
Principales novedades:
Nuevos elementos semánticos, como <header>, <footer> , <section> o <article>
Objeto canvas: posibilidad de dibujar en 2D mediante programación javascript
Objeto video: permite embeber video en las páginas web sin usar ningún plugin de terceros
Geolocalización del navegador
Almacenamiento local persistente
HTML5
Principales novedades (cont.):
Aplicaciones web offline
Mejoras en los formularios HTML
Microdata: posibilidad de extender los vocabularios HTML5 con semánticas propias
Recursos HTML5
Ejemplos:"99*F,,"9)+0O(9J"U9L):+5UJE),
"99*F,,"9)+0<&)E4UJE),
"99*F,,OOOU(**+&UJE),"9)+0,
"99*F,,49L<3EU"9)+05EJK4UJE),
Tutoriales y recursos:"99*F,,OOOU"9)+05EJK4UJE),
"99*F,,<3G&3M9E"9)+0UE56,