Struttura pagina html

**ironic85** · 01-11-2008, 16:42

Salve a tutti.
Devo fare un'esercitazione in html consistente in un sito che prevede una homepage con una bottoniera che permette di collegarsi alle altre sezioni (divisi in liste e liste annidate) o sottosezioni del sito, l'impaginazione con tabelle, uno spazio per la foto personale, una linea orizzontale (credo che serva per layout) e un'immagine che linka ad un altro sito.
Il tutto con doctype strict.
P.s. Questo solo usando html.
Io un pò l'ho strutturato, in modo molto scarno.
Il fatto è che non è nemmeno guardabile . Qualcuno potrebbe suggerirmi come modificare il codice per creare una homepage abbastanza decente? Vi allego il file.
Grazie mille

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

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

<head>
<TITLE>Home Page</TITLE>
</head>

<body>
<table border="0" style="background-color: "#eeeeee" width="70%" cellspacing="0" cellpadding="10">
<tr>
<td style="background-color: #eeeeee""></td>
</tr>

<tr>
<td align="left" valign="top" style="background-color: "#dddddd">

<button name="CURRICULUM" onclick="location.href='curriculum.html'"> curriculum</button></p>

<button name="info" onclick="location.href='info.html'">Info</button></p>

<button name="attività" onclick="location.href='attività.html'">Attività </button> </p>

<button name="contatti" onclick="location.href='contratti.html'">contatti</button></p>
</td>
<td align="right" valign="top">
Immagine

</td>
</tr>
</table>

</body>

</html>

**Myaku** · 01-11-2008, 17:06

Originariamente inviato da ironic85
P.s. Questo solo usando html.
Io un pò l'ho strutturato, in modo molto scarno.
Il fatto è che non è nemmeno guardabile . Qualcuno potrebbe suggerirmi come modificare il codice per creare una homepage abbastanza decente?

"decente" sotto che punto di vista? grafico o del codice?

**paoloeg** · 01-11-2008, 18:06

codice:

<!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=iso-8859-1">
  <title>Home Page</title>
</head>
<body style="background-color:#eee;margin-top:25px;">
<table border="0" style="background-color:#eee;width:70%;">
  <tr>
    <td align="left" valign="top" style="background-color:#ddd">
      <ul>
        <li style="margin-bottom:10px;">Curriculum
        <li style="margin-bottom:10px;">Info
        <li style="margin-bottom:10px;">Attività 
        <li style="margin-bottom:10px;">Contatti[/list]
    </td>
    <td align="right" valign="top">
      Immagine

      
    </td>
  </tr>
</table>
</body>
</html>

è ancora "indecente", ma credo sia migliorato (di poco)
puoi "raggruppare" lo style e creare delle classi invece di ripetere.

**ironic85** · 01-11-2008, 19:13

grazie. :-)

Allora sotto punto grafico, il mio scopo principale comunque è la validazione w3c. E ovviamente inserire tutto quello che lui mi chiede.
Nella traccia dice: adibire uno spazio per l'inserimento della propia foto E una linea orizzontale.
Ore se io volessi mettere un titolo sopra (o anche l'immagine con link) , poi una linea orizzontale e poi la bottoniera con questo spazio foto come potrei organizzarli...considerando sempre l'uso delle tabelle?
Scusatemi se richiedo troppo, il fatto è che i concetti li ho assimilati...è l'organizzazione che mi manca.

**Myaku** · 01-11-2008, 19:39

Originariamente inviato da ironic85
grazie. :-)

Allora sotto punto grafico, il mio scopo principale comunque è la validazione w3c. E ovviamente inserire tutto quello che lui mi chiede.
Nella traccia dice: adibire uno spazio per l'inserimento della propia foto E una linea orizzontale.
Ore se io volessi mettere un titolo sopra (o anche l'immagine con link) , poi una linea orizzontale e poi la bottoniera con questo spazio foto come potrei organizzarli...considerando sempre l'uso delle tabelle?
Scusatemi se richiedo troppo, il fatto è che i concetti li ho assimilati...è l'organizzazione che mi manca.

Partirei con un presupposto.
E' innanzitutto inutile avere la validazione w3c se poi da un punto di vista semantico il tuo codice è in larga misura sbagliato.
Ovvero, sito validato ma fatto con un layout tabellare e tag/attributi presentazionali html = sito comunque realizzato non bene.

Poi, il secondo appunto che ti faccio riguarda il tuo primo post, ovvero:

P.s. Questo solo usando html.

da cui è derivata la mia domanda riguardo l'aspetto grafico.
Perchè se la tua esigenza è anche quella di rendere un aspetto gradevole al markup, non ti dovresti limitare al solo html, ma usare i fogli di stile. Limitandoti al solo html infatti torneresti a quanto già espresso come presupposto.

**ironic85** · 01-11-2008, 19:46

Originariamente inviato da Myaku
Partirei con un presupposto.
E' innanzitutto inutile avere la validazione w3c se poi da un punto di vista semantico il tuo codice è in larga misura sbagliato.
Ovvero, sito validato ma fatto con un layout tabellare e tag/attributi presentazionali html = sito comunque realizzato non bene.

Poi, il secondo appunto che ti faccio riguarda il tuo primo post, ovvero:

da cui è derivata la mia domanda riguardo l'aspetto grafico.
Perchè se la tua esigenza è anche quella di rendere un aspetto gradevole al markup, non ti dovresti limitare al solo html, ma usare i fogli di stile. Limitandoti al solo html infatti torneresti a quanto già espresso come presupposto.

Hia pienamente ragione ma è ciò che ci chiede.
Il css lo dobbiamo usare, almeno in questo esercizio, solo per modificare il colore dei link al passaggio del mouse,
Non so perchè questa decisione...ma anche da lì nasce il mio problema.
Ma purtroppo lo devo fare così e sto cercando di adeguarmi il meglio possibile.

**Myaku** · 01-11-2008, 19:52

Originariamente inviato da ironic85
Ma purtroppo lo devo fare così e sto cercando di adeguarmi il meglio possibile.

la vorrei proprio conoscere, 'sta gente

dagli un lisciabusso a chi t'ha passato quest'esercitazione :rollo:

comunque, stando così le cose non penso tu riesca ad ottenere qualcosa di tanto meglio di quanto suggerito da paoloeg ...

**ironic85** · 01-11-2008, 20:04

è il mio professore...UNIVERSITARIO.
eheh
ok ma... come posso adibire questo spazio per inserimento foto???
quanto mi perplime questo esercizio non potete capì...

**Myaku** · 01-11-2008, 20:06

Originariamente inviato da ironic85
ok ma... come posso adibire questo spazio per inserimento foto???

cioè? non ti è sufficiente il tag <img>?

**paoloeg** · 01-11-2008, 20:11

codice:

<!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=iso-8859-1">
  <title>Home Page</title>
  <style type="text/css">
  body {
  background-color: #eee;
  margin-top: 25px;
  }
  img {
  border:none;
  }
  table {
  background-color: #eee;
  width: 70%;
  border: 0;
  }
  .bottoni {
  margin-right: 10px;
  display: inline;
  border: #000 1px solid;
  font: bold 12px arial,helvetica,sans-serif;
  padding: 3px 10px;
  }
  .bottoni a {
  text-decoration: none;
  color: #333;
  }
  .bottoni a:hover {
  color: #933;
  text-decoration: underline;
  }
  .menu {
  padding: 10px;
  border-bottom: #000 1px solid;
  background-color:#ddd;
  height:30px;
  }
  </style>
</head>
<body>
<table>
  <tr>
    <td class="menu">
      <ul style="display:inline;">
        <li class="bottoni">Curriculum
        <li class="bottoni">Info
        <li class="bottoni">Attività 
        <li class="bottoni">Contatti[/list]
    </td>
  </tr>
  <tr>
    <td style="text-align:right;">
      Immagine

      
    </td>
  </tr>
</table>



</p>
</body>
</html>

meglio di così, senza strafare, non mi viene in mente niente...
auguri

Discussione: Struttura pagina html

Strumenti discussione

Ricerca discussione

Visualizza

Struttura pagina html

Re: Struttura pagina html

Permessi di invio