PDF de programación - Desarrollo de aplicaciones web - Capitulo 0. Repaso HTML

Imágen de pdf Desarrollo de aplicaciones web - Capitulo 0. Repaso HTML

Desarrollo de aplicaciones web - Capitulo 0. Repaso HTMLgráfica de visualizaciones

Publicado el 14 de Enero del 2017
524 visualizaciones desde el 14 de Enero del 2017
252,3 KB
19 paginas
ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA – ICAI

Departamento de Sistemas Informáticos

Desarrollo de Aplicaciones web
Capítulo 0. Repaso de HTML

Cristina Puente, Rafael Palacios

2010-2011

HTTP (repaso)

•  El protocolo HTTP (Hyper-Text Transfer Protocol)

es un protocolo encargado de transmitir
documentos a través de una conexión TCP/IP
•  Se diferencia de otros protocolos como FTP en

que es anónimo por definición

•  La capa externa de los servidores WEB es HTTP

http://www.google.com
http://www.iit.upcomillas.es/palacios/cursoweb/

protocolo

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

2

HTML

•  HTML (Hyper-Text markup Language) es un lenguaje de
descripción de páginas derivado de otro mayor y más
antiguo (SGML)

•  HTML no es más que una serie de instrucciones que

permiten especificar las características visuales de un
documento

•  Se diferencia de otros lenguajes de descripción de página

como PostScript o PDF en:
–  Tienes características hyper-texto (enlaces)
–  Se adapta a las preferencias del usuario (resolución, tamaño de

letra...). No pretende que el resultado sea idéntico.

Tipo de archivo

http://www.iit.upcomillas.es/palacios/cursoweb/upload.html

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

3

Secciones principales

Tipo de documento

Head

Body

Lo más importante de la sección Head es el título.
También puede contener palabras clave, idioma, estilos…

El Body contiene toda la información que se presenta al usuario

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

4

Etiquetas principales
•  Títulos de secciones:

– Título de la página (en head): <title>Mi página web</title>
– Heading 1: <h1>1 Introcucción</h1>
– Heading 2: <h2>1.2 Motivación</h2>

•  Resaltar texto:

– Negrita (bold): <b>negrita</b>
– Cursiva (italics): <i>cursiva</i>
– Anchura fija (Teletype): <tt>printf</tt>

•  Tamaño (ojo: siempre relativo):

– Pequeño: <small>pequeño</small>
– Grande: <big>grande</big>

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

5

Etiquetas principales

•  Enlaces externos ó Links:

– Enlace relativo:

Puede ver más información en la <a href=“doc/norma.pdf”>Norma</a>.
Puede ver más información en la Norma.

– Enlace absoluto:

El iPod está construido por <a href=“http://www.apple.com/”>Apple</a>.
El iPod está construido por Apple.

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

6

ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA – ICAI

Tablas

Tablas
– Las tablas son posiblemente la manera más clara de
organizar la información.
– También es el modo más adecuado de maquetar texto y
gráficos de una manera algo más controlada que con los
parámetros ALIGN.
– Para definir una tabla, primero se deben especificar las
características de la tabla, luego las de cada fila y dentro de
ésta, cada celda.
– De un modo simplificado, el código de una tabla de una fila
y dos columnas sería el siguiente:
<TABLE>

<TR>

<TD>Contenido de la 1ª celda</TD>
<TD>Contenido de la 2ª celda </TD>

</TR>

</TABLE>
Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

8

Tablas
Tablas!

–  Para mejorar el aspecto de la tabla, podemos añadir una serie
de atributos a la etiqueta <table> que nos van a permitir
modificar los siguientes parámetros:



border

Grosor del borde que se dibujará alrededor de las celdas

cellspacing

Define el número de pixels que separarán las celdas.

cellpadding

width

bgcolor

Especifica el número de pixels que habrá entre el borde de una
celda y su contenido.
Especifica la anchura de la tabla

Color de fondo

background

Imagen de fondo

bordercolor

Color del borde

align

Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro
(CENTER).

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

9

Tablas
Filas!

–  Cada fila se define con una etiqueta <TR>, que puede tener los
siguientes atributos:



align

valign

Alinea el contenido de las celdas de la fila horizontalmente a
izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
Alinea el contenido de las celdas de la fila verticalmente arriba
(TOP), abajo (BOTTOM) o centro (MIDDLE).

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

10

Tablas
Celdas!

–  Cada celda se define con una etiqueta <td> o <th>
–  Estas etiquetas son equivalentes, pero la última se utiliza para
encabezados, de modo que su interior se escribirá por defecto
en negrita y centrado.

align

valign

width

Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro
(CENTER).
Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).

Especifica la anchura de la celda, tanto en pixels como en porcentaje.

nowrap

Impide que, en el interior de la celda, se rompa la línea en un espacio.

colspam

Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta.

bgcolor

Color de fondo

background

Imagen de fondo

bordercolor

Color del borde

rowspam

Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

11

Tablas

Juntar Celdas!

–  Colspam

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">1º CUATRIM</
TH> </TR>
<TR> <TD>ALGEBRA</TD> <TD>1493</TD> </TR>
<TR> <TD>CALCULO</TD> <TD>3829</TD> </TR>
<TR> <TD>INFORMATICA</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">2º CUATRIM</
TH> </TR>
<TR> <TD>PSC</TD> <TD>4827</TD> </TR>
<TR> <TD>FISICA</TD> <TD>7246</TD> </TR>
<TR> <TD>QUIMICA</TD> <TD>5689</TD> </TR>
</TABLE>

1º CUATRIM

ALGEBRA
CALCULO
INFORMATICA

1493
3829
0283

2º CUATRIM

PSC
FISICA
QUIMICA

4827
7246
5689

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

12

Tables

Table cells!
–  Rowspan

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH ROWSPAN=2 BGCOLOR="#99CCFF">1º
CUATRIM</TH> </TR>
<TR> <TD>ALGEBRA</TD> <TD>1493</TD> </TR>
<TR> <TD>CALCULO</TD> <TD>3829</TD> </TR>
<TR> <TH ROWSPAN=2 BGCOLOR="#99CCFF">2º
CUATRIM</TH> </TR>
<TR> <TD>PSC</TD> <TD>4827</TD> </TR>
<TR> <TD>FISICA</TD> <TD>7246</TD> </TR>
</TABLE>

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

13

Tablas
Ejemplo!

<TABLE border="2" align="center" cellspacing="0"
bordercolor="#ff2233" bgcolor="#226677">
<CAPTION> Primera tabla!!
</CAPTION>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

14

Tamaño de la tabla
•  El tamaño de la tabla se puede expresar en varias

unidades
– Pixels (NO RECOMENDADO). Ejemplo: width="125px"
– Relativo a la ventana. Ejemplo width="100%"

•  Normalmente basta con definir el tamaño global de la

tabla, dejando que las celdas se ajusten
automáticamente:

<table width="100%">
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
</table>

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

15

ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA – ICAI

Publicar en Internet

Publico ó Privado

•  Un documento HTML puede ser privado (reside en

un ordenador personal) o público (reside en un
servidor conectado a Internet).

•  Ejemplo de documento privado: Manuales que

vienen en un CD-ROM.
– file:///D:/Docs/manual.html

•  Ejemplo de documento público: Cualquier página

web, accesible mediante un URI
– http://www.iit.upcomillas.es/pdf/MemoIITIng0506.pdf

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Desarrollo de Aplicaciones Web
Capítulo 0. Repaso de HTML

17

Publicar un documento

•  Para publicar un documento hay que subirlo a un

servidor Web.

–  Ejemplo: Yahoo ofrece espacio web al crear una cuenta yahoo.com
http://es.geocities.yahoo.com/
–  Another possibility is to use Comillas' web server. Files can be uploaded

through SIFO, then become accessible at:
http://www.upcomillas.es/zonaalumnos/2008xxxxx/

•  Hay que subir la página y todos los directorios/

archivos a los que hace refe
  • Links de descarga
http://lwp-l.com/pdf481

Comentarios de: Desarrollo de aplicaciones web - Capitulo 0. Repaso HTML (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad