45-mal heruntergeladen
Einführung HTML (Geschichte + Basics)
- 1. HTML (Hypertext MarkupLanguage)
- 2. GliederungAm Anfang warHTML…Der Lebenslauf von HTMLDas erste HTML-DokumentGrundwissen (Basis-Tags z.B. <title></title>)Eigenschaften von TagsHierarchie von HTML-TagsEinschub: DoctypeTextstrukturierung in HTMLTabellen in HTMLWir gestalten eine Website
- 3. Am Anfang warHTML…HTML ist keine ProgrammierspracheHTML = Hypertext Markup LanguageEine Weiterentwicklung von SGML (Structured Generalized Markup Language)Baut auf dem HTTP-Protokoll aufMit HTML lassen sich Strukturen, der Inhalt und das Verhalten eine Dokuments beschreibenDieses Struktur wird durch Tags zugewiesenDer Browser (z.B. Firefox) setzt diese Struktur optisch um
- 4. Der Lebenslauf vonHTML Seit der Entwicklung 1990 wurde an HTML stets immer weitergearbeitetHTML 1.0: Darstellung von Grafiken, Überschriften, Dokumenten und Verweisen (z.B. Links)HTML 2 (1995): Dazu kamen z.B. Sonderzeichen, jedoch keine großartigen NeuerungenHTML 3.2 (1997): Neuerungen wie Tabellen und Container (<table> & <div>) HTML 4 & 4.01 ( Version 4 veröffentlich am 18.2.1998 und Version 4.01 am 24.12.1998):Optische Gestaltung wurde auf CSS verlegt. Dies ist die aktuelle Version von HTML.
- 5. Das erste HTML-DokumentWindows-Editorgenügt als SoftwareStart -> Programme -> Zubehör -> Editor
- 6. Dateiendung: .html oder.htm (Bsp.: beispiel.html)Datei -> Speichern Unter -> beispiel.html
- 7.
- 9. Tags haben gewisseFunktionen und Eigenschaften
- 10. Tag: schuelerVZ |Bist du schon drin?
- 11. Funktion: Name desBrowserfensters festlegenEigenschaften von TagsJeder Tag kann Eigenschaften habenBsp.: <imgsrc=„testbild.jpg“ height=„500“ widht=„300“>Das eingebunden Bild heißt „testbild.jpg“, soll im Browser 500Pixel hoch sein und 300Pixel breit.
- 12. Hierarchie von HTML-TagsLegtfest, wann welche Tags vorkommen dürfen<head> ist das 1. Stockwerk<body> ist das ErdgeschossDa der Tag <title> nur im <head> stehen darf, hat es sozusagen ein Zimmer im 1. Stockwerk
- 14. Einschub: DoctypeSteht ganzam Anfang des HTML-CodesGibt Angaben über die HTML-Version in der die Website geschrieben wurdeAußerdem über die Sprache, den Verwendungszweck der Website, das Erstellungsdatum und vieles mehrSchlichtes Doctype Bsp.:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Nicht zwingend erforderlich
- 15. Textstrukturierung in HTML<p>kennzeichnet einen Textabschnitt<font> Textgestaltung (z.B. Schriftart, Schriftgröße…)<h1> eine Überschrift 1. Größenordnung<h2> 2. Größenordnung, <h3> 3. Größenordnung…<u> unterstreicht einen beliebigen Textabschnitt<b> druckt einen bestimmten Abschnitt fett<i> druckt die Schriftart in kursiv
- 16.
- 17. Tabellen in HTMLDurchTabellen können ganze Webseiten strukturiert und gestaltet werdenEigentlich nicht der beste Weg, da Tabellen nicht gemacht wurden um Webseite zu gliedern, aber es ist recht einfach und funktioniert wunderbarGrundgerüst von Tabellen: <table> <tr> <th></th> </tr> <tr> <td></td> </tr> </table>
- 18.
- 19. Tabelle Übersicht<tr><th></th></tr><table></table><tr><td>Englisch</td><td>one</td><td>two</td><td>three</td><td>four</td></tr><tr><td>Deutsch</td><td>Eins</td><td>Zwei</td><td>Drei</td><td>Vier</td></tr>Legende:<table> =Grundkasten einer Tabelle<tr> = „tablerow“ – Leitet eine Tabellenreihe ein<th> = „tableheader“ – Element zum definieren einer Kopfzeile<td> = „tabledata“ – Hier darf der Inhalt reingeschrieben werden