For your Anki learning

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">                                                      # Define standard charset
        <meta name="description" content="Techcrunch">                              # Description of the site
        <meta name="keywords" content="one, two, three">                            # Keywords of the site
        <meta name="viewport" content="width=device-width, initial-scale=1">        # Viewport Definition
        <title>Techcrunch</title>                                                   # Title of the site
        <link rel="preconnect" href="https://fonts.gstatic.com">                    # Use Google Font Style
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">     # Use Google Font Style
        <link rel="stylesheet" href="css/normalize.css">                            # Normalizing the CSS-Browser-Styles
        <link rel="stylesheet" href="css/techcrunch_layout1.css">                   # External CSS-File-Link
        <script src="https://kit.fontawesome.com/bf5e040b82.js" crossorigin="anonymous"></script>       # Use FontAwesome Icons
    </head>
    <body>
        <!--Everything the user sees -->
    </body>
</html>

GROUPING, LAYOUT

jump to top...

https://www.w3schools.com/html/html_layout.asp

grouping some html-area

<div></div>

main part of the homepage

<main></main>

part of the homepage - eg. the core middle of the site

<section></section>

part of the section - can be taken and dropped to another place

<article></article>

mostly on the side of the homepage - something you can take away and the page would still be working (eg. ads)

<aside></aside>

eg. menue at the title

<header>...</header>

Navigation info for the user (unordered ul list normaly)

<nav></nav>

bottom of the document

<footer></footer>

ELEMENTS

jump to top...

commentar in HTML

<!-- This is a comment -->

anker link element

<a href="www.x.com">X</a>

form element

<form action="search.html" method="post">
    <label>Search:</label>
</form>

Normal Paragraph (long text)

<p>text</p>

Paragraph / Text with anchor link

<p>Text <a href="www.x.com">X</a></p>

Paragraph with a class

<p class="nine">Hello</p>

Short text

<span>text</span>

Header1-Tag with Text (most important on the page)

<h1>Import Header</h1>

Header2-Tag with Text (second important)

<h2>2nd important thing</h1>

Header6-Tag with Text (sixth important thing on the page)

<h6>6th important thing</h1>

Insert picture - no close tag (with alternative text - when img can´t be displayed)

<img src="pic.jpeg" alt="text">

Preserves whitespace (not good - should be done by CSS)

<pre> </pre>

linebreak (not good - should be done by css)

<br>, </br>

htmlbreak (not good - should be done by css)

<hr>, </hr>

Emphasis some text - but only for accessibility reason (not styling!)

<em> Stress Emphasis </em>

Bold some text - but only for accessibility reason (not styling!)

<strong> Strong Importance </strong>

Insert / embedd video with iframe

<iframe src="" frameborder="0"></iframe>

Insert video

<video width="400" controls>
  <source src="mov1.mp4" type="video/mp4">
  <source src="mov2.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

Unordered List with anchor links

<ul>
    <li><a href="x.html">One</a></li>
    <li><a href="y.html">Two</a></li>
    <li><a href="z.html">Three</a></li>
</ul>

Ordered List

<ol>
    <li>One</li>
    <li>Two></li>
    <li>Three></li>
</ol>

Table Definition

<table>
    <tr>
        <th>First table header</th>
        <th>Second table header</th>
    </tr>
    <tr>
        <td>First row, first column</td>
        <td>First row, second column</td>
    </tr>
    <tr>
        <td>Second row, first column</td>
        <td>Second row, second column</td>
    </tr>
</table>

FORMS, BUTTONS

jump to top...

Different input fields can be arranged in a form tag

<form> ... </form>

Label is shown before the element(for-name should be ident with the id-name or name-tag of the object)

<label for="name">First Name:</label>

Text-Inputfield - with id, name and value (default)

<input type="text" id="name"  name="" value="">

Telephon-Inputfield - with id, name and value (default)

<input type="tel" name="" value="">

EMail-Inputfield - with id, name and value (default)

<input type="email" name="" value="">

Range/Slider-Inputfield with id, name, min/max-value for the slider, value (default) and data-sizing-definition (px)

<input type="range" id="xyz" name="xyz" min="0" max="25" value="10" data-sizing="px"#

Definition of a TextField for input with id, name, number of rows and columns

<textarea id="textField" name="w3review" rows="4" cols="50">
    Pls input your UPPERCASE text here!
</textarea>

Define Button with id, name and text on the button

<button id="check" type="button" name="button">check</button>

TEMPLATE

jump to top...

see Learning-Documentation link

MARKDOWN FILE INTEGRATION

jump to top...

Create Text-File
Convert Text-File with ConverTXT_MD.py to MD-File
Read MD-File with Markdown Monster - check if formating is ok in the editor
Save To - Save to HTML - Choose Zip Archive - store the zip-file somewhere and extract
Copy the part from to in the HTML-File