CS306 Introduction to Web Programming
Lecture 1
Introduction
Lecture :Dr. Ayman Mohamed
1
HTML :
HTML: short for Hypertext Markup Language
and it is a client-side Markup language.
It is used to build the block of web pages,
every web page on the net is written in HTML,
and it will form the backbone of any web
application.
Features of HTML:
1) It is a very easy and simple language. It can be
easily understood and modified.
2) It is very easy to make effective presentation
with HTML because it has a lot of formatting tags.
3) It is a markup language so it provides a flexible
way to design web pages along with the text.
4) It facilitates programmers to add link on the web
pages (by html anchor tag) , so it enhances the
interest of browsing of the user.
5) It is platform-independent because it can be
displayed on any platform like Windows, Linux
and Macintosh etc.
How to design web page?
To write HTML code you need to use editor
such as:
1. Visual Studio code.
2. Notepad
3. Notepad++
4. Other (any editor)
How to design web page?
Structure of HTML :
<html>
<head>
Tag name <title> page title here </title> Content
</head>
<body>
<h> heading here </h>
Content
Tag name <p> paragraph 1 here </p>
<p> paragraph 2 here </p>
</body>
</html>
Syntax of HTML :
<tag name> content </tag name>
HTML Elements :
HTML tags contain three main parts: opening
tag, content and closing tag
Opening tag
Content
Closing tag
HTML Elements :
HTML tags contain three main parts: opening
tag, content and closing tag
Opening tag
Content
Closing tag
HTML Elements :
HTML tags contain three main parts: opening
tag, content and closing tag
Opening tag
Content
Closing tag
HTML Elements
HTML tags contain three main parts: opening tag,
content and closing tag
Opening tag
Opening tag
content Content
Closing tag
Opening tag
Content
Closing tag
Closing tag
Example
<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the
document type, and helps browsers to display
web pages correctly.
It must only appear once, at the top of the page
(before any HTML tags).
The <!DOCTYPE> declaration is not case
sensitive.
Description of HTML example:
DOCTYPE: It defines the document type.
html : Text between html tag describes the
web document.
body : Text between body tag describes the
body content of the page that is visible to
the end user.
h1 : Text between h1 tag describes the
heading of the webpage.
p : Text between p tag describes the
paragraph of the webpage.
Example-1
Output
HTML Formatting Tags:
1) Bold Text
If you write anything within <b> ........... </b>
element, is shown in bold letters.
Example:
<p><b>Write Your First Paragraph in bold text</b></p>
Output:
Write a First Paragraph in bold text.
HTML Formatting Tags:
2) Italic Text
If you write anything within <i> ........... </i> element,
is shown in italic letters
Example:
<p><i>Write Your First Paragraph in bold text</i></p>
Output:
Write a First Paragraph in bold text.
HTML Formatting Tags:
3) Underline text
If you write anything within <u> ........ </u>
element, is shown in underlined text.
Example:
<p><u>Write Your First Paragraph in underlined
text</u></p>
Output:
Write Your First Paragraph in underlined text.
HTML Formatting Tags:
4) Marked Formatting:
If you want to mark or highlight a text, you should
write the content within <mark> ........ </mark>.
Example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
HTML Formatting Tags:
5) Delete text:
Anything that puts within <del> ......... </del> is
displayed as deleted text.
Example:
<p>Hello <del>Delete your first paragraph</del></p>
Output:
Hello Delete your first paragraph
HTML Formatting Tags:
6) Insert text:
Anything that puts within <ins> ........ </ins> is
displayed as inserted text.
Example:
<p><del>Delete your first paragraph</del><ins>Write
another paragraph</ins></ p>
Output:
Write another paragraph.
HTML Formatting Tags:
7) Larger text:
If you want to put your font size larger than the rest
of the text then put the content within
<big> ........</big>.
It increase one font size larger than the previous one.
Example:
<p>Hello <big>Write the paragraph in larger font</big></p>
Output:
Hello Write the paragraph in larger font.
HTML Formatting Tags:
8) Smaller text:
If you want to put your font size smaller than the
rest of the text then put the content within
<small> ........ </small>tag.
It reduces one font size than the previous one.
Example:
<p>Hello <small>Write the paragraph in larger
font</small></p>
Output:
Hello Write the paragraph in smaller font.
HTML Formatting Tags:
9) Create a list:
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li> Output:
<li>Radish</li> Beetroot
</ul> Ginger
Potato
</body> Radish
</html>