practical 2 html introduction
Post on 27-May-2017
243 views
TRANSCRIPT
![Page 1: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/1.jpg)
PRACTICAL 2HTML Introduction
![Page 2: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/2.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/3.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/6.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/7.jpg)
Title of the document
![Page 8: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/8.jpg)
HTML Headings• Continue writing the following codes…
Heading 2
Heading 1Horizontal Line
Image
![Page 9: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/9.jpg)
Image
Heading 1
Horizontal line
Heading 2
![Page 10: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/10.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/11.jpg)
Paragraph
![Page 12: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/12.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/13.jpg)
Ordered Lists
![Page 14: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/14.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/15.jpg)
Unordered Lists
![Page 16: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/16.jpg)
HTML Unordered Lists (cont.)• Complete the remaining unordered lists.
![Page 17: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/17.jpg)
![Page 18: Practical 2 HTML Introduction](https://reader030.vdocuments.site/reader030/viewer/2022020119/577ccf341a28ab9e788f25b6/html5/thumbnails/18.jpg)
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/