Lektion 12 - Die Homepage

Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 12 - Die Homepage

Beitrag von Admin » Di 19. Aug 2014, 11:20

Die "Home"-Page ist die Startseite deines Internetauftrittes. Sie wird mit der Domain angesteuert.

Eine Domain ist die Adresse zu deinem Webspace, den du in die Adresszeile deines Browsers eintippst. z.B.http://www.google.de oder http://www.kompozer-web.de oder http://www.kreativ-workshops.net.

Die Homepage wird als Startseite erkannt, wenn sie mit den Dateinamen index trägt. Also index.html, index.htm oder index.php.

Sie kann jedoch nur dann erkannt werden, wenn sie im Wurzelverzeichnis des Servers abgelegt ist. Auch darf nur eine Datei mit dem Namen index in diesem Verzeichnis liegen. Inhaltlich soll sie einen kurzen Überblick darüber geben, um was es auf deiner Webseite geht. Gestaltet sie so, dass der Leser neugierig - und zum Weiterlesen animiert wird. Hierzu gehören angenehme Farben, Grafiken, überschaubares Layout und gut lesbarer Text.

Um einen Text schnell und einfach erfassen zu können, sollte er übersichtlich gegliedert sein. Kurze Sätze, Absätze, Überschriften, Listen ... .

Jedes Element besitzt ein eigenes TAG. Das allgemeine Block-Element Div Container hast du bereits kennengelernt. Im Kapitel Kopf und Fuß hast du das Element Überschrift 1 eingesetzt. Es gibt aber noch viele Elemente, die du zur Gestaltung deiner Seite nutzen kannst.

Das Besondere an Elementen ist, dass sie global formatiert werden können, sodass die Formatierung für alle Elemente der gleichen Art im ganzen Web gleich ist. z.B.

Alle Überschriften der 2. Ordnung sollen rot geschrieben werden:

Code: Alles auswählen

h2 {color: #ff0000;}
Im Quelltext:

Code: Alles auswählen

<h2> Überschrift der 2. Ordnung</h2>
Du kannst einem Element eine ID, also eine individuelle Formatierung zuweisen. Diese Zuweisung darf nur einmal auf der gesamten Seite verwendet werden. z.B.

Code: Alles auswählen

#rot {color: #ff0000;}
Die ID muss jetzt noch der Überschrift zugewiesen werden

Code: Alles auswählen

<h2 id ="rot">Überschrift der 2. Ordnung in Rot</h2>
So wie du eine individuelle Formatierung zuweisen kannst, kannst du auch eine Klasse zuweisen. Die Klasse kannst du mehreren Elementen auf deiner Seite zuweisen. z.B.

Die unterschiedlichen Elemente durch Rotschrift hervorheben:

Code: Alles auswählen

.rot {color: #ff0000}
Die Klasse wird nun den verschiedenen Elementen zugewiesen. z.B. einer Überschrift 2 und einem Absatz.

Code: Alles auswählen

<h2 class="rot">Dies ist eine rot hervorgehobene Überschrift der 2. Ordnung>/h2>
<p class="rot">dieser nachfolgende Absatz wird auch rot geschrieben.</p>
Zu den Elementen gehören nicht nur Überschriften. Hier eine kleine Übersicht:

html
<html></html>
Umschließt das gesamte Dokument.

body
<body></body>
Umschließt den gesamten Bereich, der im Browser dargestellt wird.

div
<div></div>
allgemeines Blockelement Div-Container. Wird zum Zusammenfassen mehrerer Elemente verwendet.

h1
<h1></h1>
Überschrift der 1. Ordnung

h2
<h2></h2>
Überschrift der 2. Ordnung

h3
<h3></h3>
Überschrift der 3. Ordnung

h4 <h4></h4>
h5 <h5></h5>
h6 <h6></h6>

p
<p></p>
Absatz, zur Gliederung von Fließtext.

em
<em></em>
Text hervorheben

strong
<strong></strong>
Text stark hervorheben


Elemente in KompoZer
Mit KompoZer kannst du diese Text-Elemente einfügen.
Über das DropDown-Menü in der Formatsymbolleiste 1:

Überschriften
h1, h2, h3...
Überschriften werden zur thematischen Gliederung des Textes verwendet. Geht es auf deiner Seite zum Beispiel um Aquaristik, könnte eine Gliederung so aussehen:
Überschriftenh1 = Aquaristik
h2 = Süßwasserfische
h2= Meerwasserfische
h3 = Ausstattung für Süßwasseraquarien
h4 = Pumpen
h4 = Beleuchtungen
h4 = Kies
Absatz p
Ein Absatz umfasst einen thematisch zusammenhängenden Bereich. Ein Text wird in mehrere sinngemäß zusammenpassende Absätze aufgeteilt. Dies erhöht die Lesbarkeit des Textes.

Adressen adress
Eine Adresse im Internet sollte auch als Adresse gekennzeichnet werden. Zum Beispiel:
Max Mustermann, Musterstraße 1, 12345 Musterhausen

Vorformatierter Text
kopierst du einen Text, wird er mitsamt der ursprünglichen Formatierung eingefügt.


In den folgenden Kapiteln wirst du weitere Elemente kennenlernen.

Absatzformate
Normaler Text besitzt keine Elementenbeschreibung. Eine einfache Zeilenschaltung beginnt eine neue Zeile und wird im Quelltext mit einem <br> dargestellt. Eine doppelte Zeilenschaltung wird häufig als Absatzmarke verwendet. Dies solltest du jedoch nach Möglichkeit vermeiden.
Zeilenumbruch <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>

<br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br>
Dies ist die Ausgangsform von KompoZer einen Text auf eine Seite einzufügen.

KompoZer unterscheidet zwischen Normaltext und Absatz.

Ein Absatz wir mit einer Zeilenschaltung im Text abgeschlossen. Im Quelltext wird ein Absatz mit einem <p> eingeleitet und mit </p> abgeschlossen.
Absätze mit <p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
Der Absatz muss jedoch von dir festgelegt werden. So wie in einem Textverarbeitungsprogramm markierst du hierzu deinen Text und wählst über Menü Format - Absatz - Absatz oder noch einfach über das DropDown-Menü in der Formatleiste 1.

Du fragst dich jetzt bestimmt, wo der große Unterschied liegt.

Nun ja, ein Absatz ist ein Element, du kannst ihm eine Klasse oder ID zuweisen. Ein Zeilenumbruch bricht nur den Text um und ein doppelter Zeilenumbruch stellt eine Lücke zwischen den Zeilen dar.

Die KompoZer-Einstellung für Textformate steht generell auf "Normaler Text". Du kannst den Text erst einmal so eingeben, dann anschließend den Text markieren und in Absätze umwandeln. Wenn du jedoch gerne während der Texteingabe schon Kontrolle über die Formatierung haben möchtest, solltest du bereits zu Anfang die Einstellung auf "Absatz" umstellen.

Du kannst die Absätze in KompoZer sichtbar machen. Wähle im Menü Ansicht - Bereichskonturen. Jedes Element wird nun mit einer dünnen schwarzen Linie umfasst.


Übung

Bevor du beginnst, speichere deine index.html für alle anderen Links ab:

Datei - speichern unter
  • hobby.html
    galerie.html
    glossar.html
    termine.html
    gaestebuch.html
    wegbeschreibung.html
    impressum.html
Öffne deine index.html mit KompoZer und ändere den Titel deiner Seite von "Vorlage" auf "Home" oder "Start". Öffne hierzu das Menü Format - Seitentitel- und Einstellungen. - ändere den Titel der Seite und bestätige den Assistenten mit OK.

Schreibe nun die Einleitung zu deiner Webseite:

Eine Einleitung, also ein grober Überblick, um was es geht und ein bisschen allgemeine Info. Um umfangreichere Informationen zu bekommen, soll der Leser auf die weiterführenden Seiten deines Webs umschalten.

Überlege dir, welche Stichworte ein Besucher deiner Seite wohl in eine Suchmaschine eingeben würde, um die Informationen auf deiner Seite finden zu können. Verwende diese Stichwörter bei deiner Formulierung für die Startseite. Versuche sie auch in Überschriften unterzubringen.

Gliedere deinen Text in Absätze. Lege zwei Klassen an, mit denen du einzelne Absätze besonders hervorhebst:

.infobox
  • Die Infobox sollte sich deutlich vom restlichen Text unterscheiden. z.B. in der Schriftfarbe, mit Rahmen ...
.einruecken
  • Diese Klasse soll den Text am linken Rand ein wenig einrücken.
Lege eine allgemeine Formatierung für einen Absatz an. Ändere die automatischen Eigenschaften, sodass z.B. ein von dir festgelegter Abstand nach jedem Absatz eingehalten wird.
[img]http://www.kreativ-workshops.net/kurse/images/smilies/icon_exclaim.gif[/img]Ab Lektion 12 werden alle Dateien auf dem Server im Ordner "web" abgelegt. Kopiere auch den Ordner mit deinen Hintergrundbildern auf diesen Server.
Deine Seite könnte nun so aussehen: Lösung

Code: Alles auswählen

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

<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Startseite</title>
<meta content="Anke Lange" name="author">
<link rel="stylesheet" href="styles.css" type="text/css">
</head><body>
 
<div id="seite">
<div id="kopf">
<h1>Überschrift 1<br>
</h1>

</div>
<div id="navi">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="hobby.html">Hobby</a></li>
  <li><a href="galerie.html">Galerie</a></li>
  <li><a href="glossar.html">Glossar</a></li>
  <li><a href="termine.html">Termine</a></li>
  <li><a href="gaestebuch.html">Gästebuch</a></li>
  <li><a href="wegbeschreibung.html">Wegbeschreibung</a></li>
  <li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="inhalt">
<h2>Überschrift 2</h2>
<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
</p>
<p class="einruecken">Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. </p>
<h3>Überschrift 3 <br>
</h3>
<p>perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
<h3>Überschrift 3 <br>
</h3>
<p>sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. </p>
 
<p class="infobox">Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>
</body></html>
Die CSS

Code: Alles auswählen

.einruecken {
  padding: 10px;
  margin-right: 100px;
  margin-left: 100px;
  color: #993300;
  font-weight: normal;
  font-style: italic;
}
.infobox {
  border: 3px double #333300;
  padding: 10px;
  margin-right: 50px;
  margin-left: 50px;
}

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 12 - Die Homepage

Beitrag von kp2709 » Di 26. Aug 2014, 20:35

hallo,
hier meine aufgabe
http://reikuma27.kp2709.bplaced.net/web/

bitte prüfen

lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 12 - Die Homepage

Beitrag von camouflage1984 » Di 26. Aug 2014, 21:54

Hallo Kurt

Sieht gut aus. Weiter gehts
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 12 - Die Homepage

Beitrag von eibauoma » Do 11. Sep 2014, 20:57

Eine erste Seite ist gebastelt. Dabei habe ich gleich das Umfärben per CSS ausprobiert. Ich hoffe, dass das meiste richtig ist. Mit der Verlaufsdatei für den Body bin ich noch nicht zufrieden - vielleicht wäre ein bilinearer Verlauf mit dem dunklen Bereich etwa in der Mitte günstiger?
Aber welche Höhe wäre für den schmalen Streifen optimal?

Weil ich bis zu dieser Lektion das Kompozer-Dokument nicht im externen Editor (bei mir Notepad++)öffnen konnte, weil das Symbol angegraut war und folglich nicht zur Verfügung stand, habe ich ausgiebig rumprobiert.
(- ja, der Texteditor war bei den Hilfsanwendungen bereits eingestellt)

Meine eigenwillige Lösumg:
(Vielleicht braucht sie noch jemand - bei Google hab ich gesehen, dass andere hier genauso rumgestochert haben)
1. Umschalten auf Quelltext - Symbol blieb angegraut
2. Umschalten auf WYSIWYG - Symbol war noch angegraut
3. wieder zum Quelltext gewechselt,
nach dem Darauf-Klicken war das Symbol plötzlich aktiv und verwendbar.
Seitdem es überlistet wurde, ist es mitunter schon aktiv, wenn ich nur auf Quelltext klicke :roll:
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

Benutzeravatar
ernesto
Beiträge: 25
Registriert: Mi 20. Aug 2014, 08:06
Wohnort: Oberschwaben

Re: Lektion 12 - Die Homepage

Beitrag von ernesto » Fr 12. Sep 2014, 08:27

Code: Alles auswählen

Weil ich bis zu dieser Lektion das Kompozer-Dokument nicht im externen Editor (bei mir Notepad++)öffnen konnte
Hallo,
wenn ich ich Dich richtig verstanden habe kannst Du das Problem lösen indem Du nur kurz die Funktion "Teilen" betätigst, links unten, zwischen WYSIWYG und Quelltext, dann müßte das Editor-Symbol aktiv sein.
Ciao
Ernst

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 12 - Die Homepage

Beitrag von eibauoma » Fr 12. Sep 2014, 10:30

Danke für die Info, Ernesto, welche der drei Schaltflächen ich verwende, ist jetzt scheinbar egal. Das einfache Antippen einer davon aktiviert das Editor-Symbol.
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

anke
Beiträge: 206
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 12 - Die Homepage

Beitrag von anke » Fr 12. Sep 2014, 15:01

Hallo eibauoma

schön, dass du eine Lösung gefunden hast.

Ich habe mir jetzt einmal deine Seite angeschaut. Das sieht richtig gut aus. Weiter gehts zur nächsten Lektion.

Gruß anke

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 12 - Die Homepage

Beitrag von Hellriders » Mi 26. Aug 2015, 08:14

Lektion 12 ist geschafft :D

index.html

als ich jedoch die infobox auf 3 Zeilen nehmen wollte sah das Ergebnis etwas verschoben aus :o

hobby.html

das br in Überschrift 1 bekomm ich nicht weg :(

gruß micha

camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 12 - Die Homepage

Beitrag von camouflage1984 » Mi 26. Aug 2015, 10:09

Hallo Micha


Hier sind noch einige Fehler:

Code: Alles auswählen

<h2>Überschrift 2<span class="einruecken"></span></h2> 
Den leeren <span> bitte entfernen.

Code: Alles auswählen

<h2><span class="einruecken"><span class="einruecken">Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum. </span></span><br>

</h2>
Das sollte keine Überschrift sein ;) Bitte entferne <h2> und den überflüssigen <span>

Hellriders hat geschrieben:als ich jedoch die infobox auf 3 Zeilen nehmen wollte sah das Ergebnis etwas verschoben aus
Das liegt daran das du dafür

Code: Alles auswählen

<span></span>
genommen hast! Dieses Element hat keine eigenen Formatierungen, deshalb musst Du, wenn Du das benutzt alle Formatierungen selbst erstellen!

Nimm bitte

Code: Alles auswählen

<p></p>
dafür, dann siehst du den Unterschied!

Ersetze bitte alle <span> mit <p>

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 12 - Die Homepage

Beitrag von Hellriders » Mi 26. Aug 2015, 22:36

Danke jetzt siehts besser aus :)

index.html

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast