Blog > Wie ist ein HTML-Dokument aufgebaut?

Wie ist ein HTML-Dokument aufgebaut?

Ein HTML Dokument ist die Grundlage für jede Website im Internet. Einen großen Teil sieht der normale Benutzer zumeist nicht, er wird erst sichtbar wenn wir in den Quellcode gucken, also das, was vom Webserver zum Browser gesendet wird.

Ein HTML-Dokument besteht aus verschiedenen Teilen, die für den Browser jeweils mit einem Tag und einem Endtag versehen sind. So könnte der Starttag wie folgt aussehen: und der Endtag so: . Das einzige was dort noch geändert wird ist das, was ich jetzt noch mit TAGNAME betitelt habe.

Die verschiedenen Teile sind verschachtelt. Dies kann man sich zum Beispiel anhand eines Pappkartons vorstellen in den man einen weiteren, kleineren Karton hineinlegt. Nachfolgend siehst du die Basisstruktur, die jedes HTML Dokument besitzen sollte.

Der Head-Teil ist dabei größtenteils für den Website-Besucher verborgen. Er beinhaltet hauptsächlich Meta-Informationen, dass heißt z.B. die Website-Beschreibung die man sieht unter jedem Suchergebnis auf Google sieht oder auch den Titel der oben in der Tableiste des Browsers angezeigt wird. Neben solchen Informationen über den Inhalt kann man im Head-Teil allerdings auch andere Dateien einbinden, z.B. ein Stylesheet das das Aussehen der Webseite festlegt, also was für ein Hintergrundbild auf der Webseite zu sehen ist etc. Im Body-Teil ist der Inhalt der Webseite geschrieben, also alles für den User Sichtbare.

Ebenfalls wichtig ist das Benutzen von Kommentaren. Diese werden dem Website-Besucher nicht ausgegeben und helfen, dem Autor des Quellcodes einen Überblick zu verschaffen. Kommentare in HTML starten mit Nachfolgend habe ich einen einfachen HTML Code aufgeschrieben.

 
 
    
        Website-Titel</titel> <!-- Titel, der in der Tableiste angezeigt wird -->
        <meta charset="utf-8"> <!-- Aktiviert die Verwendung von SOnderzeichen wie ä, ö, ü -->
    </head>
    <body>
        <h1>Überschrift</h1> <!-- Diese Überschrift wird dem Website-Besucher groß angezeigt -->
        <p>Das ist ein Absatz</p> <!-- HTML-Tag für einen Absatz -->
    </body>
</html>
<!-- Ende des HTML Dokuments -->

]]></pre></article>
<br><hr><br>
<h2>Kommentare</h2><i>Zum Schreiben von Kommentaren bitte <a href="/login/index.php">einloggen</a> oder registrieren.</i>
<br><br><hr><br>
		</main>
		<div class="footer">
			<a href="/blog/beitrag/1/">Impressum</a>   <a href="/blog/beitrag/3/">Datenschutz</a>   <a href="/blog/beitrag/4/">Kontakt</a>  
									<br>
			<a href="/restricted/login/login/">Login</a>
						<br />2018 © Anton Maaser 
			<br>69893 Leute haben dies gesehen		</div>
		
		<script>
		var i = 0;
		var txt = 'Students Blog | Coding für Schüler'; /* The text */
		var speed = 80; /* The speed/duration of the effect in milliseconds */
		
		function typeWriter() {
		  if (i < txt.length) {
		    document.getElementById("type").innerHTML += txt.charAt(i);
		    i++;
		    setTimeout(typeWriter, speed);
		  }
		}
		
		function openMenu() {
	    	document.getElementById("nav").classList.add("open");
			document.getElementById("element").classList.add("height");
		}		
		
		function closeMenu() {
	    	document.getElementById("nav").classList.remove("open");
			document.getElementById("element").classList.remove("height");
		}	
		
		function closeWindow() {
			document.getElementById("cookie").classList.add("invisible");
		}
		
		window.onscroll = function() {myFunction()};

		var navbar = document.getElementById("navbar");
		var sticky = navbar.offsetTop;
		
		function myFunction() {
		  if (window.pageYOffset >= sticky) {
		    navbar.classList.add("sticky")
		  } else {
		    navbar.classList.remove("sticky");
		  }
		}
				
				</script>
		
		
		<div id="cookie" class="cookie"><div id="cookiecontent"><h2>Cookies</h2><p>Durch die Nutzung dieser Seite erklärst du dich mit der Nutzung von Drittanbieter-Diensten sowie Cookies einverstanden. Weitere Informationen dazu findest du hier in der <a href="?category=articles&id=3">Datenschutzerklärung</a>.</p><p><noscript>Der Button zum Schliessen funktioniert nur mit aktiviertem Javascript</noscript><p><p><button onclick="closeWindow()">Schließen</button></p></div></div>	</body>
</html>