Iniciandome en HTML

DvNe · #1 (**permalink**) 12/03/2013, 05:05

Buenas, estoy realizando un trabajo para la universidad, una pagina web. Pero no tengo mucha idea de los lenguajes de programación que se utilizan.

La pagina web es una serie de pasos, practicas en este caso que se irán realizando una tras otra, para poder avanzar de practica a practica he de estar seguro de que todo lo que llevo hecho esta correcto y se ajusta con lo pedido en el guión, he aquí mi preocupación pues como no soy un experto en estos lenguajes no se si en un futuro algún pequeño fallo me volverá loco.

Tengo que decir que la pagina web debe de cumplir los estándares de www.w3c.org así que no se pueden usar programas que te creen el código sino que hay que escribirlo para que no entre información necesaria.

La primera practica, PRACTICA 1 es HTML 4.01. Bien ahora describo el diseño:

titulo: Contendrá por un lado un logo de acceso directo a la página de la UCA, y por otro el título de la página y la zona exclusiva desde la cual se podrá acceder al ingreso de datos privados para permitir el acceso a los contenidos y recursos del sitio.
menu_principal: Contendrá el menú principal para poder acceder a los diferentes contenidos de las tecnologías tratadas en la asignatura así como los recursos a disposición de los alumnos.
principal: En este marco aparecerán todos los contenidos y recursos de la asignatura.

El alumno deberá preocuparse por diseñar la estructura informativa correspondiente y
posteriormente tendrá tiempo de aplicar formatos a dichas estructuras. El aspecto inicial podrá parecerse al de la figura 1.

[URL=http://imageshack.us/photo/my-images/825/figura1g.png/][img]http://img825.imageshack.us/img825/4125/figura1g.png[/img][/URL]

Marco título
Tendrá una altura de 141 píxeles, margenes de 0 píxeles, en el se cargara el f ichero titulo.html que contendrá el título principal formado por un logotipo representativo del organismo al que pertenece la asignatura, la UCA, y por una imagen compuesta por el color de fondo, la marca de agua (trozo de código PHP), el título, y la imagen derecha (dedo y tecla). Más adelante se profundizará en las características del fichero titulo.html.

Marco menu
Este marco tendrá una altura de 60 píxeles, márgenes de 0 píxeles y contendrá el menú de opciones: HTML, CSS, T.Cliente, T.Servidor, XML, Recursos. Este menú de opciones se corresponderá con el fichero menu.html. La imagen del menú de opciones debería aparecer única y exclusivamente cuando el alumno haya sido validado por el sistema. De ahí que aparezca en la parte superior derecha el nombre del usuario que ha iniciado la sesión y en la izquierda la opción para cerrarla.

Marco principal
Este marco ocupará la altura restante, y albergará inicialmente el fichero principal.html que presentará un mensaje indicativo de la privacidad del sitio. Este marco será el único que podrá emplear scrolling vertical.

-----------------------------------------------------------------------------------

Estructura de ficheros y directorios. (OBLIGATORIO RESPETAR)

Directorios
- estilos: contendra las hojas de estilo.
- imagenes: guardara todas las imagenes del sitio web.
- html: almacenara todos los ficheros html utilizados excepto el principal.
- scripts: almacenara los scripts JavaScript.
- include: almacenara los ficheros PHP con datos a incluir dentro del codigo HTML.
- recursos: almacenara ficheros relativos a XML, DTD, XSLT. Asi como
  ficheros pdf referentes a los recursos disponibles para el alumnado.

Ficheros html
- index.html: Se corresponde con la página principal (estructura de marcos).
- titulo.html: Se mostrará en el marco titulo. fichero en el que aparecerá una imagen con el fondo, título y acceso privado (titulo.png) que será visualizada posteriormente mediante CSS. Contendrá también el logo de la UCA pero esta vez utilizando HTML (logoUCA.png dimensiones 62x80). El logo servirá como enlace a la página principal de la UCA en una nueva ventana.
- menu.html: fichero que contendrá el menú principal de opciones y se cargará en el marco menu. El aspecto de cada una de las opciones de menú se conseguirá mediante CSS a través de la imagen ficha.png para el aspecto por defecto de cada ficha. Cada ficha tendrá un enlace a cada página de contenido correspondiente. En principio sólo existirá la página relacionada con los contenidos de la tecnología HTML denominada tecnHTML.html. El resto de enlaces se realizarán a una página EnConstruccion.html. Por último, el enlace a los recursos se realizará a la página recursos.html en la que aparecerá una lista de hiperenlaces a los distintos recursos de la asignatura aunque posteriormenteel aspecto y contenido de esta página podrá cambiar cuando se estudie XML y XSLT.
- principal.html: Fichero con el mensaje inicial que será cargado por defecto en el marco principal
- tecnHTML.html: Fichero con los contenidos de la tecnología HTML. Se puede observar en las figuras siguientes el aspecto final una vez aplicados los estilos correspondientes. El contenido dispondrá de un índice (del cual sólo aparecen 3) que servirá como enlace interno a los distintos contenidos HTML. Cada bloque de contenido HTML estará formado por un título de contenido junto con un enlace al principio del documento (mediante un icono en forma de flecha). A continuación aparecerá la información correspondiente a ese elemento de contenido. La idea es la de agrupar los diferentes bloques en clases a los que aplicar un estilo determinado de tal forma que todos los bloques de contenidos tengan una homogeneidad en cuanto a formato.
- en_construccion.html: Fichero que se va a emplear para evitar enlaces rotos de talforma que cualquier enlace a contenidos no creados todavía debería asociarse a este fichero. Este fichero se cargará en el marco principal si se accede desde los enlaces CSS, T.Cliente, T.Servidor y XML.
- acceso.html: Fichero que contendrá el formulario de introducción de datos a autenticar contra la BBDD. Este fichero se cargará en el marco principal cuando se haga click en la zona interactiva.

Ficheros de imagenes
- titulo.png: Imagen que será cargada en el elemento correspondiente mediante CSS (Ver enunciado 2a parte de esta práctica - CSS) y que proporcionará un fondo al bloque de titulo que aparecerá en el fichero titulo.html en el marco superior.
- logoUCA.png: fichero que servirá como imagen por defecto para acceder a la página principal de la UCA.
- logoUCAConstraste.png: Imagen exactamente igual que la anterior pero con la diferencia de tener incrementado el constraste. Será visualizada únicamente cuando se pase el puntero por encima del elemento imagen correspondiente.
- fondo_titulo.png: Imagen que se empleará para suministrar un fondo degradado al cuerpo del fichero titulo.html. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a parte de esta práctica - CSS)
- fondo_menu.png: Imagen con el cometido de continuar de forma vertical el degradado de fondo del fichero titulo.html pero esta vez aplicado al cuerpo del fichero menu.html. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a partede esta práctica - CSS)
- dedo.png: Imagen con alto contraste que servirá de fondo del bloque que será visualizado cuando se pase el puntero de ratón por encima de su bloque contenedor. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a parte de esta práctica - CSS)
- ficha.png: Imagen que representará la forma y color por defecto de cada una de las fichas del menú de opciones. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a parte de esta práctica - CSS)
- ficha_activa.png: Imagen exactamente igual que la anterior pero modificada en cuanto a color para representar la ficha activa en cada momento.
- menu.png: Imagen que se utilizará como fondo del bloque que contendrá todos los elementos del menú. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a parte de esta práctica - CSS)
- menu_linea.png: Imagen que tendrá únicamente la función de servir de fondo del bloque separarador entre el menú y el bloque de contenidos que estará situado en el marco inferior. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a parte de esta práctica - CSS)
- principal.png: Imagen que proporcionará un fondo a todos los bloques en los que aparecerán contenidos dentro del marco inferior. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a parte de esta práctica - CSS)
- principal_pie.png: Imagen que dotará de una mayor vistosidad a todas las páginas de contenidos debido que será cargada en un elemento de bloque final que aparecerá justo a continuación del elemento de bloque donde se cargará la imagen anterior. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a parte de esta práctica - CSS)
- inicio_pagina.png: Imagen que se cargará como fondo del elemento que aparecerá justo a la izquierda de cada nuevo bloque de contenidos dentro de los ficheros que tratan las diferentes tecnologías existentes. Este bloque servirá como hiperenlace interno para volver al inicio de la página. Esta imagen será cargada en el elemento correspondiente mediante CSS. (Ver enunciado 2a parte de esta práctica - CSS)
- en_construccion.png: Imagen que se cargará directamente en HTML dentro del elemento de imagen añadido en el fichero enconstruccion.html.

DvNe · #2 (**permalink**) 12/03/2013, 05:06

Bien, dicho esto, pongo ahora el código HTML que he hecho a ver si alguien podría decirme si ve fallos y como solventarlos o guiarme.
NO ESTOY PIDIENDO QUE SE ME REALICE EL TRABAJO SINO QUE SE ME GUIE
HE AQUI LOS FRAGMENTOS DE CODIGO:

INDEX.HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0 Frameset//EN"
 "http://www.w3.org/TR/REC-html40/framset.dtd">
<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE>Programacion en Internet</TITLE>
	</HEAD>
	<FRAMESET ROWS = "141,60,*" BORDER = "0" NORESIZE>
		<FRAME name "titulo" SRC = "./html/titulo.html" SCROLLING = "no">
		<FRAME name "menu" SRC = "./html/menu.html" SCROLLING = "no">
		<FRAME name "principal" SRC = "./html/principal.html" SCROLLING = "auto">
	</FRAMESET>
	<NOFRAMES>
		<DIV>Su navegador no dispone de marcos.</DIV>
	</NOFRAMES>
</HTML>

TITULO.HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!--<link rel="stylesheet" href="../estilos/titulo.css" >-->

<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE>TITULO</TITLE>
		<link rel="stylesheet" type="text/css" href="../estilos/titulo.css" media="screen" />
	</HEAD>
	<BODY>
		<DIV><IMG CLASS=BloqueTitulo SRC ="../imagenes/titulo.png"></DIV><A HREF="http://www.forosdelweb.com/f4/html/acceso.html">Entrar al sistema <br></A>
		<A HREF="http://www.uca.es/" TARGET= "_blank"><IMG CLASS=LogoUca SRC="http://www.forosdelweb.com/f4/imagenes/logoUCA.png"></A>
		
	</BODY>
</HTML>

PRINCIPAL.HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE>PRINCIPAL</TITLE>
		<link href="../estilos/principal.css" rel="stylesheet" type="text/css">
	</HEAD>
	<BODY>
		<DIV>ATENCION!<br> Este es un sitio exclusivo para alumnos inscritos en el curso actual de Programacion 
			en Internet. Para poder acceder a los contenidos de la asignatura se debe acceder mediante un usuario y
			contrasena a traves del enlace de la parte superior de la pantalla.</DIV>
	</BODY>
</HTML>

MENU.HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE>MENU</TITLE>
		<link href="../estilos/menu.css" rel="stylesheet" type="text/css">
	</HEAD>
	<BODY><DIV class = "BloqueMenu">
		<A href="http://www.forosdelweb.com/f4/html/tecnHTML.html" >HTML</A>
		<A href="http://www.forosdelweb.com/f4/html/EnConstruccion.html" >CSS</A>
		<A href="http://www.forosdelweb.com/f4/html/EnConstruccion.html" >T.Cliente</A>
		<A href="http://www.forosdelweb.com/f4/html/EnConstruccion.html" >T.Servidor</A>
		<A href="http://www.forosdelweb.com/f4/html/EnConstruccion.html" >XML</A>
		<A href="http://www.forosdelweb.com/f4/html/recursos.html" >Recursos</A></DIV>
	</BODY>
</HTML>

ENCONSTRUCCION.HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE></TITLE>
	</HEAD>
	<BODY><DIV>
		<CENTER><IMG SRC="http://www.forosdelweb.com/f4/imagenes/en_construccion.png" ALT="Construccion"></CENTER></DIV>
	</BODY>
</HTML>

Estos ultimos aun en blanco
ACCESO.HTML

TECNHTML.HTML

Carlangueitor · #3 (**permalink**) 12/03/2013, 13:59

Que feo que en las universidades les pongan a hacer páginas con frames

Bueno, en si no errores, salvo algunos atributos que no tienes con comillas. En todo caso pasalos por el validador de la w3c, ahí tendrás los errores y alertas.

Saludos

DvNe · #4 (**permalink**) 12/03/2013, 16:33

A ver muchas gracias por contestar tan rápido

. He hecho lo que se me ha indicado de pasar los fragmentos de código por el validador y aun me siguen apareciendo fallos que no se solventar.

Dejare aquí el código a ver si alguien me puede decir cómo se solucionan

INDEX.HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE>Programacion en Internet</TITLE>
	</HEAD>
	<FRAMESET ROWS = "141,60,*" BORDER = "0">
		<FRAME name = "titulo" SRC = "./html/titulo.html" NORESIZE SCROLLING = "no">
		<FRAME name = "menu" SRC = "./html/menu.html" NORESIZE SCROLLING = "no">
		<FRAME name = "principal" SRC = "./html/principal.html" NORESIZE SCROLLING = "auto">
	</FRAMESET>
	<NOFRAMES>
		<DIV>Su navegador no dispone de marcos.</DIV>
	</NOFRAMES>
</HTML>

RESULTADO: 2 ERRORES
Line 9, Column 39: there is no attribute "BORDER"

Line 14, Column 11: document type does not allow element "NOFRAMES" here

ENCONSTRUCCION.HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE></TITLE>
	</HEAD>
	<BODY><DIV>
		<CENTER><IMG SRC="../imagenes/en_construccion.png" ALT="Construccion"></CENTER></DIV>
	</BODY>
</HTML>

RESULTADO: 1 ERROR
Línea 9, Columna 10 : elemento "CENTER" undefined

TITULO.HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
	<HEAD>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<TITLE>TITULO</TITLE>
		<link href="../estilos/titulo.css" rel="stylesheet" type="text/css"  media="screen">
	</HEAD>
	<BODY>
		<DIV><IMG CLASS=BloqueTitulo SRC="../imagenes/titulo.png" ALT="Titulo"></DIV><A HREF="../html/acceso.html">Entrar al sistema <br></A>
		<A TARGET="_blank" HREF="http://www.uca.es/"><IMG CLASS=LogoUca SRC="../imagenes/logoUCA.png" ALT="logoUCA"></A>
		
	</BODY>
</HTML>

RESULTADO: 3 ERRORES
Line 10, Column 109: document type does not allow element "A" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag

Line 11, Column 13: there is no attribute "TARGET"

Line 11, Column 47: document type does not allow element "A" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag

Por último decir que en todos los HTML siempre me dan un warning al validarlo debido a algo que tiene que ver con el "utf-8" pero me sale el fragmento de código como validado. ¿Es eso normal?