Wie schreibt man eine HTML-Seite?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
baum
beispiel
code
dom
editor
element
ende
header
inhalt
kommentar
mache
pack
projekt
sache
tab
tabelle
tag
text
url
zeile
-
Also, damit meine ich was bestimmtes. Ich weiß, wie HTML funktioniert und kann damit schreiben.
Es geht eher darum, wie man das alles anordnet. Ich bin für ein Praktikum bei einer Firma und kann vielleicht eine Ausbildung tag/mache">machen.
Nun schreiben hier alle ziemlich übersichtlich und man findet alles sehr schnell, wenn ich meine Sachen anschaue, dann finde ich mich kaum zurecht.
Ich geb euch einfach mal meinen Code (er ist teilweise von den Mitarbeitern bearbeitet, damit es übersichtlicher aussieht)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Daniel's Homepage </title> <link rel="stylesheet" type="text/css" href="css/testprojekt.css"/> <link rel="stylesheet" type="text/css" href="css/Video1.css"/> <meta content="charset=UTF-8"/> <script language="JavaScript" type="text/javascript" src="script.js"></script> </head> <body style="background: #FFAA33"> <h1>Daniel's Homepage</h1><br /> <br /> <br /> <!-- Counter --> <center><?php include('testprojekt.php'); ?> <!-- Vorwort --> <span><b><i>Besucher:</i></b> <?php echo main(); ?></span></center> <br /> <br /> <center><b>Hallöchen und herzlich Willkommen auf meiner Homepage. <br /> Hier seht ihr vier meiner Minecraft-Videos, die ich auf meinen Kanälen <br /> <br /> <a href="http://www.youtube.com/theOoDex">TheOoDex *alt*</a><br /> <a href="http://www.youtube.com/SexyTeamLP">SexyTeamLP</a><br /> <br /> hochgeladen habe.</b> <br /> <br /> <br /> <hr width="100%" size="5px" color="#000000"> <br />
Könntet ihr mir mal sagen, wann ihr immer leerzeichen setzt, damit es übersichtlicher aussieht? zB nach HTML kommen zwei,
nach Head wieder 2, dann kommt alles beieinander bis </head>, body ist wieder nach hinten gerückt, h1 nach body noch weiter nach hinten etc. So, dass es übersichtlich sein soll :(
Wie geht das?
Beitrag zuletzt geändert: 9.8.2012 15:34:46 von sexyteamlp -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Es geht also um die Optische Formatierung.
Ich benutze zum Einrücken immer Tabs oder 4 Leerzeichen. Diese trennen dann zusammgenhörige Blöcke. Beispiel:
<div> <input /> <input /> </div>
Die beiden Input sind Subelemente der Div, sogenannte "child-elemente", also Kinder. Diese Rücke ich ein, um eine Art Stammbaum zu generieren. Und so kannst du das durch dein ganzes Dokument machen:
<html> <head> <title></title> </head> <body> <div> <input /> </div> <div> <p>hallo</p> </div> </body> </html>
So kannst du dich schnell und einfach im Code zurechtfinden, find ich zumindest.
Ich hoffe das hilft :)
Liebe Grüße -
Generel kann man sagen, dass alle Kindknoten 4-8 Leerzeichen (oder einen Tabulator) weiter eingerückt werden solten als der Elternknoten. Bei Tags wie a, b oder span, die ja Inline-Elemente sind, kannst du in der selben Zeile bleiben. Block-Elemente hingegen kommen in eine neue Zeile.
Das alles sind aber nur Richtlinien und keine Pflicht.
Zusätzlich kann dir ein vernünftiger Editor (oder eine IDE) hier die Arbeit durch automatisches Formatiren erleichtern.
mfg -
Wenn mehrere an einem Projekt arbeiten und alle zwei Leerzeichen vor dem Tag machen, solltest du das auch übernehmen. Ich persönlich finde ein Leerzeichen oder ein Tab geschickter als zwei Zeichen zum Einrücken.
Im grunde macht man es so, dass man alle eingeschlossenen Tags in einem Kontainer einrückt:
<kontainer> <allein stehender Tag /> <noch ein kontainer> Inhalt blabla <noch ein alleinstehender Tag /> </noch ein kontainer> <blubb> inhalt blabla </blubb> </kontainer>
So sieht man zB dass "blubb" ein Child-Element von "kontainer" ist und sich "rechts" von "noch ein kontainer" befindet, also dass sie benachbart sind. Schau dir dazu auf jeden Fall noch den DOM-Baum an. -
Ich mache sowas gar nicht, weil es ohne Strukturierung für mich übersichtlicher und einfacher ist. Ich habe es einmal ausprobiert und ich konnte mich in meinem eigenen Code nicht mehr zurechtfinden. Dasswegen mache ich einfach nur Gruppierungen - ab und zu eine Zeile frei lassen.
-
Was mir gerade auffällt, ist, dass ein bisschen inline gestyled wird. Sollte man vermeiden.
Aber zur eigentlichen Frage: Ich selbst rücke Text gerne mit 2 Leerzeichen ein, weil mir Tab meistens zu weit einrückt. Zur leichteren Bearbeitung nehm ich dann aber doch auch mal Tab.
Leerzeilen pack ich zwischen den Doctype und html, head und body, und dann noch entsprechend dem Inhalt, um ihn auch im Code separiert darzustellen. Beispiel:
<!DICTYPE html> <html> <head> <meta charset="UTF-8"> <title>Titel der Seite</title> </head> <body> <div class="wrapper"> <nav> <a href="seite1">Item 1</a> <a href="seite1">Item 2</a> <a href="seite1">Item 3</a> </nav> <div class="content"> blah blah blah </div> </div> </body> </html>
Bei längerem Text pack ich diesen auch mal zwischen anstatt direkt nach einem Tag
<span> Ganz ganz GANZ viel Text a la lorem ipsum dolor sit amet </span> -
fuhnefreak schrieb:
Ich mache sowas gar nicht, weil es ohne Strukturierung für mich übersichtlicher und einfacher ist. Ich habe es einmal ausprobiert und ich konnte mich in meinem eigenen Code nicht mehr zurechtfinden. Dasswegen mache ich einfach nur Gruppierungen - ab und zu eine Zeile frei lassen.
Vlt solltets du aufhören, mit Tabellen zu layouten und stattdessen divs nehmen ;)
deswp schrieb:
Aber zur eigentlichen Frage: Ich selbst rücke Text gerne mit 2 Leerzeichen ein, weil mir Tab meistens zu weit einrückt. Zur leichteren Bearbeitung nehm ich dann aber doch auch mal Tab.
Man kann doch in den meisten Editoren einstellen, wie "breit" ein Tab angezeigt werden soll.
Jedes Leerzeichen wird vom Browser an den Client übetragen und stellt mindestens ein Byte zu viel in der Datenmenge dar als nötig ;) -
trueweb schrieb:
Vlt solltets du aufhören, mit Tabellen zu layouten und stattdessen divs nehmen ;)
Das einzige, was ich mit ner Tabelle gelayoutet (gibt's das Wort überhaupt :)) habe, ist meine Navigation. Und evtl. den Bottom der Starseite. Aber was hat das damit zutun?
Beitrag zuletzt geändert: 9.8.2012 16:09:33 von fuhnefreak -
Ich rücke immer mit einem Tab ein. Dabei immer nach diesem Schema:
<tag> <child /> <child> <node /> </child> </tag>
Leerzeichen als Einrückung mag ich gar nicht... und wenn jemandem ein Tab mit 8 Breite zu breit ist kann er ihn in seinem Editor schmäler machen. -
sexyteamlp schrieb:
Schau mal:
Nun schreiben hier alle ziemlich übersichtlich und man findet alles sehr schnell, wenn ich meine Sachen anschaue, dann finde ich mich kaum zurecht.
Was den Quelltext betrifft, ist es sicherlich übersichtlicher, wenn auf einen Blick erfasst werden kann, wann ein Befehl (Tag) geöffnet, und wann wieder geschlossen wird. Beispiel:
<div1> <div2> <div3> </div3> </div2> </div1>
Da gehts um Übersichtlichkeit - das ist alles.
Wenn ich allerdings der Vater eines Quelltextes bin, kenne ich meine Kinder.
Ich kann dann gestalten, wie ich fröhlich bin: (Hier links ausgerichtet)
<div1> <div2> <div3> </div3> </div2> </div1>
Schwierig wird die Übersicht halt dann, wenn andere (Entwickler?) mitarbeiten, und Ausfälle sollten auch bedacht werden.
Soll heißen:
- Arbeiten mehrere an einem Projekt, ist es besser, sich an Standarts zu halten.
- Wird der Papa Entwickler krank? Oder hat sich wohlmöglich zur Ruhe gelegt?
Dann müssten eventuell andere einspringen, wo dann wieder die Übersichtlichkeit des Quelltextes ins Spiel kommt.
;) -
trueweb schrieb:
Man kann doch in den meisten Editoren einstellen, wie "breit" ein Tab angezeigt werden soll.
Jedes Leerzeichen wird vom Browser an den Client übetragen und stellt mindestens ein Byte zu viel in der Datenmenge dar als nötig ;)
Stimmt eigentlich. Jedesmal wenn ich den Editor aufmache bin ich wieder so sehr mit dem Projekt beschäftigt, dass ich das wieder vergess. Habs jetzt endlich mal eingestellt
Ich hab aber auch mal irgendwo gelesen, dass gerade weil Tabs bei jedem anders einrücken können es auch sinnvoll sein kann, wenn man mehrere Leerzeichen setzt. -
ich kann für solche Sachen immer nur Notepad++ empfehlen, ist sehr übersichtlich und es geht ja auch nicht immer unbedingt darum , dass du es nur lesen kannst. Ich arbeite an machen Projekten, die ich nicht selber geschrieben habe, da ist es schon einfacher ein:
<table>
<tr>
<td>
</td>
</tr>
</table>
als
<table>
<tr>
<td>
</td>
</tr>
</table>
..
Wenn das mehrere Din A4 Seiten Code sind, macht es unformatiert keinen Spaß... hilfreich sind auch comments bei Projekten mit mehreren
a la
<!-- Header -->
usw. -
ramsiis schrieb:
<table>
<tr>
<td>
</td>
</tr>
</table>
als
<table>
<tr>
<td>
</td>
</tr>
</table>
Code in den BBCode-Block, dann klappts auch mit den Leerzeichen ;)
<table> <tr> <td> </td> </tr> </table>
als
<table> <tr> <td> </td> </tr> </table> -
ist zwar schon etwas her, das thema, aber vllt. kann ich dir trotzdem noch helfen:
Benutze Kommentare! Die fallen in jedem skript auf und helfen dir unheimlich, bestimmte sachen in deinem Skript wieder zu finden.
Ausserdem weißt du nach zum Beispiel einem halben Jahr in dem du das skript nicht mehr angeschaut hast immer noch, was zum Beispiel jetzt ein bestimmter tag bedeuten sollte oder was du damit beachten wolltest...
Beispiel:
<!DOCTYPE html> <html> <head> <!--Starte Headbereich mit Meta-Tags und generellen Seiten informationen <title>Titel deiner Seite</title><!--Titel meiner Seite der im Browserfenster angezeigt wird--> <meta name="description" content="Dies ist meine Seite, sie handelt von XYZ [...] "/><!--Metatag zum Inhalt--> <link rel="stylesheet" type="text/css" href="style.css"> <!--Verlinkung zur CSS Datei style.css--> </head> <body><!--Body mit allen Elementen die zur Website gehörn--> <div id="header"><!--Division Container mit dem Namen header--> </div><!--Ende Header!!!--> </body><!--Ende BOdy!!!--> </html><!--Ende des HTML Dokuments!!!-->
Alles was du so in dein Skript schreibst: <!--Ich bin ein Kommentar-->
wird später nich iauf deiner Website angezeigt sondern nur in deinem Skript. -
vipers-php-test schrieb:
Trotzdem wird der Kommentar an den Client übertragen und kann von ihm eingesehen werden. Wenn du PHP verwendest kannst du PHP-Kommentare verwenden, die werden dann nicht zum Client übertragen.
Alles was du so in dein Skript schreibst: <!--Ich bin ein Kommentar-->
wird später nich iauf deiner Website angezeigt sondern nur in deinem Skript.
Du solltest also keine Geheimnisse in HTML-Kommentare schreiben... -
hackyourlife schrieb:
vipers-php-test schrieb:
Trotzdem wird der Kommentar an den Client übertragen und kann von ihm eingesehen werden. Wenn du PHP verwendest kannst du PHP-Kommentare verwenden, die werden dann nicht zum Client übertragen.
Alles was du so in dein Skript schreibst: <!--Ich bin ein Kommentar-->
wird später nich iauf deiner Website angezeigt sondern nur in deinem Skript.
Du solltest also keine Geheimnisse in HTML-Kommentare schreiben...
Jop aber die Frage war ja nach HTML...
Ich persönlich bevorzuge auch php... da ist man einfach sicherer gegen Skriptdiebe... -
Da man immer mehr Off-Topic wird und das Thema eigentlich nun ausreichend beantwortet wurde -> *Thread geschlossen*
Bei Nachfragen oder Änderungswünschen bitte PN an mich oder anderen zuständigen Moderator geben.
MfG Stephan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
