Introduction

• A website is simply just made up of a bunch of text files.
• HTML describes the content, CSS shows how the content looks like, and JavaScript interacts with the content.
• HTML is a markup language and CSS is a design language. JavaScript is the only programming language.
• The browser will always try to show content to the user. As such, we may not know if we made any errors.
• All HTML content is displayed through tags.
• Different kinds of tags have different purpose of usage.

<h1>Hello this is my website!</h1>
<h2>Hello this is my website!</h1>
<h3>Hello this is my website!</h1>
<h4>Hello this is my website!</h1>
<h5>Hello this is my website!</h1>
<h6>Hello this is my website!</h1>

Hello this is my website!

Hello this is my website!

Hello this is my website!

Hello this is my website!

Hello this is my website!

Hello this is my website!

List

• Two kinds of list: ordered(ol) and unordered(ul).
• Ordered list has a specific order while an unordered list does not have an order.
• Additionally, we need a list item(li) for each specific list.

// unordered list
<ul>
  <li>beer</li>
  <li>Kimchi</li>
  <li>meat</li>
  <li>milk</li>
</ul>

• beer
• Kimchi
• meat
• milk

// ordered list
<ol>
  <li>beer</li>
  <li>Kimchi</li>
  <li>meat</li>
  <li>milk</li>
</ol>

1. beer
2. Kimchi
3. meat
4. milk

Attributes

• Some tags, such as anchor elements, require attributes to work.
• An anchor element requires a href attribute which links a url.

<a href="http://google.com" target="blank">Go to google.com</a>

Go to google.com

Image

• An image tag also requires a source attribute to display images.
• For image elements, there is no closing tag (self-closing tag).
• Usually if a tag does not reqire a content, it has a self-closing tag.
• Image sources can either come from the web or a separate image file.
• We need to make sure we specify the exact address of the image for it to be displayed.

<img src="" />