imrinzzzz

Posted on Sep 3, 2018 • Updated on Sep 7, 2018

HTML/CSS/JS (part 1)

#webprogramming #html #muict

Before we start, I would like to introduce some useful resources for web design:

Design the layout
Color Scheme
or is you're lazy to code: website builder tools

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¹ 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. click the picture for the source site <3

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..

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

<b>Boldfaced text</b><br>
<i>Italicized text</i><br>
<u>Underlined text</u><br>
<del>Strikethrough text</del>

results:
Boldfaced text
Italicized text
Underlined text

~~Strikethrough text~~

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.

<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:

<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.

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

<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.

<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.

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 < or <

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

<!-- This is a comment -->

Horizontal Rules

The <hr> tag insers a horizontal rule. E.g.

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

This is some text.

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.

<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>

for other basic HTML tags, click here!

WYSIWYG stands for What You See Is What You Get. ↩

Top comments (4)

tux0r • Sep 3 '18

Nothing in HTML is even remotely related to programming.

imrinzzzz • Sep 3 '18

couldn't agree more haha, but that's the course name so I wrote that down. It's gonna get to the javascript part, so maybe it's ok to leave it as this? ;) pretty please~