Astrid's Lernblog

::collabor::home

Letzte Aktualisierung: 2009.01.30, 13:46

Freitag, 11. April 2008
Einführung HTML (PIM-Tutorium am 9. April '08)
Astrid.Haider.Uni-Linz, 17:07h
Im Tutorium bekamen wir zuerst eine Einführung in das Thema HTML. Hier ein paar Notizen:

Wir verwenden die Html-Version 4.01 - zumindest vorerst.

<tag>

<html></html>
<br> Break; braucht keinen abschließenden Tag!
<br /> (XHTML)
<meta /><img /> (XHTML)

<html>hallo welt</html>

Bsp.: HTML-Gerüst

<html>
<head>
<title>Test Website</title>
</head>
<body>Hallo Welt</body>
</html>


Bsp.: Element:

<Elementname>
<Elementname>
Text
</Elementname>
</Elementname>


Inline-Elemente integrieren sich im Text:

<b> bold/fett
<i> italic/kursiv
<u> unterstrichen
<s> durchgestrichen
<big> groß
<small> klein
<sup> hochgestellt
<sub> tiefgestellt
<tt> wie mit Schreibmaschine getippt


Attribute:

<Elementname Attribut="Parameter">Text</Elementname>

<font face="sans-serif">Text</font>

Reihenfolge der Attribute ist willkürlich!

vlink = visited link
alink = active link (bin gerade am Draufklicken)


Entities:

ä &auml;
ö &ouml;
ü &uuml;
Ä &Auml;
Ö &Ouml;
Ü &Uuml;
ß &szlig; (sz-lig - Ligatur)
geschütztes Leerzeichen &nbsp;
& &amp;
< &lt;
> &gt;
« &raquo;
» &laquo;

ISO Latin 1 bzw. ISO 8859-1 verwenden => Encoding => Umlaute werden automatisch umgeschrieben!


Grundgerüst eines HTML-Dokuments:

Bsp.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
<p>Test Website</p>
</title>
</head>
<body>Hallo Welt</body>
</html>


<p>Ein Paragraph markiert einen Absatz. Er ist standardmäßig linksbündig ausgerichtet. Er ist ein Blockelement.</p>

Blockelement: <p>, <h1>
Inline-Elemente: <b>, <i>, <u>, <s>, <big>, <small>, <sup>, <sub>, <tt>


Ausrichtung:

<align>

<p align="right">Text steht rechts</p>

left, right, center, justify=Blocksatz


Überschriften:

<h1> bis <h6>

1=groß
6=klein

<p>Hier steht der Text und dieses <b>Wort</b>ist bold</p>

<font face="sans-serif">


weitere Attribute:

sans
monospace
fantasy

<h1><font face="sans serif" size=7" color="#9400d3">Überschrift 1<font/></h1>


Hintergrund-, Textfarbe:

<body bgcolor="blue">

<body text="#ffffff>

<body link="green" vlink="blue" alink="red">


Listen:

Ordered List:

Bsp.:

<ol>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ol>

Unordered List:

Bsp.:

<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>

Bsp.:

<ol>
<li>Grundlagen
<ol>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ol>
</li>
<li>Inhalt</li>
</ol>
<div> - Layer, Ebenen


Tabellen:

Bsp.:

<table>
<caption align="top"><!--oder bottom - Das ist ein Kommentar-->
<tr>
<th>Zelle 1</th>
<th>Zelle 2</th>
</tr>
<tr>
<th>Zelle 3</th>
<th>Zelle 4</th>
</table>

Muss bei 2. <tr> immer gleiche Zellenanzahl haben wie bei 1. <tr>!!!!!!!

Das muss jede Tabelle haben:

<table>
<tr>
<td>
</td>
</tr>
</table>

<th> table header
<caption> Tabellen Titel

horizontale Ausrichtung: <td align="right">Inhalt</td>
vertikale Ausrichtung: <td valing="top"> oder middle, bottom, baseline


Hintergrundfarben in Tabellen:

Bsp.:

<table bgcolor="blue">
<tr bgcolor="red">
<td bgcolor="yellow">Text 1</td>
<td>Text 2</td>
</tr>
</table>

<td><font color="blue">Text</font></td>


Hintergrundbild in Tabelle:

kann man überschreiben:
<table background="bild.gif">
<tr background="bild.gif">
<td background="../Bilder/bild.gif">
(.. heißt eine Ebene im Dateiordner zurück)

kann nicht überschrieben werden (normales Bild):
<img src="bild.gif">



Des weiteren hatten wir die Aufgabe einen vorgegebenen Text mittels HTML-Befehlen genauso zu gestalten wie auf der Vorlage. Der Text sollte so aussehen:

vorlage (html, 1 KB)

Dies hier ist mein mit HTML-Befehlen angereicherter Text, der diese Formatierungen erzielt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Textformatierung</title>
</head>

<body>
<h1>Blindtextbuch</h1>
<p>Also schön, <b>Guido Heffels</b>, nachfolgend meine Textempfehlung für das <i>Blindtextbuch</i>. Sie mögen denken, aus welchem <u>Anlass</u> es unbedingt eine solche poesiealbumhafte Antiquität sein muss, und genau das sollen Sie ja auch. Wenn Sie den Text lange genug mit <s>Fleiss</s> bestaunen, können Sie die <big>Nuss</big> knacken. Denn wenn mein Gag auch nicht mit schnellem <b>Auge</b> zu entdecken ist - <small>eine geduldige Seele muss die Lösung doch finden</small>. Wenn Sie es geschafft <sup>haben</sup>, dann klingeln Sie mich doch bitte noch einmal an, denn ich muss Ihnen dann noch <tt>die Headline zum Text nachsenden.</tt> Das möchte ich momentan nicht, weil dann das bescheidene <u><b><i>Geheimnis</i></b></u> dieses Blindtextes schon jetzt offenläge. Viel Spass wünscht Rainer Baginski.
PS: Eine einzige Hilfe gebe ich: Das <sub>Begleittextchen</sub> hat's nicht. Sie haben's nicht. Ich - typisch Baginski - habe es. Finden Sie es.</p>
</body>
</html>


Ergebnis:


Textformatierung


Blindtextbuch

Also schön, Guido Heffels, nachfolgend meine Textempfehlung für das Blindtextbuch. Sie mögen denken, aus welchem Anlass es unbedingt eine solche poesiealbumhafte Antiquität sein muss, und genau das sollen Sie ja auch. Wenn Sie den Text lange genug mit Fleiss bestaunen, können Sie die Nuss knacken. Denn wenn mein Gag auch nicht mit schnellem Auge zu entdecken ist - eine geduldige Seele muss die Lösung doch finden. Wenn Sie es geschafft haben, dann klingeln Sie mich doch bitte noch einmal an, denn ich muss Ihnen dann noch die Headline zum Text nachsenden. Das möchte ich momentan nicht, weil dann das bescheidene Geheimnis dieses Blindtextes schon jetzt offenläge. Viel Spass wünscht Rainer Baginski.
PS: Eine einzige Hilfe gebe ich: Das Begleittextchen hat's nicht. Sie haben's nicht. Ich - typisch Baginski - habe es. Finden Sie es.





Slicing von Fotos mittels PhotoShop haben wir auch im Tutorium durchgenommen. Es wurde uns erklärt, wie man sich Hilfslinien setzt, um das Foto zu zerlegen. Ich finde dieses Programm sehr spannend und interessant und freue mich schon darauf, was wir damit noch alles machen werden ;)

Bis zum nächsten Tutorium!

... comment