REPÚBLICA BOLIVARIANA DE VENEZUELA
MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN
UNIVERSITARIA
UNIVERSIDAD POLITÉCNICA TERRITORIAL DEL ESTADO ARAGUA
“FEDERICO BRITO FIGUEROA”
Maracay – Estado Aragua
ELECTIVA PRACTICA
SOFTWARE PARA DISEÑAR PAGINAS EN HTML
INTEGRANTE(S):
TSU. SAMY FAZA CI. 14.882.086
MARACAY, 11/11/2013.
HTML
Para comenzar, se verá que el HTML es un lenguaje que se basa en SGML
(estándar internacional para la definición de métodos de representación de
texto en forma electrónica no ligados a ningún sistema ni a ningún dispositivo),
lo que quiere decir que todo irá encerrado entre dos etiquetas, normalmente,
una que indica el comienzo de algún elemento del documento y otra que indica
el final del mismo. Estas son de la forma:
<ETIQUETA parámetros> </ETIQUETA>
Cada una va entre los signos de “menor que” (<) y “mayor que” (>). Como
podemos ver, para cerrar el elemento irá una “barra” (/) después de la
indicación de comienzo de una etiqueta. Al principio y final del texto tenemos la
etiqueta HTML, que indica que estamos ante una página Web programada en
HTML.
<HTML> Indica el comienzo de un documento en formato HTML.
</HTML> Indica el final del documento.
Estas dos etiquetas siempre aparecerán en los ficheros programados en
HTML para indicarle al navegador que lo que está interpretando es lenguaje
HTML.
Cuando empezamos el curso de Html (te recomiendo hacerlo antes que
éste) comentamos que lo usariamos para insertar elementos en la web sin
más, sin preocuparnos por el lugar de la página en la que deberían aparecer, el
tamaño de su texto, colores, bordes, anchuras, imágenes de fondo y tal y cuál.
Con Html solo hemos de preocuparnos del contenido en sí, pero no lo
usaremos nunca para dar forma a la web.
Los Estilos CSS en cambio están creados solo para eso, para dar forma y
colorido al contenido insertado por el Html. Los Estilos CSS nos permiten otras
cosillas muy muy interesantes, a saber:
● Ayudan a tener los códigos Html más limpios y por tanto nos será más
sencillo encontrar fallos o hacer modificaciones, pues veremos
claramente dónde estamos.
● Nos ahorran mucho tiempo a la hora de crear páginas al no tener que
preocuparnos del aspecto mientras que escribimos el contenido en Html,
y no tendremos que preocuparnos del contenido mientras trabajemos
con el CSS. Ambos irán separados en distintos archivos casi siempre.
● Las páginas pesarán menos (ocuparán menos Kbytes) por lo que la
carga general de la web será algo más rápida.
● Permiten que las páginas se vean más o menos igual en cualquier
Navegador.
● Podemos introducir algunos efectos determinados fácilmente sin tener
que recurrir a códigos demasiado raros para los que empezamos en
esto.
● Estaremos a la "última" en diseño de Webs.
● -Podemos hacer modificaciones en el aspecto de toda la web con solo
unos ligeros cambios de un solo documento.
● -El código resultante de la web, lo que leen los robots de los buscadores,
resulta muy ligero y sencillito de leer por ellos, por lo que le ponemos
más fácil el trabajo y en definitiva aumenta las posibilidades de aparecer
en mejores puestos en Google y otros buscadores.
Historia del HTML
En 1989 existían dos técnicas que permitían vincular documentos
electrónicos, por un lado los hipervínculos (enlaces) y por otro lado un
poderoso lenguaje de etiquetas denominado SGML. Por entonces, Tim
Berners-Lee, quien trabajaba en el Centro Europeo de Investigaciones
Nucleares CERN da a conocer a la prensa que estaba trabajando en un
sistema que permitirá acceder a ficheros en línea que funcionaba sobre redes
de computadoras o máquinas electrónicas basadas en el protocolo TCP/IP.
Inicialmente fue desarrollado para que se pueda compartir fácilmente
información entre científicos de distintas universidades e institutos de
investigación de todo el mundo.
A principios de 1990, Tim Berners-Lee define por fin el HTML como un
subconjunto del conocido SGML y crea algo más valioso aún, el World Wide
Web. En 1991, Tim Berners-Lee crea el primer navegador web, ViolaWWW,
que funcionaría en modo texto y sobre un sistema operativo UNIX.
Los trabajos para crear un sucesor del HTML, denominado HTML +,
comenzaron a finales de 1993. HTML+ se diseñó originalmente para ser un
superconjunto del HTML que permitiera evolucionar gradualmente desde el
formato HTML anterior. A la primera especificación formal de HTML+ se le dio,
por lo tanto, el número de versión 2 para distinguirla de las propuestas no
oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se
convirtió en un estándar, a pesar de ser la base formalmente más parecida al
aspecto compositivo de las especificaciones actuales.
En 1997, HTML 4.0 se publicó como una recomendación del W3C. HTML
4.0 adoptó muchos elementos específicos desarrollados inicialmente para un
navegador web concreto, pero al mismo tiempo comenzó a limpiar el HTML
señalando algunos de ellos como «desaprobados» o deprecated en inglés.
HTML 4.0 implementa características como XForms 1.0 que no necesitan
implementar motores de navegación que eran incompatibles con algunas
páginas web HTML. En 2004 laW3C reabrió el debate de la evolución del
HTML, y se dieron a conocer las bases para la versión HTML5. No obstante,
este trabajo fue rechazado por los miembros del W3C y se daría preferencia al
desarrollo del XML. Apple, Mozilla y Opera anunciaron su interés en seguir
trabajando en el proyecto bajo el nombre de WHATWG,16 que se basa en la
compatibilidad con tecnologías anteriores.
En 2006, el W3C se interesó en el desarrollo de HTML5, y en 2007 se unió
al grupo de trabajo del WHATWG para unificar el proyecto.
Códigos HTML básicos
<html>: define el inicio del documento HTML, le indica al navegador que lo
que viene a continuación debe ser interpretado como código HTML. Esto es
así de facto, ya que en teoría lo que define el tipo de documento es
elDOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raíz.
<script>: incrusta un script en una web, o llama a uno mediante src="url del
script". Se recomienda incluir el tipo MIME en el atributo type, en el caso
de JavaScript text/javascript.
<head>: define la cabecera del documento HTML; esta cabecera suele
contener información sobre el documento que no se muestra directamente
al usuario como, por ejemplo, el título de la ventana del navegador. Dentro
de la cabecera<head> es posible encontrar:
<title>: define el título de la página. Por lo general, el título aparece en la
barra de título encima de la ventana.
<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link
rel="stylesheet" href="/[Link]" type="text/css">.
<style>: para colocar el estilo interno de la página; ya sea usando CSS u
otros lenguajes similares. No es necesario colocarlo si se va a vincular a
un archivo externo usando la etiqueta <link>.
<meta>: para metadatos como la autoría o la licencia, incluso para
indicar parámetros http (mediante http-equiv="") cuando no se pueden
modificar por no estar disponible la configuración o por dificultades con
server-side scripting.
<body>: define el contenido principal o cuerpo del documento. Esta es la
parte del documento html que se muestra en el navegador; dentro de esta
etiqueta pueden definirse propiedades comunes a toda la página,
como color de fondo y márgenes. Dentro del cuerpo <body> es posible
encontrar numerosas etiquetas. A continuación se indican algunas a modo
de ejemplo:
<h1> a <h6>: encabezados o títulos del documento con diferente
relevancia.
<table>: define una tabla.
<tr>: fila de una tabla.
<td>: celda de una tabla (debe estar dentro de una fila).
<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse
el parámetro de pasada por medio del atributo href. Por
ejemplo:<a href="[Link] title="Ejemplo"
target="_blank" tabindex="1">Ejemplo</a> se representa
como Ejemplo).
<div>: división de la página. Se recomienda, junto con css, en vez
de <table> cuando se desea alinear contenido.
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se
encuentra la imagen. Por ejemplo: <img src="./imágenes/[Link]" />.
Es conveniente, por accesibilidad, poner un atributo alt="texto
alternativo".
<li><ol><ul>: etiquetas para listas.
<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la
etiqueta <strong>).
<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la
etiqueta <em>).
<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la
etiqueta <del>).
<u>: Antes texto subrayado. A partir de HTML 5 define porciones de
texto diferenciadas o destacadas del resto, para indicar correcciones por
ejemplo. (etiqueta desaprobada en HTML 4.01 y redefinida en HTML
5)13 14
La mayoría de etiquetas deben cerrarse como se abren, pero con una barra
(«/») tal como se muestra en los siguientes ejemplos:
<table><tr><td>Contenido de una celda</td></tr></table>.
<script>Código de un script integrado en la página</script>.
<ETIQUETA parámetros> </ETIQUETA>
Cada una va entre los signos de “menor que” (<) y “mayor que” (>). Como
podemos ver, para cerrar el elemento irá una “barra” (/) después de la
indicación de comienzo de una etiqueta. Al principio y final del texto tenemos la
etiqueta HTML, que indica que estamos ante una página Web programada en
HTML.
<HTML> Indica el comienzo de un documento en formato HTML.
</HTML> Indica el final del documento.
Estas dos etiquetas siempre aparecerán en los ficheros programados en
HTML para indicarle al navegador que lo que está interpretando es lenguaje
HTML.
El interior de un documento
Como se ha comentado en el apartado anterior, toda página en HTML
tendrá al principio la etiqueta <HTML> y al final </HTML>. El interior del
documento se compone de una cabecera (head) y un cuerpo (body). En la
cabecera se pondrá la información relativa a la página y en el cuerpo, el
contenido de ésta. Al igual que sucede con el conjunto de la página en HTML,
cada una de estas partes tiene su etiqueta de comienzo y fin (ver el ejemplo).
Dentro de la cabecera se puede poner el título de la página de la siguiente
forma:
<TITLE> Título de nuestra página Web </TITLE>
Más adelante, cuando se tengan los conocimientos básicos, se comentarán
algunas cosas más que se pueden hacer con las cabeceras.
En el cuerpo irá la información que se verá en la pantalla del navegador y por lo
tanto, la mayoría de las etiquetas que veremos en el resto del seminario.
Internet.
Ejemplo de una página Web básica:
<HTML>
<HEAD>
<TITLE> Título de mi página</TITLE>
</HEAD>
<BODY>
Esta podría ser mi primera página Web, creada en lenguaje HTML.
</BODY>
</HTML>
Listado de etiquetas para utilizar como referencia en HTML
Etiquetas básicas
<html></html> Crea un documento HTML.
<head></head> Muestra el título y otro tipo de información que no se muestra
en la propia página
Web.
<body></body> Muestra la parte visible del documento.
Etiquetas del encabezado
<title></title> Sitúa el nombre del documento en la barra de título.
Atributos del cuerpo del texto
<body bgcolor=”?”> Determina el color del fondo, utilizando un nombre o un
valor hexadecimal.
Por ejemplo:
<body bgcolor=”#FFFF99”>
<body text=”color”> Determina el color del texto, mediante un nombre o un
valor hexadecimal.
<body link=”color”> Determina el color de los enlaces, mediante un nombre o
un valor hexadecimal.
<body vlink=”color”> Determina el color de los enlaces visitados, mediante un
nombre o un código hexadecimal.
<body alink=”color”> Determina el color de los enlaces activos.
Etiquetas de texto
<FONT></FONT>
Los atributos básicos de la etiqueta FONT son tres:
- SIZE: determina el tamaño de la fuente, de 1 a 7.
- FACE: indica la fuente que se desea utilizar. Puede escoger cualquier tipo de
fuente que desee que aparezca en su página.
- COLOR: determina el color de la fuente, mediante un nombre o un código
hexadecimal.
Por ejemplo:
<font size= “2” face= “Arial, Helvetica, sans-serif” color=“#663399”>
<b></b> Crea un texto en negrita.
<i></i> Crea un texto en cursiva.
<h1></h1> Crea encabezados. Hay seis niveles de encabezados, de H1 (el
más grande) a H6 (el más pequeño).
Enlaces
<a href="URL"></a> Crea un hipervínculo.
Por ejemplo:
<ahref=[Link]
<a href="[Link] Crea un enlace mailto.
Por ejemplo:
<A HREF="[Link] un mensaje</A>
Enlaces específicos
<a href="#NAME"></a> Enlaza con el destino deseado desde cualquier otro
punto del documento.
<a name="NAME"></a> Crea un punto de destino dentro de un mismo
documento.
Por ejemplo:
<a href= “#norte”>Desde el norte</a>
<I><a name=”norte”></a>Desde el norte:</I>
<a href="[Link]#NAME"></a> Enlaza con el punto de destino desde
un punto cualquiera de un documento distinto.
<a name="NAME"></a> Crea un punto de destino dentro de un mismo
documento.
Por ejemplo:
<a href="[Link]#scholarships" >BECAS</a>
<font color="#FF0000"><a name="scholarships"></a> Becas</font>
Formato
<p></p> Crea un nuevo párrafo.
Existen distintas posibilidades para alinear el texto en un párrafo:
- JUSTIFY (justificado)
- LEFT ( a la derecha)
- RIGHT (a la izquierda)
- CENTER (centrado)
Por ejemplo:
<p align=”justify”>…</p>
<br> Inserta un salto de línea. No hace falta cerrar la etiqueta.
<BLOCKQUOTE> </BLOCKQUOTE> Indenta el texto por ambos lados,
siguiendo la norma habitual para la escritura de citas.
Listas
<ol></ol> Crea una lista numerada (ordenada).
<ul></ul> Crea una lista con símbolos (simple o no ordenada).
<li></li> Precede a cada elemento de la lista y añade un número.
Por ejemplo:
Lista numerada
<OL>
<LI>Elemento1 </li>
<LI>Elemento2 </li>
<LI>Elemento3 </li>
</OL>
Lista con símbolos
<UL>
<LI>Elemento1 </li>
<LI>Elemento2 </li>
<LI>Elemento3 </li>
</UL>
<dl></dl> Crea una lista de definiciones.
<dt> Precede a cada elemento de la definición.
<dd> Precede a cada definición.
Por ejemplo:
Lista de definiciones
<DL>
<DT> LEÓN <DD> Gran mamífero carnívoro de la familia de los Félidos, de
pelaje entre amarillo y rojo. Tiene la cabeza grande, los dientes y las uñas muy
fuertes y la cola larga y terminada en un fleco de cerdas. El macho se
distingue por una larga melena. <DT> LEOPARDO <DD> Mamífero carnicero
de metro y medio de largo desde el hocico hasta el arranque de la cola, y de
unos siete decímetros de alto. El aspecto general es el de un gato grande, de
pelaje blanco en el pecho y el vientre, y rojizo con manchas negras, redondas y
regularmente distribuidas en todo el resto del cuerpo. Vive en los bosques de
Asia y África, y a pesar de su magnitud trepa con facilidad a los árboles en
persecución de los monos y de otros animales.
<DT> GALLINA <DD>Hembra del gallo, de menor tamaño que este, cresta
pequeña o rudimentaria, cola sin cobijas prolongadas y tarsos sin espolones.
<DD> Persona cobarde, pusilánime y tímida.
</DL>
Elementos gráficos
<img src="[Link]"> Inserta una imagen.
Atributos de la imagen:
- WIDTH (ancho)
- HEIGHT (alto)
- ALT (texto alternativo)
La alineación de la imagen puede producirse de las siguientes maneras:
- LEFT (izquierda)
- RIGHT (derecha)
- CENTER (centro)
- BOTTOM (inferior)
- TOP (superior)
- MIDDLE (media)
Por ejemplo:
<img src="images/[Link]" width="158" height="36" align="top” alt=
"En esta imagen se muestra un ganso”>
<img src="name" border=”?”> Determina el tamaño del borde alrededor de una
imagen.
Por ejemplo:
<img src="images/language%20rollovers/[Link]" width="81"
height="69" border="0">
<hr> Inserta una barra horizontal
La etiqueta tiene dos atributos básicos:
- SIZE: determina el tamaño (alto) de la barra.
- WIDTH: determina el ancho de la barra, a modo de porcentaje de un valor
absoluto.
Por ejemplo:
<HR SIZE="5" WIDTH="75">
<HR SIZE="2" WIDTH="25%">
<hr noshade> Crea una barra sin sombreado.
Tablas
<table></table> Crea una tabla.
<tr></tr> Determina las filas de una tabla.
<td></td> Determina las celdas de una fila.
<th></th> Determina el encabezado de una tabla (una celda normal con texto
centrado y en negrita).
Atributos de la tabla:
- BORDER: determina la anchura del borde alrededor de las celdas de una
tabla.
- CELLSPACING: determina la cantidad de espacio entre las celdas.
- CELLPADDING: determina la cantidad de espacio entre el borde de una celda
y los contenidos
de la misma.
- WIDTH: determina el ancho de una tabla (en píxeles o como porcentaje del
ancho del texto).
Por ejemplo:
<table width="85%" border="1">
Atributos de celda:
- ALIGN : determina el tipo de alineación para la(s) celda(s) (izquierda,
centrada o derecha).
- VALIGN: determina la alineación vertical para la(s) celda(s) (superior,
centrada, inferior).
Por ejemplo:
<tr align=”center” valign=”top”>
Atributos de columna:
- COLSPAN: determina el número de columnas que se extenderá una celda.
- ROWSPAN: determina el número de filas que se extenderá una celda (valor
por defecto=1)
- NOWRAP: evita que las líneas de una celda se rompan en su proceso de
ajuste.
Por ejemplo:
<td colspan=”2”>
<td rowspan=”2”>
<td nowrap>
Ejemplo de una tabla completa:
<TABLE BORDER="5" CELLSPACING="10" CELLPADDING="15"
WIDTH="75%"
ALIGN="CENTER">
<TR ALIGN="RIGHT">
<TD COLSPAN="2">1</TD>
<TD>2</TD>
</TR>
<TR ALIGN="CENTER">
<TD ROWSPAN="2">4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
<TR ALIGN="LEFT">