Fächer

Informatik

Grundlagen der informatik

Codierung und verschlüsselung

Authentifizierung, integrität, digitale signatur, kryptografische hashfunktion, zertifikat

HTML und CSS lernen: Einfache Tipps und Tricks

Name: Knowunity
Brand: Knowunity

Öffnen

HTML und CSS lernen: Einfache Tipps und Tricks

Jules

@jules

426 Follower

HTML und CSS sind die Grundbausteine für die Erstellung von Webseiten. HTML strukturiert den Inhalt, während CSS für das Design zuständig ist. Zusammen ermöglichen sie die Gestaltung ansprechender und funktionaler Websites.

HTML verwendet Tags zur Strukturierung von Inhalten wie Überschriften, Absätzen und Listen
CSS definiert das visuelle Erscheinungsbild durch Regeln für Farben, Schriften und Layout
Beide Sprachen arbeiten eng zusammen, um moderne Webseiten zu erstellen
Grundkenntnisse in HTML und CSS sind essentiell für angehende Webentwickler

3.10.2020

7039

IV
WAS IST HTML?
HTML ist die Abkürzung von
Hypertext Markup Language
und eine textbasierte Sprache
zur Strukturierung
elektronischer Dokume

HTML Grundlagen

HTML (Hypertext Markup Language) ist die Basis für die Strukturierung von Webinhalten. Es verwendet Tags, um dem Browser mitzuteilen, wie Elemente auf einer Seite angeordnet und dargestellt werden sollen.

Definition: HTML steht für Hypertext Markup Language und ist eine textbasierte Sprache zur Strukturierung elektronischer Dokumente im World Wide Web.

Die grundlegende Struktur eines HTML-Dokuments besteht aus verschiedenen Elementen:

<!DOCTYPE html> deklariert den Dokumenttyp
<html> umschließt den gesamten Inhalt
<head> enthält Metadaten und Verweise auf externe Ressourcen
<body> beinhaltet den sichtbaren Inhalt der Webseite

Highlight: Das HTML Grundgerüst ist der Ausgangspunkt für jede Webseite und sollte sorgfältig strukturiert sein.

Wichtige HTML-Tags für die Textstrukturierung sind:

<p> für Absätze
<h1> bis <h6> für Überschriften verschiedener Ebenen
<br> für Zeilenumbrüche

Listen können mit <ul> für ungeordnete und <ol> für geordnete Listen erstellt werden. Einzelne Listeneinträge werden mit <li> gekennzeichnet.

Example: Eine ungeordnete Liste in HTML:
<ul>
  <li>Tomate</li>
  <li>Paprika</li>
  <li>Gurken</li>
</ul>

Tabellen werden mit <table> erstellt, wobei <tr> für Tabellenzeilen und <td> für Datenzellen verwendet werden. Kopfzellen können mit <th> ausgezeichnet werden.

Vocabulary: HTML-Tags sind Anweisungen in spitzen Klammern, die den Browser über den Aufbau einer Seite informieren.

Öffnen

CSS Grundlagen und Anwendung

CSS (Cascading Style Sheets) ist die Gestaltungs- und Formatierungssprache für HTML-Dokumente. Sie ermöglicht es, das Aussehen von Webseiten präzise zu kontrollieren.

Definition: CSS steht für Cascading Style Sheets und ist eine Sprache zur Beschreibung des Erscheinungsbildes von Dokumenten, die in HTML oder XML geschrieben sind.

Die Einbindung von CSS in HTML kann auf verschiedene Weisen erfolgen:

Extern: Über eine separate CSS-Datei, die im HTML-Dokument verlinkt wird
Intern: Im <style>-Tag innerhalb des <head>-Bereichs
Inline: Direkt im HTML-Element über das style-Attribut

Highlight: Die externe CSS-Einbindung ist die empfohlene Methode, da sie eine klare Trennung von Struktur und Design ermöglicht.

Der grundlegende Aufbau einer CSS-Regel besteht aus einem Selektor und einer oder mehreren Deklarationen:

h1 {
    color: blue;
    font-family: Arial;
}

CSS bietet vielfältige Möglichkeiten zur Gestaltung von Listen und Tabellen:

Listentypen können mit list-style-type angepasst werden
Tabellenrahmen lassen sich mit border und border-collapse gestalten
Die Breite und Zentrierung von Tabellen kann mit width und margin kontrolliert werden

Example: Gestaltung einer ungeordneten Liste mit quadratischen Aufzählungszeichen:
ul {
    list-style-type: square;
}

Durch die Kombination von HTML und CSS können Webentwickler ansprechende und funktionale Websites erstellen. Die Beherrschung beider Technologien ist grundlegend für die moderne Webentwicklung.

Vocabulary: Cascading in CSS bezieht sich auf die Fähigkeit, Stile zu vererben und zu überschreiben, was eine flexible und effiziente Gestaltung ermöglicht.

Öffnen

Links und Grafiken in HTML

Links sind ein wesentlicher Bestandteil des World Wide Web und ermöglichen die Verbindung zwischen verschiedenen Webseiten oder Bereichen innerhalb einer Seite.

Es gibt verschiedene Arten von Links:

Interne Links: Verweisen auf Bereiche innerhalb derselben Webseite
Externe Links: Führen zu anderen Webseiten
E-Mail-Links: Öffnen das E-Mail-Programm des Nutzers

Example: Ein externer Link in HTML:
<a href="https://www.example.com" target="_blank">Beispiel-Website</a>

Grafiken können mit dem <img>-Tag in HTML-Dokumente eingebunden werden. Dabei ist es wichtig, einen alternativen Text mit dem alt-Attribut anzugeben, um die Barrierefreiheit zu verbessern.

Highlight: Die Einbindung von CSS in HTML erfolgt üblicherweise über einen Link im <head>-Bereich:
<link href="style.css" rel="stylesheet">

Bilder können auch als Hintergrund in CSS definiert werden:

body {
    background-image: url(bild.jpg);
    background-size: cover;
}

Diese Techniken ermöglichen es, ansprechende und interaktive Webseiten zu erstellen, die Benutzer durch verschiedene Inhalte führen und visuelle Elemente effektiv einbinden.

Nichts passendes dabei? Erkunde andere Fachbereiche.

Knowunity ist die #1 unter den Bildungs-Apps in fünf europäischen Ländern

Knowunity wurde bei Apple als "Featured Story" ausgezeichnet und hat die App-Store-Charts in der Kategorie Bildung in Deutschland, Italien, Polen, der Schweiz und dem Vereinigten Königreich regelmäßig angeführt. Werde noch heute Mitglied bei Knowunity und hilf Millionen von Schüler:innen auf der ganzen Welt.

Laden im

Google Play

Laden im

App Store

Knowunity ist die #1 unter den Bildungs-Apps in fünf europäischen Ländern

4.9+

Durchschnittliche App-Bewertung

13 M

Schüler:innen lieben Knowunity

#1

In Bildungs-App-Charts in 12 Ländern

950 K+

Schüler:innen haben Lernzettel hochgeladen

Immer noch nicht überzeugt? Schau dir an, was andere Schüler:innen sagen...

iOS User

Ich liebe diese App so sehr, ich benutze sie auch täglich. Ich empfehle Knowunity jedem!! Ich bin damit von einer 4 auf eine 1 gekommen :D

Philipp, iOS User

Die App ist sehr einfach und gut gestaltet. Bis jetzt habe ich immer alles gefunden, was ich gesucht habe :D

Lena, iOS Userin

Ich liebe diese App ❤️, ich benutze sie eigentlich immer, wenn ich lerne.

Nichts passendes dabei? Erkunde andere Fachbereiche.

Knowunity ist die #1 unter den Bildungs-Apps in fünf europäischen Ländern

Knowunity wurde bei Apple als "Featured Story" ausgezeichnet und hat die App-Store-Charts in der Kategorie Bildung in Deutschland, Italien, Polen, der Schweiz und dem Vereinigten Königreich regelmäßig angeführt. Werde noch heute Mitglied bei Knowunity und hilf Millionen von Schüler:innen auf der ganzen Welt.

Laden im

Google Play

Laden im

App Store

4.9+

Durchschnittliche App-Bewertung

13 M

Schüler:innen lieben Knowunity

#1

In Bildungs-App-Charts in 12 Ländern

950 K+

Schüler:innen haben Lernzettel hochgeladen

Immer noch nicht überzeugt? Schau dir an, was andere Schüler:innen sagen...

iOS User

Ich liebe diese App so sehr, ich benutze sie auch täglich. Ich empfehle Knowunity jedem!! Ich bin damit von einer 4 auf eine 1 gekommen :D

Philipp, iOS User

Die App ist sehr einfach und gut gestaltet. Bis jetzt habe ich immer alles gefunden, was ich gesucht habe :D

Lena, iOS Userin

Ich liebe diese App ❤️, ich benutze sie eigentlich immer, wenn ich lerne.

Fächer

Informatik

Grundlagen der informatik

Codierung und verschlüsselung

Authentifizierung, integrität, digitale signatur, kryptografische hashfunktion, zertifikat

HTML und CSS lernen: Einfache Tipps und Tricks

Jules

@jules

426 Follower

HTML verwendet Tags zur Strukturierung von Inhalten wie Überschriften, Absätzen und Listen
CSS definiert das visuelle Erscheinungsbild durch Regeln für Farben, Schriften und Layout
Beide Sprachen arbeiten eng zusammen, um moderne Webseiten zu erstellen
Grundkenntnisse in HTML und CSS sind essentiell für angehende Webentwickler

3.10.2020

7039

11/12

Informatik

405

Melde dich an, um den Inhalt freizuschalten. Es ist kostenlos!

Sofortiger Zugang zu 13.000+ Lernzetteln

Vernetze dich mit 13M+ Lernenden wie dich

Verbessere deine Noten

Mit der Anmeldung akzeptierst du die Nutzungsbedingungen und die Datenschutzrichtlinie

HTML Grundlagen

Definition: HTML steht für Hypertext Markup Language und ist eine textbasierte Sprache zur Strukturierung elektronischer Dokumente im World Wide Web.

Die grundlegende Struktur eines HTML-Dokuments besteht aus verschiedenen Elementen:

<!DOCTYPE html> deklariert den Dokumenttyp
<html> umschließt den gesamten Inhalt
<head> enthält Metadaten und Verweise auf externe Ressourcen
<body> beinhaltet den sichtbaren Inhalt der Webseite

Highlight: Das HTML Grundgerüst ist der Ausgangspunkt für jede Webseite und sollte sorgfältig strukturiert sein.

Wichtige HTML-Tags für die Textstrukturierung sind:

<p> für Absätze
<h1> bis <h6> für Überschriften verschiedener Ebenen
<br> für Zeilenumbrüche

Listen können mit <ul> für ungeordnete und <ol> für geordnete Listen erstellt werden. Einzelne Listeneinträge werden mit <li> gekennzeichnet.

Example: Eine ungeordnete Liste in HTML:
<ul>
  <li>Tomate</li>
  <li>Paprika</li>
  <li>Gurken</li>
</ul>

Tabellen werden mit <table> erstellt, wobei <tr> für Tabellenzeilen und <td> für Datenzellen verwendet werden. Kopfzellen können mit <th> ausgezeichnet werden.

Vocabulary: HTML-Tags sind Anweisungen in spitzen Klammern, die den Browser über den Aufbau einer Seite informieren.

Melde dich an, um den Inhalt freizuschalten. Es ist kostenlos!

Sofortiger Zugang zu 13.000+ Lernzetteln

Vernetze dich mit 13M+ Lernenden wie dich

Verbessere deine Noten

Mit der Anmeldung akzeptierst du die Nutzungsbedingungen und die Datenschutzrichtlinie

CSS Grundlagen und Anwendung

CSS (Cascading Style Sheets) ist die Gestaltungs- und Formatierungssprache für HTML-Dokumente. Sie ermöglicht es, das Aussehen von Webseiten präzise zu kontrollieren.

Definition: CSS steht für Cascading Style Sheets und ist eine Sprache zur Beschreibung des Erscheinungsbildes von Dokumenten, die in HTML oder XML geschrieben sind.

Die Einbindung von CSS in HTML kann auf verschiedene Weisen erfolgen:

Extern: Über eine separate CSS-Datei, die im HTML-Dokument verlinkt wird
Intern: Im <style>-Tag innerhalb des <head>-Bereichs
Inline: Direkt im HTML-Element über das style-Attribut

Highlight: Die externe CSS-Einbindung ist die empfohlene Methode, da sie eine klare Trennung von Struktur und Design ermöglicht.

Der grundlegende Aufbau einer CSS-Regel besteht aus einem Selektor und einer oder mehreren Deklarationen:

h1 {
    color: blue;
    font-family: Arial;
}

CSS bietet vielfältige Möglichkeiten zur Gestaltung von Listen und Tabellen:

Listentypen können mit list-style-type angepasst werden
Tabellenrahmen lassen sich mit border und border-collapse gestalten
Die Breite und Zentrierung von Tabellen kann mit width und margin kontrolliert werden

Example: Gestaltung einer ungeordneten Liste mit quadratischen Aufzählungszeichen:
ul {
    list-style-type: square;
}

Durch die Kombination von HTML und CSS können Webentwickler ansprechende und funktionale Websites erstellen. Die Beherrschung beider Technologien ist grundlegend für die moderne Webentwicklung.

Vocabulary: Cascading in CSS bezieht sich auf die Fähigkeit, Stile zu vererben und zu überschreiben, was eine flexible und effiziente Gestaltung ermöglicht.

Melde dich an, um den Inhalt freizuschalten. Es ist kostenlos!

Sofortiger Zugang zu 13.000+ Lernzetteln

Vernetze dich mit 13M+ Lernenden wie dich

Verbessere deine Noten

Mit der Anmeldung akzeptierst du die Nutzungsbedingungen und die Datenschutzrichtlinie

Links und Grafiken in HTML

Links sind ein wesentlicher Bestandteil des World Wide Web und ermöglichen die Verbindung zwischen verschiedenen Webseiten oder Bereichen innerhalb einer Seite.

Es gibt verschiedene Arten von Links:

Interne Links: Verweisen auf Bereiche innerhalb derselben Webseite
Externe Links: Führen zu anderen Webseiten
E-Mail-Links: Öffnen das E-Mail-Programm des Nutzers

Example: Ein externer Link in HTML:
<a href="https://www.example.com" target="_blank">Beispiel-Website</a>

Grafiken können mit dem <img>-Tag in HTML-Dokumente eingebunden werden. Dabei ist es wichtig, einen alternativen Text mit dem alt-Attribut anzugeben, um die Barrierefreiheit zu verbessern.

Highlight: Die Einbindung von CSS in HTML erfolgt üblicherweise über einen Link im <head>-Bereich:
<link href="style.css" rel="stylesheet">

Bilder können auch als Hintergrund in CSS definiert werden:

body {
    background-image: url(bild.jpg);
    background-size: cover;
}

Diese Techniken ermöglichen es, ansprechende und interaktive Webseiten zu erstellen, die Benutzer durch verschiedene Inhalte führen und visuelle Elemente effektiv einbinden.