+ +
🎨 2.7. Class/ID naming conventions
+ + Make sure your Classes/IDs have meaningful names that describes what styles it has or what it's used for. It will make your code more accessible to your group mate. Also in the event of forgetting what a Class/ID is for, the name will remind you. + +📜 1. HTML Style Guide
+ + The assignments in COMP6080 all have a portion of their marks allocated to code style. As such, it is **highly** recommended for students to have a read through this style guide. + This page outlines the conventions we will be following throughout the course. It incorporates guidelines derived from standard style guides plus feedback and inquiries accumulated from previous cohorts. + We follow the W3 schools style guide for HTML as a base. Here are a few notable guidelines that are often asked about or forgotten. + + +-
+
- 1.1. Casing & Quotation +
- 1.2. Indentation +
- 1.3. Repetition +
- 1.4. General HTML structure +
- 1.5. Use Appropriate Semantic Tags +
- 1.6. The Style Attribute +
- 1.7. The Script Tag +
- 1.8. Image Attributes +
- 1.9. img tag VS. background-image +
- 1.10. Unique IDs +
+ +
📜 1.1. Casing & Quotation
+ Unless specified otherwise, all tags and its attributes should be written in lowercase. The attribute values should always be in quotation marks, as well as no spaces between the equal sign and the value. + ++ +
📜 1.2. Indentation
+ As long as you are **consistent**, you can use 2 or 4 space indentation. However, as there will be many levels of indentation, you should indent with **2 spaces** in HTML as opposed to the usual 4 spaces. + Each HTML tag should be indented **with respect to its parent tag**, with the opening and closing tag being on the same level of indentation (unless it is on the same line). + +Hello +
` + ]} + goods={[ +`
+
`
+ ]}
+ />
+
+ Hello
+| Student | +ID | +
|---|---|
| John Doe | +z5555555 | +
| Gordon Wang | +z5309206 | +
+ +
📜 1.3. Repetition
+ + Some repetitions are okay when writing HTML for the first assignment. For example, this is okay: + +
+{`
+ This is the first card
+
+
+ This is the second card
+
+
+ This is the third card
+`}
+
+
+ In future assignments in the course when you are introduced to better methodologies, you should not repeat your code (See the [JavaScript Modularisation](#js-modularisation) and [ReactJS Modularisation](#jsx-modularisation) section).
+
+ + +
📜 1.4. General HTML Structure
+ + All HTML files should not be missing the following starting code +
+{`
+
+
+ This is so the file is better structured (body for the website content, head for meta data etc.)
+
+ Hint: On VSCode, you should be able to type in ! and hit enter in .html files to quickly generate the above boilerplate tags.
+
+ + +
📜 1.5. Use Appropriate Semantic Tags
+ When deciding on which tag to use to contain your page elements, you should use the appropriate tag whenever you can. Not only will this provide clearer structural meaning to your page, but it will make your file less complicated and give screen readers an easier time. + Reservediv tags for grouping related page elements or for styling purposes.
+
+ This is a paragraph
`
+ ]}
+ goods={[
+`Welcome to my page!
+This is a paragraph
` + ]} + /> + +Shopping List:
+
+
+`
+ ]}
+ goods={[
+`• Milk
+ • Apple
+ • Eggs
+
+
`
+ ]}
+ />
+
+ Shopping List:
+-
+
- Milk +
- Apple +
- Eggs +
+ +
📜 1.6. The Style Attribute
+ You should always try and avoid inline/internal styling and keep all CSS styles in a separate.css file - **stick to external styling**. See below under the [CSS section](#css-external-spreadsheet) for reasons why.
+
+ + +
📜 1.7. The Script Tag
+ + Likewise to the previous guideline, you should not be writing internal JavaScript code - keep them separate. This is to keep your code modularised and prevent your html file from being extraordinarily large. + +Initial text
+ + +` + ]} + goods={[ +` +const changeText = () => { + const paragraph = document.getElementById('text'); + paragraph.textContent = 'Updated text'; +} + +document.getElementById('main-btn').addEventListener('click', changeText); + + + +Initial text
+` + ]} + medium + /> + ++ +
📜 1.8. Image Attributes
+ + All images should have alt attributes for accessibility/screen readers, search engine optimization and in case the image does not load properly. + ++ +
📜 1.9. img tag VS. background-image
+ + Do not mix up theimg tag and background-image.
+
+
+{`
+
`}
+
+
+
+{`.img {
+ /* Using background-image css property */
+ background-image: url('https://picsum.photos/200');
+}`}
+
+
+ While you can interchange ![]()
background-image, there's a clear distinction between the two.
+
+ background-image as the name implies is for setting an image in the **background** (i.e., there could be text or other elements obscuring the image). These are normally reserved for decoration and making the website visually appealing.
+
+ On the other hand, a ![]()
-
+
- Accessibility - Screen readers can not detect background images and background images do not have alt text. +
- Search Engine Optimisation - Search Engines use
alttags to detect images and display it in searches.
+ - Interactions - Users can not interact with background images (i.e., copy or download the image). +
`,
+`
+
`
+ ]}
+ medium
+ />
+
+ 
`,
+`
+
`
+ ]}
+ medium
+ />
+
+ + +