15. Tag HTML 29.10.2014

HTML/CSS
Ralf Herbst



Website bauen:


Im Projekt Avatar die Unterseiten:
- poster.html
- galerie.html
anhand vom Autohaus Luigi nachbauen


Im HTML-Editor die weiteren Unterseiten im Ordner Seiten anlegen:
- service.html
die Datei galerie.html  speichern unter - Ordner Seiten und Namen service.html
im head-Bereich bleibt nur stehen:
       <meta charset="utf-8">
       <title>Autohaus Luigi</title>
       <link rel="stylesheet" href="../css/main.css" type="text/css">  
im body-Bereich den Pfad abändern:
<ul>   <li><a href="../index.html">Home</a></li>
           <li><a href="angebote.html">Angebote</a></li>
           <li><a href="gebrauchtwagen.html">Gebrauchtwagen</a></li>
           <li><a href="hit.html">Hit des Monats</a></li>
           <li><a href="galerie.html">Galerie</a></li>
           <li class="selected"><a href="#nogo">Service</a></li>
im maincontent-Bereich den Service einarbeiten:
 <div id="maincontent"> <!--Begin Maincontent-->
 <h1>Service</h1>
 <p>Adresse</p>
 <p>Richard-Wagner-Str. 77<br>
 41065 Mönchengladbach<br>
 Fon: 02161 - 45533<br>
 Fax: 02161 - 42120</p>
<p>Öffnungszeiten</p>
 <p>Mo. - Do. 8:00 - 20:30 Uhr<br>
 Fr. 8:00 - 20:00 Uhr<br>
Sa. 9:00 - 18:00 Uhr</p>
 </div> <!--End of Maincontent-->

-anfahrt.html
die Datei service.html  speichern unter - Ordner Seiten und Namen anfahrt.html
im body-Bereich den Pfad abändern: 
<ul>  <li><a href="../index.html">Home</a></li>
         <li><a href="angebote.html">Angebote</a></li>
         <li><a href="gebrauchtwagen.html">Gebrauchtwagen</a></li>
         <li><a href="hit.html">Hit des Monats</a></li>
         <li><a href="galerie.html">Galerie</a></li>
         <li><a href="service.html">Service</a></li>
         <li class="selected"><a href="#nogo">Anfahrt</a></li>
im maincontent-Bereich die Anfahrt einarbeiten mit google maps unter Hilfe von iframe:
dh. auf "google maps" Adresse eingeben und Karte erscheint, unten rechts Button: Karten teilen und einbetten - Karte einbeten - Maße (entsprechend website) 710x550 - Vorschau der Kartengröße - den angezeigten ifram anklicken mit strg+c in unsere Datei anfahrt.html mit strg+v einfügen:
iframe = Erklärung im HTML-Lexikon: 35.iframe.html  sowie iframe unsichtbar machen
 <div id="maincontent"> <!--Begin Maincontent-->
 <h1>Anfahrt</h1>
<iframe src="https://www.google.com/maps/datenxxx "width="730" height="550" frameborder="0" style="border:0"></iframe>
 </div> <!--End of Maincontent-->





 EMPFEHLUNGEN:

css4you 


 

14. Tag HTML 28.10.2014

HTML/CSS
Ralf Herbst



Website bauen:



Im HTML-Editor die weiteren Unterseiten im Ordner Seiten anlegen:
- gebrauchtwagen.html
dazu die angebote.html kopieren und im Ordner Seiten als gebrauchtwagen.html einfügen
die Pfade und Namen in der gebrauchtwagen.html abändern:
 <div id="navigation">
                   <ul>  <li><a href="../index.html">Home</a></li>
                        <li><a href="angebote.html">Angebote</a></li>
                        <li class="selected"><a href="#nogo">Gebrauchtwagen</a></li>
anlegen der div-container im Maincontent:
 <div id="maincontent"> <!--Begin Maincontent-->
              <h1>Gebrauchtwagen</h1>
<div class="gebrauchtwagen"> <!--Begin Gebrauchtwagen 1-->
                 <div class="bildPreis">
   <img src="../bilder/cars/lambo02.jpg" alt="" border="0" width="210" height="158">
                 <p class="gebrauchtwagenPreis">Preis: 180.100€</p> </div>
                 <div class="text">
                 <h2>Fahrzeugtyp</h2>
                 <p>TEXT</p>
                 </div> <!--End of Gebrauchtwagen 1-->  = wiederholen so oft wie benötigt
              </div></div>  <!--End of Maincontent-->
dazu in der Datei announcen.css die Attribute für die Unterseite Gebrauchtwagen anlegen:
.angebote, .gebrauchtwagen { border-bottom: solid 1px farbe; }
kennzeichnung ag jetzt: /*------------------------Gebrauchtwagen----------------------------*/
.gebrauchtwagen { margin-bottom: 10px; }
.gebrauchtwagen h2 { font-size: 120%; color: farbe;  margin-bottom: 10px; }
.gebrauchtwagen img { border: solid 1px farbe; }
.gebrauchtwagen .bildPreis { float: right; width: 210px; padding: 4px 2px 0 0; }
.gebrauchtwagen .text { min-heigth: 200px; padding: 0 230px 10px 0; text-align: justify;}
.gebrauchtwagenPreis { color: farbe; padding-top: 7px;}

Wichtig in der main.css-Datei im body-bereich einfügen:
body { overflow-y: scroll; overflow-x: auto; }
= erstellt leere Scrollbar bei kurzen Seiten (Home) und verhindert das Wackeln

- galerie.html
mit Unterstützung von Lightbox
die Dateien in unseren _work-Ordner entpacken, die lightbox.css im Ordner css kopieren sowie die Bilder close.png, loading.gif, next.png, prev.png im Ordner bilder kopieren, den Ordner js kopieren ins Projekt Autohaus Luigi,
auf der galerie.html die Pfade im head-bereich einfügen:
       <link rel="stylesheet" href="../css/main.css" type="text/css">
       <link rel="stylesheet" href="../css/lightbox.css" type="text/css">
       <script src="../js/jquery-1.11.0.min.js"></script>
       <script src="../js/lightbox.min.js"></script>
= die script kopieren und einfügen aus website lightbox, abändern css/main.css in ../css/main
in der Navigation den Pfad abändern:
<div id="navigation">
             <ul> <li><a href="../index.html">Home</a></li>
                     <li><a href="angebote.html">Angebote</a></li>
                     <li><a href="gebrauchtwagen.html">Gebrauchtwagen</a></li>
                     <li><a href="hit.html">Hit des Monats</a></li>
                     <li class="selected"><a href="#nogo">Galerie</a></li>
<h1>Galerie</h1>
anlegen der div-container im Maincontent mit festlegung der Anordnung (abstand_rechts_unten etc.):
 <div id="maincontent"> <!--Begin Maincontent-->
            <h1>Galerie</h1>
                   <div id="gallery">  <!--Begin Galerie 1-->
<a href="../bilder/galerie/lambo01.jpg" data-lightbox="roadtrip">
<img src="../bilder/galerie/thumbs/lambo01t.jpg" alt="" border="0" width="210" height="158" class="abstand_rechts_unten"></a>  <!--End of Galerie 1-->   = so oft wiederholen wie nötig 
</div> </div> <!--End of Maincontent-->
in der lightbox.min.js-Datei abändern (ca. 3. Zeile) von {return"image"+a+"von "+b"} auf
{return"Bild "+a+" von "+b} =deutsche Verwendung
in der lightbox.css-Datei durch suchen + ersetzen: ../img in ../bilder und Attributa anlegen:
#gallery { width: 750px;  }
#gallery a img { border: solid 5px #FFF; border-bottom-width: 30px; border-radius: 5px  }
#gallery a img:hover { border-color: #666; }
.abstand_rechts_unten { margin: 0 30px 30px 0;  }
.abstand_unten { margin: 0 0 30px 0;  }













 

11. Tag HTML 23.10.2014

HTML/CSS
Ralf Herbst


Im HTML-Editor unter sites:
32.ap_div.html

AP-div dienen zur Überlappung von Elemente, andere div-container können die Elemente nur untereinander anordnen
Ziel: beide Container sollen miteinander mitgehen, roter Container wird Papa und blauer container soll folgen

33.layout_4_zeilen_mit_apdiv.html
= einbauen von logo mit Hilfe von ap-div-container, dh. Logo folgt dem header




Aufbau des Webauftritts planen (pdf-Datei)
Konzept - Portfolio erstellen (Dienstleistung bzw. Produkte etc.)
- Zielgruppe definieren: welche Personengruppe, Altersgruppe, Interessen usw.
- Zweck der Webpräsenz festlegen: Image fördern, unterhalten oder Dienstleistung anbieten
- Kommunikationsarten bestimmen: Feedback, Meinungen erfahren, Kontakt treten per E-Mail, Telefon oder Post, Besucher auf der Website auswerten

Flußdiagramm erstellen, um festzulegen, welche Infos auf welcher Seite plazieren und wie diese Seiten miteinander verknüpft werden sollen, Übersicht bewahren!
Mindmeister


Storyboard (Drehbuch beim Film) (pdf-Datei)
wichtig: Unterschrift Kunde!!!
Storyboard runterladen

Websitedesign Vertragstexte

Tipp zur Kundensuche: 
www.meinestadt.de (region bezogen)
E-Mail mit Hinweis auf seine Website etwas veraltet, jetzt neuere Möglichkeiten zur Gestaltung, beachten auch Handy und Tablet


Website bauen:
im HTML-Editor die Projekte "Autohaus Luigi, Avatar, Lady like" anlegen unter neues Projekt mit Namen im linken und rechten Feld (wichtig!) eingeben und übernehmen.
bei Einstellungen:
in Optionen HTML bei "Benutzer-Tags nach..." Haken entfernen und übernehmen
bei lokale Verzeichnisse die Pfade legen:
- Stammordner für Homepage-Daten:
C:/Users/bmurmann/Deskop/Web-Projekte/Download Ralf/Autohaus Luigi
- Standardverzeichnis für gemeinsame Dateien (Grafiken etc.):
C:/bmurmann/Desktop/Web-Projekte/Download Ralf/Aufhaus Luigi/bilder
- Verzeichnis für Style Sheet Definitionsdateien (*.css):
(vorher im Ordner Webprojekte den Ordner css anlegen)
C:/Users/bmurmann/Desktop/Web-Projekte/Download Ralf/Autohaus Luigi/css
übernehmen
in dem Projektordner sind unter dem Ordner "_work2" die screen.jpg vorhanden, diese kommen meist vom webdesigner oder photoshop, F2
Wichtig: erst HTML - dann CSS!
aus unserem HTML-Lexikon Ordner die "index.html"-Datei anklicken und in den Projekt-Ordner Autohaus Luigi abspeichern
aus unserem HTML-Lexikon Ordner unter sites die 00.css_vorlage.html anklicken und im Projektordner Autohaus Luigi bei neues Dokument erstellen (beachten Ordner) Dateiname main und Erweiterung .css übernehmen, oben Diskette anklicken und speichert automatisch in linke Feld







EMPFEHLUNGEN:

Computer Tastaturbefehle

Google GidF

13. Tag HTML 27.10.2014

HTML/CSS
Ralf Herbst


Website bauen:

Im HTML-Editor in der index.html bauen der Navigation im Bodybereich:
<div id="navigation"> <!--Begin Navigation-->
                   <ul>
                        <li class="selected"><a href="#nogo">Home</a></li>
                        <li><a href="seiten/angebote.html">Angebote</a></li>
                        <li><a href="seiten/gebrauchtwagen.html">Gebrauchtwagen</a></li>
                        <li><a href="seiten/hit.html">Hit des Monats</a></li>
                        <li><a href="seiten/galerie.html">Galerie</a></li>
                        <li><a href="seiten/service.html">Service</a></li>
                        <li><a href="seiten/anfahrt.html">Anfahrt</a></li>
                        <li><a href="seiten/kontakt.html">Kontakt</a></li>
                        <li><a href="seiten/impressum.html">Impressum</a></li>
                        <li><a href="seiten/agb.html">AGB</a></li>
                   </ul>
              </div> <!--End of Navigation-->

und in der main-css-Datei die Attribute dazu einbauen:
alle Bild-Pfade abändern in  url (../bilder /name.jpg);
#navigation { height: 25px; background-color: #333; padding-left: 10px; background-image: url(../bilder/bg_navi.jpg); background-repeat: repeat-x; background-position: 0px 0px; }

#navigation ul { list-style-type: none; }
#navigation ul li { line-height: 24px; }
#navigation ul li a { color: farbe; padding: 0 15px; float: left; }
#navigation ul li a:hover { text-decoration: none; background-image: url(../bilder/bg_navi.jpg);
    background-position: 0px -25px; }
#navigation ul li.selected a { color: farbe; background-image: url(../bilder/bg_navi.jpg); background-position: 0px -25px;} =der ausgewählten Klassen-Link die Attribute geben

bauen der Unterseiten:
- Unterseite: "Angebote" in Verbindung mit der "annoncen.css" im Ordner css
dazu die Datei index.html speichern unter Ordner seiten mit Dateinamen: angebote.html
abändern der Pfade: ../ dh. vor alle Pfade setzen sowie
<link rel="stylesheet" href="../css/annoncen.css" type="text/ anlegen = externe Datei für die Gestaltung
abändern:
<div id="navigation"> <!--Begin Navigation-->
 <ul>  <li><a href="../index.html">Home</a></li>
           <li class="selected"><a href="#nogo">Angebote</a></li>
           usw.
 <div id="maincontent"> <!--Begin Maincontent-->
           <h1>Angebote</h1>
          <div class="angebote"> <!--Begin Angebote 1-->
          <h2>Garallda</h2>
          <img src="../bilder/cars/lambo01.jpg" alt="Lambo1" border="0" width="210" height="158">
          <p class="angeboteText">TEXT.</p>
          <p>&nbsp;</p>
          <p class="angebotePreis">Preis: 222.000€</p>
         </div> <!--End of Angebote 1-->
dies entsprechend oft wiederholen!

dazu im css-Ordner - neues Dokument - speichern unter  - Dateiname "annoncen" - Erweiterung ".css" und beachten Ordner css - übernehmen
@charset "utf-8";
.angebote {  border-bottom: solid 1px farbe; }
.angebote h2 { font-size: 120%; color: farbe; margin: 8px 0 5px 0; }
.angebote img { float: left; margin: 5px 10px 0 0; border: solid 1px farbe; }
.angeboteText { text-align: justify; padding-bottom: 30px; }
.angebotePreis { color: farbe; }







 

12. Tag HTML 24.10.2014

HTML/CSS
Ralf Herbst


Website bauen:


Vorgehensweise:
bauen der div-Container im index.html body-Bereich:
sowie setzen des Links zur eMail-Adresse 
<a href="mailto:info@autohaus-luigi.de">E-Mail</a>
und im Footer Link zur eigenen Website setzen:
<div id="footer">
        © Autohaus Luigi site by <a href="http://www.birgit-murmann.de" target="_blank">Birgit Murmann</a>
</div>
sowie Logo und Texte in die Sitebar einsetzen:
<div ID="sidebar">
      <img src="bilder/logo.gif" alt="Logo" border="0" width="85" height="95">
 </div>
bei Avator noch das Hintergrundbild einbauen im Head-Bereich: 
 <style type="text/css">
         body {
         background-image: url(bilder/bg_body.jpg);
         background-repeat: no-repeat;
         background-position: center 0px;
         background-attachement: fixed;
         background-color:#000;
         }
      </style>
dann die main.css im Ordner css:
body { font-family: Verdana; font-size: 80%; color: farbe; background-color: farbe; }
* { margin: 0; padding: 0; }
h1, h2, h3 usw { font-weight: normal;}
a { color: farbe; text-decoration: none; }
a:hover { text-decoration: underline; }
#container { background-color: farbe, width: 1000px; min-height: 550px; margin: 0 auto; border: solid 1px farbe; border-top: none; }
#header { heigt: 150px; background-image: url(..bilder/banner.jpg); background-repeat: no-repeat; background-position: 0px 0px; }
#navigation { height: 25px; background-color: farbe; }
#sidebar { font-size: %; width: 200px; padding: 15px 20px; float: right; background-color: farbe; }
#sidebar h3 { font-size: 110%; margin: 10px 0; border-bottom: solid 1px Farbe; }
#sidebar p { line-height: 140%; margin-bottom: 20px; }
#maincontent { min-height: 350px; padding: 10px 250px 10px 20px; margin-bottom: 40px;  }
#maincontent h1 { font-size: 170%; border-bottom: solid 1px Farbe; line-height: 90%; padding-bottom: 2px; margin: 5px 0 10 px 0; }
#maincontent p { line-height: 140%; margin-bottom: 10px; }
#footer { padding: 10px 20px; clear: both; } = floating von sidebar und später navi aufheben!
#footer a { color: Farbe;}

 und die Inhalte einfügen


alles abarbeiten von oben nach unten!
zum Betrachten der einzelnen Bereiche/Container etc. mit Farbe (background-color) einfärben!





EMPFEHLUNGEN:

CSS-Boxmodell

 

10. Tag HTML 22.10.2014

HTML/CSS
Ralf Herbst


Im HTML-Editor im Projekt HTML-Lexikon:
index.html
wichtig: liegt im Hauptverzeichnis: HTML-Lexikon, nie in sites!
Bezeichnung: index.html (weltweit gültig!)

Hintergrundbild für die website (CSS3): ist nicht kopierbar! (NO: Bild speichern unter...)

Bildauflösung: 2560x1440 Pixel f+r 27-Zoll, 1920x1200 für 24-Zoll

anlegen im head-Bereich:
<style type="text/css">
body { font-family: Arial, Helvetica; font-size: 100%; color: #FFF;
background-image: url(img/bg.jpg); = Pfad Bild und gekachelt
background-repeat: no-repeat; = nicht gekachelt, dh. Bild passt sich an
no-repeat = kein Kacheln, repeat-x = horizontal Kachelung,  repeat-y = vertikale Kachelung
background-position: center 0px; = Positionierung des Bildes durch 2 Werte:oben und links
(background-color: farbe; = dem Hintergrund eine Farbe geben)
background-attachment: fixed; = fixiert den Hintergrund und die Elemente (zB. Text, Video etc.) srollen, und bei scroll bewegt sich der Hintergrund mit
(background-size: contain;  = contain bei eher kleineren quadrischen Bildern in Verbindung mit background-color)
background-size: cover; = besser bei großen Bildern und passt sich an, wichtig für Handy
-moz-background-size: cover;  = für Gecko-basierte Browser wie Firefox oder Seamonkey-webkit-background-size: cover; = für Webkit-basierte Browser wie Safari, iCab, Konqueror, Google Chrome
(-ms-background-size: cover;  = für Microsoft)
(-o-background-size: cover;   = für Operabrowser)
}
dann die Attribute für die anderen Elemente festlegen:
* { }
h1 { }
h2 { }
a { ... outline: transparent; } = um die Umrandung des Links mit Punkten wegzunehmen
a:visited { color: farbe; } = um den geklickten Link farbit zu kennzeichnen
a:hover { ... text-shadow: 0 0 10px farbe; } = um den Link eine Schattierung zu geben
ol { .... list-style-type: decimal-leading-zero; } = um die Zahlen der Listen auf Null zusetzen, dh. ohne Nummerung
und die Positionierung der einzelnen Listen mit genauen Angaben:
ap-Div = Divcontainer mit absoluten Positionen
#liste1 { position: absolute; left: 50px; top: 120px; width: 220px;
               background-color: rgba(255,255,255,.5); = Werte aus css3generator, ohne Abstand
              z-index: 1000; = Überlappung der Elemente, ab 1000 wegen lt IE 8
               border-radius: 50px 20px;
               -webkit-box-shadow: 0 0 20px 10px rgba(255,255,255,.5);
               box-shadow: 0 0 20px 10px rgba(255,255,255,.5);  }
#liste2 {  position: absolute;  right: 50px; top: 120px; width: 250px;
               background-color: rgba(255,255,255,.5); z-index: 1001;
               border-radius: 20px 50px;
               -webkit-box-shadow: 0 0 20px 10px rgba(255,255,255,.5);
               box-shadow: 0 0 20px 10px rgba(255,255,255,.5); }
#liste3 {  position: absolute; left: 50%; bottom: 50px; width: 400px; height: 400px;
               margin-left: -200px; background-color: rgba(255,255,255,.5); z-index: 1002;
               border-radius: 200px;
               -webkit-box-shadow: 0 0 20px 10px rgba(255,255,255,.5);
               box-shadow: 0 0 20px 10px rgba(255,255,255,.5); }
#liste3 h2 { margin: 50px 0 80px 115px; }
 #liste3 ol { margin-left: 55px; }


</style>


EMPFEHLUNGEN:

css-cafe.de/CSS3

css3generator 

Gecko-Browser

WebKit-Browser

Opera-Browser
 

8. Tag HTML 20.10.2014

HTML/CSS
Ralf Herbst


Layouten = anordnen positionieren

im HTML Editor im Ordner sites anlegen:
25.css_postition.html
- static: Positionierung im Textfluss, die Angaben left, top, right, bottom sind unwirksam
- relative: Positionierung im normalen Textfluss, die Angaben left, top, right, bottom verschieben das Element aus dieser Position, nachfolgende Elemente ignorieren diese Verschiebung
- absolute: Positionierung durch die Angaben left, top, right, bottom, sind außerhalb des normalen Textfluss, liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elementsberechnet, wenn dieses ebenfalls positioniert ist oder der Seiteninhalt. Beachten: Scroll-Funktion
- fixed: wie absolute, jedoch bleibt das Element beim Scrollen stehen und die Positionierung orientiert sich am Viewport (sichtbaren Browserfenster)

26.css_rahmen.html = den einzelnen Bereichen Rahmen zuordnen
- double (doppelt)
- solid (breit mit Maßeinheiten, - auch gemischt px, mm),
- ridge (3D-Rahmen),
- dotted (gepunktet)

27.layout_4_zeilen.html
Layoutmöglichkeiten:
litte boxes
Layoutgala
oder Adobe dreamweaver (kostenpflichtig)

Website besteht aus 4 Bereichen und dafür div container bauen im body-Bereich:
<body>
<div id="container">
        <div id="header">Header/Kopfbereich</div>
        <div id="navigation">Navigation</div>
        <div id="maincontent">Maincontent/Hauptbereich</div>
        <div id="footer">Fotter/Fußbereich</div>
</div>
</body>
im head-Bereich den Style bauen:
<head>
        ........
        <style type="text/css"
        body {  color: #000; font-size: 80%;   } = Größe 100% aber Bildschirm reduzieren auf 80%
        #container {  width: 1000px; min-height: 550px; background-color: Angabe; margin: 0 auto; }
        = id = #, Website Breite zwischen 900 bis 1000px, auch abhänig vom Banner/Bild.jpg,
        Höhe des Containers abhängig von den Unterseiten, deshalb nur min-Angabe  
        den Container in die Mitte setzen
        * { margin: 0; padding: 0;  }   = Globaler Selektor (resettet alle Formatierungen im Bereich   von   Absätzen und den Standardabstand von ca. 10px in den einzelnen Bereichen im Html
        #header {
       height: 139px; background-image: url(../img/banner.jpg);
      = Bild im Kopfbereich einarbeiten, Höhe auswählen und Bild-Pfad
       background-repeat: no-repeat;
       background-position: left top;
        = entweder 0 0 für links und oben oder left und top
       #header h2 { text-align: center; padding: 40px 0 0 10px; }
       = bestimmen der Attribute der Überschrift h2
       #navigation { height: 30px; background-color: Farbe;  }
       #maincontent {  background-color: Farbe; min-height: 350px;   = nur min-Höhe geben
       padding: 10px 20px; }
      #maincontent h1 { margin-bottom: 10px; }
      = bestimmen der Attribute der Überschrift h1
      #maincontent p { color: Farbe; margin-bottom: 15px; line-heigt: 150%; }
      = bestimmen der Attribute der Absätze
      #maincontent ul { margin: 10 px 0 10px 15px; color: Farbe; }
      = bestimmen der Attribute der Liste
      #footer { background-color: farbe; color: farbe; padding: 20px 20px; text-align: right; }
      = bestimmen der Attribute des Fußteils
</style>

</head>
28.layout_2_spalten_3_reihen.html
mit Sidebar links oder rechts
im head-Bereich den style aufbauen:
<head>
      ......
      * { margin: 0;  padding: 0;  }
      #container { width: 970px; background-color: Farbe; margin: 0 auto; }
      #header, # footer { background-color: farbe; } = Kopf + Fuß gleiche Farbe
      #header { height: 120px; }
      #sidebar { width: 170px; height: 330px; background-color: farbe; float: left;
      padding: 10px 15px; }
 = float: left = schwebe links, und ALLES Andere ordnet sich rechts davon an,
    float: right = schwebe rechts, und ALLES Andere ordnet sich links davon an
= Sidebar (das zu schwebende) im HTML immer zuerst, in dem Fall vor  dem Maincontent
        #maincontent: {  min-height: 330px; background-color: farbe;
        padding: 10 px 15px 10px 215px; }
        #footer { height: 30px; clear: both; padding: 10px 15px;  }  =hebt das float wieder auf    
</style>
</head>





 EMPFEHLUNGEN: 

CSS Erfinder

9. Tag HTML 21.10.2014

HTML/CSS
Ralf Herbst


Hilfsmittel zum Abstimmen der Farben:
adobe kuler
Seminar Farbentheorie
Paletton

HTML-Editor im Ordner sites anlegen:

29.layout_3_reihen_3_spalten.html

<head>
       <!--<link rel="stylesheet" href="../css/style.css" type="text/css">-->
       <!--Attribute der externen Elemente ausschalten-->
</head>
im body die Container (siehe unten) von oben nach unten abarbeiten!    
 <body>    <div id="container">        = Beginn Container
                  div id="header">Header</div> = Beginn + Ende Header
                 <div id="links">Links</div> = Beginn + Ende Links
                 <div id="rechts">Rechts</div> = Beginn + Ende Rechts
                 <div id="mitte">Mitte</div> = Beginn + Ende Mitte
                 <div id="footer">Footer</div> = Beginn + Ende Footer
 </div> </body>                               = Ende Container

30.layout_4_zeilen_mit_navi.html
bauen der Navigation mit Listen (= html)
<div id="container">                         = Beginn Container
          <div id="header"><h2>Header</h2></div> = Beginn + Ende Heater
          <div id="navigation">Navigation</div>       = Beginn Navigation
              <ul>                                                            = Beginn Liste
                   <li><a href="#nogo">Home</a></li>
                   <li><a href="#nogo">Produkte</a></li>
                   <li><a href="#nogo">Kunden</a></li>
                   <li><a href="#nogo">Galerie</a></li>
                   <li><a href="#nogo">Anfahrt</a></li>
                   <li><a href="#nogo">Kontakt</a></li>
                   <li><a href="#nogo">Impressum</a></li>
              </ul>                                                          = Ende Liste
          </div>                                                            = Ende Navigation
          <div id="maincontent">  Text </div>           = Beginn + Ende Maincontent
</div>                                                                     = Ende Container
im head-Bereich Attribute einbauen :
              #navigation ul { list-style-type: none;  }
              #navigation ul li { line-height: 30px;  }
              #navigation ul li a { color: #FFF; float: left; padding: 0 20px;  }
              #navigation ul li a:hover { color: #000; background-color: farbe; border-bottom: none; }

31.layout_2_spalten_3_reihen_mit_navi.html
das gleiche wie bei 30.

index.html
wichtig: liegt im Hauptverzeichnis: HTML-Lexikon, nie in sites!
Bezeichnung: index.html (weltweit gültig!)




EMPFEHLUNGEN: 

CSS Menü 


 

7. Tag HTML 17.10.2014

HTML/CSS
Ralf Herbst


HTML-Editor
im Ordner sites anlegen:
18.css_hyperlinks.html = Reihenfolge (w3c) der Links (a) festgelegt:
a:visited
a:hover
a:active (erscheint beim Mausklick in dieser Farbe, eher NO)
Browserchache löschen: Strg+Shift+Ent-Tasten
a img { border: ridge 10px; } = 3D-Rahmen um das Bild 

19.css_font_family.html = Schriftarten vergeben
ol { color: #F00; width: 600px; }
= der Liste eine Breite geben, damit kein Zeilenumbruch (Verteilung auf zwei Zeilen) erfolgt
Google Schriftarten
Schrift/Style + Charakter/Standard auswählen - Funktion: 2) quick-use - 3) Link kopieren und im html-Dokument unter  <link rel=...> einfügen; 4) Code in CSS einfügen unter <style type="">
body {  font-family: Lobster, cursive; font-size: 12pt; }
oder
pre { font-family: Lobster, cursive;  }
wichtig: im Link ersetzen ` gegen "

20.css_font_weight.html = Wichtung der Schrift

21.css_text_align.html = Text ausrichten, wie , wo
.textGross  {  text-transform: uppercase; } = Grossschreibung
.textKlein  { text-transform: lowercase; } = Kleinschreibung
.textAnfang  { text-transform: capitalize; } = alle Anfangsbuchstaben groß
.gedichtText  { margin: -74 0 20px 32px; } = Positionierung Text
.obenTabelle { .... border-style: inset; border-Color: red, Border-width: 5px;  }
geht auch in einem Befehl:
.mittigTabelle  {border: dottet 5px blue;  }
dh. erst den Rahmen bauen, dann Rahmen entsprechend abändern

22.css_wordspacing.html  = Wordabstand
Bilder-Hintergrund auf weiß stellen unter
body { background-color: #FFF; }
Bilder mittig Text setzen, dh. Außenabstand Werte oben/rechts/unten/links:
img { vertival-align: middle; margin: -2px 5px 0 0; }
festlegung des Wortabstandes im oberen Bereich oder im Text
 h1  { word-spacing: 15px;  }
<span style="word-spacing:Maßeinheit">text</span> = Festlegen des Wortabstandes im Text

23.css_letterspacing.html = Buchstabenabstand

24.css_masseinheiten.html = Maßeinheiten
absolut dh. fester Wert
relativ dh. Bezug zu etwas
beachten: für website oder handy!
Browser automatisch eingestellt auf 12pt!



Pixel-Umrechner etc.


EMPFEHLUNGEN: 

Webfarben

6. Tag HTML 16.10.2014

HTML/CSS
Ralf Herbst


Komme zu spät durch endlosen Stau :-(

und dann Lync-Probleme :-(

so jetzt kann es endlich losgehen :-)

Ralf hat derweil schon fleissig gearbeitet und macht


internes und externes CSS
Einbau als externe Datei:
Da mit zunehmender Seitenanzahl eines Webprojekts auch eine zentrale Verwaltung aller Formatierungen wichtiger wird, können alle CSS-Formatierungen  in einer separaten Datei abgelegt werden, um dann von beliebig vielen Sites aufgerufen zu werden. Ändert man in der CSS-Datei etwas, wirken sich diese  Änderungen auch unmittelbar auf allen verbundenen Seiten aus. Die Ladezeit wird dadurch auch minimal verbessert, durch keine Neuladung der Formatierungen, da diese im Cache bleiben können.

Externe CSS-Datei:

body { font-size: 1em; color: red; }

h1 { color: black; }

HTML-Datei:

<html> 

<head>

<link rel="stylesheet" type="text/css" href="datei.css"/>

</head>

<body>

Website .....

</body>

</html>

dh. die externe CSS-Datei enthält CSS-Code. Auf der Website muss im <head>-Bereich lediglich eine Codezeile eingefügt werden. Auch Variante mit href möglich: dann kann der Dateinamedirekt (liegt die Datei im gleichen Verzeichnis), ein Dateipfad (liegt die Datei auf dem aktuellen Server) oder eine URL (die Datei ist irgendwo) angegeben werden.

Wikipedia: Boxmodel Detail

Im Ordner sites anlegen:
14.css_span.html
<span> = Bereich von bis

15.css_ueberschreiben.html

16.css_klassen.html
Klassen zuweisen entweder im <head> oder im jedem einzelnen Bereich 
< h1 class="kursiv">, <p class="kursiv">
Beispiele für >head>
.kleiner Text { Attribute festlegen }
.kursiv { font-style: italic; }
Selektoren/Eingrenzungen vorgeben: h2 (Überschrift) oder p (Absatz) zB.
p.kursiv { font-style: italic; } oder  h2.kursiv { font-style: italic; }
Text ohne Abstand oder _ Unterstrich,  kein Leerzeichen, Komma!
was näher dran ist, wird ausgeführt!
17.css_pseudoklassen.html
sind Navigation für Listen

Eltern - Kind-Element

SelfHTML - Pseudoklassen 


 

EMPFEHLUNGEN: 

HTML-Seminar

SelfHTML-Stichwortverzeichnis

w3c




  

5. Tag HTML 15.10.2014

HTML/CSS
Ralf Herbst



CSS - Cascading Style Sheet
ist eine textbasierte Gestaltungssprache für die Formatierung strukturierter Dokument. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit HTML eingesetzt werden.
CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, dann werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separarten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (zB. Layout, Farben und Typografie). Mit CSS-Anweisungen können für jedes Element konkrete Werte für bestimmte Darstellungsattribute festgelegt werden. Mit CSS kann man für verschiedene Ausgabemedien (Bildschirm, Papier usw.) verschiedene Darstellungen vorgeben. CSS gilt als Standard-Stylesheetsprache für Websites. Früher übliche HTLM-Elemente wie front oder center gelten als veraltet. So werden Font-Tags bereits nicht mehr zu HTML 5 gehören.



CSS Einbindung
Indirektes <--> externes CSS 

im HTML-Editor unter Ordner sites:

11.css_intern_grundlagen.html
/*Ich bin ein CSS Kommentar*/
<style>
<style type="text/css">
body { (Klammer: Alt Gr +Zahl 7)   = ein Selektor und steuert den HTML-Body an
/*Attribut/Eigenschaft: Wert*/
font-family: Arial, Helvetia;     = Schriftart
font-size: 20pt;                          = Schriftgröße
color: red;                                 = Schriftfarbe
background-color: #FEECC4;  = Hintergrundfarbe
}
h1 {
border: solid 3px #F00; (solid = durchgängig, dottet = gepunktet)
oder border-bottom: solid 3px #F00 = Rahmen/Linie nur unten
width: 424px;            = Höhe des Rahmens
line-height: 22pt;       = Höhe des Abstandes
}
= dies kann ich durch alle Überschriften einzeln festlegen
p {
 = Wichtig für Gestaltung CSS, padding schafft Raum um das Element und VERGRÖSSERT ihn!
padding: 30px; = ein Wert bedeutet alle Seiten gleich
padding: 30px 50px; = zwei Werte bedeuten 30 px oben, unten und 50px rechts, links gleich
padding 20px, 30px, 40px, 50px; = Wert der Reihenfolgen: oben - rechts - unten - links (vergleichbar Ziffernblatt)
margin: 25px 30px; = Außenabstand von einem Element, Wert der Reihenfolge wie bei padding!
}
ul { = Listen versetzen
margin-left: 60px; auch möglich -60px;
-Bereich, dh. von rechts nach links
+Bereich, dh. von rechts nach links
font-Style: italic; = kursive Schrift
line-height: 25pt; = Zeilenabstand
list-style-type: decimal-leading-zero; = Listentyp

}
a { = Link setzen:
<a href="http://www.css4you.de/" target="_blank">CSS for you</a>
font-weight: bold; = Wichtung der Schrift, normal oder bold (fett)
padding-bottom: 100px;
text-decoration: none; = entfernt die Unterstreichung des Links
}
a:hover { = Mauszustand, drüberfahren mit Maus übern Link
text-decoration: underline; = fügt die Unterstreichung beim Link hinzu
}
12.css_extern.html anlegen
Vorlage abspeichern und Link einfügen (von linker Spalte anklicken und reinziehen)
<link rel="stylesheet" href="../css/style.css" type="text/css">
link rel= Linkart, href = Linkpfad, type = Medientyp
13.css_inline.html anlegen (gleiche Datei wie 12.css_extern.html)
<h2 style="color:red;"> = nur diese Überschrift in rot
<p style="font-style:italic"> = dieser Absatz kursiv setzen
dh. inline = CSS am Element direkt Befehle mit style eingeben!

Externes CSS
( = sozusagen die Fernsteuerung/Fernbedienung für die Seiten)
im Ordner CSS:
neue Datei mit Dateiname: style anlegen, Erweiterungen: .css,
Ordner: CSS übernehmen, speichern
style.css
h1, h2, h3, h4 { } = mehrere Selektoren, die die gleichen Attribute ausführen sollen, zB. Überschriften, Komma bedeutet gleich Plus (+)
Trick bei Link:
a { outline: transparent; } = macht gepunkteten Rahmen weg




CSS für Dich (Link setzen)

Add-Ons Measureit herunterladen
Add-Ons ColorZilla herunterladen




EMPFEHLUNGEN: 

Adobe Dreamweaver 




 

4. Tag HTML 14.10.2014

HTML/CSS
Ralf Herbst


im HTML-Editor unter Sites neue Datei anlegen:

09.tabellen.html
dienen zur Anordnung zB, Listen, sichtbar oder unsichtbar
besteht aus Reihen und Spalten, mit/ohne Rahmen <table border="0">
eine Tabelle ist ein in sich geschlossenes Objekt!
<table border="2"> Tabelle mit Rahmen ("2" = Wert des Rahmens)
<tr> Tabellenreihe
<td> Tabellenzelle
in die Zelle kann Text, Foto, Video alles eingesetzt und postitioniert werden
<table> <tr> <td> </td> </tr> </table> Kleinstmögliche Tabelle
Leerzeichen (&nbsp;) verwenden, dh. auffüllen der leeren Zelle
erst Tabellenstruktur aufbauen und dann auffüllen mit Text usw.
Breite der Spalte ergibt sich aus dem längsten Wert der Zelle
<hr> Linie zur Trennung des Dokuments, kann ausgerichtet werden, mit /ohne Schatten <noshade> und Farbe möglich
Tabellenmaße:
<table border="1" width="50%"
Problem: %-Tabellen, deshalb Pixel verwenden!
<table border="1" width="50">
Tabelleninhalte ausrichten:
<table border="1" cellpadding="10" cellspacing="10">
cellpadding = Abstand um das Element
cellspacing = Zellenwanddicke
<tr height="50"> die Tabellenreihe erhält eine definierte Höhe
<colgroup> <col width="100!> Spaltengruppe für große Tabellen und definieren der Spaltenbreite
<th> =Tabellenüberschrift (table-headline) nur in der ersten Zeile
<th colspan="2"> =Tabellenüberschrift erstreckt sich über 2 Reihen
Standardausrichtung Text: links und mittig!
<align="center> <valign="top">

10.tabellen_gestalten.html
<td rowspan="7"> erstrecke dich über 7 Zeilen
durch Zeilentausch erfolgt Spaltentausch (siehe Tabellen)



EMPFEHLUNGEN: 
Blogscoop  

Blogchart

Passwort Generator
Passwort-Registry

 

3. Tag HTML 13.10.2014

HTML/CSS
Ralf Herbst


SERVERPROBLEME: bis 9:30 Uhr, fahre nach Hause und logge mich dort ein!


HTML Editor: im Ordner sites:

07.listen.html derweil erstellt

08.grafiken.html
<img src="../img/Bildname.jpg"> = Pfad fürs Bild
oder Bild in der linken Leiste im Editor anklicken und nach rechts reinziehen, dann werden automatisch die Attribute (Rahmen, Breite, Höhe) mitgegeben.
Es kann noch dem Bild das Attribute Titel/title zB. "Eine schöne Brandungswelle" mitgegeben werden (wichtig für SEO/Suchmaschinenoptimierung)
body background = Hintergrundbild (angelegt als Kacheln nach rechts und ergibt eine Fläche)
im CSS werden Hintergründe automatisch angepasst
Textausrichtungen 


Bilder/Fotos
beachten Urheberrechte/rechtliche Aspekte: Fotofallen
google Bildersuche unter Suchoptionen: Nutzungsrechte

Bild verlinken

Übung bauen:
neuen Ordner im HTML-Lexikon: Uebungen anlegen und  neue Datei: musik.html
Discogs
Band und Song und Video aussuchen und einbauen auf Site
Video unter you tube raussuchen - teilen, einbetten - Code Kopieren und auf Site mit <iframe> (box im internen Bereich)einfügen und ergänzen mit http:

2. Tag HTML 10.10.2014

 



HTML/CSS
Ralf Herbst



im HTML-Editor: Ordner sites:
Datei Vorlage öffnen und gleich unter neuem Namen abspeichern:

03.ueberschriften.htlm
die fortlaufende Nummerierung dient zur besseren Orientierung
dh. h1 bis h6

04.div_tag.html
Div-Tag (little boxes) sind kleine Ordner/Behälter für weitere HTML-Elemente, dh. sind Block-Elemente, in die man mehrere andere Block-Elemente einschließen kann. Es können mehrere Elemente wie Text, Grafiken, Tabellen usw. in einem gemeinsamen Bereich einschließen, hat ansonsten keine Eigenschaften.

05.text_formatieren.html
- verschiedene Befehle, teilweise aus HTML 1-4.01 erklärt
fett <strong>,  <b>, kursiv <em>, <i>, Kombinationen <strong><em> Text </em></strong>
unterstrichen <u>, durchgestrichen <strike>, richtig/falsch <s>, Maschinenschrift<tt>,größer  <big>, kleiner <small>, hochgestellt <sup>, tiefgestellt <sub>
- Sonderzeichen
<blink> blinkender Text ist absolute Steinzeit (Gruseltechnik)

06.text_attribute.html
- Farbe des Body und Text zb. <body bgcolor="FFECB4" text="blue">
Schriftgröße <font size="7">Größe der Schrift ist 7</font> , Schriftfarbe<font color="red">Dieser Text ist rot</font>, 
- Textabschnitt mit präformatiertem Text. <pre>vorformatierter Text</pre> Alles, was dazwischen steht, wird so angezeigt, wie es eingegeben wurde, und zwar in dicktengleicher Schrift.
- Umlaute und Sonderzeichen
ü = &uuml; Großscheibung: Ü = &Uuml; ä = &auml; ö = &ouml;
ß = &szlig; copyright = &copy;, € = &euro;
- Hyperlinks
intern = auf meiner Website bleiben: <a href="02.text_und_farben.html">,
extern = Verweis auf andere Website: <a href="https://startpage.com">
empfohlen bei externen Link: target="_blank", dh. öffnet den Link in einem neuen Tab (Register)!
deshalb: <a href="https://startpage.com" target="_blank"> oder auch Titel mitgeben:
<a href="http://de.selfhtml.org/html/referenz/zeichen.html" target="_blank" title="Sonderzeichen">

Sonderzeichen bei Self-HTML

Email-Adresse verschlüsseln


Installieren von Add-Ons:
Add-ons: Firebug

Add-ons Web Developer

Add-ons HTML Validator



EMPFEHLUNGEN:

Self HTML 

Million Dollar Website

web king bzw. die top 10 der vielleicht schlechsteten Websites

1. Tag HTML 09.10.2014

HTML(5)
Dozent: Ralf Herbst


1989 HTML erfunden und im normalen .txt Datei programmiert, dh. nur Text!
Die Datei öffnen mit "Editor"
HTML dh. die Programmiersprache lernen und wissen, wie man wann was anwendet!

Website

Programmiersprache HTML

HTML Editor

Server haben Betriebssystem, meist englischsprachig, kennen nur Kleinschreibung und keine Umlaute (ä, ö, ü)
Datei-Endungen anzeigen lassen, einstellen am PC:
Windows  Exploerer öffnen - organisieren - Odner + Suchoptionen - Ordneransicht - Haken rausnehmen bei "Erweiterungen bei bekannten Dateien ausblenden - für Ordner übernehmen - ok

im HTML-Editor: Projekt: HTML-Lexikon erstellen
anlegen:
Ordner: Web-Projekte
Unterordner: img (Bilder auf der Website)
                      sites (Seiten der Website)
                      css (Design der Website)


CSS Cascading Style Sheets

Pflichtlektüre

siehe txt-Datei

Zeichenkodierung  
zB. <meta charset="utf-8">

HTML Farbencodes
wichtig #

Blindtextgenerator



 

am 09.10.2014 geht es los!