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

Könnte da mal jemand drüberschaun?

lalilex

Neues Mitglied
Hi,

ich muss für die Schule eine Seite erstellen und hab das auch ganz gut hinbekommen, wie ich finde ;)
Besser sollte es gar nicht werden.

Allerdings ist HTML für mich absolutes Neuland, deshalb weiß ich nicht, ob der Quelltext auch so in Ordnung ist, ich mein, obwohl das richtige rauskommt, kann es ja sein, dass es da irgendwelche Richtlinien oder so gibt, sachen die man beachten sollte.

Zum Beispiel sollen wir die Formatierung in einer internen CSS Datei vornehmen, das hab ich auch gemacht, aber manche Sachen hab ich halt doch direkt in den Quelltext geschrieben. Ist da jetzt alles einheitlich, also, ist alles was in der CSS datei sein sollte auch drin oder sollte ich noch Sachen vom Text in die CSS datei übernehmen?
Ich hoff ihr wisst jetzt was ich mein...^^
jedenfalls wäre es super nett, wenn da mal jemand drüberschauen könnte, ob das alles richtig ist. Ich hab versucht, den Quelltext ein bisschen zu sortieren, damit man den Überblick behält.
Ein konkretes Problem hab ich noch: die "Nach oben"-Dinger sollten eine viel kleinere Schriftgröße haben, ich hab oben im CSS 10pt eingestellt aber es funktioniert nicht, was ist da falsch?

Ach ja, da sollte links so ein blaues Band sein (<th class="banderole" rowspan="7">)und wenn ich das ding mit firefox öffne, ist dieses blaue Band nicht mehr da. Die Zelle schon, der Abstand stimmt, aber es ist halt nicht mehr blau. Versteh das nicht, wenn ichs in der Phase 5 Ansicht aufmach, isses da. *????*

Vielen Dank schon mal im Voraus!!

LG, Lalilex

Das ist der Quelltext, den Inhalt hab ich durch Mustertext ersetzt, damit das ganze nicht so riesig wird:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Social Networks</title>
<link rel="shortcut icon" href="kugel.ico">
<meta name="description" content="Internetseite zum Thema Social Networks">
<meta name="author" content="Lalilex">
<meta name="keywords" content="social, networks, network, soziale netzwerke, facebook, datenschutz">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">

body
{
background-color: aliceblue;
font-family: arial;
font-size: 14pt;
}

.navileiste
{
background-color: lightblue;
}

.menuepunkte
{
width: 250px;
text-align: center;
}

.ueberschrift
{
font-family: monotype corsiva;
font-size: 80pt;
color: black;
width: 1000px;
}

.obenpfeil
font-family: Arial;
font-size: 10pt;
color: black;
}

.banderole
{
width: 52px;
background-color: lightblue;}

.banderole2
{
width: 150px;
}

.haupttext
{
width: 1000px;
}

</style>
</head>

<body>
<table border="0" >

<tr>
<th class="banderole" rowspan="7">
</th>

<th>
<table align="left" border="0">
<tr>

<td id="oben"><img src="kugel.png" width="200" border="0" alt="pic" title="media ball">
</td>

<td class="ueberschrift">Social Networks
</td>

</tr>
</table>
</th>

</tr>

<tr>

<td class="navileiste">
<table>
<tr height ="35px">

<td class="menuepunkte">
<a href="#a1"><img src="Überblick.png" alt="" border="0" width="106" height="37">
</a>
</td>

<td class="menuepunkte">
<a href="#a2"><img src="Facebook.png" alt="" border="0" width="106" height="37">
</a>
</td>

<td class="menuepunkte">
<a href="#a3"><img src="Kritik.png" alt="" border="0" width="106" height="37">
</a>
</td>

<td class="menuepunkte">
<a href="#a4"><img src="Schutz.png" alt="" border="0" width="106" height="37">
</a>
</td>

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

</tr>

<tr class="haupttext">

<td id="a1"><br />

<h2>Überblick</h2>

<h3>Definition</h3>

<p>Absatz
</p>

<p>Absatz
</p>

<p>Absatz
</p>

<h3>Funktionen</h3>

<p>Absatz
</p>

<h3>Nutzung</h3>

<p>Absatz
<p/>

<p class="obenpfeil">
<a href="#oben"><img src="pfeil.png" alt="" border="0" width="15">nach oben
</a>
</p>
</td>

<th class="banderole2" rowspan="5">
</th>

</tr>

<tr class="haupttext">

<td id="a2"><hr />

<h2>Facebook</h2>

<p>Absatz
</p>

<p>Absatz
</p>
</td>

</tr>

<tr class="haupttext">

<td>
<br />
<h3>Bruttonationalglück</h3>
Facebook misst das kollektive Wohlbefinden unserer Nation anhand von positiven und negativen Stausmeldungen:
<br />

<img src="Bruttonationalglück.jpg" width="467" border="0" alt="">

<p class="obenpfeil">
<a href="#oben"><img src="pfeil.png" alt="" border="0" width="15">nach oben
</a>
</p>
</td>

</tr>

<tr class="haupttext">

<td id="a3"><hr />

<h2>Kritik</h2>

<h3>Gefahren</h3>

<p>Absatz
</p>

<p>Absatz
</p>

<h3>Datenschutz</h3>

<p>Absatz
</p>

<p>Absatz
</p>


<p class="obenpfeil">
<a href="#oben"><img src="pfeil.png" alt="" border="0" width="15">nach oben
</a>
</p>
</td>

</tr>

<tr class="haupttext">

<td name="a4" id="a4">
<hr />

<h2>Schutz</h2>

<p>
<ol>
<li>Punkt 1
<br />Also:
</li>
<ul>
<li>Unterpunkt</li>
<li>Unterpunkt</li>
<li>Unterpunkt</li>
</ul>
<li>Punkt 2</li>
<ul>
<li>Unterpunkt</li>
<li>Unterpunkt</li>
</ul>
</ol>
</p>

<p class="obenpfeil">
<a href="#oben"><img src="pfeil.png" alt="" border="0" width="15">nach oben
</a>
</p>
</td>

</tr>

<tr class="haupttext">

<td>Quellen</td>

</tr>

</table>

</body>
</html>
 
Werbung:
also wenn ich das richtig sehe, hast du ncoh viele css-angaben in deinem html. alles was border und align ist, würde ich ins css schreiben. allgemein hast du das ja bei bildern. also schreib in dein css einfach
Code:
img { border: 0px; }
.
hilfreich wäre auch, wenn du die website mal irgendwo hochladen würdest, damit wir uns die mal anschauen können.

achja und du machst dein design mit einer tabelle. tabellen nutzt man eigentlich nur, wenn man inhalt tabellarisch darstellen möchte (adressen, etc.). wenn du es wirklich gut haben willst, dann arbeite mit divs.

nutze außerdem für deine überschrift h1. wenn es kein h1 gibt, dann nutzt man auch kein h2. und in h1 schreibt man meistens eine klare beschreibung der aktuellen seite (z.b. Home).
h1 kannst du so definieren:
Code:
h1 { ... }

warum setzt du deine letzte liste in ein "p"?
gib ihr eine id und formatiere margin, etc.

warum fängt dein td "a1" mit einem <br />-tag an?
gib a1 einfach
Code:
padding-top: 10px
oder so

wenn du deinen head noch vollständiger machen willst, kannst du auch noch das hier hinzufügen:
Code:
<meta http-equiv="expires" content="300" />
(zeit nach der die website neu geladen wird und nicht mehr aus dem cache)

Code:
<meta name="content-language" content="de" />
erklärt sich von selbst
Code:
<meta name="revisit-after" content="1 month" />
wann suchmaschinen-robots die seite wieder besuchen sollen
Code:
<meta name="robots" content="index, follow" />
ob suchmaschinen-robots den links auf dieser seite folgen sollen

joah design, etc. kann ich leider nichts zu sagen^^ ist ja nix zu sehen :p
 
Zuletzt bearbeitet:
Hallo mustang :)

danke für die schnelle und ausführliche Antwort.

Das Problem mit der Schriftgröße hab ich selbst entdeckt. Einfach ne Klammer vergessen...
Das blaue Band ist plötzlich auch da, kA warum.

Die Tabellenform ist vorgeschreieben, vllt wär das andere zu schwer(?)

Ich denke, die Sachen für den Head (Bis auf die Sache mit der Sprache) lass ich lieber weg, da mein werter Herr Lehrer ja weiß, dass ich wie gesagt blutiger Anfänger bin, da wär das glaub ich zu verdächtig, ich soll das ja alleine machen...^^
Was sind denn überhaupt Suchmaschinen-robots??oO

Das mit dem padding-top hab ich nicht verstanden. Muss ich dann wieder ne "class" setzen?

Bei den Bildern: ist Border=0 überhaupt nötig? Wenn ichs weglass ist doch auch kein Rand?
Und die Größe der Bilder, kann ich die im Text lassen?
Und z.B. bei "rowspan", soll ich das auch in CSS machen?
Die aligns hab ich jetzt nach oben.

Die Liste hab ich aus dem <p> raus, aber groß formatieren muss ich da glaub ich nichts mehr. Sieht genauso aus wie vorher;)

Die Sache mit h1, was ist wenn ich jetzt aber keine Überschrift über den andern beiden will? Kann ich h1 nicht einfach weglassen? Wenn ich nämlich die Seitenüberschrift "Social networks" mit h1 formatiere, muss ich doch die formatierung, die ich jetzt für die Zelle festgelegt hab, stattdessen für h1 festlegen, oder? Aber die Weite der Zelle muss ich trotzdem für die Zelle festlegen, ist das nicht ein bisschen umständlich?

Wg. Design musst du eig. nicht gucken, das würd ich gern so behalten. Wichtig ist nur, dass alles richtig ist, es muss keine absolute Profi-Seite sein. Wenn du zur Kontrolle die fertige Seite brauchst, guck ich mal, dass ich sie irgendwo hochlade, aber wenns nur ums Design geht, muss das nicht sein.

Also, danke auf jeden Fall dafür, dass du dich damit beschäftigst. :)

LG, Lalilex
 
Werbung:
Ach übrigens hab ich keine Ahnung, wie man Seiten hochläd XD
Die Bilder müsste ich doch mir Hochladen, oder? Sonst kannst dus doch auch einfach in nen Editor kopieren und als .html abspeichern, oder?
 
Hallo mustang :)

danke für die schnelle und ausführliche Antwort.
kein ding ;-)

Die Tabellenform ist vorgeschreieben, vllt wär das andere zu schwer(?)
ja das könnte sein^^ naja dann lass es besser in der tabellenform.

Ich denke, die Sachen für den Head (Bis auf die Sache mit der Sprache) lass ich lieber weg, da mein werter Herr Lehrer ja weiß, dass ich wie gesagt blutiger Anfänger bin, da wär das glaub ich zu verdächtig, ich soll das ja alleine machen...^^
Was sind denn überhaupt Suchmaschinen-robots??oO
ihr dürft euch ja sicher im internet informieren. da gibts genug seiten, wo das drauf steht^^
also ein suchmaschinen-robot ist ein programm, dass websites durchsucht. zum beispiel google hat haufenweise solche programm. die durchsuchen das web und folgen allen möglichen links und nehmen die neuen gefundenen seiten in die datenbank auf. mit stichwörtern, etc. damit die seite dann über google gefunden wird. mit den tags im head machst du den robots das durchsuchen deiner seite einfach, weil sie direkt wissen, was sie machen sollen.

Das mit dem padding-top hab ich nicht verstanden. Muss ich dann wieder ne "class" setzen?

dein a1 hat ja schon eine id (a1 ^^). nimm das <br /> weg und schreibe ins css
Code:
padding-top: 10px;
bei deinem a1 mit dazu.
padding macht einen abstand vom text zum rand des elements. padding-top definiert nur den abstand nach oben.
da das br anscheinend nur eingesetzt wird, um ein bisschen platz zu halten, also mehr oder weniger für style sachen, mache das besser mit css.
probier es einfach mal aus und mach mal 50px oder 0 px. dann siehst du schon, was padding macht^^

Bei den Bildern: ist Border=0 überhaupt nötig? Wenn ichs weglass ist doch auch kein Rand?
Und die Größe der Bilder, kann ich die im Text lassen?
Und z.B. bei "rowspan", soll ich das auch in CSS machen?
ja du kannst das border eigentlich weglassen. ich mache das standardmäßig auf meinen websites, weil ich auch gerne mal bilder mit links drauf habe und da entsteht immer ein rand. wenn man das direkt festgelegt hat, dass bilder keine border haben sollen, dann bleibt die immer weg und man braucht sich damit nicht rumärgern.
die größe der bilder kannst, bzw. solltest du auch im code stehen lassen, da dann die ladezeit deiner website geringer wird (der browser weiß dann direkt, wie er das bild darstellen soll und muss nicht erst im css nachschauen).

Die Liste hab ich aus dem <p> raus, aber groß formatieren muss ich da glaub ich nichts mehr. Sieht genauso aus wie vorher;)
super :-)
Die Sache mit h1, was ist wenn ich jetzt aber keine Überschrift über den andern beiden will? Kann ich h1 nicht einfach weglassen? Wenn ich nämlich die Seitenüberschrift "Social networks" mit h1 formatiere, muss ich doch die formatierung, die ich jetzt für die Zelle festgelegt hab, stattdessen für h1 festlegen, oder? Aber die Weite der Zelle muss ich trotzdem für die Zelle festlegen, ist das nicht ein bisschen umständlich?
ja ist umständlich, aber wenn du jetzt eine zweite seite machst, wirst du dort auch wieder eine überschrift haben. dann kannst du standardmäßig h1 verwenden und es hat direkt das gleiche design. außerdem ist h1 direkt für die überschrift gemacht :-)
deswegen: überschrift1 sozusagen^^
Wg. Design musst du eig. nicht gucken, das würd ich gern so behalten. Wichtig ist nur, dass alles richtig ist, es muss keine absolute Profi-Seite sein. Wenn du zur Kontrolle die fertige Seite brauchst, guck ich mal, dass ich sie irgendwo hochlade, aber wenns nur ums Design geht, muss das nicht sein.

Also, danke auf jeden Fall dafür, dass du dich damit beschäftigst. :)

LG, Lalilex
ja wenn ich mal drüber schauen soll, dann lad sie mal hoch^^
helfe doch gerne.
jetzt muss ich aber erstmal auf arbeit :-)
bis heute abend

ps.: wegen dem hochladen:
schau mal bei www.bplaced.net vorbei. da gibts kostenlosen webspace. brauchst dann noch ein ftp-programm zum hochladen der dateien und bilder, etc.
können wir ja heute abend mal zusammen machen :-)
 
Hallo mustang,

also, ich hab jetzt alles soweit umgesetzt.

Die Überschrift hab ich mit h1 formatiert, die sieht jetzt aber anders aus. Irgandwie dicker und...anders^^.

padding top funzt nicht.

So siehts im Quelltext aus:
<td id="a1">

CSS:
a1
{
padding-top: 10px
}

Gibt aber keinen Abstand. Vor dem Bild "bruttonationalglück.jpg" hab ich auch ein br /. Das müsste ich ja dann auch wegmachen?

Und dann noch 2 Sachen, bei denen ich nicht wei0, ob ich sie jetzt auch in die css-Datei übernehmen soll:
<tr height ="35px"> Das ist nur für diese eine Zeile, die muss ich dann auch wieder mit "class" benennen, richtig?

und die Sache mit rowspan, auch in css oder lass ich das wo es ist?

Sorry, dass ich so schwer von Begriff bin^^

Heute abend bin ich leider nicht daheim, erst morgen wieder am PC.

LG, Lalilex
 
Werbung:
Die Überschrift hab ich mit h1 formatiert, die sieht jetzt aber anders aus. Irgandwie dicker und...anders^^.
du könntest bei deinen css eigenschaften für h1 mal mit font-weight rumspielen.
versuche mal die hier:
Code:
font-weight: bold;
font-weight: bolder;
font-weight: normal;
also immer nur eins^^ nicht alle drei auf einmal :p
padding top funzt nicht.

So siehts im Quelltext aus:
<td id="a1">

CSS:
a1
{
padding-top: 10px
}
du hast was vergessen ;-)

Code:
#a1
{
padding-top: 10px;
}
(die raute und das semikolon.)

Vor dem Bild "bruttonationalglück.jpg" hab ich auch ein br /. Das müsste ich ja dann auch wegmachen?
ja eigentlich solltest du das machen. du kannst dem bild auch eine id geben oder eine klasse - je nachdem - und dann padding-top einstellen.

Und dann noch 2 Sachen, bei denen ich nicht wei0, ob ich sie jetzt auch in die css-Datei übernehmen soll:
<tr height ="35px"> Das ist nur für diese eine Zeile, die muss ich dann auch wieder mit "class" benennen, richtig?
jop
und die Sache mit rowspan, auch in css oder lass ich das wo es ist?
nein kommt nicht ins css.
Sorry, dass ich so schwer von Begriff bin^^
ach kein ding. fragen ist immer noch besser, als was falsch machen^^
 
puh, ich glaub ich habs fast^^.

Das einzige, was noch nicht richtig klappt: Die Überschrift.
Hab die Schrift selbst mit font-weight wieder hingekriegt, danke dafür!
Aber wenn ich das ganze mit firefox öffne, dann ist die Zelle iwie so groß. ich muss das glaub ich doch mal hochladen. Da ist in der Zelle ein Bild, so ne Kugel, und daneben der Schriftzug. Wenn ich die Seite in der Phase 5-Ansicht öffne, ist beides auf gleicher Höhe und die Zelle passt genau.
In Firefox ist die Zelle größer, die kugel ist mittig (vertikal) und der Schriftzug weiter oben. Habs schon mit diversen Formatierungen probiert, aber nix funktioniert.
Da muss ich dich nochmal beschäftigen :)

Ansonsten klappt jetzt alles und ich bin ziemlich zufrieden;) Danke schön!!
LG, Lalilex
 
Werbung:
Edit: Hat sich erledigt, ich musste das heute abend abschicken und hab selbst solange ausprobiert, bis ichs hingekriegt hab.
Hab mit Margin h1 formatiert. Ganz allein drauf gekommen^^ Nach einem halben Tag:wink:

Auf jeden Fall find ichs super, dass du dir so viel Mühe gegeben hast und du hast mir echt geholfen.

Vielen Dank!!! :smile:

Liebe Grüße,
Lalilex

Huhu!:)

Aaaaalso:
Das hier ist der entsprechende Teil in der CSS-Datei:

h1
{
font-family: monotype corsiva;
font-size: 80pt;
font-weight: normal;
color: black;
}

.ueberschrift
{
width: 1000px;
vertical-align: middle;
horizontal-align: left;
}

Das ist der Teil des Quelltextes:

<table>

<tr>

<th class="banderole" rowspan="7">
</th>

<th>
<table>
<tr>

<td id="oben"><img src="kugel.png" width="200" title="media ball">
</td>

<td class="ueberschrift">
<h1>Social Networks</h1>
</td>

</tr>
</table>
</th>

<th class="banderole2" rowspan="6">
</th>

</tr>

Und hier ist der Link zum runterladen des screenshots:

RapidShare: 1-CLICK Web hosting - Easy Filehosting

Hoff, das tuts.

LG, Lalilex
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben