Training page :]

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Paragraphs

This is a paragraph.

This is another paragraph.

Links

Images

Line breaks

this is a paragraph
with a line break

Font sizes

this is a text with 60px size

Code vs display

This paragraph contains a lot of spaces and lines in the source code, but the browser ignores it.

Backgrounds

this paragraph has a
"powderblue" background and "grey" color font

this paragraph has a
"tomato" background

this paragraph has a
"rgba(10, 55, 73, 0.7)" background, "white" color font
and "courrier" font

Text alignment

this parahraph is centered

this parahraph is aligned left

this parahraph is aligned right

Font styles

Comments

in this code, there is a hidden comment

Borders

border time :D

hehehehe

theehee :3

bordered text with 30px padding and 50px margin

Link targets

Images as links

this image hosts a link to lukas' tumblr page

*Email addresses

you can send an demail to someone@example.com by clicking here

A button!

Jump in the page

Floating images

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Float the image to the left:

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Image mapping

click over different parts of the image to open different links

Backgrounds

stuff about backgrounds

Tables

a simple table

Table width, height and headers

50% wide HTML Table

Colspans

Spacing vs padding

Col groups formatting

Colgroup

Add the a colgroup with a col element that spans over two columns to define a style for the two columns:

Lists

An unordered HTML list

• Coffee
• Tea
• Milk

An ordered HTML list

1. Coffee
2. Tea
3. Milk

A Description List

Coffee

- black hot drink

Milk

- white cold drink

Unordered List with Square Bullets

• Coffee
• Tea
• Milk

You may also use other types like : disc, circle, square or none.

A Nested List

Lists can be nested (list inside list):

• Coffee
• Tea
  • Black tea
  • Green tea
• Milk

type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

The start attribute

By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:

50. Coffee
51. Tea
52. Milk
53. Sugar

50. Coffee
51. Tea
52. Milk

Span to modify parts of the same paragraph

My mother has blue eyes and my father has brown eyes.

Html classes

Html ids

Scpecific text decoration

My favorite color is red.

Website windows with Iframes

Iframe - Target for a Link

another cool neocity

When the target attribute of a link matches the name of an iframe, the link will open in the iframe.

Beginner JavaScript stuff

A button to display the date & time

What day is it?

JavaScript can change the content of an HTML element:

will i change?

JavaScript can change the style of an HTML element.

JavaScript can change the source of an image.

Html head elements

  you can use the head element to:
  - define the title of the page
  - define a style
  - link a css stylesheet or a javascript file
  - use some meta tags to:
      * define the character set used:
      * define keywords for search engines:
      * define a description of your web page:
      * define the author of a page
      * refresh document every 30 seconds
      * setting the viewport to make your website look good on all devices
  - set the viewport (size of your pages depending onthe device)
  - define your java scripts
  - use the base tag to define the base target of your links

    

Responsive Text

Resize the browser window to see how the text size scales.

Use the "vw" unit when sizing the text. 5vw will set the size to 5% of the viewport width.

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Media queries

the page layout will change depending on the size of the browser

Html semantics

Below is a list of some of the semantic elements in HTML.

Special characters

Some Useful HTML Character Entities

Html forms

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

The <input> Element

The HTML<input>element is the most used form element.

An<input>element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Text Fields

The <input type="text"> defines a single-line input field for text input.

This is how the HTML code above will be displayed in a browser:

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

Radio Buttons

Radio buttons let a user select ONE of a limited number of choices.

Choose your favorite Web language:

Check boxes

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Which do you own?

Submit button

The name attribute

If the name attribute is omitted, the value of the input field will not be sent at all.

Form attributes

List of All <form> Attributes

Form elements

The textarea Element

The fieldset and legend Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

First name and Last name are part of the same fieldset

Personalia is the legend

The datalist Element

The datalist element specifies a list of pre-defined options for an input element.

Note: The datalist tag is not supported in Safari prior version 12.1.

Form input types

Input Types

• text
• password:
• submit
• reset
• radio:HTMLCSS JavaScript
• checkbox
• button
• color:
• number
• date:
• email
• image as the submit button:
• file
• hidden
• range:
• search
• tel
• time
• Url

Input Restrictions

Here is a list of some common input restrictions:

The input list attribute

The list attribute refers to a datalist element that contains pre-defined options for an input element.

Form model

<form>
  
    <label for="label_id">[your label]</label>
    <input type="your_type (text, checkbox, password...)" id="label_id" name=label_id" [your restriction]>
    
  First name: 
  
        
    <label for="label_id">[your label]</label>
    <input type="your_type (text, checkbox, password...)" id="label_id" name=label_id" [your restriction]>
    
  Last name: 
  
    
    <input list="list_type" name="list_type">
        <datalist id="list_type">
          <option value="option_1">
          <option value="option_2">
          <option value="option_3">
        </datalist>
       
  
        
              
    <fieldset name="identity">
      <legend>Your identity</legend>
      <label for="yourName">What is your name? </label>
      <input type="text" name="yourName" id="yourName" required>
      <label for="yourAge">How old are your</label>
      <input type="number" min="18" max="140">
    </fieldset>
      
  

Your identity
What is your name?

    
How old are you?

  
  
      <input type="radio" id="html" name="fav_language" value="HTML">
      <label for="html">HTML</label>
      <input type="radio" id="css" name="fav_language" value="CSS">
      <label for="css">CSS</label>
      <input type="radio" id="javascript" name="fav_language" value="JavaScript">
      <label for="javascript">JavaScript</label>

   HTML
   CSS
   JavaScript
  
  <input type="submit">
  
    
</form>

    

Html multimedia

Supported formats

Video: Only MP4, WebM, and Ogg video formats are supported by the HTML standard.

Audio: Only MP3, WAV, and Ogg audio formats are supported by the HTML standard.

Videos

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The controls attribute adds video controls, like play, pause, and volume.

To start a video automatically, use the autoplay attribute.

Add muted after autoplay to let your video start playing automatically but muted.

Audio

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

The controls attribute adds audio controls, like play, pause, and volume.

To start an audio automatically, use the autoplay attribute.

Add muted after autoplay to let your audio start playing automatically but muted.

Plug-Ins

Plug-ins are computer programs that extend the standard functionality of the browser.

The object element

The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.

The embed element

The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML document.

<object width="100%" height="500px" data="snippet.html"></object>
<object data="audi.jpeg"></object>
<embed width="100%" height="500px" src="snippet.html">

HTML Youtube videos

<iframe width="100%" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1"></iframe>

Add controls=0 to not display controls in the video player.