andy
/
webdev
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

design & style

master
Andy 2020-02-25 20:46:00 +01:00
parent 9c71230f7f
commit 08ab8183ab
7 changed files with 68 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -29,6 +29,7 @@
* [Seitenstruktur](html/struktur.html) * [Seitenstruktur](html/struktur.html)
* [Kopfbereich](html/header.html) * [Kopfbereich](html/header.html)
* [Formulare](html/formular.html) * [Formulare](html/formular.html)
* [Navigation](html/navigation.html)
## CSS ## CSS
### CSS Lernen ### CSS Lernen

4
css/style.css
View File

@ -20,7 +20,9 @@ header img{
padding-top: 62px; padding-top: 62px;
float: left; float: left;
} }
nav ul{
margin: 0;
}
nav li{ nav li{
display: inline; display: inline;
line-height: 160px; line-height: 160px;

22
html/formular.html
View File

@ -6,21 +6,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Die HTML -HEADER Struktur in Webseiten"> <meta name="description" content="Die HTML -HEADER Struktur in Webseiten">
<title>Der HEADER in der HTML Struktur</title> <title>Der HEADER in der HTML Struktur</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/code.css"> <link rel="stylesheet" href="../css/code.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<header> <header>
<img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"> <div class="wrapper">
<nav role="navigation"> <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
</nav> <nav role="navigation">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="semantik.html">Semantik</a></li>
<li><a href="formulare.html">Formulare</a></li>
</ul>
</nav>
</div>
</header> </header>
<main role="main"> <main role="main" class="wrapper">
<header>
<h1>HTML Formulare</h1> <h1>HTML Formulare</h1>
</header>
<p>Ein Webformular ist ein Formular auf einer Webseite zur Erfassung von Daten, die zur Verarbeitung an einen <p>Ein Webformular ist ein Formular auf einer Webseite zur Erfassung von Daten, die zur Verarbeitung an einen
Webserver gesendet werden. Man findet sie beispielsweise in Webmail-Anwendungen, Webserver gesendet werden. Man findet sie beispielsweise in Webmail-Anwendungen,
Suchmaschineneingabefeldern, in Sozialen Netzwerken oder auf Login-Seiten. Das Absenden der Daten verläuft Suchmaschineneingabefeldern, in Sozialen Netzwerken oder auf Login-Seiten. Das Absenden der Daten verläuft
@ -42,7 +48,9 @@
</main> </main>
<footer> <footer>
<a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a> <div class="wrapper">
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
</div>
</footer> </footer>
<script src="../js/code.js"></script> <script src="../js/code.js"></script>
</body> </body>

19
html/header.html
View File

@ -6,16 +6,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Die HTML -HEADER Struktur in Webseiten"> <meta name="description" content="Die HTML -HEADER Struktur in Webseiten">
<title>Der HEADER in der HTML Struktur</title> <title>Der HEADER in der HTML Struktur</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/code.css"> <link rel="stylesheet" href="../css/code.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<header> <header>
<img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"> <div class="wrapper">
<img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
<nav role="navigation">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="semantik.html">Semantik</a></li>
<li><a href="formulare.html">Formulare</a></li>
</ul>
</nav>
</div>
</header> </header>
<main role="main"> <main role="main" class="wrapper">
<h1>Der HEADER in der HTML Struktur</h1> <h1>Der HEADER in der HTML Struktur</h1>
<article> <article>
<h2>Was gehört in den Kopf der HTML-Datei?</h2> <h2>Was gehört in den Kopf der HTML-Datei?</h2>
@ -52,7 +61,9 @@
</main> </main>
<footer> <footer>
<a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a> <div class="wrapper">
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
</div>
</footer> </footer>
<script src="../js/code.js"></script> <script src="../js/code.js"></script>
</body> </body>

22
html/semantik.html
View File

@ -6,21 +6,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Die HTML -HEADER Struktur in Webseiten"> <meta name="description" content="Die HTML -HEADER Struktur in Webseiten">
<title>Der HEADER in der HTML Struktur</title> <title>Der HEADER in der HTML Struktur</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/code.css"> <link rel="stylesheet" href="../css/code.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<header> <header>
<img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"> <div class="wrapper">
<nav role="navigation"> <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
</nav> <nav role="navigation">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="semantik.html">Semantik</a></li>
<li><a href="formulare.html">Formulare</a></li>
</ul>
</nav>
</div>
</header> </header>
<main> <main class="wrapper">
<header>
<h1>HTML Semantische Tags</h1> <h1>HTML Semantische Tags</h1>
</header>
<pre class="line-numbers language-html"> <pre class="line-numbers language-html">
<code class=" language-html">&#60;abbr&#62; Abbreviation <code class=" language-html">&#60;abbr&#62; Abbreviation
&#60;acronym&#62; Acronym &#60;acronym&#62; Acronym
@ -50,7 +56,9 @@
</pre> </pre>
</main> </main>
<footer> <footer>
<a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a> <div class="wrapper">
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
</div>
</footer> </footer>
<script src="../js/code.js"></script> <script src="../js/code.js"></script>
</body> </body>

5
html/struktur.html
View File

@ -16,6 +16,11 @@
<div class="wrapper"> <div class="wrapper">
<img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"> <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
<nav role="navigation"> <nav role="navigation">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="semantik.html">Semantik</a></li>
<li><a href="formulare.html">Formulare</a></li>
</ul>
</nav> </nav>
</div> </div>
</header> </header>

19
index.html
View File

@ -6,19 +6,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Die HTML Struktur in Webseiten"> <meta name="description" content="Die HTML Struktur in Webseiten">
<title>HTML Struktur</title> <title>HTML Struktur</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/code.css"> <link rel="stylesheet" href="css/code.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<header> <header>
<img src="img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"> <div class="wrapper">
<img src="img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
<nav role="navigation"> <nav role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="html/semantik.html">Semantik</a></li>
<li><a href="html/formulare.html">Formulare</a></li>
</ul>
</nav> </nav>
</div>
</header> </header>
<main role="main"> <main role="main" class="wrapper">
<h1 id="webdeveloper-links-tips">Webdeveloper Links &amp; Tips</h1> <h1 id="webdeveloper-links-tips">Webdeveloper Links &amp; Tips</h1>
<h2 id="html">HTML</h2> <h2 id="html">HTML</h2>
<h3 id="html-lernen">HTML lernen</h3> <h3 id="html-lernen">HTML lernen</h3>
@ -57,6 +64,7 @@
<li><a href="html/struktur.html">Seitenstruktur</a></li> <li><a href="html/struktur.html">Seitenstruktur</a></li>
<li><a href="html/header.html">Kopfbereich</a></li> <li><a href="html/header.html">Kopfbereich</a></li>
<li><a href="html/formular.html">Formulare</a></li> <li><a href="html/formular.html">Formulare</a></li>
<li><a href="html/navigation.html">Navigation</a></li>
</ul> </ul>
<h2>CSS</h2> <h2>CSS</h2>
<h3>CSS Lernen</h3> <h3>CSS Lernen</h3>
@ -83,7 +91,8 @@
</main> </main>
<footer> <footer>
<a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a> <div class="wrapper">
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p></div>
</footer> </footer>
<script src="../js/code.js"></script> <script src="js/code.js"></script>
</body> </body>