IT-Academy Logo
Sign Up Login Help
Home - Internet - Webdesign - HTML - HTML Crashkurs



HTML Crashkurs

Hier sind alle wichtigen Befehle mit kurzen Erklärungen aufgeführt. Mit Hilfe dieses Kurses sollte der Leser nachher HTML verstehen und eine einfache eigene Website erstellen können.


Autor: Gabi Schütz (similie)
Datum: 16-10-2002, 22:55:19
Referenzen: keine
Schwierigkeit: Anfänger
Ansichten: 9471x
Rating: 8.4 (5x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Grundaufbau einer HTML- Seite:

<html>
	<head>
		<title> Der Titel deiner Seite </title>
	</head>
<body> 
	Hier kommt der ganze Quellcode und dein Text hinein...
</body>
</html>
Kurze Erklärung: Jeder HTML- Befehl wird mit diesen Zeichen < > eröffnet und durch </> wieder geschlossen.

Alle nachfolgenden Befehle werden zwischen <body> und </body> im HTML- Grundgerüst eingesetzt! Du kannst diese Befehle sehr gut im Editor schreiben. Diesen findest du bei Windows unter Start, Programme, Zubehör, Editor. Um deine Internetseite anzuschauen, musst du deinen Quellcode nur noch unter einem x- beliebigen Namen.htm abspeichern. Wichtig ist einfach die Endung .htm oder .html

Textdarstellungsarten:

  • eine neue Zeile beginnen: <br>
  • einen neuen Absatz beginnen: <p>
  • fette Schrift: <b>
  • kursive Schrift: <i>
  • unterstrichene Schrift: </u>
  • Ueberschriften: <h1> <h2> <h3> <h4> <h5> <h6>
  • Schriftart und Grösse definieren: <font face="Arial" size="2" color="red">
Kurze Erklärung: Jeder dieser Befehle muss mit wieder geschlossen werden. Will man zum Beispiel "Hallo" fett schreiben, dann schreibt man Hallo. Will man "Hallo" in der Schriftart Arial Black haben und blau dargestellt werden soll, dann schreibt man folgenden Code: <font face="Arial Black" color="blue">Hallo</font>.

Bilder einbinden:

  • Zuerst musst du dein Bild, dass du einbinden willst, in den gleichen Ordner kopieren, in dem sich auch das HTML File befindet. Danach kannst du folgenden Code im Body einfügen: <img src="deinBild.gif">
    Dabei musst du achten, dass du die richtige Endung der Datei angibst. Also ob es .gif ist, oder .jpg u.s.w.
  • Bild mit Textbeschreibung: <img src="deinBild.tif" alt="Das ist ein Bild von einem Haus">
    Dieser Text erscheint, wenn man mit der Maus über das Bild fährt. Kann das Bild nicht geladen werden aus einem technischen Grund, erscheint ebenfalls dieser Text.
  • Bild einbinden und Grösse definieren: <img src="deinBild.jpg" width="50" height="100">
  • Bild mit einem Link: <a href=http://www.deinegewünschteURL.de><img src="deinBild.gif" border="0"> </a>
    Mit Border="0" definierst du, dass dein Bild keinen Rahmen hat.
Hintergrund:

Kurze Erklärung: Die Befehle für den Hintergrund werden direkt in den <body> Befehl geschrieben!

  • Eine Hintergrundfarbe: <body bgcolor="#FFEEFF">
  • Ein Hintergrundbild (wobei die Grafik wieder im gleichen Ordner sein muss wie das HTML File): <body background="meinBild.gif">
  • Fixieren des Hintergrundbildes, so dass es beim Scrollen nicht "mitscrollt": <body bgproperties="fixed" background="meinBild.jpg">
Kurze Erklärung: Die Farben werden im HTML in hexadezimaler Form eingegeben. Eine Aufstellung der Farbcodes findet man zum Beispiel hier: href="http://www.webbersmag.com/webmagnews/berichte/hexidezimalcodes.php

Links:

Für einen Link setzt man folgenden Quellcode ein: <a href="http://www.deineAdresse.de">Text der verlinkt werden soll</a>

Listen:

  • Liste mit Punkten: <ul> <li>Text</li> </ul>
  • Liste mit Quadraten: <ul type="square"> <li>Text</li></ul>
  • Liste mit Links: <ul type="circle"> <li> <a href="http://www.dieAdresse.com">Text der verlinkt werden soll</a></li></ul>
  • Nummerierte Liste: <ol> <li>Text der unter 1. Stehen soll</li> <li>Text der unter 2. Stehen soll</li> </ol>
Tabellen:

<table border="1">
	<tr>	
		<td> 1. Zeile der 1. Spalte </td>
		<td> 1. Zeile der 2. Spalte </td>
	</tr>
	<tr>
		<td> 2. Zeile der 1. Spalte </td>
		<td> 2. Zeile der 2. Spalte </td>
	</tr>
</table>
Kurze Erklärung: Am Anfang ist das Erstellen einer Tabelle in HTML vielleicht etwas komplex. Am einfachsten lernt man dies, wenn man einfach mal etwas ausprobiert. Mein Beispiel oben kann natürlich beliebig erweitert werden mit einer 3. Zeile, oder einer 3. Spalte u.s.w. Mit Table border="1" wird definiert, dass die Tabelle einen Rahmen mit einer Grösse von 1 hat. Eine Tabelle ohne Rahmen wäre dann Table border="0".

Frames:

<html>
<head>
	<title> Jetzt mit Frames!! </title>
</head>

<frameset cols="60%,40%" frameborder="0">
	
	<frame src="name1.htm" name="name1">

<frameset rows="30%,70%">

	<frame src="name2.htm" name="name2">
	<frame src="name3.htm" name="name3">

</frameset>
</frameset>
</html>
Kurze Erklärung: Eine Seite mit Frames zu erstellen ist nicht ganz einfach und erfordert oft viel Geduld. Hier einige Erklärungen: mit <frameset cols> werden solche Frames erstellt:



mit <frameset rows> werden solche Frames erstellt:



mit <frameset cols oder rows="60%,40%"> wird das Seitenverhältnis der beiden Frames in % angegeben. Um ein optimales Ergebnis zu erhalten, empfehle ich auch hier wieder: ausprobieren.

Und für was werden Frames jetzt gebraucht? Frames dienen dazu, die Seite übersichtlicher zu machen. Oftmals werden Seiten in 3 Frames aufgeteilt. Hier ein kleines Beispiel dazu:

<html>
<head>
<title>Eine Seite mit Frames</title>
</head>

<frameset rows="15%,85%" border="1">
	<frame src="oben.htm" name="Oben">

		<frameset cols="18%,82%">
			<frame src="navigation.htm" name="Navigation">
			<frame src="Hintergrund.htm" name="Hintergrund">
		</frameset>
</frameset>

</html>
Damit dieses Beispiel jetzt funktioniert müssen natürlich die Seiten oben.htm, navigation.htm und Hintergrund.htm bereits erstellt sein und im gleichen Ordner wie die Datei mit den Frames.

Angenommen, ich habe einen Link eingebunden in der Datei navigation.htm und ich möchte nun den Inhalt dieses Links im Frame Hintergrund.htm darstellen muss ich folgendes schreiben:
<a target="Hintergrund" href="link.htm">

Effekte in HTML:

  • kein scrollen: <body scroll="no">
  • animierte Laufschrift: <marquee> Text </marquee>
  • Laufschrift mit Hintergrund: <marquee bgcolor="#FFEEFF"> Text </marquee>
  • Trennlinie: <hr>
  • Links nicht unterstreichen <head> <style type="text/css"> A {text-decoration : none} </style> </head>
  • Links unterstreichen, wenn man mit der Maus über den Link fährt: Achtung: Folgendes wird im HEAD geschrieben:
    <style>
       a{
         text-decoration: none;
         color: #00FF00;
       }
       a:hover{
         text-decoration: underline;
         color: #990000;
       }
    </style>
    
  • Farbige Links: <a href="http://www.seite.de"> <div style=a: link; color:"orange"> </div> </a>
  • Bilder immer hin und her bewegen: <marquee behavior="alternate"> <img src="Beispiel.gif"> </marquee>
  • Text durchstreichen: <s> Durchgestrichener Text </s>
  • Sonderzeichen in HTML:



NimeoB
Insider
Beitrag vom:
17-10-2002, 11:49:37

Single - Tags:

Single Tags sollte man um XML kompatibel zu sein auch immer schließen. Das würde bei einem Zeilenwechsel so aussehen: bei einer Linie so .

-----------------------------------------------------
live - regret nothing - learn from everything -- Hinterm 7. Berg wohnen nur schwule Zwerg. -- Stupidness is no excuse. -- Wo ist Bad Goisern? -- 3 - drei - lebe lieber unerreichbar


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06245
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1150
Comments: 0