Ministry of Higher Education

Bamyan University
Computer Science Department

Fundamentals of Web designing

HTML (Hypertext Markup Language) introduction

Presented by : Rashid Khademi

Email : rashidkhademi1394@gmail.com
1
learning objective
 In this chapter you will learn
 What is HTML?
 Structure of n HTML document

2
What is hypertext?
• Web pages can contain many kinds of content, such as text, graphics, forms,
audio and video files, and interactive games.
• HTML is the cement that holds a Web page together.
• HTML files that produce Web pages are just text documents.
• But Web pages aren’t merely text documents. They’re made with a special kind
of text called HTML.
• HTML is a collection of instructions that specifies how your page should look and
behave.
• Special instructions in HTML permit text to point (link) to something else. Such
pointers are called hyperlinks.
• Hyperlinks are the glue that holds the World Wide Web together. In your Web
browser
3
Markup?
• Web browsers were created to read HTML instructions (known as markup) and
display the resulting Web page.
• Markup lives in a text file (with your content) to give orders to a browser.

4
So what is HTML ?

HTML is a hypertext markup language!

5
Syntax and rules
• HTML markups are made of three types of components
• Elements
• Attributes
• Entities
• Every markup may be made of a combination of these components

6
HTML Element
• Is the building block of HTML pages
• Elements are made of
• Tags
• Content in the tags
• Two types of elements are identified
• Element that have content and are made of a pair of tags
• Element that inserts an object and made of a single tag

7
Pair tag elements
• Elements that describe content use a tag pair to mark the beginning and the end
of the element, Start and end tag.
• <tag>...</tag>
• Contents such as paragraphs, headings, tables and lists always uses a tag pair
• The start tag (<tag>) tells the browser, “The element begins here.”
• The end tag (</tag>) tells the browser, “The element ends here.”
• The actual content is what occurs between the start tag and end tag.
• <p> this is a paragraph </p>

8
Single tags
• Elements that insert something into the page are called empty elements
• <tag />
• Images and line breaks insert something into the HTML file, so they use one tag.

<img
src=”red_grapes.jpg” width=”75” height=”100” alt=”Red Grapes”
align=”middle” hspace=”5”
/>

9
Nesting elements
• Many page structures combine nested elements

<ul>
<li>Barbera</li>
<li>Brunello</li>
</ul>

10
Attributes
• Attributes allow variety in how an element describes content or works
• You include attributes within the start tag of the element you want them with,
after the element name but before the ending sign, like this:

<tag attribute=”value” attribute=”value”>

• Attribute values must be enclosed in quotation marks
• Every element has its own set of applicable attributes
• Some attributes are globally applied on all elements

11
Entities
• Entities are special characters that you can display on your Web page.
• It include some special characters, such as trademark symbols, fractions, and
accented characters.
• The ampersand character (&) instructs the browser that the following stream are
character entity.
• Ex:
• &lt = less than character
• &gt = greater than
• &copy = copyright sign

12
Before getting started!
• Creating HTML documents differs from creating word-processor documents in an
application like Microsoft Word because you use two applications:
• You create the Web pages in your text or HTML editor.
• You view the results in your Web browser.

13
Creating a Page from Scratch
• Using HTML to create a Web page from scratch involves four straightforward
steps:
1. Plan your page design.
2. Combine HTML and text in a text editor to make that design a reality.
3. Save your page.
a. Save your page as .html or .htm file extensions
4. View your page in a Web browser.

14
HTML page structure
• every properly constructed HTML page needs the same basic document
structure that includes
• A statement that identifies the type of HTML document called DOCTYPE
• A document header
• A document body

15
HTML DOCTYPE
• At the top of your HTML document should be the Document Type Declaration or
DOCTYPE declaration.
• Relevant HTML DOCTYPE
• HTML 4.01
• XHTML 1.0
• HTML 5
• HTML 5 is the newest version of HTML that almost all browsers support this
• <!DOCTYPE html> is the syntax of HTML 5 doctype declaration

16
Html tag
• After you specify which version of (X)HTML the document follows, add an <html>
element to hold all the other (X)HTML elements in your page.

<!DOCTYPE html>
<html>

// all other elements of html goes here

</html>

17
Header of web page
• Inserted in HTML tag.
• Is one of the two main components of HTML document
• Provides basic info about page
• Adding title
• Adding meta data
• Keywords
• Author info
• Description
• Adding style sheet

18
Cont.
• Adding title
• Adding description
<!DOCTYPE html>
<html
<head>
<title>Bamyan IT Consulting Service</title>
<meta name=”keywords” content=”IT consulting, MCSE, networking” />
<meta name=”description” content=”An overview of Bamyan Service company services” />
</head>
</html>

• Content of meta tag do not affect page appearance

19
Body tag
• The <body> element holds the content of your document.
• Every thing that you want to show come in body tag
<HTML>
<head>
</head>

<body>

</body>
</HTML>

20
Posting Your Page Online
1. Find a Web hosting provider to hold your Web pages.
2. Use an FTP client or a Web browser to make a connection to your Web server.
3. Copy the HTML file from your hard drive to the Web server.
4. Use your Web browser to view the file via the Internet.

21
22
References
• “HTML 4 dummies 5th edition” by Ed Tittel & Mary Burmeister
• “HTML 5 designing rich internet applications” by Mathew Dawid
• “HTML in ten simple steps” by Robert G. fuller

23