Um HTML programmieren zu können brauchst du einen Editor und einen Browser. In den meisten Fällen ist beides schon vorinstalliert.

Transkript

1 Grundlagen Editor und Browser Um programmieren zu können brauchst du einen Editor und einen Browser. In den meisten Fällen ist beides schon vorinstalliert. Den Editor brauchst Du, um Dateien zu erstellen. Um Dich in die Programmiersprache einzufinden, empfehlen wir Dir den Windows Editor, den Du unter Start Programme Zubehör findest. Mit ihm solltest Du problemlos deine ersten Seiten programmieren können. Wenn Du später bereits etwas Erfahrung hast, ist es komfortabler mit dem Editor Weaverslave zu arbeiten. Du erhältst ihn auf der Homepage von Weaverslave kostenlos. Doch bitte sammle zuerst ein paar Erfahrungen. Den Browser brauchst du, um deine Dateien anzusehen. Er zeigt sie dir, wie sie später im Internet aussehen werden. Befehle in Der Quelltext von Dokumenten besteht aus dem Text, den wir später auf der Homepage lesen können, und Befehlen, die auch Tags genannt werden. Mit Befehlen gruppieren wir den Text in Absätzen, formatieren ihn fett, oder unterstreichen ihn. Außerdem verwenden wir Befehle, um die Schriftart festzulegen. Bilder werden nicht im Dokument selbst gespeichert. Stattdessen wird die Bilddatei separat mitgeliefert. Später wird das Bild mit Hilfe eines Befehls im Dokument eingebunden. Befehle werden im Quelltext in spitzen Klammern notiert, damit der Browser sie später beim Anzeigen der Datei vom Text unterscheiden kann, der zum Lesen bestimmt ist. Beispiel: <befehl> Groß- und Kleinschreibung spielen bei den Befehlen noch keine Rolle. Dennoch empfehlen wir, die Befehle kleinzuschreiben. Denn Insider behaupten, dass sich die Hersteller der Browser in Zukunft auf eine kleine Schreibweise der Befehle einigen wollen. Im Interesse der Übersicht legen wir dir bereits jetzt schon ans Herz, einheitlich zu bleiben - also nicht einmal groß und dann wieder klein... Manche Befehle bestehen aus 2 Teilen: aus einem Start- und einem Endbefehl. Solche Befehle beziehen sich immer auf einen größeren Bereich. Logischerweise wird der Bereich mit dem Startbefehl begonnen und mit dem Endbefehl wieder geschlossen. Um sich Start- und Endbefehl besser merken zu können, unterscheiden sie sich immer nur durch einen Schrägstrich: Beispiel: <befehl> und </befehl> Absätze werden zum Beispiel mit dem Startbefehl begonnen und mit dem entsprechenden Endbefehl wieder geschlossen. Dazwischen steht der Text, der zum gemäßen Absatz gehört. Mehr dazu erfährst du im Kapitel Absätze erstellen. Grundgerüst einer Datei Seite 1 von 10

2 Das, was du in den Kapiteln Editor und Browser und Befehle in gelernt hast, reicht schon völlig, um deine erste Seite in zu programmieren. Die folgende Schritt-für-Schritt Anleitung bringt dich ganz schnell zu deinem ersten Dokument. 1. Öffne den Windows Editor, indem du zunächst auf Start, dann auf Programme, dort auf Zubehör und schließlich auf Editor klickst. 2. Tippe folgenden Quelltext ab: <html> </html> <head> </head> <body> </body> <title>mein erstes Dokument</title> Hier steht der eigentliche Text. Auf die Einrückungen brauchst du nicht zu achten, da sie hier lediglich der Übersicht dienen. Auch die Groß- und Kleinschreibung der Befehle ist unwichtig, wie du ja bereits schon im Kapitel "Befehle in " erfahren hast. 3. Speichere das Dokument, indem du in der Menüleiste auf Datei klickst und dort den Befehl "Speichern unter..." wählst. Suche nun das Verzeichnis aus, in dem du dein erstes Dokument speichern möchtest. Lasse dir einen guten Dateinamen für dein erstes Dokument einfallen und gib diesen im Feld Dateiname ein. Vergiss nicht.html hinter den Dateinamen zu schreiben. Im Dropdownmenü "Dateityp" solltest du nicht "Textdokumente" sondern "Alle Dateien (*.*)" auswählen, damit die Datei richtig gespeichert werden kann. Auf der nächsten Seite erfährst du mehr über die Befehle <html>, <head>, <title> und <body>, die in diesem Dokument zum ersten Mal aufgetaucht sind. Seite 2 von 10

3 Erklärung zum Grundgerüst Der Befehl <html> steht zu Beginn jedes Dokuments. Er öffnet den Bereich, den der Browser als Datei erkennen soll. Innerhalb des Dokuments gibt es zwei untergeordnete Bereiche: Den Kopf- und den Körperbereich. Den Kopfbereich beginnst du mit dem Befehl <head>. Im Kopfbereich wird der Seitentitel genannt. Der Befehl <title> nennt den Seitentitel. In unserem Fall ist das "Mein erstes Dokument". Damit der Browser erfährt, dass der Titel zu Ende ist, beenden wir ihn schließlich mit dem entsprechenden Endbefehl </title>. Der Kopfbereich hat für uns zunächst keine weiteren Funktionen. Deswegen schließen wir ihn wieder mit dem Befehl </head>. Später werden wir lernen, dass fast alle weiteren Funktionen des Kopfbereiches den Suchmaschinen helfen, deine Seite im Internet zu finden. Für den Betrachter deiner Seite sind sie aber unwichtig. Darauf beginnst du den Körperbereich mit dem Befehl <body>. Innerhalb des Körperbereichs notierst du den Text, der später im Browserfenster sichtbar sein soll. In unserem Beispiel hast du "Hier steht der eigentliche Text" geschrieben. Darauf schließen wir den Körperbereich wieder mit </body>. Zusammen mit dem Körperbereich endet auch das Dokument mit dem Befehl </html>. Im Körperbereich befindet sich der eigentliche Inhalt des Dokuments; also alles was du später auf der Seite ließt und sehen kannst. Momentan kannst du erst einfachen Text in den Dokumenten unterbringen, aber in den nächsten Kapiteln wirst du erfahren, wie du Bilder einfügst, Listen und Tabellen erstellst oder Text in Absätzen gruppierst. Mit einiger Erfahrung und ein paar Tricks erreichst du später die Möglichkeiten, die dir ein professionelles Textverarbeitungsprogramm gibt. Multiple Choice Aufgabe: Kreuze das richtige Feld an, sodass der entsprechende Satz eine wahre Aussage ergibt. 1. Mit einem Editor kannst du Dateien ansehen.... erstellen. 2. Mit einem Browser kannst du hingegen Dateien ansehen.... erstellen. Seite 3 von 10

4 Text im Web Absätze erstellen Text ist allgemein besser zu lesen, wenn er in Absätze gegliedert ist. Er wird inhaltlich gegliedert und erscheint leserfreundlicher. Auch optisch ist es am Bildschirm für das Auge bequemer 4 kleine Textblöcke zu erfassen als einen großen. Absätze erstellst du mit dem Startbefehl und dem Endbefehl . Zwischen Ihnen wird der im Absatz enthaltene Text notiert. Dies ist Text, der in einem Absatz steht. Unter ihm befindet sich ein weiterer Absatz. Nun kann ein weiterer Absatz geöffnet werden. Wie du siehst ist zwischen ihm und dem oberen Absatz eine Zeile frei geblieben. Im Beispielquelltext werden zwei Absätze gezeigt. Zwischen ihnen lässt der Browser beim Anzeigen der Seite eine Zeile frei, um für Übersicht zu sorgen. Absätze befinden sich im Körperbereich des Dokuments; also zwischen <body> und </body>. Gewöhne dir am besten ab sofort an, den Text nicht mehr "einfach so" in den Körperbereich zu schreiben, sondern immer in Absätze zu verpacken. Absätze ausrichten Im letzten Kapitel hast du gelernt Absätze zu erstellen. Wie auch in modernen Textverarbeitungsprogrammen können die Absätze in nicht nur am linken Rand des Browsers ausgerichtet werden, sondern es ist auch möglich den Text rechtsbündig, mittig oder als Blocksatz darzustellen. Diese Technik setzt ein Schlüsselwort voraus. Schlüsselwörter sind Ergänzungen zu Befehlen. Ein Schlüsselwort liefert eine nähere Bestimmung zu der Eigenschaft des Befehls. Text im Absatz wird linksbündig dargestellt. Text im Absatz wird rechtsbündig dargestellt. Text im Absatz wird mittig dargestellt. Text im Absatz wird als Blocksatz dargestellt. Das Schlüsselwort wird, wie oben angezeigt, einfach in die spitzen Klammern nach einem Leerzeichen hinter den eigentlichen Befehl geschrieben. Den Wert erhält das Schlüsselwort align durch die Bestimmung, die hinter dem Gleichheitszeichen in Gänsefüßchen steht (left, right, center oder justify). Seite 4 von 10

5 Beispiel: Im Beispiel siehst du einen rechtsbündigen Absatz. Quelltext in : Dies wird ein rechtsbündiger Absatz. Ansicht im Browser: Dies wird ein rechtsbündiger Absatz. Zeilenumbrüche Vielleicht ist dir bereits aufgefallen, dass der Browser beim Anzeigen deiner Dokumente keine Rücksicht auf die Leerzeilen und die Zeilenumbrüche nimmt, die du im Quelltext gesetzt hast. Statt dessen zeigt er den Text stets "hintereinander" an und beginnt erst dann eine neue Zeile, wenn dies aus Platzgründen nötig wird. Um einen Zeilenumbruch gezielt bzw. an einer gewissen Stelle zu erzeugen, musst du den Befehl verwenden. Er sagt dem Browser, dass er an dieser Stelle eine neue Zeile beginnen muss: Quelltext in : Wenn Wir Nur träumen, Wie es auch sein könnte; Uns nur vorstellen, Was anders sein sollte; Uns nur denken, Was geschehen müsste; Wenn Wir Nicht aufstehen, Nicht aufbrechen, Nicht unterwegs bleiben; Wenn Wir Nicht sagen, was wir zu sagen haben, Nicht tun, was wir tun können, Nicht sind, was wir wirklich sind; Dann Wird sich nichts ändern. Ansicht im Browser: Wenn Wir Nur träumen, Wie es auch sein könnte; Uns nur vorstellen, Was anders sein sollte; Uns nur denken, Was geschehen müsste; Wenn Wir Nicht aufstehen, Nicht aufbrechen, Nicht unterwegs bleiben; Wenn Wir Nicht sagen, was wir zu sagen haben, Nicht tun, was wir tun können, Nicht sind, was wir wirklich sind; Dann Wird sich nichts ändern. Setzte den Befehl dort, wo du einen Zeilenumbruch erzwingen möchtest. Gerade bei Gedichten oder anderen vorformatierten Texten sind fest vorgelegte Zeilenumbrüche sinnvoll. Seite 5 von 10

6 Texte formatieren Nach den drei letzteren, etwas schwierigen Kapiteln, in denen es um Absätze und um Schriftgestaltung ging, wird uns nun etwas einfacher. Es geht um die einfachen Textformatierungen, das heißt um Dinge wie Texte zu unterstreichen, fett zu schreiben, kursiv darzustellen oder durchzustreichen usw. Es gibt eine Reihe von Befehlen, die für diese Formatierungen zuständig sind: Fett schreiben Um Text fett darzustellen, schließt du ihn zwischen dem Startbefehl und dem Endbefehl Das "b" steht für "bold" und heißt zu deutsch fettgedruckt. Unterstreichen Um Text zu unterstreichen, verwendest du den Befehl ... . Das U steht für unterstreichen oder auf englisch: underlined. Kursiv oder schräg gedruckt schreiben. Schräg schreiben kann man mit dem Befehl ... . Das große i steht für italic oder auf französisch: en italique. Zu deutsch heißt beides: schräg gedruckt. Hochstellen Falls du Text hochstellen möchtest, ist der Befehl ... zu verwenden. Bei Quadratzahlen kann das zum Beispiel praktisch sein. Tiefstellen Parallel dazu gibt es auch noch den Befehl ... , der sich nur um das "B" von dem vorherigen Befehl unterscheidet. Er stellt den Text tief. Für Physiker der Mathematiker kann das vor allen Dingen bei Indexes wichtig sein. durchstreichen Obwohl dieser Befehl selten verwendet wird, kann er trotzdem nützlich sein. <s>... </s> streicht den eingeschlossenen Text durch. ... Eingeschlossenen Text fettgedruckt darstellen. ... Eingeschlossenen Text unterstreichen. ... Eingeschlossenen Text kursiv darstellen. ... Eingeschlossenen Text hochstellen. ... Eingeschlossenen Text tiefstellen. <s>... </s> Eingeschlossenen Text durchstreichen. Seite 6 von 10

7 Text einrücken Eine gute Idee ist es, den Text hin und wieder einzurücken, um das Schriftbild aufzulockern. Damit sorgst du für Übersicht erleichterst somit das Lesen. Ganz besonders praktisch sind Einrückungen, wenn du schriftlich von Interviews oder anderen Dialogformen berichten möchtest. Sie verdeutlichen dem Leser die Folge von Frage und Antwort und erinnern ihn daran, welche Partei gerade spricht. Einrückungen erstellst du mit dem Startbefehl <ul> und dem Endbefehl </ul>. Zwischen Ihnen wird der einzurückende Text notiert. Quelltext in : Dieser Text befindet sich auf der linken Seite des Browsers. <ul> Dieser hingegen wird etwas nach rechts eingerückt. </ul> Ansicht im Browser: Dieser Text befindet sich am linken Rand des Browsers. Dieser hingegen wird etwas nach rechts eingerückt. Schriftgestaltung Schriftgröße einstellen Zwar ist es in möglich, die Größe der Schrift zu festzulegen, jedoch treten hierbei einige Unterschiede zu verschiedenen Textverarbeitungsprogrammen auf: Textverarbeitungsprogramme geben die Schriftgröße in der Einheit "Punkt" an, die aus dem Buchdruck abgeleitet ist. In musst du dich dazu im Gegensatz für eine von acht zur Verfügung gestellten Schriftgrößen entscheiden. Wie schon bei der Schriftart kann auch bei der Schriftgröße für das Dokument eine Standardschriftgröße angegeben werden. Dazu wird dem Befehl <basefont>, den wir schon aus dem letzten Kapitel kennen, ein weiteres Schlüsselwort angehängt: size="". Beispiel: <basefont face="verdana" size="2"> Das Schlüsselwort size="" legt die Schriftgröße fest. Als Wert darfst du eine Nummer zwischen "1" und "8" eintragen. Dem Wert "2" entspricht etwa der Punktwert "10". Bei einzelnen Textpassagen verwendest du den Startbefehl , den Endbefehl und wieder das Schlüsselwort size="", um die Schriftgröße zu bestimmen. Der eingeschlossene Text wird in der angegeben Schriftgröße dargestellt. Entweder trägst du als Wert wieder eine Nummer zwischen 1 und 8 ein, oder du bezeichnest die Abweichung vom Standardwert: Beispiel 1: Erna schreibt David einen Brief Beispiel 2: David schreibt Erna lange nicht zurück Seite 7 von 10

8 Beispiel 3: Deswegen ist Erna jetzt sauer auf David In Beispiel 1 wird ein klarer Wert für die Schriftgröße angegeben. Der Beispielsatz wird in der Schriftgröße "4" dargestellt. Das entspricht in etwa dem Punktwert "15". In Beispiel 2 und 3 wird hingegen die Abweichung von der Standardschriftgröße berechnet. Der zweite Beispielsatz wird um 3 Stufen größer dargestellt, als der Standardtext des Dokuments. Wenn als Standard "2" festgelegt wäre, würde die zusammengerechnete Schriftgröße "5" betragen. Der dritte Beispielsatz wird um eine Stufe kleiner dargestellt, als der Standardtext des Dokuments. Wenn wir weiterhin von einem Standard "2" ausgehen, wäre das also "1". Beide Methoden haben Vorteile: Wenn du beispielsweise jeder Seite eine Überschrift geben möchtest, die stets um 3 größer als die Standardschriftgröße sein soll, so ist es praktisch, wenn du dich für die zweite Methode entscheidest. Dadurch sparst du dir die Mühe, die Größe der Überschrift anzupassen, wenn du die Standardschriftgröße verändert hast. Wenn du aber Wert darauf legst, dass die Überschriften stets in der gleichen Größe dargestellt werden, ohne dabei die Standardschriftart des Dokuments zu berücksichtigen, so solltest du dich lieber für die erste Methode entscheiden. Schriftart einstellen In kannst du, wie auch mit professionellen Textverarbeitungsprogrammen, die Schriftart bestimmen. Wie zum Beispiel in Microsoft Word, ist es möglich für das ganze Dokument eine Standardschriftart anzugeben und einzelne Passagen in einer anderen Schriftart darzustellen. Die Standardschriftart des Dokuments wird gleich nach dem <body>-befehl angegeben, also zu Beginn des Körperbereichs. Sie wird mit dem Befehl <basefont> und dem Schlüsselwort face="" definiert. Beispiel: <body> <basefont face="times new roman"> Im Beispiel wird die Schriftart "Times New Roman" als Dokumentstandardschriftart genannt. Einzelne Passagen können auch in einer anderen Schriftart dargestellt werden. Dazu verwendet man den Startbefehl und den Endbefehl . Der eingeschlossene Text wird in der entsprechenden Schriftart dargestellt. Die gewünschte Schriftart wird wieder mit dem Schlüsselwort face="" festgelegt. Beispiel: es gibt nichts Gutes, außer man tut es Das berühmte Zitat von Erich Kästner wird in der Schriftart "Arial" angezeigt. Falls die von dir gewünschte auf dem PC nicht installiert sein sollte, können auch weitere Schriftarten angegeben werden. Die Namen der Schriftarten werden durch Kommata getrennt. Wenn die erste der gewünschten Schriftarten nicht auf dem Computer des Betrachters installiert sein sollte, versucht der Browser es mit der zweiten. Falls gar keine der angegebenen Schriftarten installiert ist, wird die Standardschriftart des Browsers verwendet. Beispiel: das Alter hört sich gern, auch Seite 8 von 10

9 wenn es nichts zu sagen hat. Das Zitat von Goethe sollte in der altertümlichen Handschrift "Lucida Blackletter" dargestellt werden. Ist diese aber nicht installiert, muss sich der Betrachter mit der verbreiteteren Schriftart "Verdana" zufrieden geben. Schriftfarbe Neben der Schriftgröße und der Schriftart kann auch die Schriftfarbe bestimmt werden. Dazu lernen wir ein neues Schlüsselwort kennen: color="". Auch hier kann wieder eine Standardschriftfarbe für das ganze Dokument festgelegt werden. Einzelne Passagen können, wie auch schon bei der Schriftgröße oder der Schriftart, von der Standardfarbe abweichen. Die Standardschriftfarbe kann mit dem Befehl <basefont> und dem Schlüsselwort color="" festgelegt werden. Sicherer ist es aber, die Standardschriftfarbe mit dem Befehl <body> und dem Schlüsselwort text="" zu bestimmen. In beiden Fällen musst du als Wert entweder einen Farbnamen oder einen sogenannten "numerischen Farbwert" eintragen. Mehr über beides erfährst du in der Farbtabelle. Die Schriftfarbe einzelner Passagen wird mit dem Startbefehl , dem Endbefehl und dem Schlüsselwort color="" verändert. Auch hier musst du als Wert wieder einen Farbnamen oder einen numerischen Farbwert angeben. Beispiel: Dieser Text soll rot dargestellt werden Dieser Text soll rot dargestellt werden. In diesem Beispiel verwenden wir den Farbnamen, um den Text einzufärben. Alle Farbnamen sind englisch anzugeben. Genaueres erfährst du, wie schon gesagt, in der Farbtabelle. Bitte beachte, dass die Browser die Farbnamen teilweise auf geringfügig unterschiedliche Weise interpretieren. Zwischen den Browsern kann es also zu Abweichungen kommen. Um absolut präzise Farbangaben zu machen, musst du die numerischen Werte angeben. Entnehme diese bitte der Farbtabelle. Seite 9 von 10

10 Multiple Choice Aufgabe: Kreuze das richtige Feld an, sodass der entsprechende Satz eine wahre Aussage ergibt. 1. Absätze erstellst du mit dem Startbefehl und dem Endbefehl .... <a> und dem Endbefehl </a>.... <s> und dem Endbefehl </s>. 2. Zwischen den Absätzen Absätze gehören in den lässt der Browser eine Zeile frei.... zieht der Browser eine Trennlinie.... Körperbereich; zwischen <body> und </body>... Kopfbereich; zwischen <head> und </head>... Titel; zwischen <title> und </title> Seite 10 von 10