Tools · Information · Example · Homework · Links
What tools do we need?¶
- 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//
- Graphics-Programme: GIMP (Linux, Mac & Windows): http://http://www.gimp.org//
What information do we need?¶
- URL of the webspace we are using: http://http://kujiendeleza.refugeesemancipation.com// (Features: PHP)
- information to connect to the FTP/Web server
Host: kujiendeleza.refugeesemancipation.com
User: xxx
Password: xxx
Directory: /kujiendeleza (IMPORTANT: Do not change files in other directories!)
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 "Dangerous" 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 your first HTML page with a page title refering to your own project, a welcome message and a link to someone else.
Links:¶
Using Filezilla: http://http://wiki.filezilla-project.org/Using
First steps in the GIMP: http://http://www.gimp.org/tutorials/Lite_Quickies//
Graphics file formats: http://http://en.wikipedia.org/wiki/Graphics_file_format
HTML Tutorial
HTML Primer
h2. HTML Code Tutorial
level up: webdesign
