Webentwicklung ist heute eine der gefragtesten Fähigkeiten. Dabei geht es darum, benutzerfreundliche und ansprechende Websites zu erstellen, die über einen Browser aufgerufen werden können. Der erste Schritt auf dem Weg zum Webentwickler besteht darin, HTML zu verstehen.
HTML (Hyper Text Markup Language) ist das Rückgrat jeder Webseite. Dabei handelt es sich um die Standardsprache zur Strukturierung einer Webseite, die bestimmt, wie Inhalte im Browser angezeigt werden. Während das Erscheinungsbild einer Seite durch CSS (Cascading Style Sheets) und ihre Funktionalität durch JS (Javascript) bestimmt wird, HTML ist für das Grundgerüst oder die Grundstruktur verantwortlich.
Bevor Sie in diesen Teil des Kurses eintauchen, ist es wichtig, bekannte und wiederkehrende Fachbegriffe zu verstehen, die auf Ihrer Reise verwendet werden. Diese werden Ihnen im weiteren Verlauf helfen, die Konzepte zu verstehen (und es dem Autor auch leichter machen, Dinge zu erklären ;-) ).
(Absatz) darin erstellt der Browser einen Körperknoten mit einem Absatzknoten als untergeordnetem Knoten.
) innerhalb eines div-Tags (
HTML steht für Hyper Text Markup Language
Hypertext: Bezieht sich auf die Fähigkeit von HTML, verschiedene Dokumente miteinander zu verknüpfen.
Auszeichnungssprache: Verwendet Tags, um Text mit Anmerkungen zu versehen und zu definieren, wie er in einem Browser angezeigt werden soll.
Hier ist die Grundstruktur eines HTML-Dokuments:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Tags: In HTML werden Tags verwendet, um Elemente zu definieren. Tags werden in spitze Klammern eingeschlossen, z. B. oder
.
Elemente: Bestehen aus einem öffnenden Tag und einem schließenden Tag, die Inhalte enthalten können. Zum Beispiel
Hallo Welt!
ist ein Absatzelement.Jedes HTML-Dokument folgt einer Grundstruktur:
Here are some basic HTML elements you’ll use frequently:
To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <h1>Example Number 1</h1> <p>Hello, world!</p> </body> </html>
You can find that there is a request in the name that you have saved as in this picture.
In the response tab, you will find the code that you have written as in the following picture
Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like ,
, , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.Let’s take a step further by creating a simple table in HTML:
<p>Table Example</p>
<table>
<tr>
<th>Name</th>
<th>Power</th>
<th>Is Kurama Present</th>
</tr>
<tr>
<td>Naruto</td>
<td>Rasengan</td>
<td>Yes</td>
</tr>
<tr>
<td>Sasuke</td>
<td>Sharingan</td>
<td>No</td>
</tr>
</table>
Notice the heading is being rendered by paragraph tag. Alternatively, you can also use
Note that
