HTML & HTML5

Responsive embed Youtube Video

von

Da sich Youtube-Videos am einfachsten per iframe einbetten lassen, ist die responsive gestaltete Website schnell gar nicht mehr so richtig responsive. Dieses Problem läßt sich durch einen CSS-gestylten Container beseitigen. Dazu wrappt man das iframe-Element mit einem div-Container folgendermaßen:

<div class="video-container-name">.....</div>

und stylt den Container mit folgenden CSS-Anweisungen:


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Das Ergebnis könnt Ihr hier ausprobieren (einfach das Browserfenster verkleinern):

Neue Homepage ab 300 Euro

von

praxis-birgelIn dieser Woche habe ich die komplett neugestaltete Homepage der Physiotherapie-Praxis Birgel fertiggestellt. Die Website ist mit Hilfe von WordPress realisiert und kann auf allen Viewports (Smartphones, Tablets und PCs) problemlos betrachtet werden.

Für die Realisierung des responsive Design wurde das Bone-Template auf die Bedürfnisse der Physiotherapie-Praxis angepasst.

Eine Homepage ähnlich dieser kann ich ab 300 Euro auch für Sie erstellen. Über Ihre Kontaktaufnahme freue ich mich jederzeit.

Eine minimale HTML5 Datei

von 
<!DOCTYPE HTML>
		<html lang="de">
			<head>
				<meta charset="utf-8">
				<title>title</title>
				<base href="url">
				<link rel="stylesheet" href="style.css">
				<script src="script.js"></script>
			</head>
			
			<body>
				<!-- Seiteninhalt -->
			</body>
		</html>

Dank HTML5 ist eine minimale HTML-Datei sehr einfach geworden. Unkompliziert und mit wenigen Zeilen, die man ohne Probleme auswendig lernen kann. Die Zeilen im Detail …

Weiterlesen …

« Scroll to top »
Weiches scrolling mit jQuery

von

Ein “Scroll to top”-Button oder “Scroll to top”-Link ist eine Bedienelement, das man immer häufiger auf modernen Websites findet.

Es vereinfacht die Navigation auf der besuchten Seite und löst ein scrollen zum Bildschirmanfang aus.

Dabei verbindet man einen Button oder einen Text mit einem jQuery-[tooltip tip=”ein kurzes Stück Quellcode”]Snippet[/tooltip]. Das Snippet und [tooltip tip=”Freie JavaScript-Bibliothek zur DOM-Navigation und -Manipulation.”]jQuery[/tooltip] müssen daher schon in den Browser geladen sein.

Code-Beispiel:

<span id="totop">zum Seitenanfang</span>
Weiterlesen ...

HTML – Was ist das?

von

HTML 5 Logo

HTML ist eine Auszeichnungssprache

HTML (Hyper Text Markup Language) ist die Standartsprache des Internets. Sie ist eine Beschreibungs- bzw. Auszeichnungssprache zur Strukturierung einer Webseite. HTML-[tooltip tip=”Tags (engl.) sind Bezeichner”]Tags[/tooltip] markieren und klassifizieren dabei die Teile des Textes. HTML ist keine Web-Programmiersprache im eigentlichen Sinn (wie z.B. Javascript und PHP).  Mit reinem HTML kann man nicht Programmieren.

Weiterlesen …