===== Supplemental Material for HTML and CSS =====

The resources below supplement the material covered in class. They are intended for independent study, which must be completed as homework.

==== Multiple-choice test ====

The HTML-CSS multiple-choice test is expected to take place during the practical class in **19 October 2026**, at the usual time and location. **A separate Neptun message will confirm the details.**

Students who fail the test will have the opportunity to **retake it in 30 November 2026** (this will also be confirmed in a separate Neptun message).

The test will cover the material covered in class; and the independent study material listed below.

A sample test is available on the [[https://elearning.uni-miskolc.hu/zart/course/view.php?id=11081|University E-Learning Portal]].

==== HTML ====

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax|Basic HTML syntax]]: Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata|What's in the head? Web page metadata]]: The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains metadata information such as the page <title>, links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs|Headings and paragraphs]]: One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends. This article explains how HTML can be used to provide fundamental page structure by defining headings and paragraphs.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance|Emphasis and importance]]: The previous article looked at why semantics are important in HTML, and focused on headings and paragraphs. This article continues on the theme of semantics, looking at HTML elements that apply emphasis and importance to text (parallel to italics and bold text in print media).

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists|Lists]]: Lists are everywhere in life—from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! It may not surprise you that HTML has a convenient set of elements that allows us to define different types of list. On the web, we have three types of lists: unordered, ordered, and description lists. This lesson shows you how to use the different types.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links|Creating links]]: Links (also known as hyperlinks) are really important — they are what makes the Web a web. This article shows the syntax required to make a link, and discusses link best practices.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images|HTML images]]: In the beginning, the web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. In this article we'll look at how to use the <img> element in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to CSS background images.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics|HTML table basics]]: This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.

==== CSS ====

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS|What is CSS?]]: CSS allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, what the basic syntax looks like, and how your browser applies CSS to HTML to style it.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started|Getting started with CSS]]: In this article, we will take a simple HTML document and apply CSS to it, learning some practical details of the language along the way. We will also review the CSS syntax features you've not looked at yet.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page|Challenge: Styling a biography page]]: In this challenge you will style a simple biography page, testing you on some of the skills you learned in the last couple of lessons including writing selectors, coloring backgrounds, and text styling. We will also invite you to look up some basic CSS features that we haven't covered, to test your research skills.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors|Basic CSS selectors]]: In this article we'll recap some selector fundamentals, including the basic type, class, and ID selectors.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors|Attribute selectors]]: As you know from your study of HTML, elements can have attributes that give further detail about the element being marked up. In CSS you can use attribute selectors to target elements with certain attributes. This lesson will show you how to use these very useful selectors.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model|The box model]]: Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS, or to align items with other items. In this lesson, we will take a look at the CSS Box model. You'll get an understanding of how it works and the terminology that relates to it.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts|Handling conflicts]]: The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts between style declarations are resolved.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing|Sizing items in CSS]]: Understanding how big the different features in your design will be is important. In this lesson we will summarize the various ways elements get a size via CSS and define a few terms about sizing that will help you in the future.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders|Backgrounds and borders]]: In this lesson, we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Size_decorate_content_panel|Challenge: Sizing and decorating a content panel]]: In this challenge you are provided with a lightly styled page structure that renders a content panel, with a heading at the top and a button bar at the bottom. We want you to follow the instructions to size and decorate it, producing an interesting layout as a result. Along the way, we'll test your knowledge of CSS values and units, sizing, and backgrounds and borders.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals|Fundamental text and font styling]]: In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction|Introduction to CSS layout]]: This lesson recaps some of the CSS layout features we've already touched upon in previous modules, such as different display values, as well as introducing some of the concepts we'll be covering throughout this module. It also covers the concept of normal flow in depth.

[[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox|Flexbox]]: Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.

==== Licensing and attribution ====

This study guide contains adapted descriptions of articles from [[https://developer.mozilla.org/en-US/|MDN Web Docs]] by Mozilla Contributors. MDN documentation is licensed under the [[https://creativecommons.org/licenses/by-sa/2.5/|Creative Commons Attribution-ShareAlike 2.5 license]] or any later version, unless otherwise indicated. For further information, see [[https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license|MDN's attribution and copyright licensing guidelines]].