HTML Introduction
IT301 Introduction to Web Technology
Lecture 2
Credits to:
- Dr. Ahmed Helmi
- Nikolay Kostov, Telerik Corporation 1
Outline
• Web site design
• Basic HTML Syntax
• Fundamental HTML Elements
Website Design Steps
• The first step before designing a web site is to clearly
determine the purpose of the site.
- What kind of information will the target audience be
looking for on your site, a particular product or service,
online ordering…?
• The next step is to list the main topics and sub-topics of
the site. This is essential to develop easy to navigate
website.
• The web site is created by first developing the home page,
followed by a structure (shell) for the interior pages.
• The content is then distributed throughout the site, in
appropriate areas.
3
Publishing Your Website
• For a web site to be published (made available for public
access) it must have a domain name and be hosted on a
Web server.
• Individuals may have to purchase space on a commercial
Web server from a company hosting Web sites.
• For the domain name, pick one that best describes your
Web site. Contact a domain name registrar to find out
the availability of a domain name and register it.
— A free domain name can be obtained from e.g. [Link]
• The next step is to upload the website files (HTML Files,
etc.) to your server using an FTP program (e.g. Filezilla).
4
How to make a web page?
• Web documents are text files with .html or .htm
extension
• HTML files can be created with text editors such as
NotePad, PSPad,…
• Or HTML WYSIWYG (what-you-see-is-what-you-get)
editors:
—Microsoft FrontPage
—Macromedia Dreamweaver
• WYSIWYG programs allow you to create web pages in
the way in which you want them to appear; the HTML
code is generated in the background.
5
HTML
• HTML is an acronym for HyperText Markup
Language.
• HTML documents consist of two parts:
- information content and
- a set of instructions (called mark-up or tags) that
tells your Web browser how to display the
content.
• HTML is not a programming language in the
traditional sense, but rather a set of instructions
about how to display content.
• HTML is not case sensitive.
6
How HTML is Displayed?
HTML http
CGI request Browser Command
ASP URL:[Link]
PHP User
…
http
response
HTML Display
DB Remote
Web Server
Client Site
7
How to Start Writing HTML?
• An HTML file must have an .htm or .html file
extension
1. Open a new Text Document (Notepad file)
2. Save it as [Link]
• Now you have an html file with name MyPage and
you can open it using your internet browser e.g.
google chrome.
• The web browser reads html documents and
display them as web pages.
8
HTML file structure
• An HTML page has a title and a content.
Opening tag
<html>
<head>
<title>
Page title goes here
</title>
</head>
<body>
Page content goes here
</body>
</html>
Closing tag 9
HTML head and body Elements
• The most basic tag <html> informs the browser that
the content to follow is HTML code/content.
• The <body> element contains information displayed in
the browser client area or the contents of the web page.
• The <head> element contains information used for
other purposes by the browser:
— title (shows a caption in the title bar of the page in the
browser window) using the <title>.
— scripts (client-side programs)
— style (display) information
10
HTML “Hello World!”
<html>
<head>
<title>
Net Programming
</title>
</head>
<body>
Hello World!
</body>
</html>
11
HTML Headings
• Headings Are Important
• Search engines use headings to index the
structure and content of web pages.
• Users skim your pages by its headings. It is
important to use headings to show the
document structure.
• h1 headings should be main headings, followed
by h2 headings, then the less important h3, and
so on.
12
HTML Headings (example)
• HTML headings are defined with the <h1> to <h6> tags.
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
</body>
</html>
13
HTML Paragraphs
• HTML documents are divided into paragraphs.
• Paragraphs are defined with the <p> tag.
• Example
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>
14
Blank Spaces & Line Breaks
• In HTML, any number of spaces, and any number of
new lines, count as only one space. The browser will
remove extra spaces and extra lines when the page is
displayed.
<p> <p>
This paragraph This paragraph
contains a lot of contains a lot of
lines spaces
in the source code, in the source code,
but the browser but the browser
ignores it. ignores it.
</p> </p>
15
Example
• If you want a sequence of blank spaces using the
command  . Nbsp stands for Non-Breaking
Space.
• If you want a line break (a new line) without
starting a new paragraph Use <br>. = لـ اختصارNon-Breakin
بالع ربي يعني:ة أو للكسر قابلة غير مسافة
<HTML> لا؟
ً ; أصnbsp 📌 &بن ست خ د م لي ه
Factor 1 <br> العادي: HTMLفي
    joy <br> بين مسافات،يختصرهم المتصفح كلمتين
    happy <br>
Factor 2 <br>
    sad <br>
    shame <br>
</HTML>
16
Preserve Formatting
• To preserve the format in which your text is written
in the HTML file, use <pre> tag.
• Suitable for displaying computer codes.
<html>
<body>
<pre>
The first line
The second line
The third line
The fourth line
</pre>
</body>
</html>
17
Horizontal Lines
• The <hr> tag creates a horizontal line in an HTML page. This can be used
to separate content.
<hr size=5 width=70% >
• Example
Size is the thickness of the
<html> line and width is the length
<head> of line with respect to the
<title> Horizontal Line Example </title>
page width.
</head>
<body>
<p> This is paragraph one and should be on top </p>
<hr>
<p> This is paragraph two and should be at bottom </p>
</body>
</html>
18
Comments: <!-- --> Tag
• Comments can exist anywhere between the
<html></html> tags
• Comments start with <!-- and end with -->
<!–- This is a comment -->
19
Text Formatting Tags
Tag
<b> bold text
<i> italic text
<u> underlined text
<big> big text
<small> small text
<sub> subscripted text Samplesubscript
<sup> superscripted text Samplesuperscript
<strike> or <del> Defines strike text example
<center></center> Centering text
20
Example
<html>
<head> </head>
<body>
<b> This text is Bold </b>
<br> <center> This text is centered </center>
<br> <small> This text is Small </small>
<br> <big> This text is Big </big>
<br> This is <sub> Subscript </sub> and <sup> Superscript </sup>
<br> <strike> This text is Strike </strike>
</body>
</html>
21
Formatting text using <font> tag
<font size=3 face=arial color=blue>
</font>
• size: 1,2,…,6
• face: arial, Comic Sans, Calibri, Impact,…
• color: red, blue, green,…
or color codes in hexadecimal: #FF0000, #0033CC,
#00CC00
22
Example
<html>
<font size=5 face=arial color=red>
Web Prog course
</font>
<br><br>
<font size=2 face=impact color=blue>
Welcome to our course!
</font>
</html>
23
Example
<html>
<head>
</head>
<body>
<font color=blue> This is our 2 <sup> nd </sup> lecture.</font>
<br><br>
<b> This line is bold </b> <br><br>
<del> Here is a strike through </del>
</body>
</html>
24
Align Text
• Appears as an attribute within <p> tag.
<html>
<head>
</head>
<body>
<p align=left> This is left aligned </p>
<p align=center> This is center aligned </p>
<p align=right> This is right aligned </p>
</body>
</html>
25