Cadat EDU - Infos-Stichworte

Thema

Frage

Mehr... Anklicken

CSS (Cascading Style Sheets), Grundlagen

CSS - Grundlagen
CSS (Cascading Style Sheets) sind im weitesten Sinn Formatvorlagen (Formatierungsanweisungen, Stile), deren Quellcode als Text vorliegt, fÃ¼r HTML- und XML-Dokumente.
Mit CSS kann Inhalt und Darstellung getrennt werden. So kann zB das Aussehen einer ganzen Website durch Ã„nderung der Formatierungsanweisung in einer einzigen CSS-Datei geÃ¤ndert werden.

HTML, <div>, <span>

<div> - <span>
Die Tags <div> und <span> werden zum Gruppieren und Strukturieren des Dokuments, meistens in Zusammenhang mit den Attributen "class" und "id" benutzt.
Das Element <div> wird hÃ¤ufig auch, in Verbindung mit "id", zur Erstellung und Positionierung von Ebenen, die ihrerseits Elemente wie zB Bilder und Text enthalten kÃ¶nnen, auf der Webseite eingesetzt.
Das Element <span> kann in Verbindung mit "class" auch mitten im Text zur Formatierung von Textteilen verwendet werden, ohne dass der Textfluss beeintrÃ¤chtigt wird.

Anmerkung:Der Hauptunterschied zwischen den beiden Tags besteht darin, dass nach <div>...</div> ein Zeilenumbruch erfolgt und nach <span>...</span> nicht.

HTML, Attribute (Eigenschaften)

HTML, Attribute (Eigenschaften)
Attribute (Eigenschaften) in HTML-Dokumenten geben dem Browser, zusÃ¤tzlich zu den Tags, weitere Informationen Ã¼ber Struktur, Aussehen usw. Attribute stehen immer im Beginntag innerhalb der spitzen Klammern nach dem Tagnamen.
Sie bestehen aus dem Namen des Attributes (= Variablenname) und nach dem Ist-Gleich-Zeichen (=) dem zugehÃ¶rigen Wert. Attribute kÃ¶nnen zB HÃ¶he und Breite von HTML-Objekten bestimmen und Aussagen Ã¼ber eine Vielzahl von anderen Eigenschaften treffen (siehe auch -> CSS).

Beispiel fÃ¼r Attribut "align"
im Quellcode:
<p align="center">Dieser Absatz ist zentriert.</p>

Im Webbrowser:

Dieser Absatz ist zentriert.

HTML, Grundlagen

HTML, Grundlagen
Ein HTML-Dokument (HTML = Hypertext Markup Language) ist ein Text-Dokument, das auÃŸer Text auch andere Objekte wie zB Bilder, Links, Formulare, Audio-Dateien und Videos enthalten kann. Der Unterschied zu normalem Text besteht darin, dass ein HTML-Dokument durch sogenannte Tags "ausgezeichnet" ("Auszeichnungssprache") ist, welche Aussehen und andere Eigenschaften bestimmen. Diese Textelemente zwischen spitzen Klammern (zB <p> erzeugt einen Absatz) sagen dem Webbrowser, wie er die Seite und deren Inhalte behandeln soll. Mit sehr wenigen Ausnahme haben Tags einen Ã¶ffnenden Teil (zB <h1>) und einen schlieÃŸenden Teil (zB </h1>, wobei innerhalb dieser beiden Teile die Anweisungen, die sich auf diesen Tag beziehen, gÃ¼ltig sind.
Ein HTML-Dokument beginnt mit dem Tag <html> und endet mit </html> und ist prinzipiell in zwei Teile gegliedert, und zwar in "head" ("Kopf") und "body" ("KÃ¶rper"):
<head>Hier steht der Titel (im Browser als Titelleiste sichtbar) und weitere, im Browser nicht sichtbare Informationen.</head>
<body>Hier steht alles, was im Webbrowser zu sehen ist.</body>.
ZusÃ¤tzlich enthalten HTML-Dokumente zu Beginn eine Textzeile <!DOCTYPE.... >, die Informationen Ã¼ber Regeln fÃ¼r die aktuelle Webseite (page) enthÃ¤lt.

Ein einfaches Beispiel im Quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <title>HTML-Grundlagen</title>

  </head>

  <body>

  <h3>Guten Morgen! Hallo! Guten Tag!</h3>

  Dies ist eine sehr, sehr einfache HTML-Seite (page).

  </body>

  </html>

.. und im Webbrowser:

Guten Morgen! Hallo! Guten Tag!

Dies ist eine sehr, sehr einfache HTML-Seite (page).

HTML, Head

Head
Der Head-Teil ist vom Ã¼brigen HTML-Dokument durch den Tag <head>...</head> abgegrenzt. Zumindest der Titel des Dokuments (zB: <head>Aktuelles</head>), der in der Titelleiste des Webbrowser angezeigt wird, soll angegeben werden. Im Head-Bereich kÃ¶nnen eine groÃŸe Anzahl von weiteren Informationen durch META-Tag (<meta... >), die im Browser-Fenster nicht angezeigt werden, definiert werden.
AuÃŸerdem kÃ¶nnen CSS-Definitionen (Formatierungsanweisungen) und Scripts (zB JavaScript) enthalten sein oder mit externen Dateien verknÃ¼pft sein.

Beispiel fÃ¼r einen wichtigen META-Tag:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> = Info fÃ¼r den Browser: WesteuropÃ¤ischer Zeichensatz

HTML, Tags,

Tags
HTML-Befehle, sogenannte Tags, werden im Quellcode zwischen spitze Klammern gesetzt. Sind diese Befehle bzw. Tags dem Browser bekannt, fÃ¼hrt er sie aus, andernfalls ignoriert er sie. Tags kÃ¶nnen sowohl groÃŸ als auch klein geschrieben werden, werden in der Regel jedoch klein geschrieben.
"Empty tags" sind Anweisungen ohne Ende-Tag, die der Browsern sofort und ohne weitere Anweisungen ausfÃ¼hren kann.
"Conainer tags" haben einen Anfangs- und Ende-Tag, wobei sich der Ende-Tag vom Anfangs-Tag nur durch einen SchrÃ¤gstrich ("slash") vor dem Tag-Namen unterscheidet. Anfangs- und Ende-Tag umschlieÃŸen meistens einen Textbereich, auf den sich die Anweisungen beziehen.

Beispiele fÃ¼r "empty tags": <hr> oder <br>
Beispiele fÃ¼r "container tags": <i>italic</i> oder <h1>Ãœberschrift 1</h1>

HTML, Web-Farben, Farbsysteme

Web-Farben: Farbsysteme
Die meisten heutigen Web-Browser verstehen verschiedene Angaben zur Darstellung von Farben im additiven Farbsystem für Displays und Monitore. Daher bestehen die Farben auch für den HTML-Code aus den drei Farbkomponenten [1] Rot, [2] Grün und [3] Blau.
[4] Hexadezimalsystem:
Dieses Sytem wird von allen Webbrowsern richtig interpretiert, wenn der Farbcode folgenden Aufbau hat:
#RGB (Rot-Grün-Blau): Jeder Farbanteil kann die Werte von 00 bis FF annehmen. Bei Grautönen sind alle Werte gleich. Die Code-Kombinationen ergeben theoretisch 15125 Farbtöne und 256 Grautöne inklusive Weiß (#000000) und Schwarz (#FFFFFF).
[5] Benannte Farben [Named Colors]
Einige dieser Farbkombinationen können auch duch Farbnamen definiert werden. Jeder Browser kennt zumindest namentlich 16 Farbnamen (zB Black, White, Blue). Einige Browser kennen jedoch wesentlich mehr Farbnamen.
[5] [6] RGB-Farbsystem
Viele Browser können auch Farben im RGB-Farbsystem richtig interpretieren. Dadurch sind noch wesentlich mehr Farbkombinationen theoretisch möglich. Nach der Buchstaben kombination rgb stehen die Farbanteile für Rot, Grün und Blau in Klammer:
[5] rgb(R,G,B) - Werte für Rot, Grün und Blau von 0 bis 255
oder
[6] rgb(R%,G%,B%) - Werte für Rot, Grün und Blau in Prozent von 0% bis 100%

Beispiele:
[7] Hexadezimalsystem: #FF00FF - Benannte Farben: Fuchsia - RGB-System rgb(255,0,255) oder rgb(100%,0%,100%)
[8] Hexadezimalsystem: #7FFFD4 - Benannte Farben: Aquamarine - RGB-System rgb(177,255,212) oder rgb(69%,100%,83%)
[9] Hexadezimalsystem: #808080 - Benannte Farben: Gray - RGB-System rgb(128,128,128) oder rgb(50%,50%,50%)

HTML, Web-Farben, Hexadezimalsystem

Web-Farben: Hexadezimalsystem
Web-Farben sind eine Auswahl aus dem additiven Farbsystem, die in allen Web-Browsern auf allen Systemen gleich angezeigt werden. Entsprechend dem RGB-Farbmodus setzen sie sich aus den Farbkomponenten Rot, GrÃ¼n und Blau zusammen.
Im allgemeinen werden sie im HTML-Quellcode nach dem Hexadezimalsystem codiert, wobei ihnen zur Kennzeichnung das Zeichen "#" vorangestellt wird.
FÃ¼r die drei Farbkomponenten werden nur folgende Hexadezimal-Codes verwendet:
00, 33, 66, 99, CC, FF.
Werden diese sechs Codes, jeweils fÃ¼r Rot, GrÃ¼n und Blau, kombiniert, entstehen daraus die 216 gÃ¼ltigen Web-Farben.

Beispiel:
Web-Farbe #6600FF hat folgende Farbanteile: Rot 66 (=102 dezimal), GrÃ¼n 00 (=00 dezimal), Blau FF (=255 dezimal)

HTML, Web-Farben, Zuweisung von Farben

Zuweisung von Web-Farben
Die direkte Zuweisung von Farben geschieht im HTML-Code über Attribute in den Tags. Nur bestimmte Tags akzeptieren die direkte Zuweisung von Farben für HTML-Objekte oder Hintergründe. Die Farbangabe erfolgt entsprechend den in HTML gültigen Web-Farben bzw. Farbsystemen.
[1] Attribut für Farbe des Objekts (zB für Text oder horizontale Linien): color="benannteFarbe" (zB color="red") oder color="#RGB" (zB color="#FF00CA")
[2] Attribut für die Hintergrundfarbe (zB für für die Seite oder eine Tabelle): bgcolor="benannteFarbe" (zB bgcolor="gray") oder color="#RGB" (zB color="#B033FF")
[3] Attribute für die Seite <body>: [3A] Hintergrundfarbe: bgcolor - [3B] neuer Link: link - [3C] besuchter Link: vlink - [3D] aktiver Link: alink - [3E] Textfarbe: text
[4] Attribute für Rahmen von Tabellen und Zellen: [4A] Hintergrundfarbe: bgcolor - [4B] Rahmenfarbe: bordercolor - [4C] heller Rahmenteil: bordercolorlight - [4D] dunkler Rahmenteil: bordercolordark

Beispiele:

<body [3A] bgcolor="#D8F4FF" [3B]  link="#0000FF"[3C] vlink="#9900CC" [3D][3D] alink="#FF3366"  [3E]  text="#003333">

      <hr [1B] color="#3f0075" width="300"  >

      <h3 align="center"><font [1A] color="#FF00FF">Ich bin eine lilafarbene Überschrift</font></h3>

      <table width="300" border="4" align="center" [4A] bgcolor="#C5EFFF" [4B] bordercolor="#FF6666" [4C] bordercolorlight="#60D0f9"  [4D] bordercolordark="#012773" >

<tr>

<td align="center" ><strong>GLÜCKLICHE UND<br>

ERFOLGREICHE TAGE</strong></td>

</tr>

<tr>

<td align="center" ><strong><a href="http://www.cadat.at/" target="_blank">WÜNSCHT CADAT</a></strong></td>

</tr>

</table>

</body>

Die Attribute bordercolorlight und bordercolordark werden nicht von allen Browsern angezeigt. Einige zeigen anstelle dieser Attribute die Farbe von bordercolor
->Link Beispiel-HTML-Datei

Anmerkung Meistens erfolgt die Farbzuweisung jedoch über CSS

HTML. Hyperlink, Link, relativer Verweis, absoluter Verweis

Relative und absolute Hyperlinks
Mit Hyperlinks (Links, Verweise) kann auf ein Ziel im gleichen oder in einem anderen Dokument verwiesen werden. Normalerweise gelangt man durch Anklicken des Hyperlinks zum verknÃ¼pften Ziel.
Ein Ziel ist ein Anker, der mit dem Tag <a> definiert wird.
Wird auf eine andere Datei verwiesen und kein spezielles Ziel in der verknÃ¼pften Seite angegeben, gelangt man zum Beginn der verknÃ¼pften Seite.
Relative Verweise (Hyperlinks) verweisen auf ein Ziel im Bereich der Website,
absolute Verweise auf eine einmalige Adresse im Bereich des eigenen Computers, des lokalen Netzwerkes oder im Internet.
Verlinkt kÃ¶nnen Texte, Grafiken oder Medien-Objekte werden.

Beispiele:
Anker zB: <a name="ziel">Hier ist das Ziel</a>
Relativer Verweis zB: <a href="#zielname">Zum Ziel in der aktuellen Seite</a> oder
<a href="dateiname.htm">Zu einer anderen Datei</a> oder
<a href="dateiname.htm#zielname">Zu einem Ziel in einer anderen Datei</a>
Absoluter Verweis zB im Internet: <a href=http://www.cadat.at/acd/xxc_info_alle.php>Zu den Short-Infos</a>

Seite 1

Links/Seite:	Suchen im aktuellen Thema:
Sortieren nach:	Stichwort	Thema(Code)	Reihung	Aktueller ausgewählter Code: 4ha


Schau nicht hinauf, schau nicht hinab, schau geradeaus.


	10 INFOS HTML GRUNDLAGEN