HTML Anleitung - Hyper Text Markup Sprache

» HTML » HTML Anleitung, Web design, HTML Programmierung

Wir haben diese Webseite erstellt um "Programmierungs*" Anfänger zu zeigen wie sie lernen können, auch die, die eine kleine Basis haben, wie sie HTML benutzen. Aber nicht nur das. Wie laden Sie ein dass Sie gleich einen "Programmierungs*" Kurs beginnen. Aber zuerst "das Menü"...

Einsteiger Leitfaden für HTML - Für diejenigen von euch, die Anfänger in der Art und Weise, eine Webseite zu erstellen
HTML komplettes Tutorial - Für diejenigen unter Ihnen, die die Erstellung von Web-Seiten mit einigen HTML-Basis starten

Diese Reihe von Anleitungen ist gemacht, um Ihnen einige Erfahrung zu geben, so dass Sie in der Lage sind HTML zu lesen und zu schreiben, das Sie in der Lage sind Dokumente zu speichern und danach Ihre Arbeit in einem Webbrowser zu sehen. Leider hat diese Seite keinen Abschnitt wo wir Ihnen zeigen, wie Sie alle Basisfunktionen eines Computers verwenden, so das Sie in diesem Augenblick einem Freund um Hilfe bitten können: Bevor Sie fortsetzen, HTML zu lernen, müssen Sie:

Wissen was ein Notizblock ist und wie man ihn benutzt
Wissen wie man eine Datei mit Internet Explorer öffnet (oder einem anderen Browser, wir empfehlen Chrome )
Wissen wie Sie eine Copy/paste machen und wie man es darstellen

* Existiert html Programmierung überhaupt?

Es tut mir leid Sie zu enttäuschen, aber HTML Programmierung existiert nicht, deswegen weil HTML keine Programmierungs Sprache ist. Es Ist eine markup Sprache. So einfach ist es, es packt einen Inhalt ein und nichts mehr

HTML Kurzanleitung

Im Folgenden habe ich eine kurze Liste der am häufigsten verwendeten HTML-Codes gemacht. Sie können diese Seite zu den Favoriten hinzufügen, um sich hier einfacher zurück zu kommen wenn Sie nicht wissen, wie Sie ein HTML-Code erstellen oder wenn Sie sich einfach nicht daran erinnern.

HTML - Elemente

Die wichtigsten HTML-Elemente sind <html>, <head>, <title> and <body>. Unten ist ein einfaches Beispiel, wie Sie eine Website erstellen.

html<html>
	<head> 
		<title>Meine erste Webseite in der ich html codes benutz habe!</title>
	</head> 
	<body> 
		Hi Leute! Hier habe ich den Inhalt der HTML-Seite reingestellt.
	</body> 
</html>

HTML - Paragraph

html<p>Dies ist ein einfacher HTML Paragraph.</p>
<p align="left">Dies ist ein linksbündiger Paragraph.</p>

Demo

Dies ist ein einfacher HTML Paragraph.

Dies ist ein linksbündiger Paragraph.

Um die HTML-Elemente auszurichten, verwenden wir die align Beschriftungen mit den Eigenschaften: links, rechts, Mitte, rechtfertigen.

HTML - Titeln

html<h1>Dies ist das HTML-Tag für den größten Titel</h1>

Andere Tags um Titel oder Überschriften in HTML zu definieren sind: h1, h2, h3, h4, h5, h6. Der Titel definiert mit h1 Ist der größte und der, der mit h6 definiert ist, ist der kleinste.

Html - Zeilenumbruch

<br /> ist ein Zeilenumbruch. Das Leerzeichen zwischen "br" und "/" ist der Unterschied zwischen HTML 4 und einen gültigen XHTML code.

HTML - Horrizontale Richtlinie

<hr /> Wird verwendet, um eine Horrizontale Richtlinie zu zeichnen. Das Leerzeichen zwischen "hr" y "/" iist der Unterschied zwischen HTML 4 und einen gültigen XHTML code.

HTML - Listen

Hier ist eine einfaches HTML Listen Beispiel:

html<ol>
	<li>Das erste HTML-Element in der Liste</li>
	<li>Das zweite html-Element in der Liste</li>
	<li>Das dritte HTML-Element in der Liste</li>
</ol>

Das Beispiel oben, ist ein Beispiel für eine geordnete HTML-Liste. Andere html Listen sind: Ungeordneten und eine Definitionsliste.

HTML - Links

html<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Gehe nach oben </a> (<a name="top"></a>)
<a href="mailto:admin@exemplu.com" >Kontaktiere uns</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>

Oben haben Sie ein Beispiel für eine normalen HTML-Link, ein Link zwischen zwei Abschnitten auf der gleichen Seite, ein Link der an eine email Linkt und ein Link der an ein Bild Linkt. Obwohl rd nicht mehr in HTML verwendet wird, verdient es erwähnt zu werden.

html<base href="http://www.tutorialehtml.com/">

Basehref wurde aus den Index-Tags entfernt HTML 5.

HTML - Bilder

html<img src="img//html_image.jpg" alt="Html-Bild" width="100" height="50"  align="center" />

Es wird empfohlen, Bilder mit CSS auszurichten. Dies würde den HTML-Code oben verwandeln in:

html<img src="img//html_image.jpg" alt="Html-Bild" style="width:100px; height:50px; margin:auto;" />

HTML - Formen

Dies ist nur ein Beispiel wie man HTML-Code verwendet, um ein Formular zu erstellen. Es ist, was ein Benutzer verwenden könnte, um Informationen einzugeben. Aber um solche Informationen zu verarbeiten, benötigen Sie eine PHP-Datei (zum Beispiel) dass die Informationen an die Datenbank verschickt werden, per maile geschickt, usw.

html<form method="post" name="formulario" action="archivo_que_procesara_el_formulario_html.php">
	<!--Textfelder verwendet, um Informationen einzugeben-->
	<input type="submit" value="Senden">
	<input type="reset" value="Löschen" />
</form>

HTML - Textfelder

Im Folgenden finden Sie einige Beispiele für HTML-Textfelder.

html<input type="text" size="10" maxlength="40" name="name"> --> normales Textfeld
<input type="password" size="10" maxlength="10" name="pass"> --> Passwort Feld
<input type="radio" name="color" value="red"> --> Radio Taste
<input type="checkbox" name="check" value="yes"> --> Kontrollkästchen 
<select name="select">  --> Einfache Auswahlliste / drop-down Liste
   <option>Html 4.1</option> 
   <option>Html 5</option> 
</select>

HTML - Tabelen

Die grundlegende Struktur einer Tabelle in HTML ist wie in folge:

html<table>
   <tr> 
      <th>Spalte  1</th>
      <th>Spalte  2</th>
   </tr>
   <tr>
      <td>Zeile 1 Zelle 1</td>
      <td>Zeile 1 Zelle 2</td>
   </tr>
   <tr>
      <td>Zeile 2 Zelle 1</td>
      <td>Zeile 2 Zelle 2</td>
   </tr>
</table>

Html - BgFarbe

BgFarbe wird dazu verwendet, um die Hintergrundfarbe festzulegen. Hier lasse ich ein paar Beispiele, wie Sie es benutzen:

html<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.

Html - Hintergrund

Zum Hinzufügen eines Hintergrundbildes wird der folgende HTML-Code verwendet.

html<table background="img/pattern.jpg">

HTML - Kommentare

html<!-- Dies ist ein einfacher Kommentar html-->

Html - Einbetten (Music and sound)

Um Musik oder Ton in ein HTML-Dokument einzufügen, benutzen Sie den folgenden Befehl

html<embed src="example.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />

Html - Objekte (Video)

Um ein Video in ein HTML-Dokument einzufügen, verwenden Sie den folgenden Befehl:

html<object width="425" height="344">
	<param name="movie" value="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1"></param>
	<param name="allowFullScreen" value="true"></param>
	
	<embed src="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>

HTML - Fettgedruckt

html<b>Fettgedruckt HTML text</b>
<strong>Starker HTML text</strong>

HTML - Kursiv

html<i>Kursiv</i>
<em>Betonter</em>

HTML - Tiefgestellt, Hochgestellt, Durchgestrichen

Exponent, Index und geschnittener Text. Obwohl es nicht weit verbreitet ist, ist es erwähnenswert.

html<sub>Verzeichnis!</sub>
<sup>Exponent</sup>
<del>Geschnittener text</del>

HTML - Hochgeladene und ausgeblendete Felder

Das folgende Formular dient zum Hochladen einer Datei auf den Server. Vergessen Sie nicht, dass es nur der HTML-Teil ist. Um es funktional zu machen, sollten Sie es mit PHP, ASP, oder jede andere Server-Seite Sprache verarbeiten.

html<form method="post" action="process.php"> 
	<input type="hidden" name="MAX_FILE_SIZE" value="500" /> 
	<input type="file" />
	<input type="submit" value="Hochladen">
	<input type="reset" value="Zurücksetzen" />
</form>

Anfänger Leitfaden - Einführung