OVERVIEW

STRUCTURE

Should be the first site

index.html

Standard structure in the html-file

    
                                                              # Define standard charset
                                      # Description of the site
                                    # Keywords of the site
                # Viewport Definition
                                                           # Title of the site
                            # Use Google Font Style
             # Use Google Font Style
                                    # Normalizing the CSS-Browser-Styles
                           # External CSS-File-Link
               # Use FontAwesome Icons
    
    
        
    

GROUPING, LAYOUT

grouping some html-area

main part of the homepage

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

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

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

eg. menue at the title

...

Navigation info for the user (unordered ul list normaly)

bottom of the document

ELEMENTS

commentar in HTML

anker link element

X

form element

    Search:

Normal Paragraph (long text)

text

Paragraph / Text with anchor link

Text X

Paragraph with a class

Hello

Short text

text

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

Import Header

Header2-Tag with Text (second important)

2nd important thing

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

6th important thing

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

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

linebreak (not good – should be done by css)

, 

htmlbreak (not good – should be done by css)

, 

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

 Stress Emphasis 

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

 Strong Importance 

Insert / embedd video with iframe

Set JumpMark at a specific position in the html-file (jump to with index.html#1)

Insert video

Unordered List with anchor links

    
One

    
Two

    
Three

Ordered List

    
One

    
Two>

    
Three>

Table Definition

    
        
First table header
        
Second table header
    
    
        
First row, first column
        
First row, second column
    
    
        
Second row, first column
        
Second row, second column
    

FORMS, BUTTONS

Different input fields can be arranged in a form tag

 ... 

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

First Name:

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

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

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

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

<br>    Pls input your UPPERCASE text here!<br>

check