Web design - HTML (Hypertext Markup Language) introduction
Fundamentals of Web designing
Ministry of Higher Education
Computer Science Department
Presented by : Mustafa Kamel Mohammadi
Email : firstname.lastname@example.org
HTML (Hypertext Markup Language) introduction
In this chapter you will learn
What is HTML?
Structure of n HTML document
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
• 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
• 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.
So what is HTML ?
HTML is a hypertext markup language!
Syntax and rules
• HTML markups are made of three types of components
• Every markup may be made of a combination of these components
• Is the building block of HTML pages
• Elements are made of
• 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
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.
• 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>
• 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.
src=”red_grapes.jpg” width=”75” height=”100” alt=”Red Grapes”
• Many page structures combine nested elements
• 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
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.
Creating a Page from Scratch
• Using HTML to create a Web page from scratch involves four straightforward
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.
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
• At the top of your HTML document should be the Document Type Declaration or
• 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
• 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.
// all other elements of html goes here
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
• Author info
• Adding style sheet
• Adding title
• Adding description
<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” />
• Content of meta tag do not affect page appearance
• The <body> element holds the content of your document.
• Every thing that you want to show come in body tag
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.