Scribd
Upload
13 views

WD-lecture1 HTML (2) (2)

This lecture introduces HTML5, explaining its role as a markup language for creating web pages and detailing the structure of an HTML document. Key topics include HTML tags, document types, and essential elements like <html>, <head>, and <body>, along with their functions. The lecture also covers formatting elements, comments, and best practices for writing HTML code.

Uploaded by

daniabassam23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

WD-lecture1 HTML (2) (2)

This lecture introduces HTML5, explaining its role as a markup language for creating web pages and detailing the structure of an HTML document. Key topics include HTML tags, document types, and essential elements like <html>, <head>, and <body>, along with their functions. The lecture also covers formatting elements, comments, and best practices for writing HTML code.

Uploaded by

daniabassam23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Introduction to Web

Programming
Lecture 1: Introduction to HTML5: PART (1)

Dr Natheer Gharaibeh

1
In today’s lecture you will
learn ..

• What is HTML

• HTML document structure

• How to write your first web page using


HTML
• Basic HTML elements

2
What is HTML?
• Stands for Hyper Text Markup Language and it is
the most common language to write web pages.

• Unlike programming languages (e.g. Java, C#),


HTML is a markup language and NOT a
programming language.

• Describes the structure and the content of web


documents (i.e., web pages) to be displayed in
web browsers.

3
How it all works ..
• HTML documents are stored in web
servers and are requested by clients (e.g.
web browsers) running on local
computers or smartphones.

• For example, typing www.deitel.com/


books/downloads.html into a web
browser’s address field requests the file
downloads.html from the books
directory on the web server running at
www.deitel.com.

• The browser places the HTML document in


the computer and renders/displays it
using the browser.

4
HTML Tags
• A markup language is a set of markup tags:

• HTML tags are keywords (tag names) surrounded by angle


brackets:<tagname>content</tagname>

• HTML tags normally (NOT always) come in pairs like <p> and
</p>.
• The first tag in a pair is the start tag (opening tag), the second
tag is the end tag (closing tag).

• The end tag is written like the start tag, but with a slash before
the tag name.

• The HTML element in a html document is everything from the start


tag to the end tag

5
HTML Documents
• HTML documents are made up by HTML
elements.
<!doctype html>
<html>
• Must start with a document type declaration
tag:
<head>
<!DOCTYPE html> Document header related tags
</head>
• The HTML document itself begins with
<html>
and ends with </html>. <body>
• <head> tag contains meta data (i.e.
information about the document) and is placed Document body related tags
between the <html> tag and the <body> tag. </body>
• The visible part of the HTML document (i.e.
seen in web browsers) is between <body> and </html>
</body>.

6
Nested HTML Elements
•Most HTML elements can be nested (can contain other HTML
elements).
HTML Document Example
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

• The example above contains 3 HTML elements.


The <p> element
The <body> element
The <html> element
Note: Don't Forget the End Tag (Many HTML elements will produce
unexpected results and/or errors if you forget the end tag).
7
Document Type Declaration
Tag
• <!DOCTYPE>

• 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.

• To tell the browser that the document is a html 5 document to be rendered


according to html 5 specifications, you need to include <!DOCTYPE html> in
each document you create.

• The doctype declaration is not case sensitive. All cases are acceptable:

<!DOCTYPE <!DOCTYPE <!doctype html> <!Doctype


html> HTML> Html>

8
html, head and body
Elements
• The html element:
• encloses the head section and the body section.

• The head element:


• contains information about the HTML document (i.e. metadata), such as
the character set and the title.
• can also contain special document-formatting instructions called CSS3
style sheets and client-side programs called scripts for creating
dynamic web pages (will be covered in other lectures).
• examples of meta data tags also include <style>, < meta>, <link>,
<script>, and <base> tags.
• in the HTML5 standard, the <head> tag can be omitted.

• The body element:


• contains the page’s content, which the browser displays when the user
visits the web page.

9
Only the <body> area (the white area) is displayed by the browser.

10
The meta
Element
• <meta> Element
• is used to specify page description, keywords, author, and other metadata.
• meta data is used by browsers (how to display content), by search engines using (keywords), and
other web services.
• Example: Can be used to define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript”>
• Example: Can be used to define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
• Example: Can be used to define the author of a page:
<meta name="author" content="Hege Refsnes”>
• Example: Can be used to define the character set used: To display an HTML page correctly, a
web browser must know the character set (character encoding) used in the page. UTF-8
(Unicode) is the default character encoding which covers almost all of the characters and
symbols in the world:
<meta charset=“UTF-8">
• Example:
<meta Can be used to content="30">
http-equiv="refresh“ refresh the document every 30 seconds:
11
HTML
Example • The DOCTYPE declaration defines
the document type to be HTML

<!DOCTYPE html> • The text between <html> and


<html> </html>
describes an HTML document
<head>
<title>Page • The text between <head> and
Title</title> </head>
</head> provides information about the
document
<body> • The text between <title> and
<h1>My First </title>
Heading</h1> provides a title for the document
<p>My first
paragraph.</p> • The text between <body> and
</body> </body>
describes the visible page content
</html>
• The text between <h1> and </h1>
12 describes a heading
Web Browser
• The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read
HTML documents and display them.

• The browser does not display the HTML tags, but uses them to
determine how to display the document.

<!DOCTYPE html>
<html>
<head>
<titl
e>Pag
e
Title
</tit
le>
</head>

<body>
<h1>M
y
First 13
Headi
HTML Titles
• The HTML <title> element is meta data and it defines
the HTML document's title.

• The title will not be displayed in the document, but


might be displayed in the browser tab.

• It
provides a title for the page when it is added
to favorites.

• It
displays a title for the page in search engine
results. 14
HTML Headings
• Some text in an HTML5 document may be more important than other text.

• HTML5 provides six heading elements (h1 through h6) for specifying the relative
importance of information.

• h1 headings should be main headings, followed by h2 headings, then the


less important h3, and so on.

• Browsers automatically add some empty space (a margin) before and after each
heading.

• Use HTML headings for headings only. Don't use headings to make text BIG or
bold.

• 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. 15
HTML Headings

<body>
<h1>Level 1 Heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>
</body>

16
HTML Paragraphs
• Help define the structure of a document.

• All the text placed between the <p> and </p> tags forms
one paragraph.

• When a browser renders a paragraph, it places extra space


above and below the paragraph text.

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

17
HTML Comments
• Comments can be inserted into the HTML code to make
it more readable and understandable.

• Comments are ignored by the browser and are


not displayed.

Comments Syntax:
<!-- Write your comments here -->

Note: There is an exclamation point after the opening


bracket, but not before the closing bracket.
18
Empty HTML
Elements
• HTML elements with no content are called empty
elements.

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


<br> tag defines a line break).

• Tip: In XHTML, all elements must be closed. Adding


a slash inside the start tag, like <br />, is the proper
way of closing empty elements in XHTML (and XML).

19
HTML Line Breaks
• With HTML, you cannot change the output by adding extra spaces
or extra lines in your HTML code.

• The browser will remove extra spaces and extra lines when the page
is displayed. Any number of lines count as one line, and any
number of spaces count as one space.

• Use the <br /> tag 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>

• The <br /> element is an empty HTML element. It has no end tag.

20
The <pre>
Element
• The HTML <pre> element defines a block of pre-formatted text,
with structured spaces and lines.

• To display anything, with right spacing and line-breaks, you must wrap
the text in a <pre> element:

<pre>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>
21
HTML Horizontal Rules
• The <hr /> tag creates a horizontal line in an HTML page.

• The hr element can be used to separate content.

• You better avoid using it. CSS can be used to add


horizontal rules and other formatting to documents.

<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr />
<p>This is a paragraph.</p>
<br />
<p>This is a paragraph.</p>
</body>
22
HTML
Style
• Every HTML element has a default style (background color
is white, text color is black, text-size is 12px)

• Changing the default style of an HTML element, can be


done with the style attribute.

• This example changes the default background color from


white to lightgrey:
• <body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p> </body>

• The HTML style attribute has the following


syntax: style="property:value"
The property is a CSS property. The value is a CSS value.
23
HTML Formatting Elements
• HTML also defines special elements, for defining text with a
special meaning.

• HTML uses elements like <b> and <i> for formatting output, like bold
or italic text.

• Formatting elements were designed to display special types of text:

- <b> Defines bold text


- <em> Defines emphasized text
- <i> Defines italic text
- <small> Defines smaller text
- <strong> Defines important text
- <sub> Defines subscripted text
- <sup> Defines superscripted text
- <ins>Defines inserted text
- <del> Defines deleted text
- <mark> Defines marked/highlighted text.
24
Tips: HTML Tips: Use Lowercase
Tags & Use Lowercase
Attributes
• HTML tags are case-insensitive (NOT case sensitive) :
<P> means the same as <p>. Many web sites
use uppercase HTML tags.

• World Wide Web Consortium (W3C) recommends


lowercase tags and attributes.

• Newer versions of (X)HTML will demand lowercase


attributes and tags.

25
DEMO

26
References

• http://www.w3schools.com
• Deitel & Deitel (2011): Internet and World Wide
Web How to Program, 5th Edition, Harvey &
Paul Deitel& Associates.

27

You might also like