INFOPORTAL BERLIN

Immer wiederkehrende Fragen einfach erklärt

Die Programmierung

Entwicklung und Tutorial mit HTML 5 und CSS 3

Hierin gehen wir auf die Entwicklung einer kompletten Internetseite mit HTML 5 und CSS 3 ein. Diese Seite wird nach den aktuellen Richtlinien und unter Beachtung des Responses Designs entwickelt. Grundlagen zur HTML Verwendung findet man auf der Seite https://www.fragmich.berlin/prog/html/. Somit werden hier nur die wichtigsten Elemente, welche zum Verständnis unbedingt von Nöten sind,  kurz angesprochen. DesgleichenDer Uhu als schlauer Vogel für die Entwicklung betrifft es dem Aufbau mit CSS 3. Hierzu ist eine weitergehende Erklärung auf https://www.fragmich.berlin/prog/css/ zu finden. Nach den ersten einfachen Entwicklungsschritten gehe ich dann auf die Feinheiten bis zur fertigen Internetseite ein. Hier werden umfangreiche Programmierbarkeiten dargestellt.

Die fertige Anwendung ist auf allen Geräten anwendbar. Insbesondere die Beachtung des Responses Designs, welches für die Darstellung auf Mobilgeräten unabdingbar ist. Auch die Berücksichtigung der verschiedenen neuen und alten Browservarianten wird nicht vernachlässigt.

Die hier angesprochenen Grundlagen sind:

  • Was ist ein HTML Element und ein Tag
  • Das HTML Grundgerüst und wie kann ich Informationen zu meiner Seite anzeigen
  • Wofür ist die Kodierung einer Datei und wie komme ich mit den Schriften klar
  • Was sind Überschriften, Absätze und Links
  • Wie werden Absätze definiert
  • Der Einbau von Grafiken
  • Was ist mit CSS, Verwendung im Tag, im Header und in einer separaten Datei
  • Text in CSS gestalten
  • Die Verwendung von Farben
  • Das Box Modell mit inline und block Elementen
  • Die Anordnung von Elementen mit float, margin und padding

 


Homepage Teil 1

In diesem Teil werden einige Grundlagen in HTML gezeigt. Hierzu gehören die Tags (Befehle), welche zur Steuerung unseres Inhaltes benutzt werden. Ebenso der Grundaufbau, also das Grundgerüst einer HTML Datei. Ferner die Einbindung einer Grafik und das erstellen von Links zur eigenen Seite und einer fremden Seite. 
Weiterführende Informationen auf unserer Seite 

https://www.fragmich.berlin/prog/html/

Homepage Teil 2

In dieser Fortsetzung gehe ich auf die ersten Bausteine mit CSS 3 ein. CSS ist eine extrem wichtige Komponente zur Seitengestaltung.  Schriftart, Schriftfarbe und Hintergrund sind einige der wichtigen Elemente. Wir erfahren, wie diese „style“ Anweisungen eingesetzt werden und welche Formen es hier gibt.
Weiterführende Informationen auf unserer Seite

https://www.fragmich.berlin/prog/css/ 

 

Homepage Teil 3

Wir kommen hier nun zu einem der wichtigen Formatierungsmerkmale. Das sogenannte Box Modell. Es gibt hier verschiedene Arten von Elementen, die inline Elemente bei denen wir die Breite und Höhe nicht festlegen können und die block Elemente wo wir Breite und Höhe bestimmen können.

Homepage Teil 4

Hier geht es um „ID und Klassen“

Die ID darf nur einmal existieren Beispiel
<p id=“first“>Ich bin die Hauptüberschrift</p>

Die Klasse kann mehrfach existieren Beispiel
<p class=“achtung“>Mann, bin ich wichtig</p>

 

Homepage Teil 5

Eine immer wieder angesprochene Problematik ist das Layout mit mehreren Spalten. Ich gehe hier auf verschiedene Probleme ein und stelle die einfache Lösung mit dem Grid Modell vor.

Homepage Teil 6

Hier starten wir zu einer funktionsfähigen OnePage Seite mit Allem was zu den Grundlagen gehört. Wer diese Version nachvollziehen will, kann sich hier den Sourcecode herunter laden. Version Background Grafik und die Version Header Grafik

 

Homepage Teil 7

Zweispaltige versetzte Text und Grafik Kombinationen. Grafiken mit abgerundeten Rahmen und Borderelementen. Erste Anwendung mittels des Grip Systems von Skeleton. Datei zum Herunterladen Source Teil7

Homepage Teil 8

Hier werden kostenlose Icons mit einer Animation versehen und in mehrfachen Spalten angeordnet. Die Verwendung von mehreren Spalten mit Inline Elementen in Form von Informationen für diverse Themen.

 

Homepage Teil 9

Wir erstellen hier einen optischen Pfeil mit Schattierung in einem Textrahmen nur mittels CSS. Interessante Lösung im Detail.

Homepage Teil 10

Wie verhält sich position:relativ zu position:absolut und position relativ in absolut. Vorbereitung für den nächsten Abschnitt

 

Homepage Teil 11

Wie verhält sich ein Display als inline Block

Homepage Teil 12

Drei Grafikgruppen nebeneinander als Kreis mit Rahmen und dazu gehörenden Sozial Media Icons incl. Ansteuerung.

 

Homepage Teil 13

Ganzseitige Grafik mittig zentriert.

Homepage Teil 14

Was wäre eine Internetseite ohne Kontaktformular. Entwicklung, Aufbau und Funktion

 
Updated: 20. Juni 2018 — 15:29
INFOPORTAL BERLIN © 2017 >> Impressum << - >> Datenschutz << - >> Disclaimer << Frontier Theme