Structure in HTML pages · Structure between HTML pages · Link types · Images · Example · Homework · Links · Tools

Structure in HTML pages¶

(almost) every HTML tag has to be opened and closed, e.g. <strong> ... </strong>
exception: single tags can be written like this: @ or @<br/>
every tag is a container and can have more containers or content inside

Structure between HTML pages¶

The structure of a whole Website consists of the links between the pages

Link types¶

Local relative link: <a>To the content</a>
Local relative link: <a>To a subdir</a>
Local absolute link: <a>To this special directory</a>

Universal absolute link: <a href="http://www.edition1.net/dangerous/bilder.html">To the pictures</a>

Images¶

Tag example: <img alt="Dangerous" />

Example of a simple HTML page¶

Example file name: “index.html” (http://http://www.edition1.net/dangerous/index.html)

<html>
<head>
  <meta name="Author" content="Alexander Altmann">
  <title>Dangerous - Das Musikvideo</title>
  <link rel="stylesheet" type="text/css" href="dangerousstyle.css" media="all" />
</head>

<body>

<img alt="Dangerous" width="400" height="86" src="schrift_dangerous_p400.png" />
<h3>Das Musikvideo</h3>

<div style="width: 62%">
Willkommen auf den Webseiten zum Musikvideo &quot;Dangerous&quot; von Alexander Altmann und Theresa Hohaus.<br>
<br><br>

<p>
| Start | <a href="inhalt.html">Inhalt</a> | <a href="entstehung.html">Entstehung</a> | <a href="video.html">Das Video</a> | <a href="bilder.html">Bilder</a> | <a href="dank.html">Dank</a> |  <a href="kontakt.html">Kontakt</a> |<br>
</p>

</div>
</body>
</html>

Homework:¶

Create at least two HTML pages linking to each other and linking to the other projects of this course. Embed an image into one of the pages.

Links:¶

SelfHTML-Project: http://http://www.selfhtml.org/

Tools:¶

Text editor with syntax highlighting: mEdit (Linux & Windows): http://http://mooedit.sourceforge.net//
FTP-Client: FileZilla (Linux, Mac & Windows): http://http://filezilla-project.org//
Web-Browser: Mozilla Firefox (Linux, Mac & Windows): http://http://www.mozilla.com//
h2. * Graphics programm: GIMP (Linux, Mac & Windows): http://http://www.gimp.org//

level up: webdesign