Einführung HTML und CSS

  1. HTML

Einführung HTML und CSS. Meines erachtens ist es sehr wichtig zumindest Grundkenntnisse in diesem Bereich zu haben.  Auch wenn man später, weil man z.B seine website mit einem CMS erstellt, nicht mehr direkt mit HTML und CSS arbeitet. Denn grundsätzlich wird ja jede Seite mit diesen Elementen aufgebaut. Das haben wir unserem lieben Sir Tim Berners Lee zu verdanken.

Sir Tim Berners Lee Erfinder von HTML

 

tim Einführung HTML und CSS

Sir TimBerners Lee Erfinder von HTML

Also hier nochmal das Grundgerüst einer jeden Webseite:

<Html>

<head>

</head

<body>

</body>

</html>

 

 

Am besten ihr kopiert euch diese tags in den Editor eurer Wahl und speichert als index.html. In den body,  schreiben wir eine wenig text.

Das sieht dann so aus:

<body>

Meine erste Webseite

</body>

 

Wenn wir jetzt auf die Index-seite doppel-klicken öffnet der browser und zeigt das Ergebnis an!

Bildschirmfoto vom 2016-02-26 05:42:21

Einige kleine aber wichtige Dinge müssen wir noch in den head schreiben.

Nämlich Informationen über die Version, die Sprache, die Seitenbeschreibung und <meta charset=“UTF-8″>

UTF 8 ist die erweiterte Zeichenkodierung. Hierdurch werden auch unsere deutschen Umlaute richtig geschrieben. Würde diese Kodierung fehlen, dann müsste jedes Umlaut quasi „händisch“ geschrieben werden.

ä müsste dann z.B so aussehen; &auml;

Jetzt müssen wir noch den body aufteilen. In den Kopfbereich, den Bereich für die Navigation und de Inhalt oder content.

Das machen wir mit sogenannten div-Kontainern.

Fügt folgendes in den body ein:

<div id=’kopf‘>
</div>
<div id=’navigation‘>
</div>
<div id=’inhalt‘>
</div>

Anstelle von ‚ -Zeichen können natürlich auch „“ gesetzt werden!

Unsere index.html sieht nun so aus:

<html>
<head>
<meta http-equiv=“Content-Language“ content=de“>
<meta charset=“UTF-8″>
<title>Seitentitel</title>
<meta name=“description“ content= “ Seitenbeschreibung“ />
<link rel=“stylesheet“ type=“text/css“ href=“style.css“/>
</head>
<body>

<div id=’kopf‘>
</div>
<div id=’navigation‘>
</div>
<div id=’inhalt‘>
Dies ist meine Webseite

</div>
</body>
<html>

Bitte beachte, dass ich den Text jetzt in den inhalt-div geschrieben habe. Im folgenden wollen wir die div-Kontainer  formatieren. Um dies zu tun kommt CSS ins Spiel.

 

2. CSS

CSS gibt es seit 1995 und es entstand unter der Zusammenarbeit von zwei Computer- Fachleuten mit den Namen Hakon Wium und Bert Bos.

Das erste Mal präsentiert wurde CSS im Jahr 1994 auf einer Konferenz in Chicago, wonach auch das W3C auf diese Stylesheet Sprache reflektierte. Die Weiterentwicklung war erfolgreich, und so gab es nach CSS Level 1 bald auch das 2. Level, das bis heute von einigen Browsern komplett angewandt wird. In der gesamten Entwicklungsgeschichte arbeitete man immer wieder daran, Unstimmigkeiten auszuräumen und die Funktionsweise zu verbessern. CSS ist  beim Aufbau der meisten Homepages heute ein unverzichtbares Hilfsmittel. Es sorgt für die Gestaltung und dafür, dass die Inhalte und die Gestaltung der Seite voneinander getrennt behandelt werden können. Die Kombination mit HTML und XHTML ist üblich. Über CSS findet man viele Hilfestellungen im Internet, wodurch die praktische Anwendung sehr erleichtert wird.

Dass der browser weiß, dass es eine css-Datei gibt muss folgender link in die html Seite eingefügt werden:

<link rel=“stylesheet“ type=“text/css“ href=“style.css“/>

Wir erstellen noch eine style.css-Datei und speichern sie in unserem Webordner ab.

Wir öffnen die style.css und geben dort die Daten für die Formatierung unserer Webseite ein. Ich habe folgendes eingegeben:

#kopf
{width:1000px;
height:150px;
background-color:#ae2828;
margin-left:10px;}
body {
background-color:#dcdcdc;}
#navigation {
width:100px;
height:500px;
border: 5px solid #00501f;
margin-left:10px;
Position:absolute;}
#inhalt {
width:890px;
height: 2000px;
background-color: red;
margin-left:120px;
}

Am besten kopierst du das und fügst es in deine style.css-Datei ein!

Abgeleitet aus dem Englischen kann man gut erkennen worum es jeweils geht. die Farbcodes können aus jedem Bildbearbeitungsprogramm oder auch einfach mit googeln aus dem Internet geholt werden!

Wenn wir jetzt unsere Webseite betrachten so kann man jetzt schon die grundsätzlichen Bereiche erkennen.

Siehe hier

Bildschirmfoto vom 2016-02-26 06:41:18

 

Wer mehr über CSS wissen möchte oder einfach ein paar praktische Tips für seine Webseite benötigt der schaue doch mal hier nach

Praktische Tipps zu CSS

 

1 Kommentar

  1. gert

    Probekommentar

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Zum Newsletter anmelden

Zum Newsletter anmelden

Melden sie sich zum meinem Newsletter an und Sie erhalten ein Geschenk

Sie haben sich erfolgreich angemeldet