HTML Structure code along week 1

NM2207 Week 1 Content

Section 1

This is a Header, Headers are shown as larger and bolded

Headers are defined with the h1 to h6 tags., there is no such h7 tag

This is a subheader h2, smaller than h1 but still bolded

I can write paragraphs between each header

This is a subheader h3, smaller than h2 but still bolded

The 'h' tags are used to define headers, with h1 being the largest and h6 being the smallest.

This is a subheader h4, smaller than h3 but still bolded

Headers help to structure the webpage and organize content. The 'h' number indicates the size of the header.

This is a subheader h5, smaller than h4 but still bold

Using appropriate header levels is important for accessibility and SEO(search engine optimization): Search engines use header tags to understand the structure of a webpage.

This is a subheader h6, smaller than h5 but still bold

Press here for cute animals

This is a paragraph. It can be any length.

This is another paragraph. Paragraphs are separated by a blank line in the code.

This is a third paragraph. Paragraphs are block-level elements, meaning they start on a new line and take up the full width available.

We now look at semantic tags. For grouping content,
There is div, span, header, footer, section, article, nav, aside, main, and details.
Div and span are generic containers for grouping content. Div is a block-level element, while span is an inline element.
Header is used for introductory content or navigational links. Footer is used for footer content.
Section is used for grouping related content. Article is used for self-contained content.
Nav is used for navigation links. Aside is used for content related to the main content.
Main is used for the main content of the document. Details is used for additional details that can be toggled open or closed.
Details can be used with the summary tag to create a collapsible section.
Example:

Lists

  1. This is an ordered list item 1
  2. This is an ordered list item 2
  3. This is an ordered list item 3
    1. This is a nested ordered list item 1
    2. This is a nested ordered list item 2
  4. I can have as many items as I want in a list

For ordered lists, we can use attributes like reversed, start, and type.
The reversed attribute makes the list count downwards.
The start attribute specifies the starting number of the list. e.g start list from 5
The type attribute specifies the type of marker to use in the list. e.g type="A" for uppercase letters, type="a" for lowercase letters, type="I" for uppercase Roman numerals, and type="i" for lowercase Roman numerals.

Text Formatting Tags

If I want to bold text, I can use the strong tag.

If I want to italicize text, I can use the em tag.

For bolded text I can also use the b tag. (see the difference between strong tag and b tag)

The difference between strong tag and b tag is that strong is used for semantic importance, while b is used for visual emphasis.

For italicized text I can also use the i tag. (see the difference between em tag and i tag)

The difference between em tag and i tag is that em is used for semantic emphasis, while i is used for visual emphasis.

To perform a line break, I can use the
br tag.

This is line 1.
This is line 2 after a line break.

Note the difference between
br tag and a paragraph break. The br tag creates a line break within a paragraph, while a paragraph break creates a new paragraph.

To make the code more readable, I can create white space between each line where I place a line break.

Cute Animals Section

Cute Cat Cute Duck

This is an example of an image tag. It uses the img src attribute to specify the image source and the alt attribute for alternative text which describes the image in case the image fails to load.

Cute Dog Cute Cat

This is another example of an image tag. The img src attribute places the images next to each other. So the images are not block elements.
The width and height attributes are used to specify the dimensions of the image in pixels.

Hyperlinks are created using the anchor a tag. The href attribute specifies the URL of the page the link goes to.

The anchor tag can also be used to link to a specific section within the same page. Use the id attribute in the element you want to link to, and then use the # symbol followed by the id in the href attribute of the anchor tag.

An example is link to section 1 You can see how it is coded inside the VSC document

We can also link to external websites using the href attribute.
Example: NM2207 Canvas Website

We can also link to another page e.g Go to page 2

We can use an absolute path to link to another page e.g Go to page 2
An absolute path specifies the full URL or file path to the resource, starting from the root directory.
Note that using absolute paths can make your links less portable, as they may not work if the file structure changes or if the files are moved to a different location.