Zabdiel Notes: Pengenalan html

WEB SITE AUTHORING

In this lessons you will be learning how to create a structured web site with stylesheets, tables, and hyperlinks.

There are other ways to create web pages using special web-authoring software such as Adobe Dreamweaver or Microsoft Frontpage.

In this lessons you will only be using a text editor to create the HTML code and then use web browser software to view the web page you have produced.

HTML

HTML is short for Hyper Text Markup Language.

HTML is the special code that is used for making web pages.

HTML consists of special markers called tags that tell the computer what to do with the text, images or links that are entered. It just tells the computer how to display text and pictures on web pages.

Web Browser Software

Browser Software is responsible for requesting text and graphics on web pages stored on servers and then assembling them for display.

Web Browser will be used to view the web pages you create.

The purpose of a web browser (Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them

The browser does not display the HTML tags, but uses them to determine how to display the document

Editor Software

Editor software is used for creating and amending text.

However, for learning HTML we recommend a text editor like Notepad (Windows), Text Editor (Linux) or TextEdit (Mac).

In this lesson you will be using a text editor for the preparation of HTML web pages.

The steps involved in creating and viewing web pages created using HTML:

1. Load the text editor software.

2. Type in the HTML code.

3. Save the HTML file.

4. Load the browser software.

5. View the web page and see if there are any mistakes in the code

6. Go back to the HTML code using the editor software.

7. Edit the HTML code using the editor software.

8. Save the HTML file.

9. View the web page using the browser.

10. If there are any more corrections needed go to 6 step.

11. Save the final HTML code.

Setting up a relevant folder structure

Before you start work on this lessons, it is important that you create a folder structure to hold all the files you will be making in the activities.

When a web page is created, all the files used in the web-page should be stored in the same folder or sub-folder as the HTML file.

The structure of an HTML document

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

text text text text text text text text

</body>

</html>

The <!DOCTYPE html> is a declaration to help the browser to display a web page correctly.

The text between <html> and </html> describes an HTML document.

The text between <head> and </head> provides information about the document.

The text between <title> and </title> provides a title for the document

The text between <body> and </body> describes the visible page content

The text between <h1> and </h1> describes a heading 1

The text between <p> and </p> describes a paragraph

The <html> tag tells the computer that the document is starting and the </html> tells the computer that the document has ended.

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets

<tag name> content </tag name>

HTML tags normally come in pairs like <p> and </p>, The first tag in a pair is the start tag, the second tag is the end tag. The end tag is written like the start tag, but with a slash before the tag name.

Follow the 4 steps below to create your first web page with Text Editor

1. Open Text Editor

2. Write Some HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

3. Save the HTML Page

4. View HTML Page in Your Browser

HTML Headings

<h1>This is a heading 1</h1>

<h2>This is a heading 2</h2>

<h3>This is a heading 3</h3>

<h4>This is a heading 4</h4>

<h5>This is a heading 5</h5>

<h6>This is a heading 6</h6>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag :

Example :

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

HTML Horizontal Rules

The <hr> tag creates a horizontal line in an HTML page

Example:

<p>This is a paragraph.</p>

<hr>

<p>This is a paragraph.</p>

<hr>

<p>This is a paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

Example :

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

Example :

HTML Elements

HTML elements are written with a start tag, with an end tag, with the content in between :

<tagname>content</tagname>

The HTML element is everything from the start tag to the end tag :

start tag elelment content end tag

<p> My first HTML paragraph. </p>

<h1> My First Heading </h1>

Nested HTML Elements

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

Example:

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

HTML Example Explained

The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

The element content is another HTML element (the <body> element).

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

The element content is two other HTML elements (<h1> and <p>).

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

Don't Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

<html>

<body>

<p>This is a paragraph

</body>

</html>

HTML Formatting Elements

In the previous chapter, you learned about HTML styling, using the HTML style attribute.

HTML also defines special elements, for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

Bold text

Important text

Italic text

Emphasized text

Marked text

Small text

Deleted text

Inserted text

Subscripts

Superscripts

HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance.

HTML Italic and Emphasized Formatting

The HTML <i> element defines italic text, without any extra importance.

HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text.

HTML Deleted Formatting

The HTML <del> element defines deleted (removed) of text.

HTML Subscript Formatting

The HTML <sub> element defines subscripted text.

HTML Superscript Formatting

The HTML <sup> element defines superscripted text.