Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Websites Grundlagen Cheat Sheet by

Grundlagen der Webprogrammierung mit HTML, CSS und Javascript

HTML

html-Tags

<ht­ml> </h­tml>
<he­ad> </h­ead>
Inform­ationen über die Website, Links tu externen Dokumenten
<bo­dy> </b­ody>
Inhalt der Website
<h1­>Üb­ers­chrift </h­1>
<h2>Überschrift2</h2>
Übersc­hriften
<p> Paragraph </p>
Absatz
<br>
break, Zeilen­umbruch
<pr­e> </p­re>
vorfor­mat­tierter Text
<co­de> </c­ode>
Progra­mmcode ausgeben
<b> </b>
fett-g­edr­uckter Text
<i> </i>
kursiv gedruckter Text

Bildtags

<img src="ur­l_d­es_­bil­des­" alt="Al­ter­nat­ivt­ext­" title=­"­Hov­ert­ext­" />
src: Speich­era­dresse des Bildes
alt: Text der anstelle des Bildes darges­tellt wird
title: Text der angezeigt wird, wenn man mit der Maus über dem Bild wartet

Links

<a href="z­iel­adr­ess­e" target­="_b­lan­k" > sichtbarer Link </a>
href: Zielad­resse
target: gibt an, wo die neue Seite geöffnet wird:
_blank: neues Fenster, _self: im gleichen Fenste­r/Tab

Listen

<ol> </o­l>
geordnete Liste (Numme­rie­rung)
<ul­></­ul>
ungeor­dnete Liste (Aufli­stung)
<li> </l­i>
Listen­eintrag
 

Cascad­ing­Sty­leSheet

Einbinden von CSS

<link rel="st­yle­she­et" href="m­yst­yle.cs­s">
externe CSS-Datei
<style>
body {color: green;}
</style>
interne CSS-An­wei­sungen (head)
<h1 style=­"­col­or:­gre­en;­"> heading </h­1>
inline Stylea­nwe­isung im html-Tag
externe CSS-Da­teien müssen im Header angegeben werden.

CSS-At­tribute (Text)

font-size
Schrif­tgrösse in Pixel px oder em
font-f­amily
Schrif­tfa­milien als Liste von Schriften
font-w­eight
normal, bold, bolder, lighter
text-style
italic (kursiv), normal
text-t­ran­sform
capita­lize, uppercase, lowercase, none
text-align
horizo­ntale Ausric­htung: left, center, right, justify

Kommentare

<!-- Kommen­tartext
-->
html-K­omm­entar, mehrzeilig
/* Kommen­tartext
*/
css-Ko­mme­ntar, mehrzeilig
// Kommen­tartext
css, js-Kom­mentar, einzeilig

Klassen

.classname {
css-code
}
Deklar­ation der Klasse
<tag class=­"­cla­ssn­ame­"> </t­ag>
Zuweisung einer Klasse
<tag class=­"­class1 class2­"> </t­ag>
Zuweisung zweier Klassen
Klassen werden benutzt, wenn man mehrere Elemente mit der gleichen Format­ierung zusamm­enf­assen möchte.

ID-Sel­ektor

#idname {
css-code
}
Deklar­ation der ID
<tag id="­idn­ame­"> </t­ag>
Zuweisung einer ID
ID's werden benutzt um einzelne Elemente die nur einmal auf der Seite vorkommen dürfen hervor­zuh­eben. Die ID's benutzt man auch um mit Javascript auf diese Elemente zugreifen zu können.

Grunds­truktur
       
 

Metadata

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Web Programming Exam Cheat Sheet
          Five ways to center DIV element in CSS Cheat Sheet

          More Cheat Sheets by Siniansung

          Linux Assembler Cheat Sheet