Move tasks to separate files and simplify
This commit is contained in:
parent
dde26ec45e
commit
06ba111392
12 changed files with 1560 additions and 1030 deletions
|
|
@ -1,23 +1,24 @@
|
|||
const src = 'source/';
|
||||
const dest = 'build/';
|
||||
const dev = 'build/';
|
||||
const dpl = 'deploy/';
|
||||
const rep = 'reports/';
|
||||
|
||||
const config = {
|
||||
src: src,
|
||||
dest: dest,
|
||||
dev: dev,
|
||||
dpl: dpl,
|
||||
rep: rep,
|
||||
|
||||
demo: true,
|
||||
|
||||
//these are not used while demo: true is set
|
||||
index: 'index.html',
|
||||
|
||||
templateData: src + 'templates/data.json',
|
||||
frontendData: src + 'data/**/*.json',
|
||||
|
||||
hippie: {
|
||||
brand: 'hippie',
|
||||
titlePrefix: ' - HIPPIE',
|
||||
pageBase: './',
|
||||
jsFile: 'main',
|
||||
jsonFile: 'db'
|
||||
pageBase: './'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
25
gulp/modules/plumber.js
Normal file
25
gulp/modules/plumber.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
const plumber = require('gulp-plumber');
|
||||
// const notify = require('gulp-notify');
|
||||
|
||||
// function catchErrors(errTitle) {
|
||||
// return plumber({
|
||||
// errorHandler: notify.onError({
|
||||
// // Customizing error title
|
||||
// title: errTitle || "GULP GENERAL PROBLEM",
|
||||
// message: "<%= error.message %>"
|
||||
// })
|
||||
// });
|
||||
// }
|
||||
|
||||
function catchErrors() {
|
||||
return plumber({
|
||||
errorHandler: function (err) {
|
||||
// Logs error in console
|
||||
console.log(err.message);
|
||||
// Ends the current pipe, so Gulp watch doesn't break
|
||||
this.emit('end');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = catchErrors;
|
||||
9
gulp/tasks/clean.js
Normal file
9
gulp/tasks/clean.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
const config = require('../config');
|
||||
const del = require('del');
|
||||
|
||||
// Clean output folders
|
||||
function clean() {
|
||||
return del([config.dev + '**', config.rep + '**', config.dpl + '**']);
|
||||
}
|
||||
|
||||
module.exports = clean;
|
||||
6
gulp/tasks/hello.js
Normal file
6
gulp/tasks/hello.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
function hello (cb) {
|
||||
console.log('He Stephan', cb);
|
||||
cb();
|
||||
}
|
||||
|
||||
module.exports = hello;
|
||||
25
gulp/tasks/sync.js
Normal file
25
gulp/tasks/sync.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
const config = require('../config');
|
||||
const browserSync = require('browser-sync'), server = browserSync.create();
|
||||
|
||||
// Automagically reload browsers
|
||||
function reload(done) {
|
||||
server.reload();
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
// Serve files to the browser
|
||||
function serve(done) {
|
||||
server.init({
|
||||
index: config.index,
|
||||
open: false,
|
||||
server: config.dev
|
||||
});
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
serve: serve,
|
||||
reload: reload,
|
||||
};
|
||||
13
gulp/tasks/validate.js
Normal file
13
gulp/tasks/validate.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
const { src } = require('gulp');
|
||||
const config = require('../config');
|
||||
const plumber = require('../modules/plumber');
|
||||
const htmlValidator = require('gulp-w3c-html-validator');
|
||||
|
||||
function validate() {
|
||||
return src(config.dev + '**/*.html')
|
||||
.pipe(plumber())
|
||||
.pipe(htmlValidator())
|
||||
.pipe(htmlValidator.reporter());
|
||||
}
|
||||
|
||||
module.exports = validate;
|
||||
103
gulpfile.js
103
gulpfile.js
|
|
@ -1,20 +1,22 @@
|
|||
// Setup project
|
||||
const config = require('./gulp/config');
|
||||
|
||||
const hello = require('./gulp/tasks/hello');
|
||||
const plumber = require('./gulp/modules/plumber');
|
||||
const { serve, reload } = require('./gulp/tasks/sync');
|
||||
const clean = require('./gulp/tasks/clean');
|
||||
const validate = require("./gulp/tasks/validate");
|
||||
|
||||
// Gulp requirements
|
||||
const { watch, series, parallel } = require('gulp');
|
||||
const { src, dest } = require('gulp');
|
||||
|
||||
const fs = require('fs');
|
||||
const del = require('del');
|
||||
const plumber = require('gulp-plumber');
|
||||
// const notify = require('gulp-notify');
|
||||
|
||||
const nunjucksRender = require('gulp-nunjucks-render');
|
||||
// const nunjucks = require('gulp-nunjucks');
|
||||
const data = require('gulp-data');
|
||||
const jsonConcat = require('gulp-json-concat');
|
||||
const browserSync = require('browser-sync'), server = browserSync.create();
|
||||
const sass = require('gulp-sass');
|
||||
const autoprefixer = require('gulp-autoprefixer');
|
||||
const sassLint = require('gulp-sass-lint');
|
||||
|
|
@ -30,8 +32,7 @@ const gulpIf = require('gulp-if');
|
|||
const changed = require('gulp-changed');
|
||||
const merge = require('merge-stream');
|
||||
const spritesmith = require('gulp.spritesmith');
|
||||
const babel = require('gulp-babel');
|
||||
const htmlValidator = require('gulp-w3c-html-validator');
|
||||
// const babel = require('gulp-babel');
|
||||
// const buffer = require('vinyl-buffer');
|
||||
// const imagemin = require('gulp-imagemin');
|
||||
const useref = require('gulp-useref');
|
||||
|
|
@ -61,15 +62,12 @@ const input = {
|
|||
};
|
||||
|
||||
const output = {
|
||||
root: config.dest,
|
||||
screens: config.dest + '**/*.html',
|
||||
data: config.dest + 'json',
|
||||
style: config.dest + 'css',
|
||||
code: config.dest + 'js',
|
||||
fonts: config.dest + 'fonts',
|
||||
art: config.dest + 'art',
|
||||
reports: 'reports/',
|
||||
vendor: config.dest + 'vendor'
|
||||
data: config.dev + 'json',
|
||||
style: config.dev + 'css',
|
||||
code: config.dev + 'js',
|
||||
fonts: config.dev + 'fonts',
|
||||
art: config.dev + 'art',
|
||||
vendor: config.dev + 'vendor'
|
||||
};
|
||||
|
||||
// Show demo content if configured
|
||||
|
|
@ -82,23 +80,11 @@ if (config.demo === true) {
|
|||
|
||||
// Create tasks
|
||||
|
||||
// Clean output folders
|
||||
function clean() {
|
||||
return del([output.root + '**', output.reports + '**', 'dist/']);
|
||||
}
|
||||
|
||||
// Automagically reload browsers
|
||||
function reload(done) {
|
||||
server.reload();
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
// Concatenate JSON files
|
||||
function json() {
|
||||
return src(config.frontendData)
|
||||
.pipe(plumber())
|
||||
.pipe(jsonConcat(config.hippie.jsonFile + '.json', function (data) {
|
||||
.pipe(jsonConcat('db.json', function (data) {
|
||||
return new Buffer.from(JSON.stringify(data));
|
||||
}))
|
||||
.pipe(dest(output.data));
|
||||
|
|
@ -118,7 +104,7 @@ function manageEnvironment(environment) {
|
|||
// // console.log(file.relative);
|
||||
// return { hippie, template };
|
||||
// }
|
||||
function getDataForTemplates(file) {
|
||||
function getDataForTemplates() {
|
||||
const data = JSON.parse(fs.readFileSync(config.templateData));
|
||||
return { data };
|
||||
}
|
||||
|
|
@ -126,8 +112,7 @@ function getDataForTemplates(file) {
|
|||
// Transpile HTML
|
||||
function nunjucks() {
|
||||
return src(input.screens)
|
||||
// .pipe(plumber())
|
||||
.pipe(customPlumber())
|
||||
.pipe(plumber())
|
||||
// TODO only add data to pipe for necessary files
|
||||
.pipe(data(getDataForTemplates))
|
||||
.pipe(nunjucksRender({
|
||||
|
|
@ -137,30 +122,13 @@ function nunjucks() {
|
|||
},
|
||||
manageEnv: manageEnvironment
|
||||
}))
|
||||
.pipe(dest(output.root));
|
||||
}
|
||||
|
||||
function validate() {
|
||||
return src(output.screens)
|
||||
.pipe(htmlValidator())
|
||||
.pipe(htmlValidator.reporter());
|
||||
}
|
||||
|
||||
// Serve files to the browser
|
||||
function serve(done) {
|
||||
server.init({
|
||||
index: config.index,
|
||||
open: false,
|
||||
server: output.root
|
||||
});
|
||||
|
||||
done();
|
||||
.pipe(dest(config.dev));
|
||||
}
|
||||
|
||||
// This is for the looks
|
||||
function style() {
|
||||
return src(input.style)
|
||||
// .pipe(plumbError('STYLE PROBLEM'))
|
||||
.pipe(plumber())
|
||||
.pipe(sass({
|
||||
includePaths: [input.vendor + '/**/*.s+(a|c)ss']
|
||||
}).on('error', sass.logError))
|
||||
|
|
@ -174,11 +142,11 @@ function style() {
|
|||
}
|
||||
// Linting
|
||||
function styleLint() {
|
||||
const dir = output.reports;
|
||||
const dir = config.rep;
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir);
|
||||
}
|
||||
let file = fs.createWriteStream(output.reports + 'sass-lint.html');
|
||||
let file = fs.createWriteStream(config.rep + 'sass-lint.html');
|
||||
let stream = src(input.style)
|
||||
.pipe(plumber())
|
||||
.pipe(sassLint({
|
||||
|
|
@ -206,7 +174,7 @@ function code(cb) {
|
|||
plumber(),
|
||||
// cache('code'),
|
||||
// babel({ presets: ['@babel/env'] }),
|
||||
concat(config.hippie.jsFile + '.js'),
|
||||
// concat(config.hippie.jsFile + 'main.js'),
|
||||
dest(output.code),
|
||||
uglify(),
|
||||
// remember('code'),
|
||||
|
|
@ -242,7 +210,7 @@ function art() {
|
|||
let favicons = src(input.art.favicons)
|
||||
.pipe(plumber())
|
||||
.pipe(changed(output.art))
|
||||
.pipe(dest(output.root))
|
||||
.pipe(dest(config.dev))
|
||||
|
||||
// Move images to the root folder
|
||||
let images = src(input.art.images)
|
||||
|
|
@ -256,8 +224,8 @@ function art() {
|
|||
// // Move favicons and images to the root folder
|
||||
// return src(input.art.favicons)
|
||||
// .pipe(plumber())
|
||||
// .pipe(changed(output.root))
|
||||
// .pipe(dest(output.root))
|
||||
// .pipe(changed(config.dev))
|
||||
// .pipe(dest(config.dev))
|
||||
// .pipe(src(input.art.images))
|
||||
// .pipe(changed(output.art))
|
||||
// .pipe(dest(output.art));
|
||||
|
|
@ -296,7 +264,7 @@ function vendor() {
|
|||
|
||||
// TODO for distribution
|
||||
function code2() {
|
||||
return src(output.screens)
|
||||
return src(config.dev + '**/*.html')
|
||||
.pipe(useref())
|
||||
.pipe(cached('useref'))
|
||||
.pipe(gulpIf('*.js', uglify()))
|
||||
|
|
@ -328,25 +296,6 @@ exports.assets = assets;
|
|||
exports.build = build;
|
||||
exports.dev = dev;
|
||||
exports.dist = series(clean, assets, parallel(nunjucks, style), code2);
|
||||
exports.serve = series(dev, serve);
|
||||
exports.default = series(dev, serve, overview);
|
||||
|
||||
// function plumbError(errTitle) {
|
||||
// return plumber({
|
||||
// errorHandler: notify.onError({
|
||||
// // Customizing error title
|
||||
// title: errTitle || "GULP GENERAL PROBLEM",
|
||||
// message: "<%= error.message %>"
|
||||
// })
|
||||
// });
|
||||
// }
|
||||
function customPlumber() {
|
||||
return plumber({
|
||||
errorHandler: function (err) {
|
||||
// Logs error in console
|
||||
console.log(err.message);
|
||||
// Ends the current pipe, so Gulp watch doesn't break
|
||||
this.emit('end');
|
||||
}
|
||||
});
|
||||
}
|
||||
exports.hello = hello;
|
||||
|
|
|
|||
|
|
@ -60,10 +60,11 @@
|
|||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
|
||||
{# <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> #}
|
||||
<!-- build:js js/main.concat.min.js -->
|
||||
{# <script src="{{ pageBase }}js/config.min.js" type="module"></script> #}
|
||||
{# <script src="{{ pageBase }}js/main.min.js"></script> #}
|
||||
<script src="{{ pageBase }}js/variables.js"></script>
|
||||
<script src="{{ pageBase }}js/functions.js"></script>
|
||||
<script src="{{ pageBase }}js/global.js"></script>
|
||||
<!-- endbuild -->
|
||||
<script>
|
||||
// Page specific
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
{% block body %}
|
||||
<div class="card_bkg">
|
||||
<div id="dither"></div>
|
||||
<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
|
||||
<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||
{# <defs>
|
||||
<filter id="turb3">
|
||||
<feColorMatrix type="saturate" values="1" /> </filter>
|
||||
<feColorMatrix type="saturate" values="1" />
|
||||
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
|
||||
</filter>
|
||||
<symbol id="triangle-5">
|
||||
|
|
@ -43,15 +43,24 @@
|
|||
<div id="jsCardHover">
|
||||
<p>Titel<br/>and description</p>
|
||||
<h1>Prename Surname</h1>
|
||||
<p><a class="card_address" href="">name@domain.tld</a><br/><a class="decent" href="http://">site.tld</a> · <span class="decent">Street No., Postcode City</span></p>
|
||||
<p>
|
||||
<a class="card_address" href="">name@domain.tld</a><br/>
|
||||
<a class="decent" href="http://site.tld">site.tld</a>
|
||||
·
|
||||
<span class="decent">Street No., Postcode City</span></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||
<!-- build:js js/main.concat.min.js -->
|
||||
<script src="{{ pageBase }}js/variables.js"></script>
|
||||
<script src="{{ pageBase }}js/functions.js"></script>
|
||||
<script src="{{ pageBase }}js/global.js"></script>
|
||||
<!-- endbuild -->
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
|
||||
|
||||
|
|
@ -66,7 +75,9 @@
|
|||
mouseenter: function () {
|
||||
// $('#flag').addClass('effect');
|
||||
// $('#flag').css('opacity', 0);
|
||||
$('#flag').stop().fadeOut(10000);
|
||||
$('#flag')
|
||||
.stop()
|
||||
.fadeOut(10000);
|
||||
this.iid = setInterval(function () {
|
||||
for (var i = 1; i <= colors.length; i++) {
|
||||
position++;
|
||||
|
|
@ -84,7 +95,9 @@
|
|||
mouseleave: function () {
|
||||
// $('#flag').removeClass('effect');
|
||||
// $('#flag').css('opacity', 1);
|
||||
$('#flag').stop().fadeIn(1000);
|
||||
$('#flag')
|
||||
.stop()
|
||||
.fadeIn(1000);
|
||||
this.iid && clearInterval(this.iid);
|
||||
},
|
||||
click: function () {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@
|
|||
|
||||
{% block main %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
|
|
@ -65,16 +63,19 @@
|
|||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
|
||||
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||
<!-- build:js js/main.concat.min.js -->
|
||||
<script src="{{ pageBase }}js/variables.js"></script>
|
||||
<script src="{{ pageBase }}js/functions.js"></script>
|
||||
<script src="{{ pageBase }}js/global.js"></script>
|
||||
<!-- endbuild -->
|
||||
<script>
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$(document).ready(function () {
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -11,9 +11,7 @@
|
|||
|
||||
{% block main %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
|
|
@ -31,12 +29,17 @@
|
|||
<h2><h4></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||
<a href="">
|
||||
<h4>Überschrift als Block-Verweis</h4>
|
||||
</a>
|
||||
<h2><section></h2>
|
||||
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||
<section class="overflow">
|
||||
<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
|
||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
|
||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
|
||||
<p>+49 (0)123 1337 0000<br>
|
||||
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
|
||||
</p>
|
||||
</section>
|
||||
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||
<div class="space_left_fourth">
|
||||
|
|
@ -44,68 +47,112 @@
|
|||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
|
||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
|
||||
<div class="overflow">
|
||||
<nav class="float_space_left">
|
||||
<ul>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
|
||||
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
|
||||
<li>
|
||||
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="a_button_border">Stufe 1</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 2</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 3</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||
<li>
|
||||
<a href="" class="a_button_border">Stufe 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button_border">Stufe 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button_border">Stufe 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button_border">Stufe 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
|
||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Abschnitt 1</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 2</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 3</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||
<li>
|
||||
<a href="" class="a_button">Abschnitt 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Abschnitt 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Abschnitt 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Abschnitt 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Typ 1</a></li>
|
||||
<li><a href="" class="a_button">Typ 2</a></li>
|
||||
<li><a href="" class="a_button">Typ 3</a></li>
|
||||
<li><a href="" class="a_button">Typ 4</a></li>
|
||||
<li>
|
||||
<a href="" class="a_button">Typ 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Typ 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Typ 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Typ 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||
<header class="header_page demo__header header_fancy">
|
||||
<h1>Aufmacher</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||
<nav class="nav_separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Mensch</a></li>
|
||||
<li><a href="" class="a_button">Pflanze</a></li>
|
||||
<li>
|
||||
<a href="" class="a_button">Mensch</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Pflanze</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Blau</a></li>
|
||||
<li><a href="" class="a_button">Gelb</a></li>
|
||||
<li>
|
||||
<a href="" class="a_button">Blau</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Gelb</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||
<div class="box_space h_basic">
|
||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Eins</a></li>
|
||||
<li><a href="" class="a_button">Zwei</a></li>
|
||||
<li>
|
||||
<a href="" class="a_button">Eins</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">Zwei</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -114,13 +161,27 @@
|
|||
<footer id="js_demo_stop" class="demo_footer">
|
||||
<nav class="nav_column nav_separate">
|
||||
<ul>
|
||||
<li><a href="" class="a_button_text">Alpha</a></li>
|
||||
<li><a href="" class="a_button_text">Bravo</a></li>
|
||||
<li><a href="" class="a_button_text">Charlie</a></li>
|
||||
<li><a href="" class="a_button_text">Delta</a></li>
|
||||
<li>
|
||||
<a href="" class="a_button_text">Alpha</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button_text">Bravo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button_text">Charlie</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button_text">Delta</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p class="txt_center demo__credits"><i class="i_bright">👨💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
|
||||
<p class="txt_center demo__credits">
|
||||
<i class="i_bright">👨💻</i>
|
||||
mit
|
||||
<i class="i_bright">❤</i>
|
||||
von
|
||||
<a href="https://interaktionsweise.de">Interaktionsweise</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -134,32 +195,46 @@
|
|||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
||||
</div>
|
||||
<form method="get">
|
||||
<p class="label">
|
||||
Show me a <select name="F">
|
||||
<option value="0"> Plain list</option>
|
||||
<option value="1" selected="selected"> Fancy list</option>
|
||||
<option value="2"> Table list</option>
|
||||
Show me a
|
||||
<select name="F">
|
||||
<option value="0">
|
||||
Plain list</option>
|
||||
<option value="1" selected="selected">
|
||||
Fancy list</option>
|
||||
<option value="2">
|
||||
Table list</option>
|
||||
</select>
|
||||
Sorted by <select name="C">
|
||||
<option value="N" selected="selected"> Name</option>
|
||||
<option value="M"> Date Modified</option>
|
||||
<option value="S"> Size</option>
|
||||
<option value="D"> Description</option>
|
||||
Sorted by
|
||||
<select name="C">
|
||||
<option value="N" selected="selected">
|
||||
Name</option>
|
||||
<option value="M">
|
||||
Date Modified</option>
|
||||
<option value="S">
|
||||
Size</option>
|
||||
<option value="D">
|
||||
Description</option>
|
||||
</select>
|
||||
<select name="O">
|
||||
<option value="A" selected="selected"> Ascending</option>
|
||||
<option value="D"> Descending</option>
|
||||
<option value="A" selected="selected">
|
||||
Ascending</option>
|
||||
<option value="D">
|
||||
Descending</option>
|
||||
</select>
|
||||
<select name="V">
|
||||
<option value="0" selected="selected"> in Normal order</option>
|
||||
<option value="1"> in Version order</option>
|
||||
<option value="0" selected="selected">
|
||||
in Normal order</option>
|
||||
<option value="1">
|
||||
in Version order</option>
|
||||
</select>
|
||||
Matching <input type="text" name="P" value="*" />
|
||||
Matching
|
||||
<input type="text" name="P" value="*"/>
|
||||
<input type="submit" name="X" value="Go"/>
|
||||
</p>
|
||||
</form>
|
||||
|
|
@ -167,13 +242,19 @@
|
|||
<h2>Gruppierung</h2>
|
||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list_link">
|
||||
<li><a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
<li>
|
||||
<a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Work</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Projects</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Tabellen</h2>
|
||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
|
||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
|
||||
<table class="table_link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -185,7 +266,10 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_link">
|
||||
<a href="" target="_blank">Name</a>
|
||||
<a href="" target="_blank">URL</a>
|
||||
</td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -197,7 +281,10 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell_link">
|
||||
<a href="" target="_blank">Name</a>
|
||||
<a href="" target="_blank">URL</a>
|
||||
</td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -209,7 +296,7 @@
|
|||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<div class="demo__flag">
|
||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice">
|
||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||
<desc>Background flag</desc>
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
|
|
@ -230,15 +317,18 @@
|
|||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||
<!-- build:js js/main.concat.min.js -->
|
||||
<script src="{{ pageBase }}js/variables.js"></script>
|
||||
<script src="{{ pageBase }}js/functions.js"></script>
|
||||
<script src="{{ pageBase }}js/global.js"></script>
|
||||
<!-- endbuild -->
|
||||
<script>
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$(document).ready(function () {
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -15,35 +15,54 @@
|
|||
<div id="begin" class="demo__intro">
|
||||
Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Dies ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
|
||||
<article>
|
||||
<p>Es wirken nur die Eigenschaften des <code><body></code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
|
||||
<p>Es wirken nur die Eigenschaften des
|
||||
<code><body></code>
|
||||
Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
|
||||
<h1 id="sections">Bereiche</h1>
|
||||
{# // body // article // section // nav // aside // h1-h6 // header // footer #}
|
||||
<section>
|
||||
<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code><article></code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
|
||||
<p>Noch allgemeiner ist das <code><section></code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
|
||||
<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch
|
||||
<code><article></code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
|
||||
<p>Noch allgemeiner ist das
|
||||
<code><section></code>
|
||||
Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
|
||||
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
|
||||
</section>
|
||||
<!-- <div class="overflow"> -->
|
||||
<aside class="left">
|
||||
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code><aside></code> markiert.</p>
|
||||
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit
|
||||
<code><aside></code>
|
||||
markiert.</p>
|
||||
</aside>
|
||||
<section class="bside">
|
||||
<header>
|
||||
<p>Um einleitenden Inhalt festzuhalten, wird das <code><header></code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
|
||||
<p>Um einleitenden Inhalt festzuhalten, wird das
|
||||
<code><header></code>
|
||||
Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
|
||||
<nav>
|
||||
<p>Das Element <code><nav></code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
|
||||
<p>Das Element
|
||||
<code><nav></code>
|
||||
umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
|
||||
</nav>
|
||||
</header>
|
||||
<footer>
|
||||
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code><footer></code> eingesetzt.</p>
|
||||
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird
|
||||
<code><footer></code>
|
||||
eingesetzt.</p>
|
||||
</footer>
|
||||
</section>
|
||||
<!-- </div> -->
|
||||
<p>Zur feineren Strukturierung und Gliederung von Texten sind einige weitere Elemente verfügbar. Diese werden nun der Reihe nach aufgeführt. Zu Beginn die Überschriften, da sie noch zu den Abschnitten gehören. Das kommt vermutlich daher, da Abschnitte häufig eine kennzeichnende Überschrift beinhalten.</p>
|
||||
<h1>Überschrift 1</h1>
|
||||
<p>Eine Überschrift erster Ordnung <code><h1></code> ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.</p>
|
||||
<p>Eine Überschrift erster Ordnung
|
||||
<code><h1></code>
|
||||
ist sehr groß und steht daher oft außerhalb eines Textflusses. Sie schafft eine deutliche Trennung sowohl inhaltlich wie auch optisch. Sie erzeugt einen Abstand gleich der horizontalen Linie über sich.</p>
|
||||
<h2>Überschrift 2</h2>
|
||||
<p>Die weiteren Überschriften <code><h2></code> bis <code><h6></code> gliedern Text und werden auch als Titel für andere Elemente eingesetzt.</p>
|
||||
<p>Die weiteren Überschriften
|
||||
<code><h2></code>
|
||||
bis
|
||||
<code><h6></code>
|
||||
gliedern Text und werden auch als Titel für andere Elemente eingesetzt.</p>
|
||||
<h3>Überschrift 3 ist in Großbuchstaben gesetzt</h3>
|
||||
<h4>Überschrift 4 verwendet normale Buchstaben und gleicht ansonsten Überschrift 3</h4>
|
||||
<h5>Überschrift 5 ist Überschrift 5</h5>
|
||||
|
|
@ -53,39 +72,89 @@
|
|||
<article>
|
||||
<h1 id="grouping">Gruppierung</h1>
|
||||
{# // p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div #}
|
||||
<p>Ein Absatz <code><p></code>. Zugegeben ein kurzer.</p>
|
||||
<p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br>Einfache Zeilenumbrüche werden darin mit <code><br></code> erreicht. Dies ist allerdings ein Element der Textebene und keine Gruppierung.</p>
|
||||
<p>Ein Absatz
|
||||
<code><p></code>. Zugegeben ein kurzer.</p>
|
||||
<p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br>Einfache Zeilenumbrüche werden darin mit
|
||||
<code><br></code>
|
||||
erreicht. Dies ist allerdings ein Element der Textebene und keine Gruppierung.</p>
|
||||
<p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p>
|
||||
<p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p><div class="exp_pop"><code class="code_solo">p.txt_center</code></div>
|
||||
<p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p><div class="exp_pop"><code class="code_solo">p.txt_right</code></div>
|
||||
<address>Das Element <code><address></code> hat den Zweck, Kontaktinformationen bereit zu stellen. Diese werden, je nach Position des Elements im Kontext der gesamten Seite, anders gewertet.</address>
|
||||
<p>Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte <code><hr></code> Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.</p>
|
||||
<p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">p.txt_center</code>
|
||||
</div>
|
||||
<p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">p.txt_right</code>
|
||||
</div>
|
||||
<address>Das Element
|
||||
<code><address></code>
|
||||
hat den Zweck, Kontaktinformationen bereit zu stellen. Diese werden, je nach Position des Elements im Kontext der gesamten Seite, anders gewertet.</address>
|
||||
<p>Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte
|
||||
<code><hr></code>
|
||||
Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.</p>
|
||||
<hr/>
|
||||
<p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
|
||||
<hr class="hr_hidden js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_hidden</code></div>
|
||||
<hr class="hr_hidden js_pop"/>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">hr.hr_hidden</code>
|
||||
</div>
|
||||
<p>Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p>
|
||||
<hr class="hr_dotted js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted</code></div><!--hr.hr_dotted-->
|
||||
<hr class="space_even_half js_pop"/><div class="exp_pop"><code class="code_solo">hr.space_even_half</code></div>
|
||||
<hr class="hr_dotted space_even_fourth js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted.space_even_fourth</code></div>
|
||||
<p class="column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code_solo">p.column_2</code></div>
|
||||
<p class="column_3 column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code_solo">p.column_3.column_line</code></div>
|
||||
<hr class="hr_dotted js_pop"/>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">hr.hr_dotted</code>
|
||||
</div>
|
||||
<!--hr.hr_dotted-->
|
||||
<hr class="space_even_half js_pop"/>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">hr.space_even_half</code>
|
||||
</div>
|
||||
<hr class="hr_dotted space_even_fourth js_pop"/>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">hr.hr_dotted.space_even_fourth</code>
|
||||
</div>
|
||||
<p class="column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">p.column_2</code>
|
||||
</div>
|
||||
<p class="column_3 column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">p.column_3.column_line</code>
|
||||
</div>
|
||||
<p class="column_3 column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter.<br>Auch das zeigen diese beiden Absätze ganz gut.</p>
|
||||
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code><pre></code>.</p>
|
||||
<pre>Dadurch<br> bleiben<br> Einrückungen<br> durch<br> Tabulatoren<br> erhalten.</pre>
|
||||
<p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat <code><blockquote></code> zur Anwendung. Es besteht aus der Aussage und der Quelle.</p>
|
||||
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen
|
||||
<code><pre></code>.</p>
|
||||
<pre>dadurch<br> bleiben<br> einrückungen<br> durch<br> tabulatoren<br> erhalten.</pre>
|
||||
<p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat
|
||||
<code><blockquote></code>
|
||||
zur Anwendung. Es besteht aus der Aussage und der Quelle.</p>
|
||||
<blockquote class="js_pop" cite="https://de.wikipedia.org/wiki/Zitat/">
|
||||
<p>Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen, vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text oder ein Hinweis auf eine bestimmte Textstelle.</p>
|
||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/Zitat/">Wikipedia</a></p>
|
||||
<p class="quote_source">
|
||||
<a href="https://de.wikipedia.org/wiki/Zitat/">Wikipedia</a>
|
||||
</p>
|
||||
</blockquote>
|
||||
<div class="exp_pop"><code class="code_solo">blockquote>p+p.quote_source</code></div>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">blockquote>p+p.quote_source</code>
|
||||
</div>
|
||||
<p>Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.</p>
|
||||
<blockquote class="quote_mark js_pop" cite="">
|
||||
<p>Das kannst du schon so machen aber dann isses halt Kacke.</p>
|
||||
<p class="quote_source">o. V.</p>
|
||||
</blockquote>
|
||||
<div class="exp_pop"><code class="code_solo">blockquote.quote_mark>p+p.quote_source</code></div>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">blockquote.quote_mark>p+p.quote_source</code>
|
||||
</div>
|
||||
<h2>Listen</h2>
|
||||
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code><ul></code> und geordnete Listen <code><ol></code> sowie Beschreibungslisten <code><dl></code>. Die beiden ersten Varianten beinhalten das Listenelement <code><li></code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code><dt></code> und Beschreibung <code><dd></code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
|
||||
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete
|
||||
<code><ul></code>
|
||||
und geordnete Listen
|
||||
<code><ol></code>
|
||||
sowie Beschreibungslisten
|
||||
<code><dl></code>. Die beiden ersten Varianten beinhalten das Listenelement
|
||||
<code><li></code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck
|
||||
<code><dt></code>
|
||||
und Beschreibung
|
||||
<code><dd></code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
|
||||
<ul>
|
||||
<li>Ungeordnete</li>
|
||||
<li>Listen</li>
|
||||
|
|
@ -104,10 +173,14 @@
|
|||
<dt>Ausdruck</dt>
|
||||
<dd>Beschreibung</dd>
|
||||
</dl>
|
||||
<p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <code><figure></code> umschlossen und tragen eine Bezeichnung, welche mit <code><figcaption></code> ausgezeichnet wird.</p>
|
||||
<p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit
|
||||
<code><figure></code>
|
||||
umschlossen und tragen eine Bezeichnung, welche mit
|
||||
<code><figcaption></code>
|
||||
ausgezeichnet wird.</p>
|
||||
<figure class="js_pop">
|
||||
<figcaption>Fahne</figcaption>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10%" height="10%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||
<desc>Flag</desc>
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
|
||||
|
|
@ -120,95 +193,296 @@
|
|||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
|
||||
</svg>
|
||||
</figure>
|
||||
<div class="exp_pop"><code class="code_solo">figure>figcaption+{element}</code></div>
|
||||
<p>Eine sehr klar definierte Gruppierung stellt das Element <code><main></code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
|
||||
<p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch <code><div></code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
|
||||
<div class="div_info"><p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p></div>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">figure>figcaption+{element}</code>
|
||||
</div>
|
||||
<p>Eine sehr klar definierte Gruppierung stellt das Element
|
||||
<code><main></code>
|
||||
dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
|
||||
<p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch
|
||||
<code><div></code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
|
||||
<div class="div_info">
|
||||
<p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h1 id="textlevel">Textebene</h1>
|
||||
{# // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // -- Edits -- // ins // del #}
|
||||
<h2>Verweise</h2>
|
||||
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="a_internal js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.a_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="a_external" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis <b>Alles</b> auslösen. Anweisungen werden im <a href="https://tools.ietf.org/html/rfc1738">URL Standard</a> übergeben.</p>
|
||||
<p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a class="a_internal" href="#">Farbige</a> oder <a class="a_line" href="#">unterstrichene Varianten</a> sind einfache Beispiele.</p>
|
||||
<p>Wird der Verweis innerhalb eines <code><nav></code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.</p>
|
||||
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise
|
||||
<code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden.
|
||||
<a class="a_internal js_pop" href="#links">Interne Verweise</a>
|
||||
<span class="exp_pop">
|
||||
<code class="code_solo">a.a_line</code>
|
||||
</span>
|
||||
können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren.
|
||||
<a class="a_external" href="http://de.wikipedia.org">Externe Verweise</a>
|
||||
verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können zum Beispiel auch auf E-Mail Adressen oder Dateien zeigen. Theoretisch kann solch ein Verweis
|
||||
<b>Alles</b>
|
||||
auslösen. Anweisungen werden im
|
||||
<a href="https://tools.ietf.org/html/rfc1738">URL Standard</a>
|
||||
übergeben.</p>
|
||||
<p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert.
|
||||
<a class="a_internal" href="#">Farbige</a>
|
||||
oder
|
||||
<a class="a_line" href="#">unterstrichene Varianten</a>
|
||||
sind einfache Beispiele.</p>
|
||||
<p>Wird der Verweis innerhalb eines
|
||||
<code><nav></code>
|
||||
Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Verweise werden dann durchaus auch wie Schaltflächen dargestellt.</p>
|
||||
<nav>
|
||||
<p><a class="a_button_text" href="#textlevel">↥</a> (Zum Anfang des Abschnitts springen) <a class="a_button_text" href="#begin">⇫</a> (Zum Anfang der Seite springen)</p>
|
||||
<p>
|
||||
<a class="a_button_text" href="#textlevel">↥</a>
|
||||
(Zum Anfang des Abschnitts springen)
|
||||
<a class="a_button_text" href="#begin">⇫</a>
|
||||
(Zum Anfang der Seite springen)</p>
|
||||
</nav>
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<li><a href="{{ pageBase }}demo.html" class="a_button">Startseite</a></li>
|
||||
<li><a href="" class="a_button a_internal">Hilfe</a></li>
|
||||
<li><a href="" class="a_button">⌨</a></li>
|
||||
<li><a href="" class="a_button">⋯</a></li>
|
||||
<li>
|
||||
<a href="{{ pageBase }}demo.html" class="a_button">Startseite</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button a_internal">Hilfe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">⌨</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="a_button">⋯</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h2>Formatierungen</h2>
|
||||
<p>Texte, Wörter oder Zeichen können vielfältig formatiert werden.</p>
|
||||
<p>Sie können <b>fett</b> <code><b></code> oder <i>kursiv</i> <code><i></code> geschrieben sein. <b><i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders <strong>aussehen</strong>, sondern auch <em>eine besondere inhaltliche Bedeutung</em> bekommen, werden sie mit <code><strong></code> und <code><em></code> ausgezeichnet.</p>
|
||||
<p>Das <code><u></code> Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten, nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie <u>Interaktionsweise</u>, oder die Beschriftung des Textes als <u>flasch</u> (falsch) geschrieben.</p>
|
||||
<p>Ähnlich ist es mit dem Element <code><small></code>. <small>Es steht für Randnotizen wird aber häufig auch kleiner dargestellt.</small></p>
|
||||
<p>Ist ein Text nicht mehr korrekt oder relevant kann er mit <code><s></code> markiert werden:<br><s>Die Erde ist eine Scheibe.</s></p>
|
||||
<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code><cite></code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, ist ein super Film - zum Beispiel.</p>
|
||||
<p>Um ein Zitat direkt im Text zu verwenden benutzt man das <code><q></code> Element. Es platziert Anführungszeichen um die Aussage:</p>
|
||||
<p>Sie sagte: <q>Du wolltest staubsaugen!</q><br>Er sagte: <q>Mach' ich morgen.</q></p>
|
||||
<p>Mit dem <code><dfn></code> Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen <code><abbr></code> gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut <code>title</code> stehen.</p>
|
||||
<p><dfn><abbr title="Hippie interweaves preeminent personal interface elements">HIPPIE</abbr></dfn> is an recursive acronym for <dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
|
||||
<p>Die besondere Auszeichnungen <code><ruby></code> <q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint.</q> Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
|
||||
<p>Sie können
|
||||
<b>fett</b>
|
||||
<code><b></code>
|
||||
oder
|
||||
<i>kursiv</i>
|
||||
<code><i></code>
|
||||
geschrieben sein.
|
||||
<b>
|
||||
<i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders
|
||||
<strong>aussehen</strong>, sondern auch
|
||||
<em>eine besondere inhaltliche Bedeutung</em>
|
||||
bekommen, werden sie mit
|
||||
<code><strong></code>
|
||||
und
|
||||
<code><em></code>
|
||||
ausgezeichnet.</p>
|
||||
<p>Das
|
||||
<code><u></code>
|
||||
Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten, nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie
|
||||
<u>Interaktionsweise</u>, oder die Beschriftung des Textes als
|
||||
<u>flasch</u>
|
||||
(falsch) geschrieben.</p>
|
||||
<p>Ähnlich ist es mit dem Element
|
||||
<code><small></code>.
|
||||
<small>Es steht für Randnotizen wird aber häufig auch kleiner dargestellt.</small>
|
||||
</p>
|
||||
<p>Ist ein Text nicht mehr korrekt oder relevant kann er mit
|
||||
<code><s></code>
|
||||
markiert werden:<br>
|
||||
<s>Die Erde ist eine Scheibe.</s>
|
||||
</p>
|
||||
<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit
|
||||
<code><cite></code>
|
||||
ausgezeichnet werden.
|
||||
<cite>Pulp Fiction</cite>, ist ein super Film - zum Beispiel.</p>
|
||||
<p>Um ein Zitat direkt im Text zu verwenden benutzt man das
|
||||
<code><q></code>
|
||||
Element. Es platziert Anführungszeichen um die Aussage:</p>
|
||||
<p>Sie sagte:
|
||||
<q>Du wolltest staubsaugen!</q><br>Er sagte:
|
||||
<q>Mach' ich morgen.</q>
|
||||
</p>
|
||||
<p>Mit dem
|
||||
<code><dfn></code>
|
||||
Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen
|
||||
<code><abbr></code>
|
||||
gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut
|
||||
<code>title</code>
|
||||
stehen.</p>
|
||||
<p>
|
||||
<dfn>
|
||||
<abbr title="Hippie interweaves preeminent personal interface elements">HIPPIE</abbr>
|
||||
</dfn>
|
||||
is an recursive acronym for
|
||||
<dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
|
||||
<p>Die besondere Auszeichnungen
|
||||
<code><ruby></code>
|
||||
<q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint.</q>
|
||||
Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
|
||||
<dl>
|
||||
<dt><code><rb></code></dt>
|
||||
<dt>
|
||||
<code><rb></code>
|
||||
</dt>
|
||||
<dd>Basis Textkomponente</dd>
|
||||
<dt><code><rt></code></dt>
|
||||
<dt>
|
||||
<code><rt></code>
|
||||
</dt>
|
||||
<dd>Annotation</dd>
|
||||
<dt><code><rtc></code></dt>
|
||||
<dt>
|
||||
<code><rtc></code>
|
||||
</dt>
|
||||
<dd>Einzelne Komponente einer Annotation</dd>
|
||||
<dt><code><rp></code></dt>
|
||||
<dt>
|
||||
<code><rp></code>
|
||||
</dt>
|
||||
<dd>Alternative bei fehlender Unterstützung</dd>
|
||||
</dl>
|
||||
<hr class="hr_dotted space_even_half">
|
||||
<div class="txt_center">
|
||||
<ruby class="space_right_small"><rb>Basis</rb><rt>Auszeichnung</rt></ruby>
|
||||
<ruby class="space_right_small"><rb>今日</rb><rt>きょう</rt></ruby>
|
||||
<ruby class="space_right_small">
|
||||
<rb>Basis</rb>
|
||||
<rt>Auszeichnung</rt>
|
||||
</ruby>
|
||||
<ruby class="space_right_small">
|
||||
<rb>今日</rb>
|
||||
<rt>きょう</rt>
|
||||
</ruby>
|
||||
<ruby>
|
||||
♥<rp>: </rp><rt>Herz</rt><rp>, </rp><rtc><rt lang=fr>Cœur</rt></rtc><rp>.</rp>
|
||||
☘<rp>: </rp><rt>Kleeblatt</rt><rp>, </rp><rtc><rt lang=fr>Trèfle</rt></rtc><rp>.</rp>
|
||||
✶<rp>: </rp><rt>Stern</rt><rp>, </rp><rtc><rt lang=fr>Étoile</rt></rtc><rp>.</rp>
|
||||
♥<rp>:
|
||||
</rp>
|
||||
<rt>Herz</rt>
|
||||
<rp>,
|
||||
</rp>
|
||||
<rtc>
|
||||
<rt lang="fr">Cœur</rt>
|
||||
</rtc>
|
||||
<rp>.</rp>
|
||||
☘<rp>:
|
||||
</rp>
|
||||
<rt>Kleeblatt</rt>
|
||||
<rp>,
|
||||
</rp>
|
||||
<rtc>
|
||||
<rt lang="fr">Trèfle</rt>
|
||||
</rtc>
|
||||
<rp>.</rp>
|
||||
✶<rp>:
|
||||
</rp>
|
||||
<rt>Stern</rt>
|
||||
<rp>,
|
||||
</rp>
|
||||
<rtc>
|
||||
<rt lang="fr">Étoile</rt>
|
||||
</rtc>
|
||||
<rp>.</rp>
|
||||
</ruby>
|
||||
</div>
|
||||
<hr class="hr_dotted space_even_half">
|
||||
<p>Wikipedia erklärt dies ausführlicher unter <a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
|
||||
<p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente <code><data></code> und <code><time></code> enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
|
||||
<p>Wikipedia erklärt dies ausführlicher unter
|
||||
<a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
|
||||
<p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente
|
||||
<code><data></code>
|
||||
und
|
||||
<code><time></code>
|
||||
enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
|
||||
<dl>
|
||||
<dt><data value="0">0</data> ≠ <data value="">NULL</data></dt>
|
||||
<dd><code><data>0</data> ≠ <data>NULL</data></code></dd>
|
||||
<dt>Der Wert <data value="NULL">NULL</data> mit Attribut</dt>
|
||||
<dd><code><data value="NULL">NULL</data></code></dd>
|
||||
<dt><time>2018-10-08</time></dt>
|
||||
<dd><code><time>2018-10-08</time></code></dd>
|
||||
<dt>Die Zeitangabe <i><time datetime="2018-10-08">Gestern</time></i> mit Attribut</dt>
|
||||
<dd><code><time datetime="2018-10-08">Gestern</time></code></dd>
|
||||
<dt>
|
||||
<data value="0">0</data>
|
||||
≠
|
||||
<data value="">NULL</data>
|
||||
</dt>
|
||||
<dd>
|
||||
<code><data>0</data> ≠ <data>NULL</data></code>
|
||||
</dd>
|
||||
<dt>Der Wert
|
||||
<data value="NULL">NULL</data>
|
||||
mit Attribut</dt>
|
||||
<dd>
|
||||
<code><data value="NULL">NULL</data></code>
|
||||
</dd>
|
||||
<dt>
|
||||
<time>2018-10-08</time>
|
||||
</dt>
|
||||
<dd>
|
||||
<code><time>2018-10-08</time></code>
|
||||
</dd>
|
||||
<dt>Die Zeitangabe
|
||||
<i>
|
||||
<time datetime="2018-10-08">Gestern</time>
|
||||
</i>
|
||||
mit Attribut</dt>
|
||||
<dd>
|
||||
<code><time datetime="2018-10-08">Gestern</time></code>
|
||||
</dd>
|
||||
</dl>
|
||||
<p>Die Auszeichnung <code><code></code> wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem Element markiert.</p>
|
||||
<p>Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <code><pre></code> verwendet:</p>
|
||||
<pre class="pre_code"><code><html><br> <head><br> <title>Hyper Text Markup Language</title><br> </head><br> <body id="root"><br> <!-- Content goes here --><br> <p class="example">Just like this.</p><br> </body><br></html></code></pre>
|
||||
<p>Die Auszeichnung
|
||||
<code><code></code>
|
||||
wurde bis hier hin schon verwendet. Sie markiert ebenfalls Maschinensprache. Allerdings dient sie dazu von Menschen gelesen zu werden. In diesem Dokument werden alle Elemente, die erklärt werden wiederum mit diesem Element markiert.</p>
|
||||
<p>Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element
|
||||
<code><pre></code>
|
||||
verwendet:</p>
|
||||
<pre class="pre_code"><code><html><br> <head><br> <title>hyper text markup language</title><br> </head><br> <body id="root"><br> <!-- content goes here --><br> <p class="example">just like this.</p><br> </body><br></html></code></pre>
|
||||
<p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
|
||||
<p><code>var def = "Definition einer Variablen";</code></p>
|
||||
<p>In diesem Beispiel wird die Variable <var>def</var> definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element <code><var></code> ausgezeichnet werden.</p>
|
||||
<p>Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das <code><samp></code> Element verwendet. Der Computer hat gesagt: <samp>Ich kann das angegebene Objekt nicht finden</samp>.</p>
|
||||
<p>Benutzereingaben haben ebenfalls ein eigenes Element <code><kbd></code>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel <q>Drücken Sie gleichzeitig <kbd>Strg</kbd> und <kbd>A</kbd></q>, gekennzeichnet.</p>
|
||||
<p>Hoch- und Tiefgestellte Zeichen werden durch die Elemente <code><sup></code> und <code><sub></code> repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen sondern werden für ihren jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:</p>
|
||||
<p>Beispielsweise die Formel <var>E</var>=<var>m</var><var>c</var><sup>2</sup> oder das Element H<sub>2</sub>O</p>
|
||||
<p>
|
||||
<code>var def = "Definition einer Variablen";</code>
|
||||
</p>
|
||||
<p>In diesem Beispiel wird die Variable
|
||||
<var>def</var>
|
||||
definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element
|
||||
<code><var></code>
|
||||
ausgezeichnet werden.</p>
|
||||
<p>Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das
|
||||
<code><samp></code>
|
||||
Element verwendet. Der Computer hat gesagt:
|
||||
<samp>Ich kann das angegebene Objekt nicht finden</samp>.</p>
|
||||
<p>Benutzereingaben haben ebenfalls ein eigenes Element
|
||||
<code><kbd></code>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel
|
||||
<q>Drücken Sie gleichzeitig
|
||||
<kbd>Strg</kbd>
|
||||
und
|
||||
<kbd>A</kbd>
|
||||
</q>, gekennzeichnet.</p>
|
||||
<p>Hoch- und Tiefgestellte Zeichen werden durch die Elemente
|
||||
<code><sup></code>
|
||||
und
|
||||
<code><sub></code>
|
||||
repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen sondern werden für ihren jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:</p>
|
||||
<p>Beispielsweise die Formel
|
||||
<var>E</var>=<var>m</var>
|
||||
<var>c</var>
|
||||
<sup>2</sup>
|
||||
oder das Element H<sub>2</sub>O</p>
|
||||
<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:</p>
|
||||
<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
|
||||
<p>Eine Markierung kann, mittels <code><mark></code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: <mark>Diese Worte sind markiert.</mark></p>
|
||||
<p>Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen <bdi>كائن بشري</bdi>, die auch rechtsbündig geschrieben sein können, wird das <code><bdi></code> Element eingesetzt.<br>Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem <code><bdo></code> Element umgesetzt. Die Richtung wird dann mit dem Attribut <code>dir</code> angegeben.</p>
|
||||
<p>Eine Markierung kann, mittels
|
||||
<code><mark></code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar:
|
||||
<mark>Diese Worte sind markiert.</mark>
|
||||
</p>
|
||||
<p>Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen
|
||||
<bdi>كائن بشري</bdi>, die auch rechtsbündig geschrieben sein können, wird das
|
||||
<code><bdi></code>
|
||||
Element eingesetzt.<br>Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem
|
||||
<code><bdo></code>
|
||||
Element umgesetzt. Die Richtung wird dann mit dem Attribut
|
||||
<code>dir</code>
|
||||
angegeben.</p>
|
||||
<ul>
|
||||
<li><bdo dir="rtl">كائن بشري</bdo></li>
|
||||
<li><bdo dir="rtl">إنسان آلي</bdo></li>
|
||||
<li>
|
||||
<bdo dir="rtl">كائن بشري</bdo>
|
||||
</li>
|
||||
<li>
|
||||
<bdo dir="rtl">إنسان آلي</bdo>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <code><span></code> Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen <code>id</code> oder <code>class</code> werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache <abbr title="Hypertext Markup Language" >HTML</abbr>.</p>
|
||||
<p>Mit der Einführung von Absätzen wurde auch schon das <code><br></code> Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.</p>
|
||||
<p>Eine besondere Form des Zeilenumbruchs kann mit <code><wbr></code> eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.</p>
|
||||
<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das
|
||||
<code><span></code>
|
||||
Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen
|
||||
<code>id</code>
|
||||
oder
|
||||
<code>class</code>
|
||||
werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache
|
||||
<abbr title="Hypertext Markup Language">HTML</abbr>.</p>
|
||||
<p>Mit der Einführung von Absätzen wurde auch schon das
|
||||
<code><br></code>
|
||||
Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.</p>
|
||||
<p>Eine besondere Form des Zeilenumbruchs kann mit
|
||||
<code><wbr></code>
|
||||
eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.</p>
|
||||
<p>Und der Löwe brüllte "RRRR<wbr>rrrr<wbr>oooooooo<wbr>aaaa<wbr>AAAAAAAA<wbr>HHHH<wbr>hhhh<wbr>rrrrrrrrr"!
|
||||
</p>
|
||||
<p>Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen</p>
|
||||
|
|
@ -217,11 +491,17 @@
|
|||
<aside>
|
||||
<ins>Dies ist auch wichtig.</ins>
|
||||
</aside>
|
||||
<p>Der Inhalt wird dann mit <code><ins></code> ausgezeichnet. Wird Text entfernt, kommt das <code><del></code> zum Einsatz.</p>
|
||||
<p>Der Inhalt wird dann mit
|
||||
<code><ins></code>
|
||||
ausgezeichnet. Wird Text entfernt, kommt das
|
||||
<code><del></code>
|
||||
zum Einsatz.</p>
|
||||
<h6>Zu Tun</h6>
|
||||
<ul>
|
||||
<li>Fahrrad reparieren</li>
|
||||
<li><del>Staubsaugen</del></li>
|
||||
<li>
|
||||
<del>Staubsaugen</del>
|
||||
</li>
|
||||
<li>Tisch bauen</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
|
@ -229,8 +509,21 @@
|
|||
<h1 id="embedded">Eingebundene Inhalte</h1>
|
||||
{# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #}
|
||||
<img src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=" width="128" height="80" alt="Fahne von Interaktionsweise">
|
||||
<p>Dies ist ein Bild. Es wird mit dem Element <code><img></code> eingebunden. Solch ein Bild hat üblicherweise die Attribute <code>width</code> und <code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut <code>alt</code> für eine alternative Beschreibung in Textform verwendet werden.</p>
|
||||
<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut <code>src</code> angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente <code><source></code> und <code><picture></code> in Kombination verwendet werden.</p>
|
||||
<p>Dies ist ein Bild. Es wird mit dem Element
|
||||
<code><img></code>
|
||||
eingebunden. Solch ein Bild hat üblicherweise die Attribute
|
||||
<code>width</code>
|
||||
und
|
||||
<code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut
|
||||
<code>alt</code>
|
||||
für eine alternative Beschreibung in Textform verwendet werden.</p>
|
||||
<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut
|
||||
<code>src</code>
|
||||
angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente
|
||||
<code><source></code>
|
||||
und
|
||||
<code><picture></code>
|
||||
in Kombination verwendet werden.</p>
|
||||
<picture>
|
||||
<source srcset="{{ pageBase }}art/demo/flag_websafe_128x80.webp" type="image/webp"/>
|
||||
<img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
|
||||
|
|
@ -248,7 +541,9 @@
|
|||
<td colspan="2">Tabelle</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code_solo">table.width_full>tr>td*2^tr>td[colspan=2]</code></div>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">table.width_full>tr>td*2^tr>td[colspan=2]</code>
|
||||
</div>
|
||||
<div class="overflow">
|
||||
<table class="float_space_left js_pop">
|
||||
<tr>
|
||||
|
|
@ -259,7 +554,9 @@
|
|||
<td colspan="2">Tabelle</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code></div>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
|
||||
</div>
|
||||
<table class="table_blank float_space_left js_pop">
|
||||
<tr>
|
||||
<td>Mit</td>
|
||||
|
|
@ -269,7 +566,9 @@
|
|||
<td colspan="2">Linien</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code_solo">table.table_blank>tr>td*2^tr>td[colspan=2]</code></div>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">table.table_blank>tr>td*2^tr>td[colspan=2]</code>
|
||||
</div>
|
||||
</div>
|
||||
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p>
|
||||
<table class="width_full table_fix js_pop">
|
||||
|
|
@ -311,7 +610,9 @@
|
|||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code_solo">table.width_full.table_fix>caption+thead>tr>th*3^^tbody>(tr>td*3)*3^^tfoot>tr>td*3</code></div>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">table.width_full.table_fix>caption+thead>tr>th*3^^tbody>(tr>td*3)*3^^tfoot>tr>td*3</code>
|
||||
</div>
|
||||
<hr class="hr_hidden">
|
||||
<p>Viele weitere Formate sind möglich. Hier nur einige typische Beispiele:</p>
|
||||
<table class="width_full table_fix js_pop">
|
||||
|
|
@ -344,7 +645,9 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code_solo">table.width_full.table_stripe.table_free>tr>td*3</code></div>
|
||||
<div class="exp_pop">
|
||||
<code class="code_solo">table.width_full.table_stripe.table_free>tr>td*3</code>
|
||||
</div>
|
||||
<table class="width_full table_stripe table_fix table_free">
|
||||
<tr>
|
||||
<td>Tabelle</td>
|
||||
|
|
@ -404,16 +707,36 @@
|
|||
</article>
|
||||
<article>
|
||||
<h1>Formulare</h1>
|
||||
<p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig.<br>Üblicherweise stehen alle Bedienelemente innerhalb eines <code><form></code> Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
|
||||
<p>Grundlegend ist das Element <code><input></code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
|
||||
<p>Spätestens hier werden Betrachter zu Benutzern. Texteingabefelder und verschiedene Bedienelemente geben Möglichkeiten zur Interaktion. Diese Elemente sind in vielerlei Hinsicht besonders. Werden sie nicht explizit gestaltet, ist ihre Erscheinung system- bzw. browserabhängig.<br>Üblicherweise stehen alle Bedienelemente innerhalb eines
|
||||
<code><form></code>
|
||||
Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
|
||||
<p>Grundlegend ist das Element
|
||||
<code><input></code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
|
||||
<p><input value="Undefiniert"/><input class="io_input" value="Undefiniert mit Stil"/></p>
|
||||
<p>Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche <code><input[type="button"]></code>. Es gibt allerdings auch ein eigenes Element <code><button></code> dafür.</p>
|
||||
<p><input type="button" value="Input Button"><button>Button</button></p>
|
||||
<p><input class="io_button" type="button" value="Input Button"><button class="io_button">Button</button></p>
|
||||
<p>Interaktive Elemente können durch das Attribut <code>readonly</code> nur lesbar gemacht werden oder mittels <code>disabled</code> gänzlich deaktiviert werden.</p>
|
||||
<p><input type="text" value="Nur lesbare Eingabe" readonly><input type="text" value="Deaktivierte Eingabe" size="21" disabled><button disabled>Deaktivierte Schaltfläche</button></p>
|
||||
<p><input class="io_input" type="text" value="Nur lesbare Eingabe" readonly><input class="io_input" type="text" value="Deaktivierte Eingabe" size="21" disabled><button class="io_button" disabled>Deaktivierte Schaltfläche</button></p>
|
||||
<p>Das Element <code><label></code> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p>
|
||||
<p>Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche
|
||||
<code><input[type="button"]></code>. Es gibt allerdings auch ein eigenes Element
|
||||
<code><button></code>
|
||||
dafür.</p>
|
||||
<p><input type="button" value="Input Button">
|
||||
<button>Button</button>
|
||||
</p>
|
||||
<p><input class="io_button" type="button" value="Input Button">
|
||||
<button class="io_button">Button</button>
|
||||
</p>
|
||||
<p>Interaktive Elemente können durch das Attribut
|
||||
<code>readonly</code>
|
||||
nur lesbar gemacht werden oder mittels
|
||||
<code>disabled</code>
|
||||
gänzlich deaktiviert werden.</p>
|
||||
<p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
|
||||
<button disabled="disabled">Deaktivierte Schaltfläche</button>
|
||||
</p>
|
||||
<p><input class="io_input" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="io_input" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
|
||||
<button class="io_button" disabled="disabled">Deaktivierte Schaltfläche</button>
|
||||
</p>
|
||||
<p>Das Element
|
||||
<code><label></code>
|
||||
ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p>
|
||||
<p>
|
||||
<label>Beschriftung:<input type="text"></label>
|
||||
</p>
|
||||
|
|
@ -421,11 +744,15 @@
|
|||
<div class="float_left">
|
||||
<table class="table_fix table_blank">
|
||||
<tr>
|
||||
<td><label for="demo__raw_a">Alpha:</label></td>
|
||||
<td>
|
||||
<label for="demo__raw_a">Alpha:</label>
|
||||
</td>
|
||||
<td><input type="text" id="demo__raw_a"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="demo__raw_b">Beta:</label></td>
|
||||
<td>
|
||||
<label for="demo__raw_b">Beta:</label>
|
||||
</td>
|
||||
<td><input type="text" id="demo__raw_b"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -433,39 +760,60 @@
|
|||
<table class="float_right">
|
||||
<tr>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_d" value="11.966504" size="10"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_a">x</label></td>
|
||||
<td class="demo__td_pr">
|
||||
<label for="demo__io_a">x</label>
|
||||
</td>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_a">Breite</label></td>
|
||||
<td class="demo__td_pr">
|
||||
<label for="demo__io_a">Breite</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_e" value="51.503491" size="10"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_b">y</label></td>
|
||||
<td class="demo__td_pr">
|
||||
<label for="demo__io_b">y</label>
|
||||
</td>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_b">Tiefe</label></td>
|
||||
<td class="demo__td_pr">
|
||||
<label for="demo__io_b">Tiefe</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_f" value="88" size="10"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_c">z</label></td>
|
||||
<td class="demo__td_pr">
|
||||
<label for="demo__io_c">z</label>
|
||||
</td>
|
||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
|
||||
<td class="demo__td_pr"><label for="demo__io_c">Höhe</label></td>
|
||||
<td class="demo__td_pr">
|
||||
<label for="demo__io_c">Höhe</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code><fieldset></code> realisiert.</p>
|
||||
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit
|
||||
<code><fieldset></code>
|
||||
realisiert.</p>
|
||||
<fieldset>
|
||||
<div class="grid grid_column_2">
|
||||
<label for="demo__input">Input:</label><input class="io_input" type="text" value="love" readonly id="demo__input">
|
||||
<label for="demo__output">Output:</label><input class="io_input" type="text" value="happiness" readonly id="demo__output">
|
||||
<label for="demo__input">Input:</label><input class="io_input" type="text" value="love" readonly="readonly" id="demo__input">
|
||||
<label for="demo__output">Output:</label><input class="io_input" type="text" value="happiness" readonly="readonly" id="demo__output">
|
||||
</div>
|
||||
</fieldset>
|
||||
<p>Sie können mittels <code><legend></code> auch eine eigene Beschriftung erhalten.</p>
|
||||
<p>Sie können mittels
|
||||
<code><legend></code>
|
||||
auch eine eigene Beschriftung erhalten.</p>
|
||||
<fieldset>
|
||||
<legend>Einfache Eingabeelemente</legend>
|
||||
<div class="grid grid_column_2">
|
||||
<label>Schaltflächen:</label><div><button>Senden</button><input type="reset" value="Abbrechen"></div>
|
||||
<label>Zeicheneingaben:</label><div><input type="text" placeholder="Text"><input type="number" value="0815"></div>
|
||||
<label>Einzelauswahl:</label><div><input type="radio" name="direction" value="up" checked="checked"/><input type="radio" name="direction" value="down"/></div>
|
||||
<label>Mehrfachauswahl:</label><div><input type="checkbox" name="speed" value="slow" checked="checked"/><input type="checkbox" name="speed" value="fast"/></div>
|
||||
<label>Schaltflächen:</label>
|
||||
<div>
|
||||
<button>Senden</button><input type="reset" value="Abbrechen"></div>
|
||||
<label>Zeicheneingaben:</label>
|
||||
<div><input type="text" placeholder="Text"><input type="number" value="0815"></div>
|
||||
<label>Einzelauswahl:</label>
|
||||
<div><input type="radio" name="direction" value="up" checked="checked"/><input type="radio" name="direction" value="down"/></div>
|
||||
<label>Mehrfachauswahl:</label>
|
||||
<div><input type="checkbox" name="speed" value="slow" checked="checked"/><input type="checkbox" name="speed" value="fast"/></div>
|
||||
<label>Auswahllisten:</label>
|
||||
<div>
|
||||
<select class="txt_top">
|
||||
|
|
@ -485,10 +833,15 @@
|
|||
<fieldset>
|
||||
<legend>Einfache Eingabeelemente mit Stil</legend>
|
||||
<div class="grid grid_column_2">
|
||||
<label>Schaltflächen:</label><div><button class="io_button">Senden</button><input class="io_button" type="reset" value="Abbrechen"></div>
|
||||
<label>Zeicheneingaben:</label><div><input class="io_input" type="text" placeholder="Text"><input class="io_input" type="number" value="0815"></div>
|
||||
<label>Einzelauswahl:</label><div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input class="io_radio" type="radio" name="direction" value="down"/></div>
|
||||
<label>Mehrfachauswahl:</label><div><input class="io_check" type="checkbox" name="speed" value="slow" checked="checked"/><input class="io_check" type="checkbox" name="speed" value="fast"/></div>
|
||||
<label>Schaltflächen:</label>
|
||||
<div>
|
||||
<button class="io_button">Senden</button><input class="io_button" type="reset" value="Abbrechen"></div>
|
||||
<label>Zeicheneingaben:</label>
|
||||
<div><input class="io_input" type="text" placeholder="Text"><input class="io_input" type="number" value="0815"></div>
|
||||
<label>Einzelauswahl:</label>
|
||||
<div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input class="io_radio" type="radio" name="direction" value="down"/></div>
|
||||
<label>Mehrfachauswahl:</label>
|
||||
<div><input class="io_check" type="checkbox" name="speed" value="slow" checked="checked"/><input class="io_check" type="checkbox" name="speed" value="fast"/></div>
|
||||
<label>Auswahllisten:</label>
|
||||
<div>
|
||||
<select class="io_select txt_top">
|
||||
|
|
@ -510,19 +863,58 @@
|
|||
<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf.</p>
|
||||
<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
|
||||
<div class="grid grid_column_2">
|
||||
<label class="">Farbauswahl<br><code><input[type="color"]></code></label><div><input class="" type="color"></div>
|
||||
<label class="">Bereichsauswahl<br><code><input[type="range"]></code></label><div><input class="" type="range"></div>
|
||||
<label class="">Datum<br><code><input[type="date"]></code></label><div><input class="io_input" type="date"></div>
|
||||
<label class="">Uhrzeit<br><code><input[type="time"]></code></label><div><input class="io_input" type="time"></div>
|
||||
<label class="">Datum und Zeit<br><code><input[type="datetime-local"]></code></label><div><input class="io_input" type="datetime-local"></div>
|
||||
<label class="">Kalendermonat<br><code><input[type="month"]></code></label><div><input class="io_input" type="month"></div>
|
||||
<label class="">Kalenderwoche<br><code><input[type="week"]></code></label><div><input class="io_input" type="week"></div>
|
||||
<label class="">@dresse<br><code><input[type="email"]></code></label><div><input class="io_input" type="email" placeholder="@"></div>
|
||||
<label class="">Passwort<br><code><input[type="password"]></code></label><div><input class="io_input" type="password" value="admin"></div>
|
||||
<label class="">Telefonnummer<br><code><input[type="tel"]></code></label><div><input class="io_input" type="tel" value="0190123456"></div>
|
||||
<label class="">URL<br><code><input[type="url"]></code></label><div><input class="io_input" type="url" placeholder="url://"></div>
|
||||
<label class="">Suche<br><code><input[type="search"]></code></label><div><input class="io_input" type="search"></div>
|
||||
<label class="">Datei<br><code><input[type="file"]></code></label><div><input class="" type="file"></div>
|
||||
<label class="">Farbauswahl<br>
|
||||
<code><input[type="color"]></code>
|
||||
</label>
|
||||
<div><input class="" type="color"></div>
|
||||
<label class="">Bereichsauswahl<br>
|
||||
<code><input[type="range"]></code>
|
||||
</label>
|
||||
<div><input class="" type="range"></div>
|
||||
<label class="">Datum<br>
|
||||
<code><input[type="date"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="date"></div>
|
||||
<label class="">Uhrzeit<br>
|
||||
<code><input[type="time"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="time"></div>
|
||||
<label class="">Datum und Zeit<br>
|
||||
<code><input[type="datetime-local"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="datetime-local"></div>
|
||||
<label class="">Kalendermonat<br>
|
||||
<code><input[type="month"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="month"></div>
|
||||
<label class="">Kalenderwoche<br>
|
||||
<code><input[type="week"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="week"></div>
|
||||
<label class="">@dresse<br>
|
||||
<code><input[type="email"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="email" placeholder="@"></div>
|
||||
<label class="">Passwort<br>
|
||||
<code><input[type="password"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="password" value="admin"></div>
|
||||
<label class="">Telefonnummer<br>
|
||||
<code><input[type="tel"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="tel" value="0190123456"></div>
|
||||
<label class="">URL<br>
|
||||
<code><input[type="url"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="url" placeholder="url://"></div>
|
||||
<label class="">Suche<br>
|
||||
<code><input[type="search"]></code>
|
||||
</label>
|
||||
<div><input class="io_input" type="search"></div>
|
||||
<label class="">Datei<br>
|
||||
<code><input[type="file"]></code>
|
||||
</label>
|
||||
<div><input class="" type="file"></div>
|
||||
<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -571,7 +963,12 @@
|
|||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
|
||||
<!-- build:js js/main.concat.min.js -->
|
||||
<script src="{{ pageBase }}js/variables.js"></script>
|
||||
<script src="{{ pageBase }}js/functions.js"></script>
|
||||
<script src="{{ pageBase }}js/global.js"></script>
|
||||
<!-- endbuild -->
|
||||
<script>
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue