• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage zu Navigation

Neuling17

Neues Mitglied
Hallo,

muss eine Homepage über Tee und Gewürze für die Schule gestalten. Da ich das mit der Navigation nicht hinbekomme, wollte ich hier mal um Rat fragen.

Und zwar sieht das ganze im Moment so aus:

HTML:
<html>
<head>
<title>Holsteiner Tee & Gewürz Kontor</title>
</head>
<hr noshade size="1">
<font size="-1">
<a href="test.html">Bestellung</a>
<a href="Teeliste.html">Teeliste</a>
<a href="Gewürzliste.html">Gewürzliste</a>
<a href="Accesoires.html">Accesoires</a>
</font>
<body text="yellow" bgcolor="#C8B428" link="red" alink="red" vlink="red">
<form action="malito:[email protected]" method="post"
</body>
</html>

Nun zeigt er die Überschrift nicht an und das mit der Navigation sieht nicht gut aus.

Ich möchte das nun so haben, das die Überschrift angezeigt wird dann der "graue Strich" und darunter die einzelnen Seiten (Bestellung,Teeliste usw.) halt als Navigation.

Kann mir jemand weiterhelfen? Bin 'n absoluter Neuling.

Danke!
 
Das was du denkst ist keine überschrift.
<title></title> fasst nur den Titel der Seite ein.
Wenn du ne überschrift wills dann nim am besten <h1></h1> im body bereich und setze da die Überschrift rein. Die kannst du dann gestalten wie du willst.

Ja die Navigation sieht doof aus.
Was du da machen kannst ist erstmal die Link vergrößern und danach die Links umrahmen. Das geht am einfachsten in dem du sie in ne Tabelle setzt (nicht empfehlenswert), kann man auch mit css machen und dann rahmen und hintergrundfarben geben, für den Anfang reicht aber auch ne Tabelle.
so das ist jetzt mal ne gammelversion:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Holsteiner Tee & Gewürz Kontor</title>
</head>

<body text="yellow" bgcolor="#C8B428" link="yellow" alink="green" vlink="yellow">

 <h1><u><p align="center">Holsteiner Tee & Gewürz Kontor</p></u></h1>

 <table width="70%" border="4" cellpadding="0" cellspacing="0" bordercolor="#00FC5B" bgcolor= blue>
 <tr>
  <td><a href="test.html">Bestellung</a></td>
  <td bgcolor= red><a href="Gewürzliste.html">Gewürzliste</a>    </td>
  <td><a href="Accesoires.html">Accesoires</a>  </td>
 </tr>
</table>



</body>
</html>

Les dir am besten mal n html turtorial danach ein css turtorial durch...
fals du noch keinen guten editor für html ist würde ich dir phase 5 empfehlen.

MfG
 
Zuletzt bearbeitet:
Jo, danke. Muss dann nochmal gucken wie ich das mit den Farben mache.

Aufjedenfall hab ich jetzt eine nächste Frage:

Ich hab jetzt hier so'n Bestellformular:

HTML:
<html>
<head>
<title>Holsteiner Tee & Gewürz Kontor</title>
</head>
<h1>Holsteiner Tee & Gewürz Kontor</h1>
<hr noshade size="1">
<font size="-1">
<a href="index.html">Startseite</a>
&nbsp;
<a href="Bestellung.html">Bestellung</a>
&nbsp;
<a href="Teeliste.html">Teeliste</a>
&nbsp;
<a href="Gewürzliste.html">Gewürzliste</a>
&nbsp;
<a href="Accesoires.html">Accesoires</a>
</font>
<p>
<body text="yellow" bgcolor="#C8B428" link="red" alink="red" vlink="red">
<form action="malito:[email protected]" method="post">
&nbsp;
<font size="+2">I</font>hre</b>
<font size="+2">B</font>esellung</b>:
<br>
<table border="3">
<tr>
<th> Best.Nr.</th>
<th> Produkt </th>
<th> Menge </th>
<th> Preis </th>
</tr>
<tr>
<td> <input type="text" name="POS1BESTNR" size="8"></td>
<td> <input type="text" name="POS1PRODUKT" size="50"></td>
<td> <input type="text" name="POS1MENGE" size="6"></td>
<td> <input type="text" name="POS1PREIS" size="6"></td>
</tr>
<td> <input type="text" name=" POS2BESTNR" size="8"></td>
<td> <input type="text" name=" POS2PRODUKT" size="50"></td>
<td> <input type="text" name=" POS2MENGE" size="6"></td>
<td> <input type="text" name=" POS2PREIS" size="6"></td>
</tr>
<tr>
<td> <input type="text" name=" POS3BESTNR" size="8"></td>
<td> <input type="text" name=" POS3PRODUKT" size="50"></td>
<td> <input type="text" name=" POS3MENGE" size="6"></td>
<td> <input type="text" name=" POS3PREIS" size="6"></td>
</tr>
</table>
<br>
<font size="+2">I</font>hre</b>
<font size="+2">A</font>dresse</b>:
<br>
<table>
<tr>
<td> Name: </td>
<td> <input type="text" name="NAME" size="60"> </td>
</tr>
<tr>
<td> Anschrift: </td>
<td> <textarea name="ADRESSE" cols="45" rows ="2"></textarea></td>
</tr>
<tr>
<td> E-Mail: </td>
<td> <input type="text" name="EMAIL" size="60"></td>
</tr>
</table>
<br>
<input type="Submit" value="Bestellung absenden">
<input type="reset">
<br>
</form>
<hr noshade size="1">
<font size="-1">
<a href="mailto:[email protected]?subject=Tee und Gewürzkonter">E-Mail</a>
</font>
</body>
</html>

Und da wollt ich jetzt mal fragen, ob man, wenn man da jetzt unter Produkt in das weiße Feld klickt, so'ne Art "Leiste" runterkommt wo dann halt alle Produkte stehen, wo man dann auf eins raufklickt und das dann da steht mit Preis und so. Geht das?
 
Was du da machen kannst ist erstmal die Link vergrößern und danach die Links umrahmen. Das geht am einfachsten in dem du sie in ne Tabelle setzt (nicht empfehlenswert)
Stimmt, Tabellen sind für tabellarische Daten.

kann man auch mit css mit divs machen und denen dann rahmen und hintergrundfarben geben.
Das wäre genau so falsch, <div> wird zum gruppieren mehrerer Elemente zwecks gemeinsamer Formatierung verwendet. Ein Menü zeichnet mal als <ul> aus, da es eine Uafzählung von Links ist.
 
Und schau dir bitte das Grundgerüst für HTML-Dateien an. Deine Datei ist weiterhin extrem fehlerhaft und könnte daher durchaus falsch dargestellt werden.

SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei

Wasn an meinem falsch? Oder meinst du Neuling ? Da sind fehler drin (Aber krass es funktioniert!)

Und da wollt ich jetzt mal fragen, ob man, wenn man da jetzt unter Produkt in das weiße Feld klickt, so'ne Art "Leiste" runterkommt wo dann halt alle Produkte stehen, wo man dann auf eins raufklickt und das dann da steht mit Preis und so. Geht das?

Das macht man mit javascript. hier ist ne alte Unfertige Version von meiner Navileiste mit Javascript(die neue sieht net so karg aus), musst du dann nur noch abändern...
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>Foldoutmenue Horizontal</title>

<style type="text/css" media="screen">
<!--

a.button
      {
      font-family:Verdana;
      font-size:12px;
      color: #FFD700;
      background-Color: #4169E1;
      border-left: 2px solid #CCCCCC;
      border-top: 2px solid #CCCCCC;
      border-right: 3px solid #000000;
      border-bottom: 3px solid #000000;
      text-decoration: none;
      width: 55px;
      text-align: center;
      }
a.button:hover
      {
      Color: #000000;
      background-Color: #FFD700;
      border-left: 2px solid #000000;
      border-top: 2px solid #000000;
      border-right: 3px solid #cccccc;
      border-bottom: 3px solid #cccccc;
      text-decoration: none;
      }


ul, li
{
        list-style-type: none;
        padding: 0px;
        margin: 0px;
}

.menu
{
        position: absolute;
        z-index: 3;
        top: 10px;
}

.menu li
{
        width: 160px;
        float: left;
}

.menu a
{
        border: 1px solid #090D24;
        background-color: #C62919;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        cursor: default;
        margin: 0px 0px;
        display: block;
        height: 20px;
        color: #000;
}

.menu a:hover
{
        background-color: #DD2714;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
        font-size: 14px;
        display: none;
        width: 140px;
        float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
        font-weight: normal;
        padding-top: 2px;
        border-top: 0px;
        cursor: pointer;
}
-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
        with (document)
        {
                if (getElementById)
                        getElementById(id).style.display = 'block';
                else if (all)
                        all[id].style.display = 'block';
                else
                        layers[id].display = 'block';
        }
}

function cache(id)
{
        with (document)
        {
                if (getElementById)
                        getElementById(id).style.display = 'none';
                else if (all)
                        all[id].style.display = 'none';
                else
                        layers[id].display = 'none';
        }
}
//-->
</script>

</head>
<body  bgcolor=#02FE35>

<div class="menu">
  <ul>
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menü 1</a>
      <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
         <li><a href="">Untermenü 1.1</a></li>
         <li><a href="">Untermenü 1.2</a></li>
         <li><a href="">Untermenü 1.3</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menü 2</a>
      <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
         <li><a href="">Untermenü 2.1</a></li>
         <li><a href="">Untermenü 2.2</a></li>
          <li><a href="">Untermenü 2.3</a></li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
      <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        <li><a href="">Subkategorie 3.1</a></li>
        <li><a href="">Subkategorie 3.2</a></li>
        <li><a href="">Subkategorie 3.3</a></li>
        <li><a href="">Subkategorie 3.4</a></li>
        <li><a href="">Subkategorie 3.5</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
      <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
        <li><a href="">Subkategorie 4.1</a></li>
        <li><a href="">Subkategorie 4.2</a></li>
        <li><a href="">Subkategorie 4.3</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>
 
Zuletzt bearbeitet:
Na wenn da noch so viele Fehler drinne sind, lass ich das erstmal mit dem Bestellformular und so. Hab jetzt so die Startseite fertig, sind da jetzt noch Fehler drinne?

HTML:
<html>
<head>
<title>Holsteiner Tee & Gewürz Kontor</title>
</head>
 <h1><u>Holsteiner Tee & Gewürz Kontor</u></h1>
  &nbsp;
<hr noshade size="1">
<font size="-1">
<a href="index.html">Startseite</a>
&nbsp;
<a href="Bestellung.html">Bestellung</a>
&nbsp;
<a href="Teeliste.html">Teeliste</a>
&nbsp;
<a href="Gewürzliste.html">Gewürzliste</a>
&nbsp;
<a href="Accesoires.html">Accesoires</a>
</font>
<body text="yellow" bgcolor="#C8B428" link="red" alink="red" vlink="red">
<form action="malito:[email protected]" method="post">
&nbsp;
<h2>Willkommen beim Holsteiner Tee & Gewürz Kontor</h2>
<b>Willkommen beim Holsteiner Tee & Gewürz Kontor.
Wir sind ein traditionsreiches Unternehmen im Herzen von Nieder-Kuckuckstadt.</b>
<p>
<b>Unser Geschäft wurde 1723 gegründet und ist seither in Familienbesitz.<p> Wir führen ein ausgesuchtes Angebot an hochwertigen Tees und Gewürzen sowie
Accesoires rund um das Teegenießen. Wir freuen uns auf ihren Besuch in unserem Hauptgeschäft an der Hauptstraße
von Nieder-Kuckuckstadt. Unser Unternehmen möchte jedoch auch diesen elektronischen Weg nutzen, um unsere Produkte
weltweit anzubieten. </b>
</body>
</html>

Danke schonmal.
 
Massenweise.

1. Der Doctype fehlt.
2. Das charset fehlt.
3. Es fehlt der body.
4. <u> verwendet man nicht.
5. Text, der kein Link ist, unterstreicht man nicht.
6. Wieso machst Du nach Deiner Überschrift eine strukturelle Trennung mit hr?
7. Man verwendet keine Attribute für Design/Layout sondern macht das alles mit CSS.
8. <font> wird nicht mehr verwendet.
9. Ein Menü wird semantisch korrekt als Liste ausgezeichnet.
10. Der body-Tag in der Mitte ist ungültig.
11. Die zahlreichen &nbsp; sind überflüssig.
12. <b> verwendet man nicht.
13. Deine Textabsätze sind nicht als solche ausgezeichnet.

Syntaktische Fehler sind 1, 2, 3/10. Die müssen auf jeden Fall weg. Das andere solltest Du auch abändern. Denn mit HTML sollst Du ja deinen Inhalt strukturieren, das machst Du aber nicht.
 
Okay, Dankeschön.

Ich hab das Fach jetzt erst seit nen paar Monaten und habe nur 'nen paar Zettel mit Befehlen bekommen und muss dazu jetzt 'ne Homepage bis Donnerstag machen. Lehrer war oft krank und hatten nicht oft Unterricht.

Auf jedenfall hab ich von CSS,Doctyp,Charset.. noch nie was gehört und das steht auch nicht auf den Zetteln drauf.

<u>, damit wird das doch unterstrichen, warum verwendet man das nicht, was verwendet man stattdessen?

&nbsp; wird als Leerzeichen oder so benutzt? Ich hab den Befehl im Internet gefunden und das ist der Einzige der geht. Gibt es 'nen anderen?

Und das mit <b> versteh ich auch nicht, das ist doch der Befehl für 'nen Text oder nicht? Oder wie ist der Befehl dafür, das man 'nen Text stehen soll?

Sorry für die übermäßig vielen Fragen.
 
Massenweise.

.
4. <u> verwendet man nicht.

12. <b> verwendet man nicht.

So ähnlich wie neuling fragt:
Meinst du das man es nicht verwendet in dem Falle weil es nicht ins Bild der Seite reinpasst und bekotet aussieht oder weil man es besser mit css macht da irgendwelche browser auf <b> und <u> alergig sind?

Neuling17 schrieb:
Auf jedenfall hab ich von CSS,Doctyp,Charset.. noch nie was gehört und das steht auch nicht auf den Zetteln drauf.
Doctype gibt an welche Version von html du verwendest. Da gibt es kleine unterschiede... nutze am besten ein Doctype wie den, oder andere wenn du mit einer anderen Version schreibst, um Probleme zu vermeiden.

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Zu CSS CSS Tipps und Anleitungen
Das ist die beste Seite die ich zu css kenne.

Neuling17 schrieb:
Und das mit <b> versteh ich auch nicht, das ist doch der Befehl für 'nen Text oder nicht? Oder wie ist der Befehl dafür, das man 'nen Text stehen soll?
<b>= fett

MfG
 
Ich hab das Fach jetzt erst seit nen paar Monaten und habe nur 'nen paar Zettel mit Befehlen bekommen und muss dazu jetzt 'ne Homepage bis Donnerstag machen. Lehrer war oft krank und hatten nicht oft Unterricht.
Traurig, dass hier wieder mal ein Fall von Lehrerinkompetenz vorzuliegen scheint. Denn in ein paar Monaten kann man mehr erreichen als das, was bei Dir angekommen ist. Soll also keine Kritik Dir gegenüber sein.
Aber wenn Dein Lehrer von "Befehlen" gesprochen hat, hat er gelogen, denn weder in HTML noch in CSS gibt es Befehle, weil beides keine Programmiersprachen sind.

Auf jedenfall hab ich von CSS,Doctyp,Charset.. noch nie was gehört und das steht auch nicht auf den Zetteln drauf.
Das ist typisch für Schulunterricht. Es werden Arbeitsweisen aus dem letzten Jahrtausend gelehrt. Nicht Deine Schuld. Aber was Du hier lernen kannst, hat unter Umständen nichts mit dem zu tun, was Dein Lehrer Dir erzählt hat, oder was er von Dir erwartet.

Es ist auch nicht auszuschließen, dass Du mit den - richtigen und modernen - Tipps, die Du hier kriegen kannst, bei Deinem Lehrer eine schlechte Note bekommst, weil er selbst damit nichts anfangen kann und von Dir was ganz anderes hören wollte.

<u>, damit wird das doch unterstrichen, warum verwendet man das nicht, was verwendet man stattdessen?
CSS - weil man mit HTML nicht das Aussehen der Website definiert, sondern nur die Struktur. Das ist eigentlich grundlegendes Wissen, was ein Lehrer in der ersten Stunde erklären müsste.

&nbsp; wird als Leerzeichen oder so benutzt? Ich hab den Befehl im Internet gefunden und das ist der Einzige der geht. Gibt es 'nen anderen?
Leerzeichen macht man mit Leerzeichen. Die Entity (kein Befehl) &nbsp; steht für ein non-breakable-space, ein Leerzeichen, an dem nicht umgebrochen wird.

Und das mit <b> versteh ich auch nicht, das ist doch der Befehl für 'nen Text oder nicht? Oder wie ist der Befehl dafür, das man 'nen Text stehen soll?
Das Tag (Befehle gibts nur in Programmiersprachen) für "Textabsatz" ist <p> (Paragraph):
Code:
<p>Dies ist ein Textabsatz.</p>

Sorry für die übermäßig vielen Fragen.
Kein Thema. Aber wie gesagt, ich weiß nicht, ob das, was wir Dir hier beibringen können, Deinem Lehrer gefällt, weil der den Stoff halt wie vor 15 Jahren erklärt, und nicht, wie er seit nunmehr fast 10 Jahren benutzt wird.

So ähnlich wie neuling fragt:
Meinst du das man es nicht verwendet in dem Falle weil es nicht ins Bild der Seite reinpasst und bekotet aussieht oder weil man es besser mit css macht da irgendwelche browser auf <b> und <u> alergig sind?
Nein, ich meine das so, dass man mit HTML nur die Bedeutung des Inhalts festlegt und nicht das Aussehen. Für alles, was mit dem Aussehen zu tun hat, ist ausschließlich CSS zuständig. <b> ist ein Tag ohne jegliche semantische Bedeutung und wurde nur eingefürt, um Text fett zu machen. Daher ist er heute und im eigentlichen Sinne von HTML nicht zeitgemäß.

Doctype gibt an welche Version von html du verwendest. Da gibt es kleine unterschiede.
Auch große. Der Unterschied zwischen HTML und XHTML zum Beispiel. Die Schreibweise, inhaltsleere Tags, jedes Tag schließen, Kleinschreibung usw.

nutze am besten ein Doctype wie den, oder andere wenn du mit einer anderen Version schreibst, um Probleme zu vermeiden.
Es muss ein Doctype sein, der die Browser in den Standards Mode versetzt.
Es sollte besser ein Doctype "Strict" sein, weil so Fehler vom Validator aufgezeigt werden, die Variante "Transitional" (= Übergang) ist, wie der Name schon sagt, für den Übergang, also eher für alte Websites von früher, die jetzt noch nicht auf eine Strict-Variante gehoben werden können.
Mehr dazu, welche Doctypes welchen Browser in welchen Mode schalten gibts in dieser Tabelle:
LANtastic’s Artikel DTD - Document Type Declaration - Das richtige Doctype

Gruß,
-Efchen
 
Zurück
Oben