From e23fa5538787d1d313e2a80d15ec5f0c3947cea6 Mon Sep 17 00:00:00 2001 From: qadzek <84473512+qadzek@users.noreply.github.com> Date: Tue, 19 Mar 2024 11:48:28 +0100 Subject: [PATCH] Wrap code in `` tags (#711) This enhances the visual distinction between regular text and code. --- .../marking-guide.md | 50 +++++++++---------- .../marking-guide.md | 16 +++--- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/html/introduction-to-html/marking-up-a-letter-finished/marking-guide.md b/html/introduction-to-html/marking-up-a-letter-finished/marking-guide.md index 5c54ae074c..5140b995f8 100644 --- a/html/introduction-to-html/marking-up-a-letter-finished/marking-guide.md +++ b/html/introduction-to-html/marking-up-a-letter-finished/marking-guide.md @@ -9,72 +9,72 @@ The overall mark awarded is out of 45.5. Work out their final mark, and then div ## Block/structural semantics
-
You should structure the overall document with an appropriate structure including doctype, and <html>, <head> and <body> elements (5 marks)
+
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)
    • +
  • 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 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)
    • +
  • 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.
+
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.
+
"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>
+
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 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>
+
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>.
+
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. + 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>
    • +
  • 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
+
"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 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 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.
+
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 diff --git a/html/introduction-to-html/structuring-a-page-of-content-finished/marking-guide.md b/html/introduction-to-html/structuring-a-page-of-content-finished/marking-guide.md index 456cbea310..bf7ef3c0f7 100644 --- a/html/introduction-to-html/structuring-a-page-of-content-finished/marking-guide.md +++ b/html/introduction-to-html/structuring-a-page-of-content-finished/marking-guide.md @@ -10,23 +10,23 @@ The overall mark awarded is out of 30. Work out their final mark, and then divid
The header (4 marks.)
-
They need to wrap the <h1>, first <img> and whole of the <ul> in a <header> element.
+
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.
+
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.
+
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.
+
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.
+
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.
+
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">
+
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.