einf hrung html n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Einführung HTML PowerPoint Presentation
Download Presentation
Einführung HTML

Loading in 2 Seconds...

play fullscreen
1 / 12

Einführung HTML - PowerPoint PPT Presentation


  • 184 Views
  • Uploaded on

Einführung HTML. Materialien zur Fortbildungsreihe C für die Informatik in SII. Einführung HTML. Ziel dieser Einführung Einführung in die Erstellung von Webseiten nur so weit, wie für Projekt benötigt

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Einführung HTML' - ivria


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
einf hrung html

Einführung HTML

Materialien zur Fortbildungsreihe C für die Informatik in SII

einf hrung html1
Einführung HTML

Ziel dieser Einführung

  • Einführung in die Erstellung von Webseiten
  • nur so weit, wie für Projekt benötigt
  • weiterführend kann z.B. SelfHTML von Stefan Münzverwendet werden. http://selfhtml.teamone.de/

HTMLHypertext Markup Language

  • Seitenbeschreibungssprache.
  • HTML-Dateien sind reine Textdateien.Sie können berabeitet werden mit:
    • beliebigem Editor (z.B. Notepad)
    • WYSIWYG-Editoren
    • spezielle Editoren (Codeergänzung, Debugging, Fehleranzeige etc.)

Ziel der Einführung | HTML | PHP Coder Grundstruktur HTM-Seite>

grundstruktur einer html seite

HTML-Datei erstellt mit Notepad.

Grundstruktur einer HTML-Seite
  • Der Inhalt von HTML-Dateien steht in HTML-Elementen.
    • HTML-Elemente werden durch so genannte Tags markiert.
    • Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert.
    • Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements.
    • Tags werden in spitzen Klammern notiert.<tag> ... </tag> oder <tag Parameter> ... </tag>
    • Tags können geschachtelt sein
  • Grundgerüst einer HTML-Datei:

Dokumenttyp-Angabe: (verwendeten HTML-Version)

Header: Titel, Metatags usw. (auf Seite nicht sichtbar - Titelanzeige im Browser, Suchmaschinen)

Body: (Eigentlicher Seiteninhalt)

Auf den folgenden Folien sind im HTML-Quelltext Zeilen numeriert und werden Tags zum besseren Verständnis farbig hervorgehoben.

HTML-Elemente | Grundgerüst HTML-Quelltext>

html quelltext

HTML-Quelltext im Editor

Browseranzeige

HTML-Quelltext
  • Der HTML-Quelltext ist formatfrei.Die Formatierung des Quelltexts ist ohne Bedeutung.Das Aussehen der Seite wird ausschließlich über Tags bestimmt.

Beispiel Zeilenumbruch: Tag <br>

formatfrei | Zeilenumbruch einige Tags>

einige wichtige tags
Einige wichtige Tags
  • Überschriften <h1> </h1> bis <h6> </h6> http://selfhtml.teamone.de/html/text/ueberschriften.htm
  • Textabsatz (Paragraph) <p> </p>Fließtext, Zeilenumruch am Ende des Absatzes
  • Zeilenumbruch <br> siehe vorige Folie
  • Trennlinie <hr>
  • Textattribute <b> </b> fett, <i> </i> kursiv <u> </u> unterstrichen usw.http://selfhtml.teamone.de/html/text/physisch.htm
  • Hintergrundfarbe <body bgcolor="#CCFFFF"> oder besser <body style="background-color:#CCFFFF"> http://selfhtml.teamone.de/html/dateiweit/farben.htmhttp://selfhtml.teamone.de/html/allgemein/farben.htm
  • Kommentar <!-- Dies ist ein Kommentar -->Auch mehrzeilig. Eventuell enthaltene Tags werden ignoriert.

Überschriften | Absatz | Zeilenumbruch | Trennlinie | Textattribute | Hintergrundfarbe | Kommentar Links>

links

<a href="http://www.belwue.de/netz/"> Das BelWü-Netz </a>

URL

Verweistext

Links

Links (Verweise auf andere Dokumente) machen HTML zu Hypertext.

  • Verweise werden durch das a-Tag (anchor) mit Parameter href(Hypertext-Referenz) gebildet.http://selfhtml.teamone.de/html/verweise/definieren.htm
  • Wird in der URL kein Server angegeben, so handelt es sich um einen internen Verweis. Er bezieht sich auf eine Seite auf dem selben Server,auf dem die Seite liegt, die den Link enthält. http://selfhtml.teamone.de/html/allgemein/referenzieren.htm

Die folgenden Beispiele beziehen sich auf Links in der Basisseite usr/index.htm

href="Seite2.htm"

Im selben Ordner wie die Basisseite

href =" beispiele/beispiel1.htm"

Im Unterordner beispiele

href =" ../oben.htm"

Im übergeordneten Ordner htdocs

href =" ../sonst/seite3.htm"

Im parallelen Ordner sonst

Empfehlung: Datei- und Ordnernamen nur in Kleinschrift, ohne Leerzeichen usw.

extern | intern - gleicher Ordner - untergeordnet - übergeordnet - parallel | Namen Links>

links1
Links
  • Für Verweise auf Stellen im selben Dokument können in der HTML-Datei Anker gesetzt werden

<h2><a name="kap02">Kapitel 2</a></h2>

  • Zu den so markierten Stellen kann durch einen Link gesprungen werden. http://selfhtml.teamone.de/html/verweise/projektintern.htm

<a href="#kap02">Kapitel 2</a>

  • Bei einem Verweis kann man auch festlegen, dass die Seite in einem neuen Browserfenster geöffnet wir.http://selfhtml.teamone.de/html/verweise/definieren.htm#zielfenster

<a href="http://www.belwue.de/" target="_blank">BelWül</a>

  • Es kann auch ein Name für das Fenster angegeben werden. Wenn es ein Fenster mit diesem Namen gibt, so wird es verwendet, sonst wird ein neues Fenster angelegt

<a href="http://www.belwue.de/" target=“Netzwerk">BelWül</a>

Anker | neues Fenster | Fenstername Grafik>

grafiken einbinden

Alternativtext

<img src ="bilder/portrait.jpg" width="368" height="383"alt =" Portrait">

Größenangabe beschleunigt den Seitenaufbau. Möglichkeit zur Skalierung.

Grafiken einbinden
  • Grafiken werden mit dem img-Tag eingebunden.
  • Das img-Tag steht ohne schließendes Tag.
  • Um Bild und Text nebeneinander anzuzeigen, muss man diese in eine Tabelle einbinden. (Siehe Seite Tabellen)
  • Grafiken können auch als Verweis (anstatt Verweistext) verwendet werden. http://selfhtml.teamone.de/navigation/faq.htm#grafik_als_verweis

<a href="kontakt.htm"><img src="btn_kontakt.gif" alt="Kontakt"></a>

Img | Tabelle | Grafik als Verweis Sonderzeichen>

sonderzeichen umlaute
Sonderzeichen, Umlaute

Sonderzeichen und Umlaute werden über einen numerischen Code

(Unicode) angegeben. Für häufig benutzte Zeichen gibt es sogenannte

named entities, d.h. benannte Zeichen.

Ä &Auml; &#196; ä &auml; &#228;

Ö &Ouml; &#214; ö &ouml; &#246;

Ü &Uuml; &#220; ü &uuml; &#252;

ß &szlig; &#223; Blank &nbsp; &#160;

Beispiel: In M&uuml;nchen steht ein Hofbr&auml;uhaus.

Dort gibt es Bier aus Ma&szlig;kr&uuml;gen.

Allgemeines zu Zeichen in HTML:

http://selfhtml.teamone.de/html/allgemein/zeichen.htm

Tabelle mit Sonderzeichen:

http://selfhtml.teamone.de/html/referenz/zeichen.htm

Listen>

listen
Listen
  • Listen <ul> </ul> mit <li> </li> (unordered list)
  • Numerierte Listen <ol> </ol> mit <li> </li> (ordered List) http://selfhtml.teamone.de/html/text/listen.htm

unordered | ordered | Beispiel Tabellen>

tabellen
Tabellen

Eine Tabelle entsteht durch Kombination der folgenden Tags:

  • Tabelle <table></table> http://selfhtml.teamone.de/html/tabellen/
  • Zeile <tr></tr> (table row)
  • Kopfzelle <th></th> (table header)
  • Zelle <td></td> (table data)

Beispiel 2x3 | Grafik+Text Übung>

slide12
Übung
  • Für die Übungen verwenden Sie ausschließlich einen einfachen Texteditor (z.B. Notepad) und zur Kontrolle der Seiten den Browser.
  • Erstellen Sie eine kleine Webseite „Steckbrief“ (real oder fiktiv)
    • Überschrift
    • Bild mit Lebenslauf
    • Liste mit Hobbys
    • Meine Lieblingsseite (externer Link)
  • Entwickeln Sie die Seite schrittweise und testen Sie nach jedem Schritt mit einem Browser.
  • Verwendete Elemente:HTML-Grundgerüst mit Titel,Hintergrundfarbe, Überschrift, Liste, externer Link, Tabelle, Grafik, Umlaute

So etwa soll es aussehen

Ende