WebTech - Wolf 2-3
Grundlagen
Grundlagen
14
0.0 (0)
F. S.
F. S.
Diese Lernkarten bieten eine umfassende Übersicht über HTML-Elemente und deren Attribute, mit Fokus auf Tags wie `<meta>`, `<script>`, `<style>` und `<link>`. Sie erklären deren Verwendung im HTML-Dokument, insbesondere im Header, und gehen auf Attribute wie `href`, `type` und `charset` ein. Die Karteikarten richten sich an Webentwickler und Designer, die ihr Verständnis von HTML-Strukturen vertiefen möchten, um professionelle und funktionale Webseiten zu erstellen.
Flashcards
14
Students
4
Language
German
Category
Computer Science
Level
Other
Created / Updated
06.01.2021 / 26.12.2023
-
- 1 / 14
-
Flashcards
Struktur eines HTML-Dokuments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h2>Untertitel</h2>
<p>Ein Absatz mit Text.</p>
</body>
</html>
Definiere:
- HTML-Tag
- HTML-Element
- Tag (auch Markup Tags): Start-Tag und Ende-Tag
Hinweis: End-Tags können selten weggelassen werden (bspw. </p>) - Dazwischen ist der Inhalt
- Alles zusammen ist das HTML-Element
- <b> </b>
- <p> </p>
- b: bold = fett
- p: Absatz
- Was ist ein HTML-Attribut für HTML-Elemente?
- Ein Attribut (Eigenschaft)
- werden bei den Start-Tags verwendet.
- Attributname-Wert-Form: Beispiel name="wert"
Beispiel:
<body>
<p lang="de">
Bitte <a href="http://rheinwerk-verlag.de/"> hier</a> klicken.
</p>
<p>
<img src="HTML5.png" alt="HTML-Logo"/>
</p>
</body>
Erkläre href
- <a href="http://google.com">Klicken Sie hier</a>
- href ist ein Attribut zu a und definiert einen Hyperlink
Wie kommentiert man in HTML-Files?
<!-- Auskommentierter Text -->
Erkläre <!doctype html>
- Es handelt sich hier nicht um einen HTML-Tag sondern darum, dem Webbrowser zu sagen, in welcher HTML-Version die Webseite erstellt wurde.
Welche HTML-Elemente gehören in den head?
- <title>...</title> = Der Titel des HTML-Dokuments
- <base> = Setzt die Basis-URLs für alle relativen URLs der Webseite
- <link> = setzt logische Links zu anderen Dateien, die eingebunden werden sollen
- <style> = setzt die lokalen stylesheetregeln für das HTML-Dokument
- <script> = bindet die clientseitigen Skripte ein.
- <meta> = Setzt die Metadaten wie z.B. Schlüsselwörter, Beschreibungen oder den Zeichensatz für das HTML-Dokument.
Erkläutere <base>
- Basis-URL der Webseite
- Attribute:
- href: definieren der Basis URL
- target: Tab (Fenster) festlegen, wo die Seite angezeigt werden soll
- _self: aktuelles Fenster
- _blank: neues Tab
- _parent: Eltern-Fenster (sonst self)
- _top: im höchst hirarchisch gelegenen Fenster (sonst self)
Erkäre Frame und Frameset
- Frame: (Rahmen) ist ein Teilbereich einer HTML-Seite in die eine andere HTML-Seite eingebunden werden kann.
- Framesets: Mehrere Frames zusammen
- Erkläre <link> und dessen Attribute
- steht im head
- damit stellt man eine Beziehung zwischen dem HTML-Dokument und einem externen Dokument her bspw. CSS
- <links rel="stylesheet" type="text/css" href="style.css">
- darf mehrmals im head eingesetzt werden um mehrere css dokumente anzusprechen
- alleinstehe des Tag
- hat nichts mit Hyperlink zu tun
Attribute:
- href = Verknüpfung zur Ressource
- hreflang= definiert Sprache der zu verknüpfenden Ressource
- media= für welches Medium?
- rel = festlegen der Beziehung zwischen aktuellem Dokument und externer Ressource in href fes (meistverwendete)t:
- stylesheet: Verknüpfen mit CSS-Datei
- icon: zuordenen eines Favicons
- size= gibt Grösse für die zu verlinkende Ressoure an (Bsp. size=16x16)
- type=MIME-Typ
- Erkläre <style> und dessen Attribute
- damit definieren Sie, wie der Browser die HTML-Elemente darstellen soll.
- jedes Dokument kann mehrere style-Elemente haben (im Header, aber auch im Body)
- Hinweis: Wenn man im Body einen style definiert, so sind alle entsprechenden Elemente betroffen.
- anstatt mit dem tag <link> auf das stylesheet verweisen, kann man mit dem <style> tag direkt im HTML-Dokument angaben machen
Attribute:
- media: hier kann das Medium (tablet, phone) für die der Zielressource in hrfe angegeben werden. Ziel: mehrere Styles für verschiedene Medientypen
- type: Angabe MIME-Type (kann vernachlässigt werden)
Erkläre <script> und dessen Attribute.
- dient der Integration von bspw. Java-Scripten
- entweder kann man das Skript direkt zwischen die tags skripten, oder Sie verweisen mittels src-Attribut auf ein externes Script.
- Hinweis: Script-Code im Header verlängert Ladezeit.
Attribute:
- async: Skript wird asynchron mit dem HTML-Dokument ausgeführt. (nur für externe Skripte)
- charset: legt die Zeichencodierung für das externe Skript fest.
- defer: zuerst wird die Website geparst, dann das Skript ausgeführt.
- src: Angabe der externen URL des Skripts
- type: MIME-Type für das Stylesheet
Erläutere <meta> und dessen Attribute
- dadurch können im Header zusätzliche Daten über das HTML-Dokument angegeben werden.
- bspw. Für Webbrowser, Webserver etc.
- Angabe der meta-Daten ist freiwillig, trotzdem wird es meist gemacht
- Metadaten können auch Hilfreich sein für Suchmaschinen
Meistverwendete Metadaten:
- name/content-Kombination: name="author" content="Max Mustermann"
- <meta name="keywords" content="html5, meta, keywords">
- <meta name="description" content="HIer kommt die Beschreibung die bei google ersichtlich ist.">
- charset="UTF-8": dient der korrekten Darstellung von Umlauten (ä,ö,ü...)
- http-equiv: Webseite wird nach einer bestimmten Zeit aktualisiert oder an eine andere URL weitergeleitet
- http-equiv="refresh" content="30">
Attribute:
- content:übergibt den Wert, der mit dem Attribut http-equiv oder name verbunden ist
- charset: legt die Zeichencodierung für HTML-Doc fest
- http-equiv: vgl. oben
- name: definiert den Namen der Metadaten
- application-name, author, description, generator, keywords
