feat(html): add + wrote page

Author: amyheather

_quarto.yml

@@ -30,6 +30,7 @@ website:
           - pages/markdown.qmd
           - pages/quarto_features.qmd
           - pages/media.qmd
+          - pages/inline_html.qmd
           - pages/customising.qmd
           - pages/code.qmd
       - pages/examples.qmd

pages/inline_html.qmd

@@ -0,0 +1,112 @@
+---
+title: Inline HTML
+---
+
+Web pages are written in **HTML** (HyperText Markup Language), which uses tags like `<p>`, `<a>`, and `<strong>` to describe how things should look.
+
+In a Markdown document, you can sometimes mix in small pieces of HTML.  
+This is called **inline HTML**: you add a tiny HTML tag inside a sentence, and Quarto keeps it when it turns your page into HTML.
+
+**Caveat:** raw HTML is only kept when the output format supports it (for example, HTML pages). Some tags may be dropped or ignored when rendering to PDF or Word.
+
+## Line break
+
+You can insert a line break using `<br>`.
+
+```markdown
+First part of the sentence.<br>Second part on a new line.
+```
+
+::: {.pale-blue}
+
+**Task:** In `html.qmd`:
+
+* [ ] Write a short sentence, then use `<br>` to put a second short sentence on the next line with a line break between them.
+
+:::
+
+## Small text
+
+You can make a small "fine print" style note using the `<small>` tag.
+
+```markdown
+This is <small>small print</small>.
+```
+
+This is <small>small print</small>.
+
+::: {.pale-blue}
+
+**Task:** In `html.qmd`:
+
+* [ ] Add a normal sentence and then make one short phrase look like small print using `<small> ... </small>`.
+
+:::
+
+## Keyboard keys
+
+The `<kbd>` tag is often used to show keys that the user should press on the keyboard.
+
+```markdown
+Press <kbd>Ctrl</kbd> + <kbd>C</kbd>.
+```
+
+Press <kbd>Ctrl</kbd> + <kbd>C</kbd>.
+
+::: {.pale-blue}
+
+**Task:** In `html.qmd`:
+
+* [ ] Write one instruction that shows a keyboard shortcut using `<kbd>` (for example, `Ctrl + S` to save).
+
+:::
+
+## Custom links
+
+If you want more control over a link (for example, to open it in a new tab), you can write it in HTML instead of plain Markdown.
+
+In the HTML link below:
+
+* `href` is the web address you are linking to.
+* The text between `<a>` and `</a>` is what the reader clicks on.
+* `target="_blank"` tells the browser to open the link in a new tab.
+* `rel="noopener"` is a small security and performance setting that stops the new page from being able to control the original tab.
+
+```markdown
+<a href="https://www.exeter.ac.uk" target="_blank" rel="noopener">
+  Visit the University of Exeter website
+</a>
+```
+
+<a href="https://www.exeter.ac.uk" target="_blank" rel="noopener">
+  Visit the University of Exeter website
+</a>
+
+::: {.pale-blue}
+
+**Task:** In `html.qmd`:
+
+* [ ] Create a link that opens in a new tab by default.
+
+:::
+
+## Abbreviations
+
+You can explain abbreviations by using the `<abbr>` tag with a `title` attribute.
+When someone hovers over it in a browser, they see the full phrase.
+
+```markdown
+<abbr title="Randomised Controlled Trial">RCT</abbr>
+```
+
+<abbr title="Randomised Controlled Trial">RCT</abbr>
+
+Alternatively, you can use footnotes @sec-footnotes to explain the term.
+
+::: {.pale-blue}
+
+**Task:** In `html.qmd`:
+
+* [ ] Pick one abbreviation you use in your own work (for example, "NHS" or "A&E") and write it with an `<abbr>` tag and a helpful title.
+
+:::