[hemmerling] Web Technologies ( HTML5, HTML, XML & Javascript ) 2/5 - HTML & CSS

Related pages:

• Application programming interface ( API ).
• Databases, Webserver, Webservices, SQL, XML → XML.
• Remote Access Tools for Computers & Network Clients.
• Software Frameworks.
• Scripting Programming Languages for Unix / Linux and Windows.
• Social Networks 3/3 - IT / SystemEngineering Forums and IT / SystemEngineering Communities.
• WebAssembly ( WASM ).
• Web Technologies ( HTML5, HTML, XML & Javascript ) 1/5.
• Web Technologies ( HTML5, HTML, XML & Javascript ) 3/5 - Javascript Development Tools.
• Web Technologies ( HTML5, HTML, XML & Javascript ) 4/5 - Javascript Technologies.
• Web Technologies ( HTML5, HTML, XML & Javascript ) 5/5 - Javascript Frameworks.

• Frontendmasters "Trial", 2023-06.
  • “Learn Web Development, JavaScript, & Algorithms for Free. No credit card required, and no catch. Create a free account now to watch 5 full Frontend Masters courses for free!”.

• CodePen.
  • “CodePen is a playground for the front end web”.
  • “CodePen is a social development environment for front-end designers and developers”.
• The commercial Webflow with free basic account - “Build website animations and interactions visually”.

• about tech "CSS3 Tutorials".
• Can I use... Support tables for HTML5, CSS3, SVG, JS API.
• DevDocs.
  • DevDocs "CSS".
  • DevDocs "HTML".
• Grid by Example. A collection of usage examples for the CSS Grid Layout specification.
• Hoodie – A generic backend with a client API for Offline First applications - Example of CSS3 use.
• W3C "HTML5. A vocabulary and associated APIs for HTML and XHTML".
  • W3C "CSS Current Status".
• Learn CSS Layout.
• Mozilla Developer Network "CSS".
  • Mozilla Developer Network "Using media queries".
• Modernizr: the feature detection library for HTML5/CSS3 - “Respond to your user’s browser features. Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer”.
• OpenTechSchools
  • Meetup.com "OpenTechSchool Hamburg", "CSSclasses Hamburg", 2016-05-28.
  • OpenTechSchool "CSSclasses - Learning Materials".

• Scotch "A Visual Guide to CSS3 Flexbox Properties".
• CSS-Tricks.
  • CSS-Tricks "A Complete Guide to Flexbox".
• Flexbox Defense - “Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!”.
• Flexbox Froggy - A game for learning CSS flexbox.
• What The FlexBox?! - A free 20 video course to learn CSS Flexbox.

• CSS Garden.
• Flexbox Froggy - CSS3 Flexbox & CSS3 Grid.
• Grid Critters - “CSS Grid is game-changing. Revolutionary. Makes building modern layouts a snap”.
• Varun Vachhar "Learning CSS Grid".
• Grid by Example. Everything you need to learn CSS Grid Layout "The examples".
• CSS Grid - “Learn CSS Grid with Wes Bos in 25 pretty good videos. From fundamentals to Real World in about 4 hours”.
• CSS Tricks " Code Snippets / CSS / A Complete Guide to Grid".

• GitHub, Lea Verou "Animatable. One property, two values, endless possibilities" - A gallery of transitions.
• Mozilla Developer Network "Using CSS transitions".

• western civilisation pty. ltd. "tools & resources for web professionals" - "Cool Tools and Toys for Web Developers".
  • western civilisation pty. ltd. "tools & resources for web professionals" - "CSS Transforms" - Transform live playground. A nice way to try out the most common transform functions.
• Mozilla Developer Network "transform".

• Alex Berg "Keyframer" - A tool to produce animation keyframes.
• Video Vimeo "Putting Your UI in Motion with CSS by Val Head—An Event Apart Video".

• CSS-Tricks "Meet the Pseudo Class Selectors".

• A List Apart "How to Size Text in CSS".
• Snook.ca. TIPS, TRICKS & BOOKMARKS on WEB DEVELOPMENT "Font sizing with rem".
• Smashing Magazine, Laura Franz "Size Matters: Balancing Line Length And Font Size In Responsive Web Design".

• A List Apart "Responsive Web Design".

• CSS { guide: lines; } - “High-level advice and guidelines for writing sane, manageable, scalable CSS”.
• EnvatoTuts+ "The 30 CSS Selectors You Must Memorize".
• StackOverflow "Why do browsers match CSS selectors from right to left?".

• Remote Access Tools for Computers & Network Clients ⇒ “Resources: Browser Screen Sizes” .

• LESS - The Dynamic Stylesheet language.
• EN.Wikipedia "Less (stylesheet language)", DE.Wikipedia "Less (Stylesheet-Sprache)".

• Github "Bootstrap, from Twitter" for use with “Less” - “A toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind”.
• TemplateMonster.com - Devlivering the best Templates on the Net! "Shine Your Boots! Boostrap Hornbook".
• Initializr - Start an HTML5 Boilerplate project in 15 seconds!.
  • django-Marcador. Basic Django Tutorial "9. Templates" “9.2. Create the base template”.
    1. Click at the website Initializr - Start an HTML5 Boilerplate project in 15 seconds! on “Bootstrap”.
    2. In the section “H5BP Optional” check the “404 Page” option.

• EN.Wikipedia "Bootstrap (front-end framework)", DE.Wikipedia "Bootstrap (Framework)"

• Sass - Syntactically Awesome Stylesheets.
  • Compass - “Open-source CSS Authoring Framework” for use with “Sass”.
  • Github "Scout - Compass and Sass without all the hass(le)".

• Almsaeed Studio "AdminLTE Control Panel Template", GitHub "almasaeed2010/AdminLTE".
  • Bootstrap Stage "Admin LTE. Amazing Admin Starter" - “A full featured, free Bootstrap 3 admin dashboard theme”.

• Book buecherbillig.de "CSS - Das umfassende Handbuch".
• Book buecherbillig.de "CSS und HTML Design Patterns. 350 CSS-Rezepte".
• Book buecherbillig.de "CSS - Praxisbuch Kompendium".

• Grid Examples.
  • “Get inspired by real and live sites collected from bloggers, designers and developers that are using CSS Grid Layout. Are you a designer or an agency and have you been working on a CSS Grid site recently? Then add yours by submitting your work here!”.
• CodePen "Sunflower", A Pen By "Detlef von der Thüsen"".

• Lynn Fisher artist and designer from Phoenix, Arizona.
• The Experimental Layout Lab of Jen Simmons.
  • The Experimental Layout Lab of Jen Simmons "Jazz at Lincoln Center Spring 2007".
  • The Experimental Layout Lab of Jen Simmons "Jan Tschichold. Lictbildervortrag Die Neue Typographie".
  • The Experimental Layout Lab of Jen Simmons "Five issues that will determine the future of Internet Health".

• CSS-Tricks.
  • CSS-Tricks "Sass vs. LESS".
• OverAPI.com "CSS Cheat Sheet" #.
• SELFHTML "Link-Verzeichnis: CSS".
• Selectutorial - CSS selectors : "CSS Comments".
• Eric Meyer.
• CSS Work - “Books by Eric...”.
  • Requirements profile of a job offer “Has heard of Eric Meyer and Steve Souders” .

• “SELFHTML”.
  • Stefan Münz "SELFHTML".
  • HU-Berlin "SELFHTML" - Classical HTML 4.0 edition.
• Web Design Group's Help file Distribution Page.
  • WDG "Validators and Checkers".
  • WDG "Web Authoring Tools".
• W3C.
  • W3C, Dave Raggett "Getting started with HTML".
• Dublin Core Metadata Initiative.

• Apache "Apache httpd Tutorial: Introduction to Server Side Includes".
• EN.Wikipedia "Server Side Includes", DE.Wikipedia "Server Side Includes".

• EN.Wikipedia "CE-HTML", DE.Wikipedia "CE-HTML".
  • EN.Wikipedia "Hybrid Broadcast Broadband TV", DE.Wikipedia "Hybrid Broadcast Broadband TV".

• Anixe.
  • medienhb.Sender-Datenbank "ANIXE iTV".

• HTML Code:

• Code:

<iframe src="http://www.w3schools.com" name="iframe_a" title="Iframe Example"></iframe>

• Firefox:
  • With default configuration: Error message “Firefox Can’t Open This Page. To protect your security, www.w3schools.com will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window”.
  • With proper browser extension, the framed website “w3schools.com” is displayed .
• Microsoft Edge, “Reload in Internet Explorer Mode”: The framed website “www.w3schools.com” is displayed .
• Chrome, Microsoft Edge, Yandex:
  • With default configuration: Error message “www.w3schools.com refused to connect”.
  • With proper browser extension, the framed website “www.w3schools.com” is displayed .
• Opera:
  • With default configuration: Error message “www.w3schools.com is blocked. www.w3schools.com refused to connect. ERR_BLOCKED_BY_RESPONSE”.
  • With proper browser extension, the framed website “www.welt.de” is displayed .
• Amazon Silk:
  • With default configuration: Error message “www.w3schools.com is blocked. www.w3schools.com refused to connect”.
  • There is no fix available for iframe support .
• Firefox 4.7.1 for FireTV:
  • With default configuration: Error message “Webpage not available. The webpage at www.w3schools.com could not be loaded, because: net::ERR_BLOCKED_BY_RESPONSE”.
  • There is no fix available for iframe support .

• HTML Code:

• Code:

<iframe src="http://www.welt.de/" name="iframe_a" title="Iframe Example"></iframe>

• Firefox:
  • With default configuration: Error message “Firefox Can’t Open This Page. To protect your security, www.w3schools.com will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window”.
  • With proper browser extension, the framed website “welt.de” is displayed .
• Microsoft Edge, “Reload in Internet Explorer Mode”: The framed website “www.welt.de” is not displayed . Error message: “This content cannot be displayed in a frame. To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame”.
• Chrome, Microsoft Edge, Yandex:
  • With default configuration: Error message “www.welt.de refused to connect”.
  • With proper browser extension, the framed website “www.welt.de” is displayed .
• Opera:
  • With default configuration: Error message “www.welt.de is blocked. www.welt.de refused to connect. ERR_BLOCKED_BY_RESPONSE”.
  • With proper browser extension, the framed website “www.welt.de” is displayed .
• Amazon Silk:
  • With default configuration: Error message “www.welt.de is blocked. www.welt.de refused to connect”.
  • There is no fix available for iframe support .
• Firefox 4.7.1 for FireTV:
  • With default configuration: Error message “Webpage not available. The webpage at www.welt.de could not be loaded, because: net::ERR_BLOCKED_BY_RESPONSE”.
  • There is no fix available for iframe support .

• HTML Code:

• Code:

<iframe src="http://www.youtube.com/watch?v=gCNeDWCI0vo" name="iframe_a" title="Iframe YouTube Example"></iframe>

• HTML Code:

• Code:

<iframe src="http://www.youtube.com/embed/gCNeDWCI0vo" name="iframe_a" title="Iframe YouTube 'embed' Example"></iframe>

• Google Chrome Webstore "HiFrame - The Hyper IFRAME extension!" - Fixes the problem .
  • Set “This can read and change site data” to “On all sites” .
• Google Chrome Webstore - Search for "iFrame".
  • Google Chrome Webstore "iFrame Allow" - Doesn't fix the problem .
  • Google Chrome Webstore "Ignore X-Frame headers" - Fixes the problem .
• Usama Ejaz "Securely Bypassing X-Frame-Options or Content-Security-Policy in WebExtension".
• Set “This can read and change site data” to “On all sites” .

• Firefox Browser ADD-ONS - Search for "iframe".
  • Mozilla Support "Website will not allow Firefox to display the page if another site has embedded it".
  • Firefox Browser ADD-ONS "Ignore X-Frame-Options Header" - Fixes the problem .
  • Firefox Browser ADD-ONS "Open iFrame" - Doesn't fix the problem .
• Requestly - “Intercept & Modify HTTP Requests. Requestly lets developers Modify Headers, Redirect URLs, Switch Hosts, Mock API Response, Delay Network requests, and much more.”.
  • Requestly Blog "How to embed iframes by bypassing X-Frame-Options and frame-ancestors directive".
• General setting ”[x] Allow this extension to run in Private Windows”.

• Google-Chrome extensions work with Opera .
  • Google Chrome Webstore "Ignore X-Frame headers" - Fixes the problem .
• Opera Forum "Download Opera. Opera adding X-FRAME-OPTIONS: DENY?".
• Jakob Lægdsmand - Freelance web architect & developer "Iframes in Opera".
• These Opera extensions don't adress the exact problem, so they don't fix it:
  • Opera addons "HTTP Headers".
  • Opera addons "Live HTTP Headers".
  • Opera addons "ModHeader".
  • Opera addons "Modify Header Value".
  • Opera addons "Web Panel".
    • Opera forums "Web Panel" - ”@gustavwiz. Vivaldi just pushed version with web panel. they don't have x-frame restrictions ofc (they made it internally)”.

• Google-Chrome extensions work with Yandex .
  • Google Chrome Webstore "Ignore X-Frame headers" - Fixes the problem .
• Yandex Cloud "Objects from external sources".
• StackOverflow "Removing 'X-Frame-Options' header in nginx for a yandex".
  • Yandex "Installing a tag on a site with CSP".

• Problem with Youtube & frames:
  • Error message, if a YouTube URL is loaded as HTML4 Frame or HTMLM5 iFrame “Firefox Can’t Open This Page. To protect your security, www.youtube.com will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window”.
• Solution for single YouTube video URLs:
  • Use the embed URL, e.g. “http://www.youtube.com/embed/XXXX”.
  • Google Support "Embed videos & playlists".
• No solution for YouTube profiles or YouTube channels .

• Mozilla Developers "Content Security Policy (CSP)".
• Mozilla "Developers "Same-origin policy".
• Mozilla Developers "X-Frame-Options".

• WindowsReport "4 Ways to Fix iFrame When it's Not Working in Chrome".
• Group Policy Administrative Templates Catalog ( admx.help ) "browser.frames.enabled".

  Registry Hive HKEY_LOCAL_MACHINE
  Registry Path Software\Policies\Mozilla\lockPref
  Value Name browser.frames.enabled
  Value Type REG_DWORD
  Enabled Value 1
  Disabled Value 0
  

• ”-moz-transform” & ”-webkit-transform”.
  • Google - Search for "moz-transform".
  • Dottoro "-moz-transform property | -webkit-transform property".
• StackOverflow "In CSS what is the difference between "." and "#" when declaring a set of styles?".
• StackOverflow "What's the difference between an id and a class?".

• akademie.de "Frames - Warum Sie keine Frames einsetzen sollten", 2007.
• html.com "HTML Frames Are Obsolete In HTML5: Here's How To Make Them Responsive".
• MDN web docs "<frameset>".
• mediaevent "HTML frame / frameset", 2021 - “HTML frames – Weg vom Fenster”.
• Nielsen Norman Group "Why Frames Suck (Most of the Time)".
• HU-Berlin "SELFHTML - Frames".
• W3C, HTML4.01 "Frames in HTML documents" - “A standard document has one HEAD section and one BODY. A frameset document has a HEAD, and a FRAMESET in place of the BODY”.
• W3Schools "HTML Frames".

• HTML Living Standard "4.8.5 The iframe element".
• Firefox Source Docs documentation "Working with iframes".
• StackOverflow "iframe contents cant appear in Firefox".
  • “As of 05/2018, the iframe lead is denied by browser due to X-Frame-Options header set to 'sameorigin'”.
  • “If you are trying to add this Iframe on a SSL-encrypted website (https:/ /), it won't work any more since Firefox 23 because Mozilla has decided to blocked all unencrypted content on encrypted websites (for example http-iframes on https-websites). You can change this behaviour in your own Firefox installation by typing about:config in the address bar and setting security.mixed_content.block_active_content to false. But that won't help you for all other FF23-visitors on your website”.
• StackOverflow "Overcoming 'Display forbidden by X-Frame-Options'".
• W3Docs "How to Scale the Content of <iframe> Element".
  1. Create a <div> element with an id with the mandatory name “wrap”.
  2. Place an <iframe> element with an id with the mandatory name “scaled-frame” inside the <div>.
  3. Add the src attribute with the content you want to display.
• W3CSchools "HTML <iframe> Tag".

• TutsPlanet "Open a URL in a new tab using JavaScript".
• StackOverflow "HTML Open Link in New Fixed Size Window".

• Dive Into HTML5.
• Local Storage.
  • w3schools "HTML5 Web Storage".
  • Dive Into HTML5 "The Past, Present & Future of Local Storage for Web Applications".
• EN.Wikipedia "HTML5", DE.Wikipedia "HTML5".
• EN.Wikipedia "Canvas element", DE.Wikipedia "Canvas (HTML-Element)".

• Codeplex "Html Agility Pack (HAP)" for Microsoft .NET 2.0.
• HTMLParser — Simple HTML and XHTML parser for Python.
• Sourceforge:HTML Parser, Sourceforge:HTML Parser, an OpenSource Java library.
• pudn: "MyHtmlParser" for Java, using “HTMLConnection”.

• Microsoft MSDN "Microsoft Expression.
  • The free HTML editor Microsoft Download "Microsoft Expression Web 4 (Free Version)" for WinXP, Vista, Win7, Win8 with .NET 4.0.
    • EN.Wikipedia "Microsoft Expression Web", DE.Wikipedia "Microsoft Expression Web".
• phase5 <HTNML Editor> for Windows - “kostenlos für Schulen und Privatanwender!”.
  • DE.Wikipedia "HTML-Editor Phase 5".
• Mozilla Editor, SeakMonkey Composer, Mozilla Composer, Nvu Composer and KompoZer.
  • Nvu.com - “Finally! A complete Web Authoring System for Linux Desktop, Microsoft Windows and Macintosh users”.
  • Nvu - “The #1 FREE Web Authoring System”.
  • Kompozer - “Easy Web Authoring!”.
  • Nvu Composer und KompoZer DE. HTML-Editor.
  • Mozilla Editor.
  • EN.Wikipedia "Mozilla Composer".
  • EN.Wikipedia "Mozilla Application Suite", DE.Wikipedia "Mozilla Application Suite".
  • EN.Wikipedia "SeaMonkey", DE.Wikipedia "SeaMonkey".
• IBM Rational EGL Community Edition - “A free Eclipse-based tool that simplifies the development of rich Web 2.0 style applications. It enables innovation by simplifying the development of JavaScript and Java based rich Internet applications. Shortens the technology learning curve by shielding developers from the complexities of JavaScript™, HTML, Ajax, JSON, and other Web 2.0 technologies”.
• DE.Wikipedia "Aolpress" for Windows - my very first HTML editor .

• TemplateToaster for Windows - Commercial web design editor, also for Joomla and Wordpress, with time-unlimited feature-limited trial version.

• W3C.
  • WDG HTML Validator.
  • W3C CSS Validation Service.
• W3C Markup Validation Service - “Check the markup (HTML, XHTML, …) of Web documents”.
• Tidy.
  • W3C "Clean up your Web pages with HTML TIDY"
  • Sourceforge "HTML Tidy Library Project", Sourceforge "HTML Tidy Library Project".
  • Dirk Paehl "HTML Tidy for Windows".
  • Sourceforge "GTidy-GUI for tidy", Sourceforge "GTidy-GUI for tidy".
• Neil Bowers, Canon Research Centre Europe “Weblint”.
  • http://www.weblint.org.
  • Softlookup "Weblint" ( 2004-09-10 ) - Weblint download.
  • San Francisco University "Weblint Gateway" - online Weblint.
  • Simon Frazer University "Web Lint" - online Weblint.
• “HTML-Lint” / “weblint-perl”.
  • CPAN, Andy Lester "HTML-Lint".
    • Debian "weblint-perl" - “Ein Syntax- und (Minimal-)Stil-Prüfer für HTML. Weblint ist ein Perlskript, das Flaum von HTML-Seiten entfernt, ziemlich auf die gleiche Art wie das herkömmliche lint Flaum von C-Programmen entfernt. Das Skript ist eine vollständige Neuerstellung von Neil Bowers Original-Skript weblint. Es unterstützt aktuell HTML 4.0 (Und nur HTML 4.0)”.
    • Debian "libhtml-lint-perl".
    • Ubuntu "weblint-perl" - “A syntax and minimal style checker for HTML. This is a perl script which picks fluff off html pages, much in the same way traditional lint picks fluff off C programs. The script is a complete rewrite of Neil Bowers' original weblint script. It currently supports HTML 4.0 (and only HTML 4.0)”.
• The free online service HTML5test - How well does your browser support HTML5?.
• CPAN, brian d foy "weblint++".
• Sourceforge "CSSTidy", Sourceforge "CSSTidy".
  • Debian "csstidy" - “CSS parser and optimiser”.
• Debian "tidy" - “HTML Syntaxcheck und Neuformatierung”.
• Debian "tidy-doc" - “HTML syntax checker and reformatter - documentation”.
• Validator.
  • The free online service SELFHTML Validator.
  • Validator.

• CSE HTML Validator.
• Liam Quinn "A Real Validator".

• 960 Grid System - “The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem”.
• YAML - Yet Another Multicolumn Layout.

• BuildWith - “Find out what websites are Built With”.
  • BuildWith "hemmerling.free.fr" - “Detailed Technology Profile”.
    • “Free 5 Detailed Lookups a Day - Create Profile”
    • “We do not accept registrations from GMX for fraud prevention reasons” .

• dereferer.me - “A dereferer is a webpage that is used to redirect users to different websites. Usually, web browsers send small pieces of information when following a link, including a so-called “referer”. The referer is the URL of the page the user came from, giving webmasters the option to track back the origin of users visiting their sites. The dereferer's part is to suppress this information; when analysing their transfer logs, webmasters will track back to the dereferer's URL instead of the original URL”.

• Can I use... Support tables for HTML5, CSS3, SVG, JS API.

• OpenDirectory "Top: Computers: Programming: Languages: JavaScript.
• OpenDirectory "Top: Computers: Programming: Languages: HTML.
• OpenDirectory "Top: World: Deutsch: Computer: Programmieren: Sprachen: JavaScript".
• OpenDirectory "Top: World: Deutsch: Computer: Programmieren: Sprachen: HTML".