Chapter 2 Introduction to HTML

Learning Outcomes Describe Hypertext Markup Language (HTML). Introduce HTML syntax. Recognize basic structure of HTML: Head, Title and Body. Explain basic text formatting, headings, line breaks, paragraphs and lists.

Hypertext Markup Language (HTML) A markup language. Not case-sensitive. (recommended in small case) An organization called the World Wide Web Consortium (W3C) was created to develop common standard, maintain compatibility and promote WWW.

HTML syntax All HTML commands or keyword (tag) must be enclosed in angle brackets ( ) Most HTML tags come in pairs – starting tag and ending tag. E.g. Does not recognize line breaks or paragraph breaks or more than one blank space. HTML tags may have attributes such as width, height and color that affect the appearance of the content.

… continued HTML files is actually a text file. File must be saved as.htm or.html Make sure all file names are in small-case and in one word (no spacing in file name). Browser will open the file as web page only if the first and last tag are... tags. You can create HTML file using any text editor such as notepad. (do not use Microsoft Word)

Basic structure My first page Insert content here … Hmm… there is something missing..

… continued and HTML document is divided into two; head and body. section contains all of the document’s header information. tags is placed in the head section which define the title of the document. Title can be seen at the top of the browser’s title bar and also appears in the history list/bookmark.

… continued comes after the structure. Make sure you close with before you start. Contents you want to display in the browser must be inserted between the … tags This includes text, graphics, links, etc.

Basic structure My first page Insert content here …

Comment tag If you wish to leave notes in a HTML document but do not want them to appear when you open a browser window, you would need to use the COMMENT Tag. Example:

Heading tags … Heading structures are the most commonly used to set apart documents or section titles. There are 6 levels of headings From Heading 1( ) through Heading 6 ( )

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

A heading always begins at the margin of a line and always forces a line break at the end of the heading. You cannot have two heading levels on the same line. You should not highlight the text in the middle of a paragraph by marking it as a heading. It would produce unwanted effects. … continued

Example (Heading) VISION To be a leader in offering quality diploma programmes to the public.

Output

If you wish to end a line after a certain word you can invoke the line break tag. Otherwise, the browser will display as many words as it can in one line, then continue the remaining words in the next line. Denoted by No corresponding Tag Forces a line break wherever you place it in the content. (add multiple to get more empty lines) Line Breaks

Example (no linebreak) The Centre for Diploma Programme (CDP) is an academic centre which is located at the second floor, Block B, Melaka Campus. It offers diploma programmes and collaborates with local colleges and international institutions of higher learning on academic matters.

Output

Example (with linebreak) The Centre for Diploma Programme (CDP) is an academic centre which is located at the second floor, Block B, Melaka Campus. It offers diploma Programmes and collaborates with local colleges and international institutions of higher learning on academic matters.

Output

Paragraph break is similar to line break but it will add one empty line. The beginning of a paragraph is denoted by The ending tag is optional. However, if you put multiple you will not get extra lines. Paragraph break

Example (with paragraph break) The Centre for Diploma Programme (CDP) is an academic centre which is located at the second floor, Block B, Melaka Campus. It offers diploma programmes and collaborates with Local colleges and international institutions of Higher learning on academic matters.

Output

Blockquotes are handy for those long pieces of text, which are quoted material and therefore need to be set apart and indented. Blockquotes are set up as follows content Blockquotes

Example (with blockquote) Diploma in Business Information Technology (DBIS) Pass SPM or equivalent with at least 4Cs or Pass STPM or equivalent with at least 2 Principals.

Output

Simple in concept, powerful in execution Three main types unordered lists ordered lists definition lists Lists

Unordered lists are basically bullet lists List of items each one preceded by a “bullet” Begins and ends with and Each item in the list is denoted by with an optional closing tag Unordered lists

Monday Tuesday Wednesday Thursday Friday Example (Unordered lists) Monday Tuesday Wednesday Thursday Friday

Example 2 (Unordered lists) MISSION To uphold the mission of Multimedia University. To produce professionals, flexible, well-trained and competent individual to meet the demands of the nation's industry. To extend educational opportunities to a wider cross-section of Malaysian

Output

Also called as Numbered list Denoted by and When ordered list is displayed in Web Browser, it uses an automatically generated sequence as if item markers Ordered lists

Monday Tuesday Wednesday Thursday Friday Example (Ordered lists) 1. Monday 2. Tuesday 3. Wednesday 4. Thursday 5. Friday

Almost anything can be put into a list item line breaks, entire paragraphs, images, links and even other lists (nested lists). Unordered lists can be nested in ordered lists and vice-versa Nested lists

Monday Tuesday Wednesday 6am - 9am 10am-12pm Thursday Friday Nested lists 1. Monday 2. Tuesday 3. Wednesday 6am – 9am 10am – 12pm 4. Thursday 5. Friday

Begins and ends with and Definition lists are not based on list items like ordered and unordered lists (unmarked list) Definition lists are based on term-definition pairs denoted by and stands for Definition-List Term stands for Definition-List Definition Definition list

Do a deer, a female deer Re a drop of golden sun Mi a name, I call myself Example (Definition lists)

Output

Basic text formatting You can apply styles such as bold, italics or underline to your text. (underline is not recommended so that user won’t confuse it with hyperlink. To create a bold text, you can use a pair of … or … To create an italicize text, put it between … or …

Basic Formatting Look I am bold and strong I have been italicized and emphasized Example

Output

Horizontal rules This tag creates a horizontal rule across the document Can be achieved using No corresponding Not allowed within headings Can act as a section divider

Example (Horizontal rules) VISION To be a leader in offering quality diploma programmes to the public.

Output

Special characters Some characters such and = have special meaning in HTML. There are also special character that can not be type such as © and ™ or even a blank space. There is a special way to insert these characters in HTML document. We can use either number entities or named entities.

Special characters Commonly-Used Special Characters NameSymbolHTML Equivalent ampersand& & cent sign¢ ¢ copyright symbol© © or © degree sign° ° greater than> > less than< < Quote“ " non-breaking space registered trademark® ® trademark™ ™

Example Basic Formatting <br> for line break Multimedia University©

Output

Summary HTML was designed specifically for use on the World Wide Web. Most of the HTML commands have an opening and closing tag. HTML documents are divided into two segments: the head and the body. The head segment is where you would place JavaScript, style sheets, Meta commands, etc.

Summary A Web page's title identifies the subject or purpose of the page. The body of the Web page contains the information that displays in the browser window. Normal text also can be formatted to display as bold ( ), italic ( ) or underlined ( ) text and must end with the ending tag.

Summary Headings are used as a title for a paragraph. Line break tag ( ) ends a line whether following text or graphics. The paragraph tags ( ) tells the browser the text is in one separate paragraph. There are three primary types of list : ordered lists, unordered lists and definition lists.