HTML/CSS/JS (part 1)
Tags: webprogramming, html, muict
Published: 2018-09-03 15:28:33

---
title: HTML/CSS/JS (part 1)
published: true
description: discussing important components of HTML documents, and learn the basic tags
tags: web programming, HTML, MUICT
---
Before we start, I would like to introduce some useful resources for web design:
- <a href="https://designschool.canva.com/">Design the layout</a>
- <a href="http://colorschemedesigner.com/">Color Scheme</a>
- or is you're lazy to code: <a href="http://www.creativebloq.com/web-design/best-website-builder-8133804">website builder tools</a>

And done, now let's get started with our topic today; the basic HTML!
## Introduction to HTML
HTML, or HyperText Markup Language, is a markup language (obviously) for creating _web pages_. Documents written in HTML format are in plain text format, and can also be called _HTML documents_. They contain information content with **markup tags** to instruct a browser **how to display** the content in web pages.

You can use any text editor to write an HTML document, but the file should have either _.html_ or _.htm_ extension. 

examples of WYSIWYG[^1] HTML editor:
>  \- Dreamweaver
>  \- FrontPage
>  \- Bracket
>

examples of other popular (but not WYSIWYG) text editor:
> \- Notepad
> \- Notepad++
> \- Sublime
> \- Visual Studio Code

## Basic HTML Tags' rules

- HTML tags are enclosed in angle brackets; <>. Tags usually come in pairs (an opening tag, and a closing tag) which is the same tag-name preceded by a slash. E.g.
`<tag-name>Content inside</tag-name>`
- not all tags need closing, though. For example, \<p> paragraph: implies closing of previous paragraph tag (although you can add a closing tag as well). \<br> line break: marks a location, not a region.
- HTML tags are **not** case sensitive. \<b> means the same as \<B>
- Unknown tags are _ignored_.

#### Nesting
- Opening and closing tags define regions affected by the tags. These regions can be _nested_, but _not overlapped_.
<a href="https://clearlydecoded.com/anatomy-of-html-tag" alt="tags">![tags](https://thepracticaldev.s3.amazonaws.com/i/ccp2ywlxb49q85qsv3of.png)</a>
click the picture for the source site <3
<a href="https://thepracticaldev.s3.amazonaws.com/i/ccp2ywlxb49q85qsv3of.png">![tagging](https://thepracticaldev.s3.amazonaws.com/i/909fv196fn32zq73duqd.png)</a>

#### Heading Tags

- Headings are defined with \<h1> to \<h6> tags. While \<h1> defines the largest heading, and \<h6> as the smallest.
- Browsers automatically add an extra blank line before and after a heading.

#### Paragraph Tags

- As I've mentioned above, \<p> defines as new paragraphs.
- Browsers automatically add an extra blank line before and after a paragraph.

#### Line Breaks Tags

- A browser will go to the next line only when it reaches the end of the current line. So typing..
```text
Hello, 
I want
a new line.
```
in your text editor will display only one line of text in the browser..

- The \<br> tag forces a line break wherever you place it.

#### Text Style Tags

```html
<b>Boldfaced text</b><br>
<i>Italicized text</i><br>
<u>Underlined text</u><br>
<del>Strikethrough text</del>
```
results:
<b>Boldfaced text</b>
<i>Italicized text</i>
<u>Underlined text</u>
<del>Strikethrough text</del>

#### Tag Attributes

- Attributes provide additional information to your page; e.g. 'bgcolor' attribute in \<body> tag is used to change the background colour of the page.
```html
<body bgcolor="red">
```
- Attributes usually come in as **name="value"**.

#### Hypertext Links

- Or Hyperlinks in an HTML connect one document to another.
- Hyperlinks allow you to navigate other HTML documents on your own or others' servers.
- To create a hyperlink, you enclose the linked text with opening and closing **anchor** tags \<a>\</a>.
- Within the start anchor tag \<a>, set **HREF** attribute to point to the URL of the target page. The syntax of creating an achor:
```html
<a href="url">Text to be displayed</a>
or
<a href="url">Image to be displayed</a>
```
- There are to types of paths that we can link to:
    - Absolute path: used when linking to another domain's web pages.
    - Relative path: used when linking to web pages within your domain.
 
```html
Absolute path:
<a href="http://www.google.com/intl/en/about.html">About
Google</a>

Relative path:
<a href="filename.html">Text/Image to be displayed</a>
```

#### Text Alignment
```html
<body>
    <p align="left">Left alignment text</p>
    <p align="center">Center alignment text</p>
    <p align="right">Right alignment text</p>
</body>
```

#### Graphic Elements

- There are 3 types of bitmapped or painted image types that all browsers recognize by default:
    - GIF (Graphic Interchange Format)
    - JPEG (Joint Photographic Experts Group)
    - PNG (Protable Network Graphics)
- The image tag \<img src="URL"> is used to add an image to a web page. The attribute **src** specifies the URL or path of the image file.
- We can add **width** and **height** attributes to resize the image.
- And **align** attribute to set the image alignment.
```html
<img src="http://www.mahidol.ac.th/images/logo.gif" width="45" height="45" align="right">
```

#### List in HTML
- There are 2 types of lists; ordered lists and unordered lists. E.g.
```html
Ordered list:
<ol>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
<ol>

unordered list:
<ul>
    <li>Hey</li>
    <li>There</li>
</ul>

<ul type="circle">
    <li>What's</li>
    <li>up!</li>
</ul>

<ul type="square">
    <li>Yo</li>
    <li>baby~</li>
</ul>
```

#### Text Attributes

- If you want to manipulate fonts and their sizes in HTML, you can use \<font> tag, with **size** and **face** attributes.
- The size attribute has values vary from 1 to 7 (smallest->largest).
- The default font size is 3.
- The **face** attribute contains the actual name of the typeface you wish to use.
- You can change colour using **color** attribute. Either you type `<font color="red">` or you can type colour in RGB hexadecimal value codes `<font color="#FF0000">`

#### Character Entities
- Some characters have a special meaning in HTML, e.g. the < sign that defines the start of an HTML tag. If we want the browser to _actually_ display them, we ust use character entities.
- Character entity has 3 parts
    1. An ampersand &
    2. An entity name or a `# + entity number`
    3. A semicolon ;

e.g. < can be written as `&lt;` or `&#60;`
- Entitites are **case sensitive**.

#### Comments in HTML
- It is used to insert a comment in the HTML source code, and will be ignored by the browser

```html
<!-- This is a comment -->
```
#### Horizontal Rules
- The \<hr> tag insers a horizontal rule. E.g.

```html
This is some text.
<hr>
This is another text.
```
This is some text.
<hr>
This is another text.

#### Table Tags
- Tables are defined with the \<table> ... \</table> tags.
- A table is divided into rows, and each row is divided into columns (or cells).
- Rows are determined by \<tr>\</tr>, and columns by \<td>\</td>.
- Data has to ONLY be put between \<td>\</td> tags.
- Heading Cells are defined with the \<th>\</th> tags, and they act simarly as \<td>\</td> tags, except the text is in bold.
- There is also an **align** attribute to set the alignment of the content.
- We use **colspan** and **rowspan** to span across more than one column and row respectively.
- You can also apply different colours to the table using **bgcolor** attribute.

```html
<table border="1">
    <tr>
        <th colspan="3" bgcolor="blue">Student Grade Report</th>
    </tr>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td>478812</td>
        <td>John Smith</td>
        <td align="center">A</td>
    </tr>
    <tr>
        <td>479821</td>
        <td>Mary Jane</td>
        <td align="right">B</td>
    </tr>
</table>
```
![](https://thepracticaldev.s3.amazonaws.com/i/je00498uh1dopbu8kct3.png)


for other basic HTML tags, <a href="https://www.w3schools.com/tags/ref_byfunc.asp">click here</a>!

[^1]: WYSIWYG stands for What You See Is What You Get.