von
am
Protokolle definieren, wie Daten über ein Netzwerk gesendet und empfangen werden. Sie legen die Regeln und Standards fest, die Computer befolgen müssen, um miteinander zu kommunizieren.
SSH (Secure Shell) ist ein Protokoll, das eine sichere Verbindung über ein unsicheres Netzwerk ermöglicht. Es wird häufig verwendet, um sichere Fernzugriffe auf Server zu ermöglichen und sichere Dateiübertragungen durchzuführen.
FTP (File Transfer Protocol) ist ein Standardprotokoll für die Übertragung von Dateien von einem Host zu einem anderen über ein Netzwerk. SFTP (SSH File Transfer Protocol) ist eine sichere Variante von FTP, die die Datenübertragung über eine SSH-Verbindung ermöglicht.
HTTP (Hypertext Transfer Protocol) ist das Protokoll, das für die Übertragung von Daten über das Web verwendet wird, insbesondere für HTML-Dokumente. Es definiert, wie Nachrichten formatiert und übertragen werden, und welche Aktionen Webserver und Browser in Reaktion auf verschiedene Befehle unternehmen sollten.
HTTPS (Hypertext Transfer Protocol Secure) ist die sichere Version von HTTP. Es verwendet SSL/TLS, um eine sichere Verbindung zu gewährleisten und Daten zu verschlüsseln, die zwischen dem Client und dem Server ausgetauscht werden.
REST (Representational State Transfer) ist ein Architekturstil für die Erstellung von Webdiensten. RESTful Webdienste verwenden HTTP-Methoden wie GET (Abrufen von Ressourcen), POST (Erstellen von Ressourcen), PUT (Aktualisieren von Ressourcen) und DELETE (Löschen von Ressourcen). HTTP-Statuscodes, wie 404 (Nicht gefunden), liefern Informationen über den Status der Anfrage.
Ein HTTP-Request und -Response bestehen aus einem Header und einem Body. Der Header enthält Metainformationen wie die HTTP-Methode, die URL, den Statuscode und andere Steuerinformationen. Der Body enthält die tatsächlichen Daten (wie HTML-Code oder Formulardaten), die gesendet oder empfangen werden.
SSL (Secure Sockets Layer) ist ein Standardprotokoll für die Sicherung der Netzwerkkommunikation. Es verwendet Verschlüsselungstechnologien, um die Daten, die zwischen Servern und Clients ausgetauscht werden, zu schützen. HTTPS ist eine Implementierung von SSL.
Ein monolithisches System ist eine einheitliche Software, in der alle Komponenten eng miteinander verknüpft sind und gemeinsam als ein einziges, unteilbares System arbeiten. Alle Komponenten, von der Benutzeroberfläche bis zur Datenverarbeitung, sind in einem einzigen Codebase zusammengefasst und führen auf einem einzigen Server oder Prozess aus.
Microservices hingegen sind ein Architekturstil, bei dem eine Anwendung als Sammlung kleiner, unabhängiger und modularer Dienste entwickelt wird. Jeder dieser Dienste führt eine bestimmte Geschäftsfunktion aus und kann unabhängig von den anderen entwickelt, bereitgestellt und skaliert werden.
Monolithische Systeme können einfacher zu entwickeln und zu testen sein, da alles in einem einzigen Codebase liegt. Allerdings können sie mit zunehmender Größe schwieriger zu verstehen, zu warten und zu skalieren sein.
Microservices bieten hingegen eine bessere Modularität und Skalierbarkeit und können eine schnellere Entwicklung und Bereitstellung ermöglichen, da einzelne Dienste unabhängig voneinander entwickelt und aktualisiert werden können. Allerdings können sie komplexer in Bezug auf die Verwaltung und Koordination der einzelnen Dienste sein und erfordern ein robustes Infrastrukturmanagement.
Der HTML <head>-Bereich eines Dokuments enthält Metainformationen über das Dokument selbst und keine Inhalte, die für den Benutzer sichtbar sind. Es enthält Elemente wie den Titel des Dokuments, Verweise auf Stylesheets und Skripte und verschiedene Metatags.
<!DOCTYPE html>
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
...
</body>
</html>
Das <html>-Tag ist das Wurzelelement eines HTML-Dokuments. Es kann Attribute wie `lang` (für die Sprache des Dokuments) und `dir` (für die Textrichtung) haben.
<!DOCTYPE html>
<html lang="de" dir="ltr">
...
</html>
Meta-Tags liefern Informationen über das HTML-Dokument, die für Suchmaschinen und Browser nützlich sein können. Sie sind im <head>-Bereich des Dokuments platziert.
<meta charset="UTF-8">
<meta name="description" content="Eine Beschreibung der Seite">
<meta name="keywords" content="Schlüsselwörter, für, Suche">
<meta name="author" content="Autor Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Styles können im HTML-Dokument selbst mit dem <style>-Tag definiert werden, oder sie können aus einer externen CSS-Datei geladen werden, die mit dem <link>-Tag verknüpft ist.
<style>
body { background-color: lightblue; }
</style>
<link rel="stylesheet" href="styles.css">
JavaScript kann im HTML-Dokument selbst mit dem <script>-Tag definiert werden, oder es kann aus einer externen JS-Datei geladen werden.
<script>
function myFunction() {
alert("Hallo Welt!");
}
</script>
<script src="script.js"></script>
Das <title>-Tag definiert den Titel des Dokuments. Dieser Titel wird auf der Registerkarte des Browsers angezeigt und von Suchmaschinen verwendet.
<title>Meine Webseite</title>
Open Graph ist ein Protokoll, das von Facebook entwickelt wurde, um Informationen aus deiner Webseite in sozialen Netzwerken zu teilen. Hier sind einige Beispiele für Open Graph Meta Tags:
<meta property="og:title" content="Titel deiner Webseite" />
<meta property="og:description" content="Beschreibung deiner Webseite" />
<meta property="og:image" content="URL zum Thumbnail Bild" />
<meta property="og:url" content="URL der Seite" />
<meta property="og:type" content="Typ der Seite (z.B. Webseite, Artikel etc.)" />
Twitter Cards werden verwendet, um das Teilen von Links auf Twitter zu verbessern. Sie ermöglichen es dir, Überschriften, Beschreibungen und Bilder zu den Links hinzuzufügen, die du teilst. Hier sind einige Beispiele für Twitter Card Meta Tags:
<meta name="twitter:card" content="Typ der Card (z.B. Zusammenfassung, großer Bild)" />
<meta name="twitter:site" content="@deinTwitterBenutzername" />
<meta name="twitter:title" content="Titel der Seite" />
<meta name="twitter:description" content="Beschreibung der Seite" />
<meta name="twitter:image" content="URL zum Thumbnail Bild" />
Der <body> eines HTML-Dokuments enthält den Hauptinhalt, der den Benutzern der Webseite angezeigt wird. Alle Texte, Bilder, Links, Formulare und andere Inhalte, die Sie auf Ihrer Webseite anzeigen möchten, sollten innerhalb des <body>-Tags stehen.
<body>
<p>Das ist ein Absatz.</p>
</body>
Die <h1> bis <h6> Tags werden verwendet, um Überschriften verschiedener Ebenen zu definieren, wobei <h1> die höchste und <h6> die niedrigste Ebene ist. Überschriften helfen, den Inhalt Ihrer Webseite zu strukturieren und sind wichtig für die Suchmaschinenoptimierung.
<h1>Das ist eine H1 Überschrift</h1>
<h2>Das ist eine H2 Überschrift</h2>
Das <p> Tag definiert einen Absatz. Die Tags <ul> (unordered list) und <ol> (ordered list) definieren Listen, wobei die <li> (list item) Tags die einzelnen Listenelemente darstellen.
<p>Das ist ein Absatz.</p>
<ul>
<li>Das ist ein Listenelement.</li>
</ul>
<ol>
<li>Das ist ein numeriertes Listenelement.</li>
</ol>
Das <a> Tag definiert einen Hyperlink, mit dem Benutzer zu anderen Webseiten, zu bestimmten Abschnitten innerhalb derselben Webseite oder zu anderen Ressourcen navigieren können. Das Attribut href gibt die URL des Ziels an, während das Attribut id einen eindeutigen Bezeichner für ein Element definiert.
<a href="https://example.com" id="link1">Das ist ein Link.</a>
Das <img> Tag wird verwendet, um ein Bild in einem HTML-Dokument anzuzeigen. Das srcset Attribut kann verwendet werden, um verschiedene Bilder für verschiedene Geräte oder Bildschirmauflösungen anzugeben.
<img src="image.jpg" alt="Bildbeschreibung">
Das <div> Tag wird verwendet, um einen Bereich oder eine Sektion in einem HTML-Dokument zu definieren. Das <table> Tag wird verwendet, um tabellarische Daten anzuzeigen.
<div>
<p>Das ist ein Absatz innerhalb eines Div.</p>
</div>
<table>
<tr>
<td>Das ist eine Zelle in einer Tabelle.</td>
</tr>
</table>
Formular-Tags wie <form>, <input>, <label>, <textarea>, <button>, und andere werden verwendet, um Formulare zu erstellen, mit denen Benutzer Informationen eingeben können.
<form action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
HTML5 führte eine Reihe von semantischen Tags ein, wie <article>, <header>, <footer>, <aside>, <section>, und andere, um den Inhalt einer Webseite besser zu strukturieren und zu beschreiben.
<article>
<header>
<h1>Artikelüberschrift</h1>
</header>
<p>Das ist der Inhalt des Artikels.</p>
<footer>
<p>Das ist der Footer des Artikels.</p>
</footer>
</article>
Das Semantic Web ist ein Konzept, das von der W3C entwickelt wurde, um Bedeutungen zu den Inhalten im Web hinzuzufügen, um sie besser durchsuchbar und organisierbar zu machen. HTML5-Semantik ist ein Teil davon, aber es umfasst auch andere Technologien und Standards wie RDF, OWL, und SPARQL.
Das Semantic Web ist ein Ansatz zur Organisation und Interpretation von Webinhalten, der die maschinelle Lesbarkeit und Verarbeitung von Webinformationen verbessert. Durch den Einsatz von semantischen Technologien können Informationen auf Webseiten mit Bedeutungen versehen werden, die von Maschinen verstanden werden können.
Ein Beispiel dafür ist die Verwendung von strukturierten Daten in Form von JSON-LD oder Mikroformaten, die Informationen auf einer Webseite in einem Format präsentieren, das für Maschinen leicht verständlich ist. Sie können verwendet werden, um Informationen wie Produktbewertungen, Unternehmenskontaktinformationen, Veranstaltungsdetails und vieles mehr darzustellen. Suchmaschinen und andere Dienste können diese Informationen dann nutzen, um erweiterte Ergebnisse und Funktionalitäten bereitzustellen.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Beispielprodukt",
"image": "https://example.com/photos/1x1/photo.jpg",
"description": "Eine Beschreibung des Produkts.",
"brand": {
"@type": "Brand",
"name": "Beispielmarke"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "89"
}
}
</script>
Ein anderes Beispiel ist die Verwendung von RDFa oder Resource Description Framework in Attributes, um semantische Auszeichnungen direkt in das HTML zu integrieren. RDFa ermöglicht es Webentwicklern, Metadaten in ihre Webseiten einzubetten, die die Beziehungen zwischen einzelnen Elementen und ihre Bedeutungen beschreiben.
<div vocab="https://schema.org/" typeof="Product">
<img property="image" src="https://example.com/photos/1x1/photo.jpg" />
<span property="name">Beispielprodukt</span>
<span property="brand">Beispielmarke</span>
<span property="description">Eine Beschreibung des Produkts.</span>
</div>
Besucht ein paar euerer Lieblingswebseiten und schaut euch den Quellcode an. Versucht zu verstehen wie die Seiten aufgebaut sind.
Zudem schaut euch auch die Requests und Responses an. Was steht im HEADER und was im BODY des Requests/Responses?
Baut eine einfache Webseite aus bis zu 3 HTML Seiten die miteinander über Links verbunden sind.
Dabei sollen die Webseiten eine Navigationsleiste, einen Header, einen Footer und einen Hauptbereich sowie Sidebar haben.
Füllt die Seiten mit Inhalten für die ihr euch interessiert. Morgen machen wir die dann hübsch.
Joel Maximilian Mai