gf1:html [DokuWiki CSC]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====HTML - eine Beschreibungssprache für Dokumente im Web====
{{:gf1:html_struktur.png?direct&400|}}

Wie wird abgefragt?...

=== Was ist HTML ===

HTML (//Hyper Text Markup Language//) ist also eine Art Sprache, mit der wir einfache Webseiten erstellen und in einem Browser anzeigen können. Wir wollen uns nun ein bisschen anschauen, wie HTML genau funktioniert und als Produkt eine kleine Webseite erstellen. Diese werden wir aber nur lokal auf unserem Computer und nicht im Internet speichern.\\ 

HTML ist eine **Beschreibungssprache** (//WYSIWYM = What you see is what you mean//). Aber HTML ist keine Programmiersprache, denn HTML hat keine Befehle, es werden auch keine Schleifen oder Bedingungen, sprich kein Algorithmus programmiert. Diese Sprache wird genutzt, um ähnlich wie ein «Worddokument fürs Netz», Inhalt fürs Web darzustellen. Dies ist ein erheblicher Unterschied. \\ 
Typisch an HTML ist, dass sogenannte **Tags** verwendet werden, um die Inhalte einer Webseite zu kennzeichnen, sodass Ihr Browser weiss, wie diese darzustellen. Dies bedeutet, dass die darzustellende Seite strukturiert wird in header, navigation, main, footer etc. und in diesen Strukturelementen unter anderem noch mit Tags der Inhalt der Website dargestellt werden kann. \\ 

Hier noch etwas mehr ausholen...

=== Anwenderprogramm installieren ===
Um nun die Beispiele zu testen, ist ein Anwendungsprogramm von Vorteil.
<WRAP nicebox green>
Installieren von Visual Studio Code
  * Installieren Sie dazu [[https://code.visualstudio.com/  | Visualstudiocode]], nutzen Sie Ihr Microsoft Konto zum einloggen. Öffnen Sie das Programm. 
  * Installieren Sie auch die Erweiterungen (Extensions) Live Preview, Live Share, Local History, siehe dabei links in der Menuespalte Erweiterungen.
  * Wählen Sie einen Ordner (Choose a folder), dort werden die Aufgaben und Übungen gespeichert. 
  * Danach können Sie eine neue Datei erstellen (new File) und dies mit ''aufgabe1.html'' benennen. 
  * Jetzt können die nun folgenden Beispiele durchprobiert und durchgearbeitet werden. 
</WRAP>


==== TAGS kennenlernen und ausprobieren ====
Die folgenden Beispiele zeigen auf, wofür gewisse Elemente sind und wie diese genutzt werden können. Arbeiten Sie sich am besten durch diese Beispiele durch. Dafür nutzen Sie die eben erstellte Datei ''aufgabe1.html''. Ergänzen Sie die Datei ''aufgabe1.html'' jeweils durch die gegebenen Beispielcodes.
Das Grundgerüst eines HTML-Dokuments ist:

<code>
<!DOCTYPE html>
<html>
 
  <head>
    <title>Dokumententitel</title>
  </head>
 
  <body>
    Hier wird der Inhalt der html-Datei angezeigt!
  </body>
 
</html>

</code>
Was Sie beobachten können ist, dass hier viele Elemnte fast gleich heissen - bis auf den ''/''. Diese Elemente sind sogenannte Tags. Ein Tag (sprich «täg», englisch für Etiketten) hat immer einen Namen (zum Beispiel p für Paragraf) und wird in spitzen Klammern (< und >) dargestellt. 
Einige Tags fungieren als eine Art Behälter oder auch Formatierungsinstrument, diese enthalten die Elemente wie Texte, Titel, Bilder, Links,...

<WRAP nicebox green>
**Auftrag:**\\
Kopieren Sie als erstes den Beispielcode einer HTML-Struktur in die leere Aufgabe der Datei "aufgabe1.html". Füllen Sie den Body-Tag des Dokuments (am Platz des Textes //Hier wird der Inhalt der html-Datei angezeigt!//) den Tag mit einem seltenen Rohstoff der Smartphone-Produktion (Gold, Coltan, Aluminium, Litium...) dies sollte ein reiner **Text** sein.
</WRAP>
=== Body - Tags====

==Absatz ==
<code>
<p> Hier steht ein Absatz (paragraph), der immer auf einer neuen Zeile beginnt.</p>
</code> 
Mit diesem <p>-Tag können Sie in einem Text einen Absatz formatieren.
Um im Absatz irgendwo einen Zeilenumbruch zu generieren kann ''<br>'' verwendet werden. Dies ist ein spezielles Tag, denn es gibt zu diesem kein "Endpartner-Tag", es steht alleine. <br> steht für break the line und wird benutzt um einen Zeilenumbruch zu erzeugen. Eine andere Möglichkeit bietet <hr>, auch dies ist ein Einzel-Tag, und auch <hr> erzeugt aber neben einen Seitenumbruch zusätzlich eine horizontale Linie.
<WRAP nicebox green>
**Auftrag**:  Erstellen Sie einen Absatz im Body-Bereich der Datei, dabei sollten alle Tags (<p> ...</p> und <br> sowie <hr>) verwendet werden.
</WRAP>

==Titel im Body-Tag, unterschiedlich grosse Überschriften (headers) ==
<code html>
 <h1>Dies ist ein Titel</h1> 
</code>
Ein auf der Website als Titel sichtbarer Text kann mit dem Tag <h1> für einen sehr grossen Titel, <h2> für einen etwas kleineren Titel etc eingefügt werden. Dies ist bis <h6> möglich. Vor und nach diesen Tags wird automatisch ein Zeilenumbruch erzeugt.

<WRAP nicebox green>
**Auftrag**:  Erstellen Sie einen Titel im Body-Bereich der Datei.
</WRAP>
==Aufzählungen==
<code html>
<ul>
  <li>Listenpunkt</li>
  <li>Listenpunkt</li>
  <li>Listenpunkt</li>
</ul>  
</code>
Die beiden Tags <ul> ...</ul> und <ol>...</ol> definieren unsortierte (**u**nsortet) oder sortierte Listen (**o**rdered **l**ists). Unsortiert bedeutet eine Aufzählung und sortiert wäre eine nummerierte Liste.
Jeder Listenpunkt wird in ein <li>...</li> verpackt. 
<WRAP nicebox green>
**Auftrag**:  Erstellen Sie eine Aufzählung im Body-Bereich der Datei, dies sollte auch inhaltlich in einem sinnvollen Zusammenhang stehen, so dass sich die Seite langsam füllt. 
</WRAP>
==Bild==
<code html>
<img src="bildname.jpg" alt="alternativer Text hier schreiben" height="Höhe angeben" > 
</code>
Mit dem Tag <img> wird zum einbinden von Bildern benutzt. Ein img-Tag beinhaltet den alle Informationen, wie der Name und optional auch die Grösse oder einen alternativen Text, falls das Bild nicht geladen werden kann. Auch andere Angaben können gemacht werden. Siehe [[https://www.w3schools.com/html/html_images.asp|hier]].
<WRAP nicebox green>
**Auftrag**:  Finden Sie auf dem Netz ein Bild, das zu Ihrem Text passt. Laden Sie dies herunter und speichern Sie dieses Bild **am gleichen Ort** wie die Datei ''aufgabe1.html''. Kopieren Sie die Bildquelle in den Zwischenspeicher. Fügen Sie das Bild mit Hilfe des <img> Tags in die Website ein.
</WRAP>
==Links==
<code html>
 <a href="https://new.cscfr.ch/index.php/de/">Dies ist der Link zum Kollegium</a> 
</code>
Einen Link kann mit dem Tag <a>...</a> eingefügt werden (a für anchor). Dieser Tag besteht wieder aus zwei Teilen. Der Link wir in den Start-Tag eingefügt, zwischen den Tag-Teilen steht der Text, welcher angezeigt werden soll. Dabei wird der Link an sich mit ''href='' gekennzeichnet, href kann als hyperlink-refenence gedeutet werden. 
<WRAP nicebox green>
**Auftrag**:  Geben Sie mit Hilfe des Tags <a>...</a> den Link der Bildquelle oberhalb oder unterhalb des Bildes an. 
</WRAP>

== Tabellen==
<code html>
<table> 
  <tr> 
    <th>Kopfzelle 1</th>
    <th>Kopfzelle 2</th>
  </tr>
   
  <tr>
    <td>Datenzelle 1</td> 
    <td>Datenzelle 2</td>
  </tr>

  <tr>
    <td>Datenzelle 3</td> 
    <td>Datenzelle 4</td>
  </tr>
</table>
</code>
Eine Tabelle kann mit dem Tag ''<table> ...</table>'' eingefügt werden, in diesem Tag gibt es wie "Untertags" welche die Tabellenzeilen <tr> (tablerow) oder auch die Tabellenfelder <td> (tabledata) kennzeichnen. Das Tag <table> beinhaltet <tr>-Tags diese wiederum beinhalten <td>-Tags. Dies die Verschachtelung. Probieren Sie dies am besten aus! Achtung: Der Styl der Tabelle werden wir später verändern (borders, background,...)
<WRAP nicebox green>
**Auftrag**:  Fügen Sie eine kleine Tabelle mit Informationen zum gegebenen Rohstoff in das Html-Dokument ein. Dabei sollte auch auf die Quellenangabe geachtet werden.
</WRAP>

==Text formatieren - Fett, Kursiv,...==
<code html>
<em>betont (emphatisch)</em>
<strong>stark betont</strong>
<sup>hochgestellt</sup>  
<sub>tiefgestellt</sub> 
</code>
Im obigen Beispiel sind einige verschiedene Textdekorationen aufgelistet, so zum Beispiel <em>-kursiv, oder <strong>-fett,  oder auch <sup>-hochgestellt... etc.
<WRAP nicebox green>
**Auftrag**:  Nutzen Sie diese kleinen Formatierungselemente, um in Ihrer Übungsseite einiges übersichtlicher und besser zu gestalten. 
</WRAP>
=== Head-Tags==
Neben den Tags im Body können auch einige Head-Tags sehr wichtig werden. 
==Title==
Dieser Tag kann genutzt werden, um den Titel der Seite zu definieren. //Dieser steht nicht in der Webseite selbst, sondern wird bei den meisten Browsern im „Tab“ angezeigt.// Der Title-Tag gehört immer in den Head-Teil des Dokumentes.

== Meta==
Der Meta-Tag <meta> liefern Metadaten über das HTML-Dokument, dies wären beispielsweise die Beschreibung der vorliegenden Seite, Schlüsselwörter für den Index einer Suchmaschine, den Autor und die Charakterkodierung. Innerhalb dieses Tags können Umlaute von der Website richtig dargestellt werden. Dies gehschieht mit 
<code html>
<meta charset="UTF-8">
</code> 
Mit ''<meta name="description" content="Beschreibung der Seite">'' kann eine Beschreibung der Seite eigefügt werden.
Für weitere Metatags, können Sie [[https://wiki.selfhtml.org/wiki/HTML/Elemente/meta |hier]] nachschauen. 
== Link im Head ==
Wenn das Stylesheet dazugeladen werden muss, oder auch andere Dateien - wie json-Dateien dazugeladen werden müssen, dann geschieht dies mit dem Link-Tag <link>. Beispielsweise <code html> <link rel="stylesheet" href="styles.css"> </code>

Diese Tags helfen dabei, die Webseite korrekt darzustellen, ihre Funktionalität zu gewährleisten und sie für Suchmaschinen und Benutzer zugänglicher zu machen.
<WRAP nicebox green>
**Auftrag**:  Fügen Sie im head mindestens die Sonderzeichendarstellung ein. 
</WRAP>
====CSS====
Da nun für jede Unterseite hier das Layout und das Design der Seite wieder neu eingefügt werden müsste in jeder html-Datei, ist man dazu übergegangen, eine Trennung von Stil und Inhalt vorzunehmen. Dadurch erhöht sich unter anderem die Effizienz.
Diese Layout-Dateien werden CSS, oder **Cascading Style Sheets** genannt und sind ein wesentlicher Bestandteil der Webentwicklung, der Ausdruck **Cascading Style Sheets** kann mit stufenförmig, geschachtelte Stilvorlage. Eine CSS-Datei enthält das Design und Layout von Webseiten. Die HTML-Datei ist nur noch für die Struktur und den Inhalt zuständig und CSS für das Design zuständig. Dadurch erreichen wir ein konsistentes Erscheinungsbild und erleichtert die Wartung, da einheitliche Stile für mehrere Seiten festgelegt werden können.
\\
Um nun die CSS-DAtei einzubinden, sollte wie schon weiter oben erwähnt, eine Verlinkung von der HTML-Seite zur CSS-Seite passieren.
<code html>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styling.css" media="screen" />
    </head>
    <body>
    
    </body>
</html>
</code>

Dabei muss das CSS nun ''styling.css'' heissen und am gleichen Ort abgespeichert sein wie die Seite, die auf dieses Stylesheet verweist. 
Das Stylesheet selbst sieht anders aus. Es enthält keine html-Elemente. 
<code css>
h1{
  color:blue;
  font-size: 35px; 
}
p{
  color: green;	
}
</code>
<WRAP nicebox green>
**Auftrag**:  
  - Erstellen Sie eine im Moment noch leere Datei namens ''styling.css'' im gleichen Ordner wie die Datei ''aufgabe1.html''. 
  - Fügen Sie anschliessend eine Verlinkung zum Stylesheet ein wie oben beschrieben. Kopieren Sie den Inhalt des obigen Beispiels in die CSS-Datei. Was passiert mit der Datei ''aufgabe1.html'' in der Browseransicht? 
  - Verändern Sie mit Hilfe des CSS die Grösse und Farbe der Überschriften. 
  - Verändern Sie mit Hilfe des CSS die Hintergrundfarbe der Seite.
  - Zentrieren Sie mit Hilfe des CSS  Sie das Bild
  - Verändern Sie mit Hilfe des CSS den Zeichenabstand (letter-spacing) der Aufzählung auf 3 px.
  - Verändern Sie mit Hilfe des CSS die Tabelle (Linien in der Tabelle etc...)
  - Werden Sie kreativ! ;)
Um diese und noch weitere Erweitungen des Layouts Ihrer Beispielseite im CSs durchzuführen, nutzen Sie [[https://www.w3schools.com/css/ |diese Seite]].
</WRAP>

==DIV-CONTAINER ==
Was ist ein Div-Container?
Schauen Sie das folgende Lernvideo!
{{youtube>7ZOz0aHbqsY}}
Mit dem Div-Tag können Sie Block-Elemente ein, in das Sie mehrere andere Elemente einschließen können. Alles, was zwischen diesem Start-Tag und dem abschließenden End-Tag steht, wird als Teil des Bereichs interpretiert. 
Weitere Informationen finden Sie [[https://www.w3schools.com/html/html_div.asp |hier]].

== Unterseiten - Seiten verlinken ==
<code html>
<!DOCTYPE html>
<html>
	<head>
		<title>...</title>
		<meta charset="UTF-8"/>
                <link rel="stylesheet" type="text/css" href="styling.css" media="screen" />
	</head>
	<body>
		<div id="menu">
                    <a href="Seite1.html">Hautpseite</a><br/> 
		    <a href="Seite2.html">Seite 2</a><br/>
		    <a href="Seite3.html">Seite 3</a><br/> 
		</div>
                <div id="main">
		    <h1>Hauptseite</h1>
		    <p>...</p>
                </div>
	</body>
</html>
</code>
Wie kann nun eine Website mit einer anderen Unterseite verlinkt werden? Im obigen Beispiel ist ein Menubereich definiert, welcher auf zwei Unterseiten (Seite2.html und Seite3.html) verweist. Hier ist es wichtig, dass diese beiden Unterseiten existieren und sich diese html-Dateien im gleichen Ordner befinden wie die Hauptseite, ansonsten muss der Pfad (Name der Seite zwischen den Anführungszeichen) angepasst werden. 
<WRAP nicebox green>
**Auftrag**:  
  - Erstellen Sie zwei im Moment noch leere Datei namens ''seite2.html'' und ''seite3.html'' im gleichen Ordner wie die Datei ''aufgabe1.html''. 
  - Kopieren Sie anschliessend den Div-Teil des Menues wie oben angegeben ein. 
  - Gestalten Sie mit weiteren Div-Elementen (Main oder Header oder Right ...) die Seiten. 
Wenn Sie das Menue noch weiter gestalten möchten, finden Sie viel Hilfe auf [[https://www.w3schools.com/css/css_navbar.asp |dieser Seite]].
\\
Zu Div-Elementen allgemein finden Sie Rat [[https://www.w3schools.com/html/html_div.asp | hier]].
</WRAP>
 
Ob jetzt das Div-Element ein Menue beinhaltet oder einen header- oder footer-Teil der Website als Bereich speziell formatiert werden soll, kann dann für jedes div-Element einzeln erfolgen. Beispielsweise kann im div-Element jeweils im CSS Länge, Breite, Position, Hintergrund, Textfarbe oder -position und vieles mehr festgelegt werden. 
<code css>
#meindivElement {
  border: 5px outset red;
  background-color: lightblue;    
  text-align: center;
  margin-left:30%; 
}
</code>
In der html-Datei muss dann entsprechend nur ein <''div id="meindivElement"''> <''/div''> um die entsprechende Textstelle oder <color #ed1c24>Text-Bild -Tabellen...-Stelle</color> gepackt werden. 
<code html>
<div id="meindivElement ">
  Text-Bild -Tabellen...-Stelle: hier schreiben Sie alles, was innerhalb dieses div-Elements formatiert werden muss. Ein div-Tag umfasst diese Stelle.   
</div>
</code>


<WRAP nicebox green>
**SPICK**\\ 
Erstellen Sie ein Spick mit allen wichtigen HTML - Befehlen.
</WRAP>

[[gf1:start|Start]]