From 2572abee26ed75c29b7165996641f57e5e925fcd Mon Sep 17 00:00:00 2001 From: welle7 Date: Tue, 11 Feb 2020 12:30:40 +0100 Subject: [PATCH] index page --- README.md | 3 +- css/code.css | 124 +++++++++++++++++++++++++++++++------------- css/style.css | 5 +- html/header.html | 60 +++++++++++++++++++++ html/semantik.html | 84 +++++++++++++++--------------- html/struktur.html | 126 ++++++++++++++++++++++----------------------- index.html | 67 ++++++++++++++++++++++++ js/code.js | 2 + 8 files changed, 328 insertions(+), 143 deletions(-) create mode 100644 html/header.html create mode 100644 index.html diff --git a/README.md b/README.md index fd2bcfd..fcc8433 100644 --- a/README.md +++ b/README.md @@ -25,4 +25,5 @@ ### Interne Links * [Semantische Tags](html/semantik.html) - * [Seitenstruktur](html/struktur.html) \ No newline at end of file + * [Seitenstruktur](html/struktur.html) + * [Kopfbereich](html/header.html) \ No newline at end of file diff --git a/css/code.css b/css/code.css index dca3fe5..cdb0051 100644 --- a/css/code.css +++ b/css/code.css @@ -1,16 +1,38 @@ /* PrismJS 1.19.0 -https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ +https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript */ +/* + Solarized Color Schemes originally by Ethan Schoonover + http://ethanschoonover.com/solarized + + Ported for PrismJS by Hector Matos + Website: https://krakendev.io + Twitter Handle: https://twitter.com/allonsykraken) +*/ + +/* +SOLARIZED HEX +--------- ------- +base03 #002b36 +base02 #073642 +base01 #586e75 +base00 #657b83 +base0 #839496 +base1 #93a1a1 +base2 #eee8d5 +base3 #fdf6e3 +yellow #b58900 +orange #cb4b16 +red #dc322f +magenta #d33682 +violet #6c71c4 +blue #268bd2 +cyan #2aa198 +green #859900 +*/ code[class*="language-"], pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; + color: #657b83; /* base00 */ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; @@ -18,6 +40,7 @@ pre[class*="language-"] { word-spacing: normal; word-break: normal; word-wrap: normal; + line-height: 1.5; -moz-tab-size: 4; @@ -32,21 +55,12 @@ pre[class*="language-"] { pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; + background: #073642; /* base02 */ } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } + background: #073642; /* base02 */ } /* Code blocks */ @@ -54,29 +68,29 @@ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; + border-radius: 0.3em; } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #f5f2f0; + background-color: #fdf6e3; /* base3 */ } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; - white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: slategray; + color: #93a1a1; /* base1 */ } .token.punctuation { - color: #999; + color: #586e75; /* base01 */ } .token.namespace { @@ -90,7 +104,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #905; + color: #268bd2; /* blue */ } .token.selector, @@ -98,34 +112,31 @@ pre[class*="language-"] { .token.string, .token.char, .token.builtin, +.token.url, .token.inserted { - color: #690; + color: #2aa198; /* cyan */ } -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); +.token.entity { + color: #657b83; /* base00 */ + background: #eee8d5; /* base2 */ } .token.atrule, .token.attr-value, .token.keyword { - color: #07a; + color: #859900; /* green */ } .token.function, .token.class-name { - color: #DD4A68; + color: #b58900; /* yellow */ } .token.regex, .token.important, .token.variable { - color: #e90; + color: #cb4b16; /* orange */ } .token.important, @@ -140,3 +151,44 @@ pre[class*="language-"] { cursor: help; } +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 0f6d968..b2a3475 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,10 @@ body { - font: 1.2em helvetica, sans-serif; + font: normal 500 1.2em helvetica, sans-serif; height: 100%; } +h1, h2{ + font-weight: 100; +} main{ max-width: 960px; margin: 20px auto; diff --git a/html/header.html b/html/header.html new file mode 100644 index 0000000..8e6e6da --- /dev/null +++ b/html/header.html @@ -0,0 +1,60 @@ + + + + + + + + Der HEADER in der HTML Struktur + + + + + +
+ Mein logo +
+ +
+

Der HEADER in der HTML Struktur

+
+

Was gehört in den Kopf der HTML-Datei?

+
    +
  • Benutzte Sprache
    • +
  • Metainfoirmationen
    • +
  • Title
    • +
  • CSS
    • +
  • Favicon
    • +
+ +
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="Die HTML - HEADER Struktur in Webseiten">
+<meta name="robots" content="index,follow">
+<meta name="author" content="Mein Name">
+<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+<link rel="stylesheet" href="../css/style.css">
+<title>Der HEADER in der HTML Struktur</title>
+</head>
+
+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/html/semantik.html b/html/semantik.html index c7ed5cf..fce2380 100644 --- a/html/semantik.html +++ b/html/semantik.html @@ -2,51 +2,51 @@ - - - HTML Semantic Tags - - + + + HTML Semantic Tags + + -
-
-

HTML Semantische Tags

-
- 
-        
-            <abbr> Abbreviation
-            <acronym> Acronym
-            <blockquote> Long quotation
-            <dfn> Definition
-            <address> Address for author(s) of the document
-            <cite> Citation
-            <code> Code reference
-            <tt> Teletype text
-            <div> Logical division
-            <span> Generic inline style container
-            <del> Deleted text
-            <ins> Inserted text
-            <em> Emphasis
-            <strong> Strong emphasis
-            <h1> First-level headline
-            <h2> Second-level headline
-            <h3> Third-level headline
-            <h4> Fourth-level headline
-            <h5> Fifth-level headline
-            <h6> Sixth-level headline
-            <hr> Thematic break
-            <kbd> Text to be entered by the user
-            <pre> Pre-formatted text
-            <q> Short inline quotation
-            <samp> Sample output
-
-
- - +
+
+

HTML Semantische Tags

+
+ 
+
+<abbr> Abbreviation
+<acronym> Acronym
+<blockquote> Long quotation
+<dfn> Definition
+<address> Address for author(s) of the document
+<cite> Citation
+<code> Code reference
+<tt> Teletype text
+<div> Logical division
+<span> Generic inline style container
+<del> Deleted text
+<ins> Inserted text
+<em> Emphasis
+<strong> Strong emphasis
+<h1> First-level headline
+<h2> Second-level headline
+<h3> Third-level headline
+<h4> Fourth-level headline
+<h5> Fifth-level headline
+<h6> Sixth-level headline
+<hr> Thematic break
+<kbd> Text to be entered by the user
+<pre> Pre-formatted text
+<q> Short inline quotation
+<samp> Sample output
+
+
+ + \ No newline at end of file diff --git a/html/struktur.html b/html/struktur.html index 8388442..c4ab16b 100644 --- a/html/struktur.html +++ b/html/struktur.html @@ -2,75 +2,75 @@ - - - - HTML Struktur - - + + + + HTML Struktur + + -
- Mein logo - -
+
+ Mein logo + +
-
-

HTML5 Struktur einer Webseite

-
-

Artikel 1

- 
-                    
-                        <!DOCTYPE html>
-                        <html lang="de">
-                        <head>
-                            <meta charset="UTF-8">
-                            <title>HTML Struktur</title>
-                        </head>
-                        <body>
-                            <header>
-                                <nav>
-                                    <ul>
-                                </nav>
-                            </header>
-                            <main>
-                                <h1>Html Struktur einer Webseite</h1>
-                                <article>
-                                    <h2>Artikel 1</h1> 
-                                </article>
-                                <aside>
-                                    <h2>Artikel 2</h2>
-                                </aside>
-                            </main>
-                            <footer>
-                            </footer>
-                        </body>
-                        </html>
-                    
-
-
+
+

HTML5 Struktur einer Webseite

+
+

Artikel 1

+ 
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>HTML Struktur</title>
+</head>
+<body>
+<header>
+    <nav>
 
-        
-
+ </nav> +</header> +<main> + <h1>Html Struktur einer Webseite</h1> + <article> + <h2>Artikel 1</h1> + </article> + <aside> + <h2>Artikel 2</h2> + </aside> +</main> +<footer> +</footer> +</body> +</html> + + + - - + +
+ + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9b9d68a --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + + + HTML Struktur + + + + + +
+ Mein logo + +
+ +
+

Webdeveloper Links & Tips

+

HTML

+

HTML lernen

+ +

Editoren

+ +

Online Tools / Plugins

+ +

Interne Links

+ +
+ + + + \ No newline at end of file diff --git a/js/code.js b/js/code.js index ad1c3db..e4daeff 100644 --- a/js/code.js +++ b/js/code.js @@ -5,3 +5,5 @@ Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctyp !function(s){var e=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,lookbehind:!0,alias:"selector"}}},url:{pattern:RegExp("url\\((?:"+e.source+"|[^\n\r()]*)\\)","i"),inside:{function:/^url/i,punctuation:/^\(|\)$/}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+e.source+")*?(?=\\s*\\{)"),string:{pattern:e,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:t.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:s.languages.css}},alias:"language-css"}},t.tag))}(Prism); Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}; Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/--|\+\+|\*\*=?|=>|&&|\|\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?[.?]?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*[\s\S]*?\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript; + +!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var l="line-numbers",c=/\n(?!$)/g,m=function(e){var t=a(e)["white-space"];if("pre-wrap"===t||"pre-line"===t){var n=e.querySelector("code"),r=e.querySelector(".line-numbers-rows"),s=e.querySelector(".line-numbers-sizer"),i=n.textContent.split(c);s||((s=document.createElement("span")).className="line-numbers-sizer",n.appendChild(s)),s.style.display="block",i.forEach(function(e,t){s.textContent=e||"\n";var n=s.getBoundingClientRect().height;r.children[t].style.height=n+"px"}),s.textContent="",s.style.display="none"}},a=function(e){return e?window.getComputedStyle?getComputedStyle(e):e.currentStyle||null:null};window.addEventListener("resize",function(){Array.prototype.forEach.call(document.querySelectorAll("pre."+l),m)}),Prism.hooks.add("complete",function(e){if(e.code){var t=e.element,n=t.parentNode;if(n&&/pre/i.test(n.nodeName)&&!t.querySelector(".line-numbers-rows")){for(var r=!1,s=/(?:^|\s)line-numbers(?:\s|$)/,i=t;i;i=i.parentNode)if(s.test(i.className)){r=!0;break}if(r){t.className=t.className.replace(s," "),s.test(n.className)||(n.className+=" line-numbers");var l,a=e.code.match(c),o=a?a.length+1:1,u=new Array(o+1).join("");(l=document.createElement("span")).setAttribute("aria-hidden","true"),l.className="line-numbers-rows",l.innerHTML=u,n.hasAttribute("data-start")&&(n.style.counterReset="linenumber "+(parseInt(n.getAttribute("data-start"),10)-1)),e.element.appendChild(l),m(n),Prism.hooks.run("line-numbers",e)}}}}),Prism.hooks.add("line-numbers",function(e){e.plugins=e.plugins||{},e.plugins.lineNumbers=!0}),Prism.plugins.lineNumbers={getLine:function(e,t){if("PRE"===e.tagName&&e.classList.contains(l)){var n=e.querySelector(".line-numbers-rows"),r=parseInt(e.getAttribute("data-start"),10)||1,s=r+(n.children.length-1);t