Einführungsabend Die eigene Internetseite Hypertext und html Das HTML Grundgerüst HTML-Editoren Skriptsprachen im WWW Rechtliche Absicherung Suchmaschinenoptimierung
Das HTML Grundgerüst HTML ist ein Kompromiss Weltweit unterschiedliche Computer unterschiedliche Systeme -> einheitlicher Standard = + html HTTP = Standardkommunikation für Client-Server und Computer HTML = Standardkommunikation mit dem Webbrowser
Das HTML Grundgerüst Elemente einer Seite Wie eine Hochglanzbroschüre besteht eine Seite aus Text und Bildelementen. Worin besteht der Unterschied
Das HTML Grundgerüst Elemente einer Seite Internetseiten: - wenig unterschiedliche Schriftarten - Ausgabeformat ist kein Druckformat (z.b. A4) - Seiten wirken schematisch, grafische Elemente werden sparsam eingesetzt
Das HTML Grundgerüst HTML eine Auszeichnungssprache HTML Strukturierung Einbindung CSS, Skriptsprachen und Mediadaten verborgene Zusatzinformationen Browser für Ausgabe der Inhalte zuständig lesen Daten aus und generieren die Farben, Schriftgrößen, Bildquellen usw. Grundelemente lesen alle Browser gleich. Gefahr abweichender Darstellung. Gebräuchlichste Browser: Mozilla Firefox, Google Crome, Internet- Explorer, Safari
Das HTML Grundgerüst HTML Quelltext, Quellcode Quelltext ansehen: Firefox-Browser Rechtsklick - Seitenquelltext anzeigen (Strg+U) Internet Explorer Rechtsklick - Quellcode anzeigen
Das HTML Grundgerüst Die Grundstruktur Gliederung einer HTML-Seite Eine HTML-Seite hat immer mindestens diese Grundstruktur:
Das HTML Grundgerüst HTML-Sprachelemente - TAGs HTML-Anweisung: HTML-Element, auch " TAG" genannt <tag> </tag> Die meisten Elemente haben ein einleitendes und schließendes TAG. Dazwischen: z.b. Textinhalt, andere Tags Manche Tags können/müssen ineinander verschachtelt werden.
Das HTML Grundgerüst HTML Quelltext, Quellcode Dateityp: *.html (htm, mhtml, php, asp) Bearbeitung: Texteditor HTML-Editor Online-Editor
Das HTML Grundgerüst Die Grundstruktur Gliederung einer HTML-Seite Aufgabe: Schreiben Sie einen ersten eigenen Quellcode. Öffen Sie den Editor Start Alle Programme Zubehör Editor Schreiben Sie folgendes Grundgerüst mit einem Text im "body"
Das HTML Grundgerüst Speichern Sie den Quelltext: Menü Datei Speichern (unter) Dateiname: Dateityp: Codierung: ihrname.html Alle Dateien UTF-8 Öffnen Sie die Datei aus dem Ordner heraus im Browser.
Wichtige HTML-Elemente Kommentare in HTML Notizen im Quellcode, die nicht im Browser- Fenster angezeigt werden. <!-- Kommentar --> Die Titelzeile Im head-bereich: <head> < title> Dies ist ein erster Versuch </title> </head>
Wichtige HTML-Elemente Absatzformatierung 6 verschiedene Überschriftgrößen + einfaches Absatzformat: <h1>größte Überschrift</h1> <h6>kleinste Überschrift</h6> <p>text im Absatzformat</p> <p>einfacher Zeilenumbruch<br> benötigt nur einen TAG. </p> Element <br> für einfachen Zeilenumbruch.
Wichtige HTML-Elemente Erweitern Sie den Quellcode um, Speichern Sie das Ergebnis, Browser - Ansicht aktualisieren (F5)
Wichtige HTML-Elemente Attribute Eigenschaften für HTML-Elemente stehen im einleitenden TAG bekommem mit = einen Wert in Anführungszeichen zugewiesen. <tag attribut="wert">textinhalt</tag> Beispiel: <h1 style= text-align:center">hallo Welt!</h1> <p style="color:red">manche Farben lassen sich durch</p> <p style="color:blue"> Farbnamen erzeugen.</p>
Einführungsabend Die eigene Internetseite Hypertext und html Das HTML Grundgerüst HTML-Editoren Skriptsprachen im WWW Rechtliche Absicherung Suchmaschinenoptimierung
HTML-Editoren Dienstprogramme für HTML (HTML-Editoren) Quelltextbasierend: Nur Quellcode WYSIWYG-Editoren (What You See Is What You Get): Text- + grafische Bearbeitungsfunktion verfügen Liste von HTML-Editoren: ://de.wikipedia.org/wiki/liste_von_html-editoren Beliebte WYSIWYG-Editoren Adobe Dreamweaver Visual Web Developer (Microsoft) NVU/Kompozer (Open Source)
Einführungsabend Die eigene Internetseite Hypertext und html Das HTML Grundgerüst HTML-Editoren Skriptsprachen im WWW Rechtliche Absicherung Suchmaschinenoptimierung
Skriptsprachen im WWW Client-Server HTML CSS Formatsprache für HTML - Gestaltung aller Bereiche und Elemente einer Seite - dynamisch-visuelle Effekte (hover)
Skriptsprachen im WWW Client-Server HTML CSS XHTML Erweiterung von
Skriptsprachen im WWW Client-Server HTML / XHTML CSS JavaScript Skriptsprache für HTML Dynamisches HTML Interaktion mit dem Benutzer Auswertung der Benutzereingabe Zugriff auf Benutzerumgebung (Browser) Zugriff auf HTML-Elemente und CSS- Formate (DOM) Rechen- und Datumsfunktionen
Skriptsprachen im WWW Client-Server PHP Skriptsprache für dynamische Webseiten Einbinden von Datenbanken (MySQL) Kommunikation mit dem Server Interaktion mit dem Benutzer Auswertung der Benutzereingabe Einbinden externer Textdateien Datumsfunktionen Mathematische Funktionen Erstellen Graphen und Bildern HTML / XHTML CSS JavaScript
Skriptsprachen im WWW Client-Server MySQL Datenbank- Verwaltungssystem zur Datenspeicherung für Webservices. HTML / XHTML CSS Die MySQL-Datenbank befindet sich auf dem Server und wird dort verwaltet. PHP = Schnittstelle, SQL- Befehle können in die Sprache eingebunden werden. Viele CMSe basieren auf dieser Technologie. PHP JavaScript
Skriptsprachen im WWW Client-Server PHP MySQL HTML / XHTML CSS XML Extensible Markup Language hierarchisch strukturierte Datenstruktur, häufig alternativ zur Datenbank JavaScript Exportformat für Datenbanken und Tabellenprogrammen (Office-Access, Excel) AJAX (via XHTML)
Skriptsprachen im WWW Client-Server PHP MySQL HTML / XHTML CSS JavaScript XML AJAX "Asynchronous JavaScript and XML" Erweiterung von JavaScript mit XHTML. Grundlage des Web 2.0 Einbinden von XML-Dateien Kommunikation mit dem Server Einbinden von PHP-Skripten und anderen Daten
Skriptsprachen im WWW Client-Server PHP MySQL HTML / XHTML CSS JavaScript Java-Applikation XML AJAX Medien-Objekte z.b. Flash, flv, mp3
Skriptsprachen im WWW Client-Server PHP MySQL HTML / XHTML CSS Weitere Server- Skriptsprachen im Internet: Perl Python Ruby Rubyonrail XML AJAX JavaScript Java-Applikation Medien-Objekte
Skriptsprachen im WWW Client-Server PHP MySQL HTML / XHTML CSS Weitere Server- und Skriptsprachen Andere Datenbanksysteme JavaScript Java-Applikation XML AJAX Medien-Objekte