text:
# Marking guide for "Structuring a page of content"

The following guide outlines a marking guide for the MDN Learning Area HTML Topic — [Structuring a page of content](https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clearly cut.

The overall mark awarded is out of 30. Work out their final mark, and then divide by 30 and multiply by 100 to give a percentage mark. For reference, you can find a [finished marked up page](index.html) that would be awarded top marks.

## Block/structural semantics

The header (4 marks.)

They need to wrap the <h1>, first <img> and whole of the <ul> in a <header> element.

The navigation menu (4 marks.)

They need to wrap the <ul> in a <nav> element.

The main content (4 marks.)

They need to wrap both <h2>s, the first two <p>s and the last four <img>s in a <main> element.

The welcome text (4 marks.)

They need to wrap the first <h2> and the first two <p>s in an <article> element or a <section> element.

The image sidebar (4 marks.)

They need to wrap the second <h2> and the last four <img>s in an <aside> element.

The footer (4 marks.)

They need to wrap the last two <p>s in a <footer> element.

## Other tasks

Apply the provided CSS to the page by adding another <link> element just below the existing one provided at the start (4 marks.)

The element should look like this: <link rel="stylesheet" href="style.css">

You'll get bonus points if it validates as much as possible (2 marks.)

If the student's code validates, apart from the Google Font link element, they get the marks.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My contacts page</title>

This is my contacts page

The company mailing address can be found at the bottom of this page.

Chris is the only guy that works here, and he doesn't have a phone.

    <address>52 Business street

    Very important town

    Commerce city

    CA, 999654</address>

repo_name: mdn/learning-area

repo_language: HTML

mime_type: text/plain


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My sample homepage</title>

This is my sample homepage

Visit my project homepage.

Want to contact a specific staff member? Find details on our contacts page.

Want to write us a letter? Use our mailing address.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My project page</title>

This is my project page

A link to my project brief.


text:
/* Some default styling for cookbook examples */
/*
rgb(53,43,34)
rgb(75,70,74)
rgb(95,97,110)
rgb(137,151,188)
rgb(160,178,226)
*/
body {
    background-color: #fff;
    color: #333;
    font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

h2 {
  font-size: 1.6rem;
  margin: 0;
}

p {
  margin: 0.5em 0;
}

/* styles for the editor */

.playable {
    font-family: monospace;
    display: block;
    margin-bottom: 10px;
    background-color: #F4F7F8;
    border: none;
    border-left: 6px solid #558ABB;
    color: #4D4E53;
    width: 90%;
    max-width: 700px;
    padding: 10px 10px 0px;
    font-size: 90%;
  }

  .playable-css {
    height: 80px;
  }

  .playable-html {
    height: 160px;
  }

  .playable-buttons {
    text-align: right;
    width: 90%;
    max-width: 700px;
    padding: 5px 10px 5px 26px;
    font-size: 100%;
  }

  .preview {
    width: 90%;
    max-width: 700px;
    border: 1px solid #4D4E53;
    border-radius: 2px;
    padding: 10px 14px 10px 10px;
    margin-bottom: 10px;
  }

  .preview input {
    display: block;
    margin: 5px;
  }


text:
var section = document.querySelector('section');
var editable = document.querySelector('.editable');
var textareaHTML = document.querySelector('.playable-html');
var textareaCSS = document.querySelector('.playable-css');
var reset = document.getElementById('reset');
var htmlCode = textareaHTML.value;
var cssCode = textareaCSS.value;

function fillCode() {
    editable.innerHTML = textareaCSS.value;
    section.innerHTML = textareaHTML.value;
}

reset.addEventListener('click', function () {
    textareaHTML.value = htmlCode;
    textareaCSS.value = cssCode;
    fillCode();
});

textareaHTML.addEventListener('input', fillCode);
textareaCSS.addEventListener('input', fillCode);
window.addEventListener('load', fillCode);


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Narwhals!</title>

Whales

You found our Narwhals page — well done!


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Links: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

List path tests

Link me to the blue whale image

Link me to the narwhal image

Link me to Google image search

Link me to the paragraph at the bottom of the page

The bottom of the page!

    <textarea class="playable playable-css" style="height: 130px;">
h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

li {
  color: gray;
  margin: 0.5em 0;
}

div {
  height: 600px;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

List path tests

Link me to the blue whale image

Link me to the narwhal image

Link me to Google image search

Link me to the paragraph at the bottom of the page

The bottom of the page!

    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
# Links marking guide

The aim of the tasks is to demonstrate an understanding of hyperlinks, as covered in the [Creating hyperlinks](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) lesson in Learn Web Development on MDN.

## Task 1

The first task covers some link basics — setting a link destination, giving it a descriptive title, and creating an email link. The solution should look something like this:

```
<h1>Information on Whales</h1>

<p>For more information on our conservation activities and which Whales we study,
see our <a href="whales.html" target="_blank" title="includes information on Blue Whales and Sperm Whales">Whales page</a>.</p>

<p>If you want to ask our team more questions, feel free to <a href="mailto:whales@example.com?subject=Question%20about%20Whales">email us</a>.</p>
```

The title needs to contain some supplemental information about the page that is useful but not essential for knowing what the linked page is about. If the subject was included on the email link, it really needs `%20` escape characters included so that you get spaces in the subject line.

## Task 2

Our second task here tests the student's knowledge of  absolute and relative paths, as well as link fragments

The finished list code should look like this:

```
<h1>List path tests</h1>

<ul>
  <li><a href="blue/blue-whale.jpg" target="_blank">Link me to the blue whale image</a></li>
  <li><a href="../narwhal/narwhal.png" target="_blank">Link me to the narwhal image</a></li>
  <li><a href="https://www.google.co.uk/imghp" target="_blank">Link me to Google image search</a></li>
  <li><a href="#bottom">Link me to the paragraph at the bottom of the page</a></li>
</ul>
```

## Task 3

Our final task in this set is concerned with good practices for link text; the code should look something like this:

```
<p>We do lots of work with Narwhals. To find out more, visit our <a href="narwhals.html" target="_blank">Narwhals page</a>.</p>

<p>You can <a href="mailto:whales@example.com">email our support team</a> if you have any more questions.</p>

<p>You can also <a href="factfile.pdf" target="_blank">download our factfile (PDF, 4MB)</a> for lots more information, including an FAQ.</p>
```

Basically, all three paragraphs need to be rewritten with good link text, and the third one needs to have a warning added to the link to say that it is a large download.


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Links: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

Information on Whales

For more information on our conservation activities and which Whales we study,
      see our Whales page.

If you want to ask our team more questions, feel free to email us.

    <textarea class="playable playable-css" style="height: 130px;">
p {
  color: gray;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Information on Whales

For more information on our conservation activities and which Whales we study,
see our Whales page.

If you want to ask our team more questions, feel free to email us.

    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Links: Task 3</title>

We do lots of work with Narwhals. To find out more about this work, click here.

You can email our support team if you have any more questions — click here to do so.

You can also click here to download our factfile, which contains lots more information, including an FAQ.


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Links: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />

We do lots of work with Narwhals. To find out more about this work, click here.

You can email our support team if you have any more questions — click here to do so.

You can also click here to download our factfile, which contains lots more information, including an FAQ.

    <textarea class="playable playable-css" style="height: 130px;">
p {
  color: gray;
  margin: 0.5em 0;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

We do lots of work with Narwhals. To find out more about this work, click here.

You can email our support team if you have any more questions — click here to do so.

You can also click here to download our factfile, which contains lots more information, including an FAQ.

    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Whales!</title>

Whales

You found our Whales page — well done!


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Links: Task 2</title>

List path tests

Link me to the blue whale image

Link me to the narwhal image

Link me to Google image search

Link me to the paragraph at the bottom of the page

The bottom of the page!


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Links: Task 1</title>

Information on Whales

For more information on our conservation activities and which Whales we study,
    see our Whales page.

If you want to ask our team more questions, feel free to email us.


text:
# Advanced HTML text marking guide

The aim of the tasks is to demonstrate an understanding of the HTML features covered in the [Advanced text formatting](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) lesson in Learn Web Development on MDN.

## Task 1

This task covers understanding of HTML description lists. Ideally the answer should look something like this:

```
<h1>Advanced HTML Animals</h1>

<dl>
  <dt>Llama</dt>
  <dd>Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and spits a lot. Big fan of list items.</dd>
  <dt>Anaconda</dt>
  <dd>A very large constrictor snake; travels rapidly by way of anchors to sneak up on his prey.</dd>
  <dt>Hippopotamus</dt>
  <dd>His description is bottomless.</dd>
</dl>
```

## Task 2

Our second task is designed to test knowledge of a number of different slighty-more-obscure semantic elements.

The finished code should look like this:

```
<h1>Advanced text semantics</h1>

<p>Let's start with a quote:</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/Accessibility"><p><abbr>HTML</abbr>, Hypertext Markup Language is by default accessible, if used correctly.</p></blockquote>

<p><abbr>CSS</abbr>, Cascading Style Sheets, can also be used to make web pages more, or less, accessible.</p>

<p>Chemical Formulae: H<sub>2</sub>O (Water), C<sub>2</sub>H<sub>6</sub>O (Ethanol).</p>

<p>Dates: <time datetime="2019-12-25">December 25<sup>th</sup> 2019</time> (Christmas Day), <time datetime="2019-11-02">November 2<sup>nd</sup> 2019</time> (Día de los Muertos).</p>
```


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Advanced HTML text: Task 2</title>

Advanced text semantics

Let's start with a quote:

        HTML, Hypertext Markup Language is by default accessible,
        if used correctly.

      CSS, Cascading Style Sheets, can also be used to make web
      pages more, or less, accessible.

      Chemical Formulae: H2O (Water), C2H6O
      (Ethanol).

      Dates:
      <time datetime="2019-12-25">December 25th 2019</time>
      (Christmas Day),
      <time datetime="2019-11-02">November 2nd 2019</time> (Día de
      los Muertos).


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Advanced HTML text: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

Advanced HTML Animals

      Llama
      Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and spits a lot. Big fan of list items.
      Anaconda
      A very large constrictor snake; travels rapidly by way of anchors to sneak up on his prey.
      Hippopotamus
      His description is bottomless.

    <textarea class="playable playable-css" style="height: 130px;">
h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

dl {
  color: gray;
  margin: 0.5em 0;
}

dt {
  font-weight: bold;
  color: purple;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Advanced HTML Animals

Llama
Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and spits a lot. Big fan of list items.
Anaconda
A very large constrictor snake; travels rapidly by way of anchors to sneak up on his prey.
Hippopotamus
His description is bottomless.
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Advanced HTML text: Task 1</title>

Advanced HTML Animals

Llama

        Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and
        spits a lot. Big fan of list items.

Anaconda

        A very large constrictor snake; travels rapidly by way of anchors to
        sneak up on his prey.

Hippopotamus

His description is bottomless.


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Advanced HTML text: Task 1</title>

Advanced HTML Animals

    Llama
    Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and spits a lot. Big fan of list items.
    Anaconda
    A very large constrictor snake; travels rapidly by way of anchors to sneak up on his prey.
    Hippopotamus
    His description is bottomless.


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Advanced HTML text: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

Advanced text semantics

Let's start with a quote:

HTML, Hypertext Markup Language is by default accessible, if used correctly.

CSS can also be used to make web pages more, or less, accessible.

Chemical Formulae: H2O (Water), C2H6O (Ethanol).

Dates: December 25th 2019 (Christmas Day), November 2nd 2019 (Día de los Muertos).

    <textarea class="playable playable-css" style="height: 130px;">
h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

p {
  margin: 0.5em 0;
}

abbr, time {
  color: green;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Advanced text semantics

Let's start with a quote:

HTML, Hypertext Markup Language is by default accessible, if used correctly.

CSS can also be used to make web pages more, or less, accessible.

Chemical Formulae: H2O (Water), C2H6O (Ethanol).

Dates: December 25th 2019 (Christmas Day), November 2nd 2019 (Día de los Muertos).

    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Advanced HTML text: Task 2</title>

Advanced text semantics

Let's start with a quote:

HTML, Hypertext Markup Language is by default accessible, if used correctly.

CSS can also be used to make web pages more, or less, accessible.

Chemical Formulae: H2O (Water), C2H6O (Ethanol).

Dates: December 25th 2019 (Christmas Day), November 2nd 2019 (Día de los Muertos).


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic HTML text finished example: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

Basic HTML Animals

This is the first paragraph in our page. It introduces our animals.

The Llama

        Our Llama is a big fan of list items. When she spies a patch of them on
        a web page, she will eat them like sweets, licking her lips as she goes.

The Anaconda

        The crafty anaconda likes to slither around the page, travelling rapidly
        by way of anchors to sneak up on his prey.


text:
# Basic HTML text marking guide

The aim of the tasks is to demonstrate an understanding of the HTML features covered in the [HTML text fundamentals](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) lesson in Learn Web Development on MDN.

## Task 1

This task covers understanding of HTML headings and paragraphs. Ideally the answer should look something like this:

```
<h1>Basic HTML Animals</h1>

<p>This is the first paragraph in our page. It introduces our animals.</p>

<h2>The Llama</h2>

<p>Our Llama is a big fan of list items. When she spies a patch of them on a web page, she will eat them like sweets, licking her lips as she goes.</p>

<h2>The Anaconda</h2>

<p>The crafty anaconda likes to slither around the page, travelling rapidly by way of anchors to sneak up on his prey.</p>
```

It doesn't make sense for the subheadings to be a higher level than the top-level heading, or for the paragraphs to be marked up with something other than `<p>`.

## Task 2

In task 2 the student needs to wrap the first list in a `<ul>` element, and the second list in a `<ol>`. The individual list items for both lists need to be wrapped in `<li>` elements.

The finished code should look like this:

```
<h1>Looking at lists</h1>

<p>Turn the following list of my favorite vegetables into an unordered list.</p>

<ul>
  <li>Cucumber</li>
  <li>Broccoli</li>
  <li>Asparagus</li>
  <li>Pepper</li>
</ul>

<p>Turn the following directions into an ordered list.</p>

<ol>
  <li>First knock on the door</li>
  <li>When prompted, say the magic word</li>
  <li>Wait for at least 5 seconds</li>
  <li>Turn the handle and push</li>
</ol>
```

## Task 3

The last task aims to test understanding of using basic inline elements such as `<strong>` and `<em>`. Simply, the student needs to markup a couple of words appropriately using each one.

The final code should look like this:

```
<h1>Emphasis and importance</h1>

  <p>There are two things I care about — <strong>music</strong> and <strong>friends</strong>. Someday I <em>might</em> be able to get my friends interested in each other, <em>and</em> my music!</p>
```


text:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Basic HTML text: Task 1</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      h1 {
        font-size: 2rem;
        margin: 0;
      }

      h2 {
        font-size: 1.6rem;
        margin: 0;
      }

      h1, h2 {
        color: purple;
      }

      p {
        color: gray;
        margin: 0.5em 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>

  Basic HTML Animals

  This is the first paragraph in our page. It introduces our animals.

  The Llama

  Our Llama is a big fan of list items. When she spies a patch of them on a web page, she will eat them like sweets, licking her lips as she goes.

  The Anaconda

  The crafty anaconda likes to slither around the page, travelling rapidly by way of anchors to sneak up on his prey.

  </body>

</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Basic HTML text: Task 2</title>

Looking at lists

Turn the following list of my favorite vegetables into an unordered list.

      Cucumber
      Broccoli
      Asparagus
      Pepper

Turn the following directions into an ordered list.

      First knock on the door
      When prompted, say the magic word
      Wait for at least 5 seconds
      Turn the handle and push


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Basic HTML text: Task 3</title>

Emphasis and importance

There are two things I care about — music and friends. Someday I might be able to get my friends interested in each other, and my music!


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic HTML text: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

Looking at lists

Turn the following list of my favorite vegetables into an unordered list.

        Cucumber
        Broccoli
        Asparagus
        Pepper

Turn the following directions into an ordered list.

        First knock on the door
        When prompted, say the magic word
        Wait for at least 5 seconds
        Turn the handle and push

    <textarea class="playable playable-css" style="height: 130px;">
ul {
  border: 2px solid orange;
}

ol {
  border: 2px solid purple;
}

ol, ul {
  padding: 5px 20px;
  border-radius: 4px;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Looking at lists

Turn the following list of my favorite vegetables into an unordered list.

  Cucumber
  Broccoli
  Asparagus
  Pepper

Turn the following directions into an ordered list.

  First knock on the door
  When prompted, say the magic word
  Wait for at least 5 seconds
  Turn the handle and push
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic HTML text: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />

Emphasis and importance

There are two things I care about — music and friends. Someday I might be able to get my friends interested in each other, and my music!

    <textarea class="playable playable-css" style="height: 130px;">
h1, strong {
  color: purple;
}

em {
  color: gray;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Emphasis and importance

There are two things I care about — music and friends. Someday I might be able to get my friends interested in each other, and my music!

    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic HTML text finished example: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />

Emphasis and importance

        There are two things I care about —
        music and friends. Someday I
        might be able to get my friends interested in each other,
        and my music!


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic HTML text: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

      Basic HTML Animals

      This is the first paragraph in our page. It introduces our animals.

      The Llama

      Our Llama is a big fan of list items. When she spies a patch of them on a web page, she will eat them like sweets, licking her lips as she goes.

      The Anaconda

      The crafty anaconda likes to slither around the page, travelling rapidly by way of anchors to sneak up on his prey.

    <textarea class="playable playable-css" style="height: 130px;">
h1, h2 {
  color: purple;
}

p {
  color: gray;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">
Basic HTML Animals

This is the first paragraph in our page. It introduces our animals.

The Llama

Our Llama is a big fan of list items. When she spies a patch of them on a web page, she will eat them like sweets, licking her lips as she goes.

The Anaconda

The crafty anaconda likes to slither around the page, travelling rapidly by way of anchors to sneak up on his prey.
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic HTML text finished example: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

Looking at lists

        Turn the following list of my favorite vegetables into an unordered
        list.

Cucumber

Broccoli

Asparagus

Pepper

Turn the following directions into an ordered list.

First knock on the door

When prompted, say the magic word

Wait for at least 5 seconds

Turn the handle and push


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="author" content="Dr. Eleanor Gaye">
    <title>Awesome science application correspondance</title>

    <address class="sender-column">
      Dr. Eleanor Gaye

      Awesome Science faculty

      University of Awesome

      Bobtown, CA 99999,

      USA

      Tel: 123-456-7890

      Email: no_reply@example.com
    </address>

<time datetime="2016-01-20">20 January 2016</time>

    <address>
      Miss Eileen Dover

      4321 Cliff Top Edge

      Dover, CT9 XXX

      UK
    </address>

Re: Eileen Dover university application

Dear Eileen,

Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD (Doctor of Philosophy) next year. I will answer your questions one by one, in the following sections.

Starting dates

We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:

First semester: <time datetime="2016-09-09">9 September 2016</time>

Second semester: <time datetime="2017-01-15">15 January 2017</time>

Third semester: <time datetime="2017-05-02">2 May 2017</time>

Please let me know if this is ok, and if so which start date you would prefer.

You can find more information about important university dates on our website.

Subjects of study

At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:

Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.)

Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 103 increasing to 3 × 104.)

HTML, Hypertext Markup Language, and CSS, Cascading Style Sheets, constructs for representing musical scores.

So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.

Exotic dance moves

Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:

Polynesian chicken dance

A little known but very influential dance dating back as far as 300 BCE, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".

Icelandic brownian shuffle

Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.

Arctic robot dance

An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterised by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.

For more of my research, see my exotic dance research page.

Yours sincerely,

Dr Eleanor Gaye

University of Awesome motto: <q>Be awesome to each other.</q> -- The memoirs of Bill S Preston, Esq.


text:
# Marking guide for "Marking up a letter"

The following guide outlines a marking guide for the MDN Learning Area HTML Topic — [Marking up a letter](https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or somethign that isn't clearly cut.

The overall mark awarded is out of 45.5. Work out their final mark, and then divide by 45.5 and multiply by 100 to give a percentage mark. For reference, you can find a [finished marked up letter](index.html) that would be awarded top marks.

## Block/structural semantics

You should structure the overall document with an appropriate structure including doctype, and <html>, <head> and <body> elements (5 marks)

They need to:

Provide an HTML5 doctype (<!doctype html>, 1 mark)

Include a <head> element just below that (1 mark)

Wrap the content in a <body> element (1 mark)

Wrap head and body in an <html> element (1 mark)

You get one bonus mark for including a lang attribute in the <html> tag (1 mark)

The letter in general should be marked up with a structure of paragraphs and headings, with the exception of the below points. There is one top level heading (the "Re:" line) and two second level headings (6 marks)

They need to:

Mark up the "Re:" line as an <h1> element (1 mark)

Mark up the "Starting dates", "Subjects of study" and "Exotic dance moves" as <h2> elements (3 marks)

Mark up all appropriate structural elements that shouldn't be headings or lists as paragraphs (2 marks)

The semester start dates, study subjects and exotic dances should be marked up using an appropriate list type (6 marks)

This is fairly simple. Looking at the different lists and their context/usage, the reader should know to:

Mark up the semester start dates as an unordered list (<ul>/<li>), or arguably an ordered list (<ol>/<li>) — either is ok (2 marks)

Mark up the study subjects as an ordered list (<ol>/<li>) (2 marks)

Mark up the exotic dances as a description list (<dl>/<dd>/<dt>) (2 marks)

The two addresses should be put inside <address> elements. Each line of the address should sit on a new line, but not be in a new paragraph. (3 marks)

Wrap both of the addresses in an <address> element, and put a <br> element at the end of each line of the address, except for the last line in each case.

## Inline semantics

The names of the sender and receiver (and "Tel" and "Email") should be marked up with strong importance (2 marks, half a mark each)

"Dr. Eleanor Gaye", "Miss Eileen Dover", "Tel", and "Email" should be wrapped in a <strong> element.

The four dates in the document should be given appropriate elements containing machine-readable dates (2 marks, half a mark each)

All four dates should be marked up using a <time> element. Each one should have a datetime attribute containing a machine readable date. For example <time datetime="2016-01-20">20 January 2016</time>

The first address and first date in the letter should be given a class attribute value of "sender-column"; the CSS you'll add later will then cause these to be right aligned, as should be the case in a classic letter layout. (2 marks)

The first <p> element in the document should be given an attribute of class="sender-column"; the first date should be wrapped in a <p>, which should also be given the class="sender-column" attribute.

The five acronyms/abbreviations in the main text of the letter should be marked up to provide expansions of each acronym/abbreviation. (2.5 marks, half a mark each)

Each acronym/abbreviation in the main text of the letter — "PhD", "HTML", "CSS", "BC" and "Esq" — should be wrapped in an <abbr> element with a title attribute, for example <abbr title="Cascading Style Sheets">CSS</abbr>

The six sub/superscripts should be marked up appropriately (3 marks, half a mark each).

The four numbers in the chemical formulae should be wrapped in a <sub> element, e.g. H<sub>2</sub>O. The rightmost number in both exponential expressions should be wrapped in a <sup> element, e.g. 10<sup>3</sup>.

Try to mark up at least two appropriate words in the text with strong importance/emphasis (1 mark, half a mark each)

This is very open to interpretation; anything that seems appropriate should be fine.

There are two places where a hyperlink should be added; add appropriate links with titles. For the location that the links point to, just use http://example.com (4 marks)

  The two places should have an <a> element wrapped around reasonable words to make the link. Each element should have an href attribute pointing to a dummy URL, such as "http://www.example.com" or "*", and a title attribute that describes what the link should point to. Half a mark should be taken off if the link text is inappropriate, and/or attributes are missing.

First instance: something like <a href="http://www.example.com" title="table of awesome university important dates">important university dates</a>

Second instance: something like <a href="http://www.example.com" title="Dr Gaye's exotic dance research">exotic dance research page</a>

The university motto quote and citation should be marked up with appropriate elements (2 marks)

"Be excellent to each other" should be wrapped in a <q> element, and "The memoirs of Bill S Preston, Esq" should be wrapped in a <cite> element

## The head of the document

The character set of the document should be specified as utf-8 using an appropriate meta tag (1 mark)

The answer should be <meta charset="utf-8"> or equivalent, included inside the <head> element.

The author of the letter should be specified in an appropriate meta tag (1 mark)

The answer should be something like <meta name="author" content="Dr. Eleanor Gaye">, included inside the <head> element.

The provided CSS should be included inside an appropriate tag (2 marks)

The CSS from the provided CSS file should be pasted inside a <style> element, included inside the <head> element. OR, it would also be acceptable (in fact better) if the student put the CSS inside an external CSS file and linked it via a <link> element.

## Other tasks

You'll get bonus points if it validates as much as possible (2 marks.)

If the student's code validates, apart from the Google Font link element, they get the marks.


text:
body {
  max-width: 800px;
  margin: 0 auto;
}

.sender-column {
  text-align: right;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.3em;
}

p,ul,ol,dl,address {
  font-size: 1.1em;
}

p, li, dd, dt, address {
  line-height: 1.5;
}


text:
Dr. Eleanor Gaye
Awesome Science faculty
University of Awesome
Bobtown, CA 99999,
USA
Tel: 123-456-7890
Email: no_reply@example.com

20 January 2016

Miss Eileen Dover
4321 Cliff Top Edge
Dover, CT9 XXX
UK

Re: Eileen Dover university application

Dear Eileen,

Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD next year. I will answer your questions one by one, in the following sections.

Starting dates

We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:

First semester: 9 September 2016
Second semester: 15 January 2017
Third semester: 2 May 2017

Please let me know if this is ok, and if so which start date you would prefer.

You can find more information about important university dates on our website.

Subjects of study

At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:

Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.)
Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 103 increasing to 3 × 104.)
HTML and CSS constructs for representing musical scores.

So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.

Exotic dance moves

Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:

Polynesian chicken dance
A little known but very influential dance dating back as far as 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".
Icelandic brownian shuffle
Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.
Arctic robot dance
An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.

For more of my research, see my exotic dance research page.

Yours sincerely,
Dr Eleanor Gaye

University of Awesome motto: "Be awesome to each other." -- The memoirs of Bill S Preston, Esq


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Birdwatching</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300%7CCinzel+Decorative:700" rel="stylesheet">

Birdwatching

Home

Get started

Photos

Gear

Forum

Welcome

Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.

So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!

Favourite photos

This fake website example is CC0 — any part of this code may be reused in any way you wish. Original example written by Chris Mills, 2016.

Dove icon by Lorc.


text:
/* || General setup */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #a9a9a9;
}

body {
  width: 70%;
  min-width: 800px;
  margin: 0 auto;
}

/* || typography */

h1, h2, h3 {
  font-family: 'Cinzel Decorative', cursive;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Roboto Condensed', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || header layout */

header {
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
}

body > * {
  background-color: red;
  padding: 1%;
}

main, header, nav, article, aside, footer, section {
  background-color: rgba(0,255,0,0.5);
  padding: 1%;
}

h1 {
  flex: 5;
  text-transform: uppercase;
}

header img {
  display: block;
  height: 60px;
  padding-top: 20.15px;
}

nav {
  height: 50px;
  flex: 100%;
  display: flex;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a, nav span {
  display: inline-block;
  font-size: 2rem;
  height: 3rem;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  color: black;

}

/* || main layout */

main {
  display: flex;
}

article, section {
  flex: 4;
}

aside {
  flex: 1;
  margin-left: 10px;
  padding: 1%;
}

aside a {
  display: block;
  float: left;
  width: 50%;
}

aside img {
  max-width: 100%;
}

footer {
  margin-top: 10px;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Other semantics examples</title>

      We use HTML, Hypertext Markup Language, to structure our web
      documents.

      I think Rev. Green did it in the kitchen
      with the chainsaw.

    <address>

Chris Mills, Manchester, The Grim North, UK

    </address>

My birthday is on the 25th of May 2001.

      Caffeine's chemical formula is
      C8H10N4O2.

If x2 is 9, x must equal 3.

const para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}

      You shouldn't use presentational elements like
      <font> and <center>.

      In the above JavaScript example, <var>para</var> represents a paragraph
      element.

      Select all the text with Ctrl/Cmd + A.

$ ping mozilla.org
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Quote examples</title>

According to the  MDN blockquote page:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

The quote element — <q> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q> -- MDN q page.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Description list example</title>

soliloquy

In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)

monologue

In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.

aside

In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Quick hummus recipe</title>

Quick hummus recipe

This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

Ingredients

1 can (400g) of chick peas (garbanzo beans)

175g of tahini

6 sundried tomatoes

Half a red pepper

A pinch of cayenne pepper

1 clove of garlic

A dash of olive oil

Instructions

Remove the skin from the garlic, and chop coarsely.

Remove all the seeds and stalk from the pepper, and chop coarsely.

Add all the ingredients into a food processor.

Process all the ingredients into a paste.

If you want a coarse "chunky" hummus, process it for a short time.

If you want a smooth hummus, process it for a longer time.

For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

Storage

Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.

hummus is suitable for freezing; you should thaw it and use it within a couple of months.


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Quick hummus recipe</title>
  </head>
  <body>
    Quick hummus recipe

    This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

    Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

    Ingredients

    1 can (400g) of chick peas (garbanzo beans)
    175g of tahini
    6 sundried tomatoes
    Half a red pepper
    A pinch of cayenne pepper
    1 clove of garlic
    A dash of olive oil

    Instructions

    Remove the skin from the garlic, and chop coarsely
    Remove all the seeds and stalk from the pepper, and chop coarsely
    Add all the ingredients into a food processor
    Process all the ingredients into a paste.
    If you want a coarse "chunky" hummus, process it for a short time
    If you want a smooth hummus, process it for a longer time

    For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

    Storage

    Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.

    Hummus is suitable for freezing; you should thaw it and use it within a couple of months.

  </body>
</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Pictures</title>

Home

Pictures

Projects

Social

Pictures

My pictures will go here, when I start taking some.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Homepage</title>

Home

Pictures

Projects

Social

Homepage

Welcome to my exciting homepage


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Social</title>

Home

Pictures

Projects

Social

Social media

Welcome to my social media page. I am currently antisocial, but will start putting my social media widgets on here when the time is right.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Projects</title>

Home

Pictures

Projects

Social

My projects

Welcome to my project page, showing what exciting things I am currently doing.


text:
<!doctype html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>date control with fallback</title>

  <form>

        Enter your birthday:
        <input type="date" id="bday" name="bday">

Enter your birthday:

          Day:
          <select id="day" name="day">
          </select>

          Month:
          <select id="month" name="month">
            <option selected>January</option>
            <option>February</option>
            <option>March</option>
            <option>April</option>
            <option>May</option>
            <option>June</option>
            <option>July</option>
            <option>August</option>
            <option>September</option>
            <option>October</option>
            <option>November</option>
            <option>December</option>
          </select>

          Year:
          <select id="year" name="year">
          </select>

  </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="color"> example</title>

    <form>

        Pick a color:
        <input type="color" id="color" name="color">

        <button>Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Basic input types</title>

    <form>

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

        password input type:
        <input type="password" id="pwd" name="pwd">

        email input type:
        <input type="email" id="email" name="email">

        url input type:
        <input type="url" id="url" name="url">

        number input type:
        <input type="number" id="number" name="number">

        tel input type:
        <input type="tel" id="tel" name="tel">

        search input type:
        <input type="search" id="search" name="search">

        <button>Submit</button>

    </form>


text:
<!doctype html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>datetime-local control with fallback</title>

  <form>

      Choose a date and time for your party:
      <input type="datetime-local" id="party" name="bday">

Choose a date and time for your party:

          Day:
          <select id="day" name="day">
          </select>

          Month:
          <select id="month" name="month">
            <option selected>January</option>
            <option>February</option>
            <option>March</option>
            <option>April</option>
            <option>May</option>
            <option>June</option>
            <option>July</option>
            <option>August</option>
            <option>September</option>
            <option>October</option>
            <option>November</option>
            <option>December</option>
          </select>

          Year:
          <select id="year" name="year">
          </select>

          Hour:
          <select id="hour" name="hour">
          </select>

          Minute:
          <select id="minute" name="minute">
          </select>

  </form>


text:
<!DOCTYPE html>

    <meta charset = "utf-8">
    <title>Time example</title>

    <form>

        Choose an appointment time (opening hours 12:00 to 18:00):
        <input id="appt-time" type="time" name="appt-time"
               min="12:00" max="18:00" required>

        <input type="submit" value="Submit form">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="hidden"> example</title>

  <form>

      Post title:
      <input type="text" id="title" name="title" value="My excellent blog post">

      Post content:
      <textarea id="content" name="content">
This is the content of my excellent blog post. I hope you enjoy it!
      </textarea>

      <button type="submit">Update post</button>

    <input type="hidden" id="postId" name="postId" value="34657">
  </form>


text:
<!doctype html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="image"> example</title>

  <form>

Login to your account

      User ID
      <input type="text" id="userId" name="userId">

      Password
      <input type="password" id="pwd" name="pwd">

      <input id="image" type="image" src="login.png" alt="login button" width="100">

  </form>


text:
<!doctype html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>X Y coordinates example</title>

  <form>

Choose your favourite color

      <input id="image" type="image" src="colors.png" alt="image of four colored squares">

  </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Week example</title>

    <form>

        What week would you like to start?
        <input id="week" type="week" name="week"
               min="2017-W01" max="2017-W52" required>

        <input type="submit" value="Submit form">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Post method example</title>

    <form action="http://foo.com" method="post">

        What greeting do you want to say?
        <input name="say" id="say" value="Hi">

        Who do you want to say it to?
        <input name="to" value="Mom">

        <button>Send my greetings</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>PHP form submission example</title>

    <form method="post" action="php-example.php">

        What greeting do you want to say?
        <input name="say" id="say" value="Hi">

        Who do you want to say it to?
        <input name="to" value="Mom">

        <button>Send my greetings</button>

    </form>


text:
from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def form():
    return render_template('form.html')

@app.route('/hello', methods=['GET', 'POST'])
def hello():
    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])

if __name__ == "__main__":
    app.run()


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Get method example</title>

    <form action="http://foo.com" method="get">

        What greeting do you want to say?
        <input name="say" id="say" value="Hi">

        Who do you want to say it to?
        <input name="to" value="Mom">

        <button>Send my greetings</button>

    </form>


text:
<?php
  // The global $_POST variable allows you to access the data sent with the POST method by name
  // To access the data sent with the GET method, you can use $_GET
  $say = htmlspecialchars($_POST['say']);
  $to  = htmlspecialchars($_POST['to']);

  echo  $say, ' ', $to;
?>


text:
<!DOCTYPE html>
    <html lang="en-us">
    <head>
      <meta charset="utf-8">
      <title>Greeting</title>
    </head>
    <body>
      <p>{{say}}  {{to}}</p>
    </body>
  </html>


text:
<!DOCTYPE html>

      <meta charset="utf-8">
      <title>Python form submission example</title>

      <form method="post" action="{{ url_for('hello') }}">

          What greeting do you want to say?
          <input name="say" id="say" value="Hi">

          Who do you want to say it to?
          <input name="to" id="to" value="Mom">

          <button>Send my greetings</button>

      </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="text"> example</title>

    <form>

        Choose a username:
        <input type="text" id="uname" name="name" required
               placeholder="lowercase, 4-8 characters"
               pattern="[a-z]{4,8}">

        <button>Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="range"> example</title>

    <form>

        Choose a maximum house price:
        <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
        <output class="price-output" for="price"></output>

        <button>Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="url"> example</title>

    <form>

        Enter the problem website address:
        <input id="myURL" name="myURL" type="url"
               required pattern=".*\.myco\..*"
               title="URL should be in a myco domain">

        What is the problem?
        <input id="myComment" name="myComment" type="text"
               required>

        <button>Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="number"> example</title>

    <form>

            Enter your height — meters:
            <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required>

            Enter your height —
            feet:
            <input id="feet" type="number" name="feet" min="0" step="1">

            inches:
            <input id="inches" type="number" name="inches" min="0" max="11" step="1">

          <input type="button" class="meters" value="Enter height in feet and inches">

            <input type="submit" value="Submit form">

    </form>


text:
<!doctype html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Indeterminate <input type="checkbox"> example</title>

  <form>
    <fieldset>
    <legend>Complete the recipe</legend>

        <input type="checkbox" id="enchantment" name="enchantment">
        Enchantment table

            <input type="checkbox" id="book" name="ingredient" value="book">
            Book

            <input type="checkbox" id="diamonds" name="ingredient" value="diamonds">
            Diamonds (x2)

            <input type="checkbox" id="obsidian" name="ingredient" value="obsidian">
            Obsidian (x4)

    </fieldset>
  </form>


text:
<!DOCTYPE html>

    <meta charset = "utf-8">
    <title>Month example</title>

    <form>

        What Month would you like to visit us? (Summer months only.)
        <input id="month" type="month" name="month"
               min="2017-06" max="2017-09" required>

          <input type="submit" value="Submit form">

    </form>


text:
<!DOCTYPE html>

    <title>Complete file example</title>

  <form>

      Choose images to upload (PNG, JPG)
      <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>

No files currently selected for upload

      <button>Submit</button>

  </form>


text:
<!DOCTYPE html>

    <title>File upload example with accept</title>

<form>

   Choose file to upload
   <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png">

   <button>Submit</button>

</form>


text:
<!DOCTYPE html>

    <title>File upload example</title>

      <form>

         Choose file to upload
         <input type="file" id="file" name="file" multiple>

         <button>Submit</button>

      </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Minimum and maximum examples</title>

    <form>

        How old are you?
        <input type="number" id="n1" name="age" pattern="\d+" min="12" max="120">

        Leave a short message
        <textarea id="t3" name="msg" rows="5" maxlength="10"></textarea>

        <button>Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Detailed custom validation</title>

  <form novalidate>

        Please enter an email address:
        <input type="email" id="mail" name="mail" required minlength="8">

    <button>Submit</button>
  </form>


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple custom error message</title>
    <style>
      input:invalid {
        border: 2px dashed red;
      }

      input:valid {
        border: 2px solid black;
      }
      form {
        margin: 3rem 0;
      }
    </style>
  </head>

<body>
  <form>
    <label for="mail">I would like you to provide me with an e-mail address:</label>
    <input type="email" id="mail" name="mail">
    <button>Submit</button>
  </form>

  <script>
  const email = document.getElementById("mail");

  email.addEventListener("input", function (event) {
    if (email.validity.typeMismatch) {
      email.setCustomValidity("I am expecting an e-mail address!");
    } else {
      email.setCustomValidity("");
    }
  });
  </script>
</body>

</html>


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Favorite fruit start</title>
    <style>
      input:invalid {
        border: 2px dashed red;
      }

      input:valid {
        border: 2px solid black;
      }
    </style>
  </head>

<body>
    <form>
      <label for="choose">Would you prefer a banana or a cherry?</label>
      <input id="choose" name="i_like">
      <button>Submit</button>
    </form>
</body>

</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Favorite fruit length constraint</title>

    <form>

        Would you prefer a banana or a cherry?
        <input id="choose" name="i_like" required minlength="6" maxlength="6" />

        How many would you like?
        <input
          type="number"
          id="number"
          name="amount"
          value="1"
          min="1"
          max="10"
        />

        <button>Submit</button>

    </form>


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Favorite fruit with required and pattern attributes</title>
    <style>
      input:invalid {
        border: 2px dashed red;
      }

      input:valid {
        border: 2px solid black;
      }
    </style>
  </head>

<body>
    <form>
      <label for="choose">Would you prefer a banana or a cherry?</label>
      <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
      <button>Submit</button>
    </form>
</body>

</html>


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Favorite fruit with required attribute</title>
    <style>
      input:invalid {
        border: 2px dashed red;
      }

      input:invalid:required {
        background-image: linear-gradient(to right, pink, lightgreen);
      }

      input:valid {
        border: 2px solid black;
      }
    </style>
  </head>

<body>
    <form>
      <label for="choose">Would you prefer a banana or a cherry?</label>
      <input id="choose" name="i_like" required>
      <button>Submit</button>
    </form>
</body>

</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Full built-in validation example</title>

  <form>

      <fieldset>
        <legend>Do you have a driver's license?*</legend>

        <input type="radio" required name="driver" id="r1" value="yes">Yes
        <input type="radio" required name="driver" id="r2" value="no">No
      </fieldset>

      How old are you?

      <input type="number" min="12" max="120" step="1" id="n1" name="age"
             pattern="\d+">

      What's your favorite fruit?*
      <input type="text" id="t1" name="fruit" list="l1" required
             pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
      <datalist id="l1">
        <option>Banana</option>
        <option>Cherry</option>
        <option>Apple</option>
        <option>Strawberry</option>
        <option>Lemon</option>
        <option>Orange</option>
      </datalist>

      What's your e-mail address?
      <input type="email" id="t2" name="email">

      Leave a short message
      <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>

      <button>Submit</button>

  </form>


text:
/* Some default styling for cookbook examples */
/*
rgb(53,43,34)
rgb(75,70,74)
rgb(95,97,110)
rgb(137,151,188)
rgb(160,178,226)
*/
body {
    background-color: #fff;
    color: #333;
    font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

h2 {
  font-size: 1.6rem;
  margin: 0;
}

p {
  margin: 0.5em 0;
}

/* styles for the editor */

.playable {
    font-family: monospace;
    display: block;
    margin-bottom: 10px;
    background-color: #F4F7F8;
    border: none;
    border-left: 6px solid #558ABB;
    color: #4D4E53;
    width: 90%;
    max-width: 700px;
    padding: 10px 10px 0px;
    font-size: 90%;
  }

  .playable-css {
    height: 80px;
  }

  .playable-html {
    height: 160px;
  }

  .playable-buttons {
    text-align: right;
    width: 90%;
    max-width: 700px;
    padding: 5px 10px 5px 26px;
    font-size: 100%;
  }

  .preview {
    width: 90%;
    max-width: 700px;
    border: 1px solid #4D4E53;
    border-radius: 2px;
    padding: 10px 14px 10px 10px;
    margin-bottom: 10px;
  }

  .preview input {
    display: block;
    margin: 5px;
  }


text:
var section = document.querySelector("section");
var editable = document.querySelector(".editable");
var textareaHTML = document.querySelector(".playable-html");
var textareaCSS = document.querySelector(".playable-css");
var reset = document.getElementById("reset");
var htmlCode = textareaHTML.value;
var cssCode = textareaCSS?.value;

function fillCode() {
  editable.innerHTML = textareaCSS?.value;
  section.innerHTML = textareaHTML.value;
}

reset.addEventListener("click", function () {
  textareaHTML.value = htmlCode;
  if (textareaCSS) {
    textareaCSS.value = cssCode;
  }
  fillCode();
});

textareaHTML.addEventListener("input", fillCode);
textareaCSS?.addEventListener("input", fillCode);
window.addEventListener("load", fillCode);


text:
# Form structure marking guide

The aim of the tasks is to demonstrate an understanding of the features covered in the [How to structure a web form](https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form) lesson in Learn Web Development on MDN.

## Task 1

The only task in this test your skills assessment looks at your knowledge of simple form structure. You are asked to:

1. Separate out the first two and second two form fields into two distinct containers, each with a descriptive legend (use "Personal details" for the first two, and "Comment information" for the second two). This is what the `<fieldset>` and `<legend>` elements are made for.
2. Mark up each text label with an appropriate element so that it is semantically associated with its respective form field. This needs the `<label>` element, and the `for` attribute if you are choosing not to wrap the `<label>` around the `<input>`.
3. Add a suitable set of structural elements around the label/field pairs to separate them out. Ordered/unordered lists would be ideal, but something like `<div>`s would also be acceptable.

The finished markup should look something like this:

```
<form>
  <fieldset>
    <legend>Personal details</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
      </li>
      <li>
        <label for="age">Age:</label>
        <input type="number" id="age" name="age">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Comment information</legend>
    <ul>
      <li>
        <label for="comment">Comment:</label>
        <input type="text" id="comment" name="comment">
      </li>
      <li>
        <label for="email">Email (include if you want a reply):</label>
        <input type="email" id="email" name="email">
      </li>
    </ul>
  </fieldset>
</form>
```


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Form structure: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
<form>
  Name:
  <input type="text" id="name" name="name">

  Age:
  <input type="number" id="age" name="age">

  Comment:
  <input type="text" id="comment" name="comment">

  Email:
  <input type="email" id="email" name="email">
</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Form structure: Task 1</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <form>
      Name:
      <input type="text" id="name" name="name">

      Age:
      <input type="number" id="age" name="age">

      Comment:
      <input type="text" id="comment" name="comment">

      Email:
      <input type="email" id="email" name="email">
    </form>
  </body>

</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Other controls: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
<form>

      Enter your favorite food:

          Salad
          Curry
          Pizza
          Fajitas
          Biscuits
          Crisps
          Fruit
          Breadsticks

      <button>Submit choice</button>

</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
# Other controls marking guide

The aim of the tasks is to demonstrate an understanding of the features covered in the [Other form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls) lesson in Learn Web Development on MDN.

## Task 1

In our first "other controls" assessment, we'll get you to create a multi-line text input.

1. Create a basic multi-line text input. You should use a `<textarea>` element for this.
2. Associate it semantically with the provided "Comment" label. Use the same value that the `for` attribute already has, for the `id` of the `<textarea>`.
3. Give the input 35 columns, and 10 rows of space in which to add comments. The `cols` and `rows` attributes are what you need here.
4. Give the comments a maximum length of 100 characters. This requires use of the `maxlength` attribute.

The finished markup should look something like this:

```
<form>
  <h2>Enter your comment</h2>
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" name="name" id="name">
    </li>
    <li>
      <label for="comment">Comment:</label>
      <textarea id="comment" name="comment"
                cols="35" rows="10"
                maxlength="100">Enter comment here</textarea>
    </li>
    <li>
      <button>Submit comment</button>
    </li>
  </ul>
</form>
```

## Task 2

Now it's time to have a go at implementing a drop-down select menu, to allow a user to pick their favourite food from the choices provided.

1. Create your basic select box structure. You should use a `<select>` element for this, inside which you should nest an `<option>` element for each choice.
2. Associate it semantically with the provided "Comment" label. Use the same value that the `for` attribute already has, for the `id` of the `<select>`.
3. Inside the list, split the choices up into 2 subgroups — "mains" and "snacks". To do this, you should use `<optgroup>` elements inside the main `<select>`, with appropriate `label` attributes.

The finished markup should look something like this:

```
<form>
  <ul>
    <li>
      <label for="food">Pick your favorite food:</label>
      <select name="food" id="food">
        <optgroup label="mains">
          <option>Salad</option>
          <option>Curry</option>
          <option>Pizza</option>
          <option>Fajitas</option>
        </optgroup>
        <optgroup label="snacks">
          <option>Biscuits</option>
          <option>Crisps</option>
          <option>Fruit</option>
          <option>Breadsticks</option>
        </optgroup>
      </select>
    </li>
    <li>
      <button>Submit choice</button>
    </li>
  </ul>
</form>
```

## Task 3

In our final task of this set, we start with much the same list of food choices. However, this time we want to do things differently:

1. Create a basic text input that is semantically associated with the provided label. This is done as you'd expect — use a simple `<input type="text">` with an `id` that matches the label's `for` value.
2. Put the food choices into a list that can be associated with a form input. For this, you need to wrap each option in an `<option>` element, and wrap the whole series of them in a `<datalist>` element.
3. Associate the list with your text input, so that when you type characters, any of the list options that match the character sequence are given in a dropdown list as autocomplete suggestions. To do this, you need to give the `<datalist>` an `id`, and then given the `<input>` a `list` attribute whose value matches the `<datalist>`'s `id`.

The finished markup should look something like this:

```
<form>
  <ul>
    <li>
      <label for="food">Enter your favorite food:</label>
      <input type="text" name="food" id="food" list="food-suggest">
      <datalist id="food-suggest">
          <option>Salad</option>
          <option>Curry</option>
          <option>Pizza</option>
          <option>Fajitas</option>
          <option>Biscuits</option>
          <option>Crisps</option>
          <option>Fruit</option>
          <option>Breadsticks</option>
      </datalist>
    </li>
    <li>
      <button>Submit choice</button>
    </li>
  </ul>
</form>
```


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Other controls: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
<form>

Enter your comment

      Name:
      <input type="text" name="name" id="name">

      Comment:

      <button>Submit comment</button>

</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Other controls: Task 2</title>

    <form>

          Pick your favorite food:

              Salad
              Curry
              Pizza
              Fajitas

              Biscuits
              Crisps
              Fruit
              Breadsticks

          <button>Submit choice</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Other controls: Task 3</title>

    <form>

          Enter your favorite food:

              Salad
              Curry
              Pizza
              Fajitas
              Biscuits
              Crisps
              Fruit
              Breadsticks

          <button>Submit choice</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Other controls: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
<form>

      Pick your favorite food:

          Salad
          Curry
          Pizza
          Fajitas

          Biscuits
          Crisps
          Fruit
          Breadsticks

      <button>Submit choice</button>

</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Other controls: Task 1</title>

    <form>

Enter your comment

          Name:
          <input type="text" name="name" id="name">

          Comment:

          <button>Submit comment</button>

    </form>


text:
# Styling basics marking guide

The aim of the tasks is to demonstrate an understanding of the features covered in the [Styling web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms) lesson in Learn Web Development on MDN.

## Task 1

Our basic form styling assessment is fairly free-form, and you have a lot of flexibility over what you end up doing here. But your CSS should aim to fulfill the following requirements:

1. Add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with.
2. On top of that, add in some nice, consistent styling for the inputs and button.
3. Use some kind of layout technique to make the inputs and labels line up neatly. Flexbox or Grid would be ideal for this, or CSS tables if you prefer something a bit more compatible with old browsers.

The finished CSS could look something like this:

```
* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  color: #333;
  font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
  width: 400px;
}

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  padding: 0; margin: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

li:last-of-type {
  margin-top: 30px;
}

label {
  flex: 0 40%;
  text-align: right;
  padding-right: 10px;
}

input, select {
  flex: auto;
  height: 2em;
}

input, select, button {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

select {
  padding: 5px;
}

button {
  margin: 0 auto;
  padding: 5px 20px;
  line-height: 1.5;
  background: #eee;
}

button:hover, button:focus {
  background: #ddd;
}
```


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Styling basics: Task 1</title>

    <form>

Edit your preferences

          Email:
          <input type="email" id="e-mail" name="e-mail">

          Website:
          <input type="url" id="website" name="website">

          Phone number:
          <input type="tel" id="phone" name="phone">

          Favorite food:
          <select name="food" id="food">
            <option>Salad</option>
            <option>Curry</option>
            <option>Pizza</option>
            <option>Fajitas</option>
          </select>

          <button>Update preferences</button>

    </form>


text:
# Basic controls marking guide

The aim of the tasks is to demonstrate an understanding of the features covered in the [Basic native form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls) lesson in Learn Web Development on MDN.

## Task 1

This task starts you off nice and gently by asking you to create two input elements, for a user's ID and password, along with a submit button.

1. Create appropriate inputs for user ID and password — you need to use appropriate `<input>` elements, with `type`s of `text` and `password` respectively. They should also have `id`s and `name`s.
2. You should also associate them with their text labels semantically — use `<label>` elements appropriately, with `for` attributes as required.
3. Create a submit button inside the remaining list item, with button text of "Log in". Either <button>Log in</button>, or <input type="submit" value="Log in"> will do.
4. Try submitting your form to see if it submits successfully (there will be no redirect, but you should see the data attached to the page URL).

The finished markup should look something like this:

```
<form>
  <ul>
    <li>
      <label for="uid">User ID</label>
      <input type="text" id="uid" name="uid">
    </li>
    <li>
      <label for="pwd">Password</label>
      <input type="password" id="pwd" name="pwd">
    </li>
    <li>
      <button>Log in</button>
    </li>
  </ul>
</form>
```

## Task 2

The next task requires you to create working sets of checkboxes and radio buttons, from the provided text labels.

1. Turn the first fieldset's contents into a set of radio buttons — you should only be able to select one pony character at once. `<input type="radio">` is the key here. You should use the same `name` attribute value for all the inputs, so that it associates the radio buttons into the same group.
2. Make it so that the first radio button is selected upon page load. This is done by setting the `checked` attribute on the first input.
3. Turn the second fieldset's content into a set of checkboxes. `<input type="checkbox">` is needed here. We've given each input the same `name` attribute value because the items are related.
4. Add a couple more hotdog choices of your own.

Note: It is usually better if you set `value` attributes explicitly on radio buttons and checkboxes, as well as the usually `type`, `id`, and `name`. If you don't, their value defaults to `on` when submitted, which is often not what you want.

The finished markup should look something like this:

```
<form>
  <fieldset>
    <legend>Who is your favorite pony?</legend>
    <ul>
      <li>
        <label for="pinkie">Pinkie Pie</label>
        <input type="radio" id="pinkie" name="pony" value="pinkie" checked>
      </li>
      <li>
        <label for="rainbow">Rainbow Dash</label>
        <input type="radio" id="rainbow" name="pony" value="rainbow">
      </li>
      <li>
        <label for="twilight">Twilight Sparkle</label>
        <input type="radio" id="twilight" name="pony" value="twilight">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Hotdog preferences</legend>
    <ul>
      <li>
        <label for="vegan">Vegan</label>
        <input type="checkbox" id="vegan" name="hotdog" value="vegan">
      </li>
      <li>
        <label for="onions">Onions</label>
        <input type="checkbox" id="onions" name="hotdog" value="onions">
      </li>
      <li>
        <label for="mustard">Mustard</label>
        <input type="checkbox" id="mustard" name="hotdog" value="mustard">
      <li>
        <label for="ketchup">Ketchup</label>
        <input type="checkbox" id="ketchup" name="hotdog" value="ketchup">
      </li>
    </ul>
  </fieldset>
  <button>Submit</button>
</form>
```

## Task 3

The final task in this set requires you to create a file picker.

1. Create a basic file picker. Use `<input type="file">`
2. Allow the user to pick multiple files at once. Do this by including the `multiple` attribute.
3. Allow the file picker to accept JPG and PNG images. To do this, you need to include the `accept` attribute, and give it a value of `image/png, image/jpeg`.

The finished markup should look something like this:

```
<form>
    <ul>
      <li>
        <label for="gallery-img">Choose gallery images to upload</label>
        <input type="file" id="gallery-img" name="gallery-img"
               multiple accept="image/png, image/jpeg">
      </li>
    </ul>
  <button>Submit</button>
</form>
```


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Basic controls: Task 1</title>

    <form>

          User ID

          Password

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic controls: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
<form>

        Choose gallery images to upload

  <button>Submit</button>
</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Basic controls: Task 2</title>

    <form>
      <fieldset>
        <legend>Who is your favorite pony?</legend>

            Pinkie Pie

            Rainbow Dash

            Twilight Sparkle

      </fieldset>
      <fieldset>
        <legend>Hotdog preferences</legend>

            Vegan

            Onions

      </fieldset>
      <button>Submit</button>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Basic controls: Task 3</title>

    <form>

            Choose gallery images to upload

      <button>Submit</button>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic controls: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
      <form>
        <fieldset>
          <legend>Who is your favorite pony?</legend>

              Pinkie Pie

              Rainbow Dash

              Twilight Sparkle

        </fieldset>
        <fieldset>
          <legend>Hotdog preferences</legend>

              Vegan

              Onions

        </fieldset>
        <button>Submit</button>
      </form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Basic controls: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
<form>

      User ID

      Password

</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Form validation: Task 3</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <form>
      <label for="mail">I would like you to provide me with an e-mail address:</label>
      <input type="email" id="mail" name="mail">
      <button>Submit</button>
    </form>
  </body>
  <script>
    const email = document.getElementById("mail");

  </script>

</html>


text:
# Form validation marking guide

The aim of the tasks is to demonstrate an understanding of the features covered in the [Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) lesson in Learn Web Development on MDN.

## Task 1

In this task, we are providing you with a simple support query form, and we want you to add some validation features to it:

1. Make all of the input fields mandatory to complete before the form can be submitted. This is simple — just use the `required` attribute.
2. Change the type of the "Email address" and "Phone number" fields to make the browser apply some more specific validation suitable for the data being asked for. The `email` and `tel` types are most suitable for these fields.
3. Give the "User name" field a required length of between 5 and 20 characters, the "Phone number" field a maximum length of 15 characters, and the "Comment" field a maximum length of 200 characters. The first and last of these three take string data, so require the `minlength` and `maxlength` attributes. The second one is slightly more tricky — you'd think a phone number would constitute a numeric field, so would require the `max` attribute, but  it is the number of digits in a phone number that matter, not the value of the number. This one requires `maxlength` too.

Try submitting your form — it should refuse to submit until the above constraints are followed, and give suitable error messages. To help, you might want to consider adding some simple CSS to show when a form field is valid or invalid.

The finished markup should look something like this:

```
<form>
  <h2>Enter your support query</h2>
  <ul>
    <li>
      <label for="uname">User name:</label>
      <input type="text" name="uname" id="uname" required minlength="5" maxlength="20">
    </li>
    <li>
      <label for="email">Email address:</label>
      <input type="email" name="email" id="email" required>
    </li>
    <li>
      <label for="phone">Phone number:</label>
      <input type="tel" name="phone" id="phone" required maxlength="15">
    </li>
    <li>
      <label for="comment">Comment:</label>
      <textarea name="comment" id="comment" required maxlength="200"></textarea>
    </li>
    <li>
      <button>Submit comment</button>
    </li>
  </ul>
</form>
```

## Task 2

Now we want you to take the same form you saw in the previous task (use your previous answer if you want to), and add some more specific pattern validation to the first three fields.

1. All of the user names in our application consist of a single letter, followed by a dot, followed by three or more letters or numbers. All letters should be lowercase. This will work — `pattern="[a-z]{1}.[a-z0-9]{3,}"`.
2. All of the email addresses for our users consist of one or more letters (lower or upper case) or numbers, followed by "@bigcorp.eu". This will work — `[a-zA-Z0-9]+@bigcorp\.eu`.
3. Remove the length validation from the phone number field if it is present, and set it so that it accepts 10 digits — either 10 digits in a row, or a pattern of three digits, three digits, then four digits, separated by either spaces, dashes, or dots. The following with work for this — `pattern="[0-9]{10}|[0-9]{3}[-. ][0-9]{3}[-. ][0-9]{4}"` — although bear in mind that it will work if the separators are not all the same (e.g. one dot and two dashes). This is OK for the purposes of this task — you'd be unlikely to get people entering numbers like this anyway, and it would be easy to sanitise the data on the server.

Try submitting your form — it should refuse to submit until the above constraints are followed, and give suitable error messages. To help, you might want to consider adding some simple CSS to show when a form field is valid or invalid.

The finished markup should look something like this:

```
<form>
  <h2>Enter your support query</h2>
  <ul>
    <li>
      <label for="uname">User name:</label>
      <input type="text" name="uname" id="uname" required
             pattern="[a-z]{1}.[a-z0-9]{3,}">
    </li>
    <li>
      <label for="email">Email address:</label>
      <input type="text" name="email" id="email" required
             pattern="[A-z0-9]+@bigcorp.eu">
    </li>
    <li>
      <label for="phone">Phone number:</label>
      <input type="text" name="phone" id="phone" required
             pattern="[0-9]{10}|[0-9]{3}[-. ][0-9]{3}[-. ][0-9]{4}">
    </li>
    <li>
      <label for="comment">Comment:</label>
      <textarea name="comment" id="comment" required>
      </textarea>
    </li>
    <li>
      <button>Submit comment</button>
    </li>
  </ul>
</form>
```

## Task 3

In our final task for this set, we are providing you with a similar example to what you saw in the accompanying article — a simple email address entry input. We would like you to use the constraint validation API, plus some form validation attributes, to program some custom error messages.

1. Make the input mandatory to fill in, and give it a minimum length of 10 characters.
2. Add an event listener that checks whether the inputted value is an email address, and whether it is long enough. If it doesn't look like an email address or is too short, provide the user with appropriate custom error messages.

The finished markup should look something like this:

```
<form>
  <label for="mail">I would like you to provide me with an e-mail address:</label>
  <input type="email" id="mail" name="mail" required minlength="10">
  <button>Submit</button>
</form>
```

And the JavaScript should look something like this:

```
const email = document.getElementById("mail");

email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I am expecting an e-mail address!");
  } else if(email.validity.tooShort) {
    email.setCustomValidity("Your e-mail address is too short!!");
  } else {
    email.setCustomValidity("");
  }
});
```


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Form validation: Task 2</title>

    <form>

Enter your support query

          User name:
          <input type="text" name="uname" id="uname" required>

          Email address:
          <input type="text" name="email" id="email" required>

          Phone number:
          <input type="text" name="phone" id="phone" required>

          Comment:
          <textarea name="comment" id="comment" required>
          </textarea>

          <button>Submit comment</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Form validation: Task 1</title>

    <form>

Enter your support query

          User name:
          <input type="text" name="uname" id="uname">

          Email address:
          <input type="text" name="email" id="email">

          Phone number:
          <input type="text" name="phone" id="phone">

          Comment:
          <textarea name="comment" id="comment">
          </textarea>

          <button>Submit comment</button>

    </form>


text:
# HTML5 controls marking guide

The aim of the tasks is to demonstrate an understanding of the features covered in the [The HTML5 input types](https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types) lesson in Learn Web Development on MDN.

## Task 1

First let's explore some of the new HTML5 input types.

Create appropriate inputs for a user to update their details for:

1. Email
2. Website
3. Phone number
4. Favourite color

The appropriate input types to use here are `email`, `url`, `tel`, and `color`.

The finished markup should look something like this:

```
<form>
  <h2>Edit your preferences</h2>
  <ul>
    <li>
      <label for="e-mail">Email</label>
      <input type="email" id="e-mail" name="e-mail">
    </li>
    <li>
      <label for="website">Website</label>
      <input type="url" id="website" name="website">
    </li>
    <li>
      <label for="phone">Phone number</label>
      <input type="tel" id="phone" name="phone">
    </li>
    <li>
      <label for="fave-color">Favorite color</label>
      <input type="color" id="fave-color" name="fave-color">
    </li>
    <li>
      <button>Update preferences</button>
    </li>
  </ul>
</form>
```

## Task 2

Next, we want you to implement a slider control to allow the user to choose a maximum number of people to invite to their party.

1. Implement a basic slider control to go along with the provided label. This requires `<input type="range">`.
2. Give it a minimum value of 1, maximum value of 30, and initial value of 10. To do this, you should use the `min`, `max`, and `value` attributes.
3. Create a corresponding output element to put the current value of the slider into. Give it a class of `invite-output`, and semantically associate it with the input. If you do this correctly, the JavaScript included on the page will automatically update the output value when the slider is moved. To achieve this, you need to use an `<output>` element, give it a `class` attribute with value `invite-output`, and give it a `for` attribute with value `max-invite`.

The finished markup should look something like this:

```
<form>
  <ul>
    <li>
      <label for="max-invite">Select maximum number of invitations</label>
      <input type="range" id="max-invite" name="max-invite" min="1" max="30" value="10">
      <output class="invite-output" for="max-invite"></output>
    </li>
    <li>
      <button>Submit</button>
    </li>
  </ul>
</form>
```


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>HTML5 controls: Task 2</title>

    <form>

          Select maximum number of invitations

          <button>Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>HTML5 controls: Task 1</title>

    <form>

Edit your preferences

          Email

          Website

          Phone number

          Favorite color

          <button>Update preferences</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>HTML5 controls: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
<form>

      Select maximum number of invitations

      <button>Submit</button>

</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>HTML5 controls: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-html" style="height: 220px;">
<form>

Edit your preferences

      Email

      Website

      Phone number

      Favorite color

      <button>Update preferences</button>

</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />