Schlagwort-Archive: CSS

Programmierkurs | HTML & CSS #001

Programmier Kurs | HTML & CSS #001

Erste Schritte im HTML

Im allgemeinen sollte ein Grundgerüst erstellt werden was so aussehen kann:

<!DOCTYPE html>
<html>
<head>
<title>Titel des Dokuments<title>
</head>
<body>
<header>
<h1>Überschrift des Titels</h1>
</header>
<h1>Überschrift zum Thema</h1>
<p>Text zum Thema </p>
<footer>
<h1>Copyright und Link Angaben zu Kontakt und Impressum</h1>
</footer>
</body>
</html>

Dies Grundlage könnt Ihr euch auf einen Editor speichern. Den Editor könnt Ihr unter –> Start –> Programme –> Zubehör –> Öffnen des Editor und Kopiert den Quellcode in den Editor (Am besten ist es wenn Ihr einen Ordner erstellt „Programmierkurs“) und speichert es z.B „Grundgerüst.txt“ und wenn Ihr es Testen wollt was man im Gerüst schon sieht könnt Ihr es mit der Endung .htm oder .html speichern.

Zum Kurs wird es bald einen Entwicklungsseite geben die den Fortschritt des Kurses in Kapitel unterteilt um so eine Übersicht zu schaffen, die für Besucher erstellt werden die als Nachzügler dazugekommen sind.
Die Domain wird in einem späteren Beitrag dazu kommen. Die Domain wird lauten http://transcendence-development.de jedenfalls mit der Endung ist man noch am überlegen.

Und nun zum CSS

Wir empfehlen eine Externe Datei zu den Projekt zu erstellen da man meist viele Dateien zu bearbeiten hat wenn man sich in einem Beispiel von 20 Dateien annimmt ist eine CSS-Datei eine gute Lösung für den Design und eine große Zeitersparnis.

Zwischen <head> und </head> sollte dementsprechend die Verknüpfung stehen: <link href=styles/styles.css“> rel=“stylesheet“ type=“text/css“ />

natürlich sollte dazu ein Ordner erstellt werden das extra für die CSS-Dateien zur Verfügung stehen sollte.  Aber Ihr solltet darauf achten das es richtig Geschrieben wird sonst funktioniert es nicht.

(@charset „UFT-8″; solltest mit den Meta für deine HTML optimieren <meta name=“Content“-Type“ content=“text/html; charset=UTF-8″ />

Erste CSS Angaben zum Test:

@charset „UTF-8“;

body  {
background-color: #000000;
font-color: #FF0000;
}

header {
border-radius: 15px;
background-color: #8B0000;
text-align: center;
}

header h1 {
font-size: 40px;
color: #FF0000;
text-transform:uppercase;
}

footer {
box-shadow: 2px 5px 10px #8B0000;
text-align: center;
}

footer h1 {
font-size: 20px;
color: #FF0000;
text-transform: uppercase;
}

So das war´s für diesem Beitrag weiterer Programmier Spaß gibt es vielleicht morgen wieder.
Die Developer Seite muss erstmal fertig erstellt und eingerichtet werden.