Mittelschule Leogang   Tel: +43(0)6583 20202   direktion@ms-leogang.salzburg.at

Mittelschule Leogang

images/stories/artikel/slide/herbst01.jpgimages/stories/artikel/slide/herbst02.jpg

ECDL Prüfung

ECDL Prüfung am Montag, dem 15. April 2024 +++ Start 10:20 Uhr pdfTeilnehmerliste

CSS und HTML - Unterlagen - Beispiele - Anleitungen
So lerne ich HTML. STEP by STEP Anleitung zur Einführung in die Webprogrammierung download now

Test zu html und CSS: Abschlusstest download now

Interessante Links dazu:
http://de.selfhtml.org/css/layouts/

 

01 - Einfaches horizontales Menüs

01 menu

01_menu.htm 01_style.css
Die beiden Dateien stellen die Basis für ein einfaches horizontales Menü dar.Kopiere die Codezeilen der beiden Dateien in deine Projektdateien (html und css), passe sie entsprechend an und verändere das Menüstyling nach deinen Wünschen.

02 - Horizontales Menü mit Subebene

02 menu

02_menu.htm 02_style.css
Die beiden Dateien stellen die Basis für ein horizontales Menü mit Untermenüpunkten dar. Kopiere die Codezeilen der beiden Dateien in deine Projektdateien (html und css), passe sie entsprechend an und verändere das Menüstyling nach deinen Wünschen.

03 - Horizontales Menü mit Subebene

03 menu

03_menu.htm 03_style.css
Die beiden Dateien stellen die Basis für ein horizontales Menü mit Untermenüpunkten dar. Kopiere die Codezeilen der beiden Dateien in deine Projektdateien (html und css), passe sie entsprechend an und verändere das Menüstyling nach deinen Wünschen.

04 - Horizontales Menü mit Subebene benötigt javascript und jQuery

04 menu

04_menu.zip
Im zip- Archiv befinden sich alle notwendigen Dateien. Achte auf die Ordnerstruktur. Passe das Menü deinen Bedüürfnissen an und kopiere alle notwendigen Dateien in deine Struktur (htm, css, js).

 

 

Template 1

2-spaltiges Layout mit Kopfzeile (links Menübereich - rechts Contentbereich)

Template 1

main.css
start.htm

 01_template

CSS Stylings

Hier findest du nützliche CSS Anweisungen und Erklärungen über ihre Wirkungsweise.

Rahmen

border: 1px solid #000;

durchgehende  Rahmenlinie, Stärke 1 Pixel, Farbe schwarz

border: 2px dotted red;

2 Pixel stark gepunktete rote Rahmenlinie

border-top: 1px solid blue;

Fügt am oberen Rand des Elementes eine Rahmenlinie hinzu.
Mögliche Rahmenpositionen können hier verwendet werden:
top, left, right, bottom
Link Styling

a:link,
a:active,
a:focus,
a:visited,
a:hover { ANWEISUNGEN }

allgemeine Link Definition

Grundsätzlich sollen die Anweisungen zunächst für alle Links gelten. In einem weiteren CSS Schritt kann dann zB. nur der Hover-Effekt gesondert gestylt werden.

text-decoration: none;

Diese Anweisung ermöglicht es den Link unterstrichen oder nicht unterstrichen darzustellen.
Mögliche Zustände von text-decoration sind none bzw. underline
Schriften

font-family: {Arial, serif}

Definition der Schriftart.
Hier kann zusätzlich angegeben werden, ob die Schriftart serif oder sans-serif oder cursive dargestellt wird

color: #000;

Definiert die Schriftfarbe

font-weight: bold;

Darstellung in Fett-Schrift oder normaler Schrift.
Mögliche Zustände sind bold oder normal

font-size: 1.5em;

font-size: 25px;

Definition der Schriftgröße
1.5 em bedeutet das 1,5 fache der normalen Schrift
25px bedeutet eine fixe Größe von 25 PIXEL

font-variant: small-caps;

Schriftvariante - Darstellung mit Kapitälchen
Mögliche Zustände sind small-caps oder normal

letter-spacing: 0.5em;

Definiert den Abstand zwischen den Buchstaben in einem Text

 

Weitere nützliche Tools

Datum (php)
Eine automatische Datumsfunktion in meiner Website integrieren
Counter (php)
Einen counter auf php-Basis programmieren
Begriffe Quelltext
Dasieses Script zeigt an Hand eines Beispiels den Quelltext (Codeansicht) einer htm-Seite auf
Zusätzlich werden wichtige und häufig verwendete "tags" in Zusammenhang mit Tabellen erläutert
bild_verkleinerer.exe Software zum Bilder verkleinern. Einfaches Tool, welches eine beliebige Anzahl von Fotos in einem Ordner auf gewünschte KB-Größe verkleinert.

ECDL Testcenter

ecdl

EXPERT Schule

expert schule

Schulsportgütesiegel in Gold

schulsport

Gemeinde Leogang

gemeinde

Copyright © 2024 Mittelschule Leogang