Web-programming-practical Lect #3.1- طلاب (HTML)

Hyper Text Markup Language
Lect. # 3.1
<HTML>
Web Programming
The
First
Lecturer
Stage
(2015-2016)
Assistant Lecturer
Mrs. Najaat Y. Denha Hana

Web - Programming - Practical part (HTML)
1 - First Stage -
Assist. Lect. Mrs. Najaat Y. Denha
Outlines
• What is HTML?
• What Is The Structure Of HTML Document ??
• HTML Editors
• Web Browsers
• How can I create my first web page
• What are HTML Elements
• HTML Tags
• HTML Headings
• HTML Comments
• HTML Paragraphs
• HTML Horizontal Rules <hr>
• HTML Line Breaks <br>
• HTML Attributes
• H.W.

2 - First Stage -
What is HTML?
• HTML is a markup language for describing web
documents (web pages).
• A web page (or webpage) is a web document that is
suitable for the World Wide Web and the web browser.

3 - First Stage -
What is HTML? Cont.
• Hyper Text Markup Language (HTML) is the language

for specifying the static content of Web pages.
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document
content.
• HTML stands for Hyper Text Markup
Language

4 - First Stage -
How the HTML looks like ?
Veryyyyyyyyyy Simple - Example #1
Write HTML Document To Say Hiiiiiiiiiiiiiii??
Hiiiiiiiiiiiiiiiiiiiiii

5 - First Stage -
Example #2
The code The output

6 - First Stage -
What Is The Structure Of HTML Document ??
Note ::
Only the <body> area (the white area) is displayed by the browser.

7 - First Stage -
The <!DOCTYPE> declaration
• The DOCTYPE declaration defines the

document type to be HTML.
• The <!DOCTYPE> declaration helps the
browser to display a web page
correctly.
• There are different document types on
the web.
• To display a document correctly, the
browser must know both type and
version.
• The doctype declaration is not case
sensitive. All cases are acceptable:
8 - First Stage -
So……
• All HTML documents must start with a type declaration: <!DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html> .
• The text between <html> and </html> describes an HTML document .
• The text between <head> and </head> provides information about the
document
• The text between <title> and </title> provides a title for the document
• The text between <body> and </body> describes the
visible page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes paragraph
• Using this description, a web browser can display a document with a
heading and a paragraph.

9 - First Stage -
HTML Editors
• Write HTML Document Using
– Notepad or
– TextEdit.
• HTML can be edited by using a

professional HTML editor like:
o Adobe Dreamweaver
o Microsoft Expression Web
o CoffeeCup HTML Editor

10 - First Stage -
Web Browsers
The Browser does not display the HTML tags, but uses
them to determine how to display the document:

11 - First Stage -
How can I create my first web page ?
To create your first web page with

Notepad , Follow the 4 steps below :-
 Step 1: Open Notepad

 To open Notepad in Windows 7 or
earlier:
 Click Start (bottom left on your screen).
Click All Programs. Click Accessories.
Click Notepad.
To open Notepad in Windows 8 or later:
 Open the Start Screen (the window symbol at
the bottom left on your screen). Type Notepad.

12 - First Stage -
• Step 2: Write Some HTML

13 - First Stage -
 Step 3 : Save the HTML Page.
 To Save the file on your computer

Select File > Save as in the Notepad
menu.
 The file name consists of two part
File’s name . Extension

Ex: prog1.html , lab1.html,…..ext.
 You can use either .htm or .html as file

extension. There is no difference, it is up
to you.

14 - First Stage -
click save ,save your file on desktop to see it quickly ,now double click the file
your first webpage is running .

15 - First Stage -
 Step 4: View HTML Page in Your Browser.
 Double-click your saved HTML file, and the
result will look much like this:

16 - First Stage -
Example#2
Web browser used to
HTML Document written by Notpad display the document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

17 - First Stage -
H.W.
Write HTML code that view or print a name only ??
Rewrite it by using
heading element <h1>?
Rewrite it by using Najaat Y. Denha
paragraph element <p>?

18 - First Stage -
What are HTML Elements ??
• HTML documents are made up by HTML elements.
• HTML elements are written with a start ( opening tag)
, with an end(closing) tag, with the content in
between:
<tagname> …. content …… </tagname>
• Ex: <html> …………….. </html>
<html> opening tag
</html> closing tag
• The HTML element is everything from the start tag to

the end tag:
• Ex: <p>My first HTML paragraph.</p>

19 - First Stage -
Empty HTML Elements
• HTML elements with no content are called empty
elements.
• <br> (the <br> tag defines a line break).
• <br >is an empty element without a closing tag.
• Empty element can be "closed" in the opening tag like

this: <br />.
• HTML5 does not require empty elements to be closed.

But if you need stricter validation, and make your
document readable by XML parsers, please close all
HTML elements.

20 - First Stage -
Nested HTML Elements
• HTML elements can be nested (elements
can contain elements).
• All HTML documents consist of nested
HTML elements.
• Note :- in Example #2
– The <body> element defines the document
body.
– It has a start tag <body> and an end tag
</body>.
– The element content is two other HTML
elements (<h1> and <p>).
21 - First Stage -
HTML
Tags ??
• HTML tags are keywords (tag names) surrounded by angle
brackets <> : < tag name > content < / tag name >
• HTML tags normally come in pairs like <p> and </p>
• for example <html>
• The first tag in a pair is the start(opening) tag, the second tag is
the end(closing) tag
• The end tag is written like the start tag, but with a slash before
the tag name
•HTML tags are not case sensitive: <P> means the same as <p>.
•we always use lowercase tags.
22 - First Stage -
HTML Comments
• Comment tags  are used to
insert comments in HTML.
– Example :- 
• Comments are not displayed by the
browser, but they can help document
your HTML.With comments you can
place notifications and reminders in
your HTML:
– Example :-

<p>This is a paragraph.</p>

23 - First Stage -
HTML Headings ?
• Headings conditions:-
– Use HTML headings for headings only.
– Don't use headings to make text BIG or bold.
– h1 headings should be main headings, followed by h2 headings, then the
less important h3, and so on
– <h1> defines the most important heading. <h6> defines the least
important heading
• Why Headings Are Important?
– Search engines use your headings to index the structure and content of
your web pages.
– Users skim your pages by its headings. It is important to use headings to
show the document structure.

24 - First Stage -
HTML Headings
• Headings are defined with the < h1>

to < h6> tags.
• Example
<h1>This is a heading</h1>

25 - First Stage -
•
H.W.
Write HTML code to generate the following output??
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
26 - First Stage -
HTML Paragraphs
• HTML documents are divided into paragraphs.
• The HTML <p> element defines a paragraph.
• Browsers automatically add an empty line before
and after a paragraph.
• Example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

27 - First Stage -
HTML Horizontal Rules <hr>
• The <hr> tag creates a horizontal line in
an HTML page.
• The hr element can be used to separate
content.
• Ex:
<hr>
<hr>

28 - First Stage -
HTML Line Breaks <br>
• The HTML <br> element defines a line break.

• Use <br> if you want a line break (a new
line) without starting a new paragraph:
• Example ::
<p>
This is<br>a para<br>graph with line breaks
</p>

29 - First Stage -
HTML Attributes
• Attributes provide additional information about HTML elements.
• HTML elements can have attributes
• Attributes are always specified in the start tag !!
• Attributes come in name/value pairs like: name="value"
• Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue"> This is a heading </h1>
<p style="color:red“ > This is a paragraph . </p>
</body>
</html>
• Note
Style/color attribute Name = style and value = “color:blue”

30 - First Stage -
H.W. Try to review the following :
HTML Styles
HTML Text Formatting Elements
HTML Color Names
HTML Images

31 - First Stage -

Web-programming-practical Lect #3.1- طلاب (HTML)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web-programming-practical Lect #3.1- طلاب (HTML)

Uploaded by

Copyright:

Available Formats

Hyper Text Markup Language

Mrs. Najaat Y. Denha Hana

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

• Hyper Text Markup Language (HTML) is the language

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

• The DOCTYPE declaration defines the

Web - Programming - Practical part (HTML)

• HTML can be edited by using a

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

To create your first web page with

 Step 1: Open Notepad

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

 To Save the file on your computer

 The file name consists of two part

File’s name . Extension

 You can use either .htm or .html as file

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

paragraph element <p>?

Web - Programming - Practical part (HTML)

<tagname> …. content …… </tagname>

• Ex: <html> …………….. </html>

<html> opening tag

</html> closing tag

• The HTML element is everything from the start tag to

Web - Programming - Practical part (HTML)

• <br> (the <br> tag defines a line break).

• <br >is an empty element without a closing tag.

• Empty element can be "closed" in the opening tag like

• HTML5 does not require empty elements to be closed.

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

• Headings are defined with the < h1>

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

• The HTML <br> element defines a line break.

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

Web - Programming - Practical part (HTML)

You might also like