Embed Size (px)
DESCRIPTION
Präsentation über HTML mit geschichtlichen Daten und Einführung der Basics.
Citation preview
HTML (Hypertext Markup Language)
GliederungAm Anfang war HTML…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
Am Anfang war HTML…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
Der Lebenslauf von HTMLSeit 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.
Das erste HTML-DokumentWindows-Editor genügt als SoftwareStart → Programme → Zubehör → Editor
Dateiendung: .html oder .htm (Bsp.: beispiel.html)
Datei → Speichern Unter → beispiel.html
GrundwissenGrundgerüst:
<html><head><title></title></head><body></body></html>
• Tag: <title>schuelerVZ | Bist du schon drin?</title>
• Funktion: Name des Browserfensters festlegen
• Tags haben gewisse Funktionen und Eigenschaften
Eigenschaften von TagsJeder Tag kann Eigenschaften habenBsp.:
<img src=„testbild.jpg“ height=„500“ widht=„300“>
Das eingebunden Bild heißt „testbild.jpg“, soll im Browser 500Pixel hoch sein und 300Pixel breit.
Hierarchie von HTML-TagsLegt fest, 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
Einschub: DoctypeSteht ganz am 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 mehr
Schlichtes Doctype Bsp.:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Nicht zwingend erforderlich
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
Eigenschaften:Eigenschaft Beispiel Möglichkeiten
Align (Textausrichtung)
<p align=„center“></p>
Center, left, right
Size (Schriftgröße) <font size=„5“></font> Verschiedene Größen
Color (Schriftfarbe) <font color=„yellow“></font>
Yellow, Red, Green, Blue…
Face (Schriftart) <font face=„arial“></font>
Arial, Verdana, Times New Roman,…
Tabellen in HTMLDurch Tabellen 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 wunderbar
Grundgerüst von Tabellen: <table>
<tr> <th></th></tr><tr> <td></td>
</tr> </table>
Hierarchie einer Tabelle
Tabelle Übersicht<table></table>
<tr><th></th></tr>
<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> = „table row“ – Leitet eine Tabellenreihe ein<th> = „table header“ – Element zum definieren einer Kopfzeile<td> = „table data“ – Hier darf der Inhalt reingeschrieben werden
Eigenschaften von TabellenBorder: Dicke des Rahmen der Tabelle in PixelWidth: Breite der Tabelle in PixelHeight: Höhe der Tabelle in PixelCellpadding („Zellpolster“): Abstand zw. Zellinhalt
und Zellrand in PixelCellspacing („Zellabstand“): Zellabstand in PixelBsp.:
<table heigt=„500“ width=„500“ border =„1“ cellpadding=„0“ cellspacing=„0“><tr><td></td></tr></table>
