Html-Kurs: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (17 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 2: | Zeile 2: | ||
===Willkommen beim kleinen HTML-Workshop=== | ===Willkommen beim kleinen HTML-Workshop=== | ||
| − | '''Was ist HTML?'''<p> HTML ('''H'''yper'''t'''ext '''M'''arkup '''L'''anguage) ist ''die Seitenbeschreibungssprache'' des Internets. Letztlich ist in ihr '''jede Internetseite''' geschrieben und kann auf Rechtsklick auch angesehen werden. Sie bestimmt genau, welches Objekt oder Bild, welcher Text oder Link wohin gehört. Der Browser liest den sog. HTML-Quelltext, führt die Anweisungen aus und ordnet alles so an, wie Ihr es dann letztlich auf dem Bildschirm seht (oder als Autor sehen wollt). Das INTERNET besteht aus Milliarden von Seiten, ist also ein gigantisches Projekt mit allen möglichen Anwendungszwecken. Entsprechend gibt es zahllose Erweiterungen für spezielle Zwecke (CSS, XML, PHP, JavaScript, ...). Das übersteigt bei Weitem die Möglichkeiten der Schule. Dieser kleine Kurs hier gibt nur einen Einblick in die Arbeitweise von HTML. Damit kann man schon sehr nette statische Seiten erstellen und Projekte verwirklichen. Wollt Ihr einen Benutzerdialog integrieren, macht im Anschluss mit dem kleinen [[JavaScript | + | '''Was ist HTML?'''<p> HTML ('''H'''yper'''t'''ext '''M'''arkup '''L'''anguage) ist ''die Seitenbeschreibungssprache'' des Internets. Letztlich ist in ihr '''jede Internetseite''' geschrieben und kann auf Rechtsklick auch angesehen werden. Sie bestimmt genau, welches Objekt oder Bild, welcher Text oder Link wohin gehört. Der Browser liest den sog. HTML-Quelltext, führt die Anweisungen aus und ordnet alles so an, wie Ihr es dann letztlich auf dem Bildschirm seht (oder als Autor sehen wollt). Das INTERNET besteht aus Milliarden von Seiten, ist also ein gigantisches Projekt mit allen möglichen Anwendungszwecken. Entsprechend gibt es zahllose Erweiterungen für spezielle Zwecke (CSS, XML, PHP, JavaScript, ...). Das übersteigt bei Weitem die Möglichkeiten der Schule. Dieser kleine Kurs hier gibt nur einen Einblick in die Arbeitweise von HTML. Damit kann man schon sehr nette statische Seiten erstellen und Projekte verwirklichen. Wollt Ihr einen Benutzerdialog integrieren, macht im Anschluss mit dem kleinen [[JavaScript Kurs]] weiter. Für Einbindung eines Serverdialogs benutzt PHP.<p> |
| − | '''Was brauch ich, um HTML zu lernen?'''<p>Ihr lernt hier, einfache Internetseiten zu erstellen. Dazu braucht Ihr keine Programme außer einen '''Texteditor''' und einen '''Browser'''. Aber das ist Teil des Betriebssystems und hat ja eh jeder kostenlos zur Verfügung. ... und einen Ordner, in dem Ihr Eure Seite abspeichern und anschauen könnt. ... soll sie jeder jederzeit "im Internet" sehen können, braucht Ihr noch eine Domain und WEB-Space. ... müsst dann nur noch Eure Seite <q>hochladen</q>. Fertig!<p> | + | '''Was brauch ich, um HTML zu lernen?''' (... nichts weiter als diese Seite) <p>Ihr lernt hier, einfache Internetseiten zu erstellen. Dazu braucht Ihr keine Programme außer einen '''Texteditor''' und einen '''Browser'''. Aber das ist Teil des Betriebssystems und hat ja eh jeder kostenlos zur Verfügung. ... und einen Ordner, in dem Ihr Eure Seite abspeichern und anschauen könnt. ... soll sie jeder jederzeit "im Internet" sehen können, braucht Ihr noch eine Domain und WEB-Space. ... müsst dann nur noch Eure Seite <q>hochladen</q>. Fertig!<p> |
Viel Spaß beim Erstellen von WEB-SITES!<p> | Viel Spaß beim Erstellen von WEB-SITES!<p> | ||
| Zeile 12: | Zeile 12: | ||
Ich führe hier ausschließlich frei kopierbare Beispielseiten auf, deren kompletter Code in der anzeigenden Site enthalten ist, die also keinerlei ausgelagerte Dateien oder Zugriffe auf externe Bibliotheken benötigen. Ihr könnt die Seiten daher alle leicht erkunden, an Eure Bedürfnisse anpassen, in der Schülergalerie stöbern (die als Vorlagen nutzen) und alles auf Eueren PC laden. Alles ist einfach, überschaubar und frei:<p> | Ich führe hier ausschließlich frei kopierbare Beispielseiten auf, deren kompletter Code in der anzeigenden Site enthalten ist, die also keinerlei ausgelagerte Dateien oder Zugriffe auf externe Bibliotheken benötigen. Ihr könnt die Seiten daher alle leicht erkunden, an Eure Bedürfnisse anpassen, in der Schülergalerie stöbern (die als Vorlagen nutzen) und alles auf Eueren PC laden. Alles ist einfach, überschaubar und frei:<p> | ||
| − | <pre>Site | + | <pre>Site anschauen > bei den meisten Browsern dann rechte Maustaste > Quelltext anzeigen (oder View Page Source) und erkunden, wie wird was erzeugt? > Datei (oder Teile) markieren, kopieren oder die ganze Seite auf dem eigenen PC speichern und anpassen.</pre> |
| − | |||
| − | |||
===Liste der Beispielseiten:=== | ===Liste der Beispielseiten:=== | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | [[ | + | : [http://www.lentner.net/schule/html/1.html Beispiel 1: Gerüst einer Site] ... unsere erste WEB-Site |
| + | : [http://www.lentner.net/schule/html/2.html Beispiel 2: Einfache Formatierungen] ... schon ein bisserl formatiert | ||
| + | : [http://www.lentner.net/schule/html/3.html Beispiel 3: Linien] ... Linien bringen Übersicht (sparsam verwendet!) ;-) | ||
| + | : [http://www.lentner.net/schule/html/4.html Beispiel 4: Listen] ... man kann eine große Vielzahl von automatischen Nummerierungen erzeugen. Da wird's langsam verzwickt! ;-) | ||
| + | : [http://www.lentner.net/schule/html/5.html Beispiel 5: Bilder einfügen] ... jetzt wird's bunt! | ||
| + | :: [http://www.lentner.net/schule/html/5a.html Beispiel 5a: Bilder - variierte Attributwerte] ... ebenso | ||
| + | :: [http://www.lentner.net/schule/html/5b.html Beispiel 5b: Bilder - relative Adressen und lokale Benutzbarkeit] ... Fakultäten | ||
| + | : [http://www.lentner.net/schule/html/6.html Beispiel 6: Links] ... zeitabhängige | ||
| + | : [http://www.lentner.net/schule/html/7.html Beispiel 7: Tabellen] ... wie ändert | ||
| + | :: [http://www.lentner.net/schule/html/5c.html Beispiel 5c: Bilder - in Kombination mit Tabellen] ... Formulare | ||
Aktuelle Version vom 28. November 2020, 20:44 Uhr
Willkommen beim kleinen HTML-Workshop
Was ist HTML?
HTML (Hypertext Markup Language) ist die Seitenbeschreibungssprache des Internets. Letztlich ist in ihr jede Internetseite geschrieben und kann auf Rechtsklick auch angesehen werden. Sie bestimmt genau, welches Objekt oder Bild, welcher Text oder Link wohin gehört. Der Browser liest den sog. HTML-Quelltext, führt die Anweisungen aus und ordnet alles so an, wie Ihr es dann letztlich auf dem Bildschirm seht (oder als Autor sehen wollt). Das INTERNET besteht aus Milliarden von Seiten, ist also ein gigantisches Projekt mit allen möglichen Anwendungszwecken. Entsprechend gibt es zahllose Erweiterungen für spezielle Zwecke (CSS, XML, PHP, JavaScript, ...). Das übersteigt bei Weitem die Möglichkeiten der Schule. Dieser kleine Kurs hier gibt nur einen Einblick in die Arbeitweise von HTML. Damit kann man schon sehr nette statische Seiten erstellen und Projekte verwirklichen. Wollt Ihr einen Benutzerdialog integrieren, macht im Anschluss mit dem kleinen JavaScript Kurs weiter. Für Einbindung eines Serverdialogs benutzt PHP.
Was brauch ich, um HTML zu lernen? (... nichts weiter als diese Seite)
Ihr lernt hier, einfache Internetseiten zu erstellen. Dazu braucht Ihr keine Programme außer einen Texteditor und einen Browser. Aber das ist Teil des Betriebssystems und hat ja eh jeder kostenlos zur Verfügung. ... und einen Ordner, in dem Ihr Eure Seite abspeichern und anschauen könnt. ... soll sie jeder jederzeit "im Internet" sehen können, braucht Ihr noch eine Domain und WEB-Space. ... müsst dann nur noch Eure Seite hochladen
. Fertig!
Viel Spaß beim Erstellen von WEB-SITES!
Ich führe hier ausschließlich frei kopierbare Beispielseiten auf, deren kompletter Code in der anzeigenden Site enthalten ist, die also keinerlei ausgelagerte Dateien oder Zugriffe auf externe Bibliotheken benötigen. Ihr könnt die Seiten daher alle leicht erkunden, an Eure Bedürfnisse anpassen, in der Schülergalerie stöbern (die als Vorlagen nutzen) und alles auf Eueren PC laden. Alles ist einfach, überschaubar und frei:
Site anschauen > bei den meisten Browsern dann rechte Maustaste > Quelltext anzeigen (oder View Page Source) und erkunden, wie wird was erzeugt? > Datei (oder Teile) markieren, kopieren oder die ganze Seite auf dem eigenen PC speichern und anpassen.
Liste der Beispielseiten:
- Beispiel 1: Gerüst einer Site ... unsere erste WEB-Site
- Beispiel 2: Einfache Formatierungen ... schon ein bisserl formatiert
- Beispiel 3: Linien ... Linien bringen Übersicht (sparsam verwendet!) ;-)
- Beispiel 4: Listen ... man kann eine große Vielzahl von automatischen Nummerierungen erzeugen. Da wird's langsam verzwickt! ;-)
- Beispiel 5: Bilder einfügen ... jetzt wird's bunt!
- Beispiel 6: Links ... zeitabhängige
- Beispiel 7: Tabellen ... wie ändert
- Beispiel 5c: Bilder - in Kombination mit Tabellen ... Formulare
