Top Banner
PRACTICAL 2 HTML Introduction
18

Practical 2 HTML Introduction

May 27, 2017

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Practical 2 HTML Introduction

PRACTICAL 2HTML Introduction

Page 2: Practical 2 HTML Introduction

Introduction

What is HTML?• HTML is a language for describing web pages.• HTML stands for Hyper Text Markup Language.• HTML is not a programming language, it is a markup

language• A markup language is a set of markup tags• The purpose of the tags are to describe page content

Page 3: Practical 2 HTML Introduction

Introduction (cont.)• HTML markup tags are usually called HTML tags• HTML tags are keywords surrounded by angle

brackets like <html>• HTML tags normally come in pairs like <b> and </b>• The first tag in a pair is the start tag, the second tag is

the end tag• Start and end tags are also called opening

tags and closing tags

Page 4: Practical 2 HTML Introduction

Introduction (cont.)

HTML Documents = Web Pages• HTML documents describe web pages• HTML documents contain HTML tags and plain text• HTML documents are also called web pages

Web Browsers• The purpose of a web browser (Chrome, Internet

Explorer, Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

Page 5: Practical 2 HTML Introduction

Introduction (cont.)• A simple HTML document consists of <head> and <body>

tag. The <head> element may include a title for the document, styles, scripts and more. The <body> tag defines the document’s body.

• Open the notepad and type the following HTML codes, then save it as Practical 3.html.

Page 6: Practical 2 HTML Introduction

HTML Document’s Title• Then, type in the document’s title as shown below. Save

the file and open it using your web browser.

Title of the document

Page 7: Practical 2 HTML Introduction

Title of the document

Page 8: Practical 2 HTML Introduction

HTML Headings• Continue writing the following codes…

Heading 2

Heading 1Horizontal Line

Image

Page 9: Practical 2 HTML Introduction

Image

Heading 1

Horizontal line

Heading 2

Page 10: Practical 2 HTML Introduction

HTML Paragraph• Open the contents.doc file. Then, copy the first paragraph

and paste it after the first headings as shown below.

Paragraph

Page 11: Practical 2 HTML Introduction

Paragraph

Page 12: Practical 2 HTML Introduction

HTML Ordered Lists• An ordered list starts with <ol> tag. Each list item starts

with <li> tag. The list items are marked with numbers.

Ordered Lists

Page 13: Practical 2 HTML Introduction

Ordered Lists

Page 14: Practical 2 HTML Introduction

HTML Unordered Lists• An unordered list starts with <ul> tag. Each list item starts

with <li> tag. The list items are marked with bullets.

Unordered ListsLine Break

Page 15: Practical 2 HTML Introduction

Unordered Lists

Page 16: Practical 2 HTML Introduction

HTML Unordered Lists (cont.)• Complete the remaining unordered lists.

Page 17: Practical 2 HTML Introduction
Page 18: Practical 2 HTML Introduction

Complete Web Page (End)• Now, you have successfully design a basic HTML web

page.

• You may surf the following webpage for more reference, http://www.w3schools.com/