Índice del cursoemac.uv.es/web/presentaciones/sesion2print.pdf · * esta sintaxis es la misma que la de las hojas de estilo (CSS) Estilos HTML Ejempos de estilo HTML: Color de fondo:

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í:



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.


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(!,($


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%#!,"#$


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&!,($


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


Absoluta: contiene la dirección de red completa del enlace (URL):

!(%"5&PC\"99*F,,OOOU6EE6+&UJE),\$]E%9E%]EE6+&!,($


Relativa: contiene la dirección del recurso respecto a la ruta del documento actual. Ejemplos:

Mismo directorio:

!(%"5&PC\:U"9)+\$^M+(J&%(%_%<&4<&%;!,($



Directorio superior:

!(%"5&PC\UU,(U"9)+\$^M+(J&%(%?%<&4<&%;!,($



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)+


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,

Documents

Índice del cursoemac.uv.es/web/presentaciones/sesion2print.pdf · * esta sintaxis es la misma que la de las hojas de estilo (CSS) Estilos HTML Ejempos de estilo HTML: Color de fondo: