Code Crash Course

Last updated on 27 Nov 2022 by Cherina Yee

Hello World

Useful examples:

Header 1: <h1>Title</h1>, Header 2: <h2>Title</h2>, etc
Link: <a href="https://www.google.com" target="_blank">Link</a>
- href: Hyperlink to the site
- target: There are a few options but we use only two here, (1) “_blank”: Opens the linked document in a new tab, (2) “_self”: Opens the linked document in the current page (default)
Table: <table><tr><td>Col1</td><td>Col2</td></tr></table>
- tr: Table row, each table row starts with a <tr> and ends with a </tr> tag.
- td: Table data (columns), each table cell is defined by a <td> and a </td> tag.
Image: <img src="file.jpg" alt="Image example">
- src: Location of image
- alt: Alt text (will appear if the image does not appear, good practice to include)
Line break: <br>
Span: <span>Text</span> (use this when you want to style a small portion, eg. changing font size or colour of a part of a text while retaining the main style)

Notes:

These <> </> are called HTML tags
Content is written between the opening and closing tags <h1>Hello World</h1>
There can be multiple HTML tags within a HTML tag. An eg. is the table.
Not all HTML tags need an opening <> and corresponding closing bracket </>. Notable egs include <br> and <img>.

Useful examples (all these go into style=””):

text color: color: red; / color:#FF0000; / color:rgba(255,0,0,0.5); - a here refers to alpha which controls the opacity - 0.0 is fully transparent and 1.0 is fully opaque
background color: background-color:yellow; / background-color:#FFFF00; / background-color:rgba(255,255,0,1); - a here refers to alpha which controls the opacity - 0.0 is fully transparent and 1.0 is fully opaque
Font size: font-size: 1.3em; - the units I use here is em. By default, the text is 1em (usually 16px). em is used because it’s dynamic. Eg. when the screen is smaller, the text will scale accordingly instead of being fixed at a certain pixel value.
Centering horizontally: text-align: center;
Centering vertically: vertical-align: middle;
No underline for links: text-decoration: none; . Here you go: link
Round edges of images or text: border-radius: 100px; / border-radius: 50%;
Add border: border: 1px solid green;
- 1st value: px value is the width of the border
- 2nd value: solid is the line of the border (can be dashed - dotted line etc)
- 3rd value: colour of border

Inline - by using the <style> attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
- In our case, we are using inline. External is out as we cannot link to another file, internal is possible but it somehow doesn’t work for all HTML tags in Isomer.
- This is how HTML with inline CSS looks like: <h1 style="color:red;">Title</h1>. The style appears inside the opening tag <>