Scribd
Upload
18 views

Introduction To HTML

Uploaded by

nurin atira
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
18 views

Introduction To HTML

Uploaded by

nurin atira
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/ 36

CSC264:

Introduction to
HTML
Ts. Dr. Rashidah Mokhtar
BK79, UiTM Cawangan Johor Kampus Segamat
H/P: 0197333604 || 2837
Email: [email protected]
Agenda
01. Overview 02. Effective HTML

• Introduction • Effective Web Design


• Overview to HTML • HTML Editor
• Function of HTML • HTML Document
• History of HTML

03. Elements, Attributes, Character


References and Comments
04. Lengths, Dates and
Times
• Elements
• Length
• Attributes
• Dates and Times
• Character References
• Comments

2 CSC264: Introduction To Web And Mobile Application


Introduction
 Standard Generalized Markup Language (ISO
8879:1986 SGML) is an ISO-standard technology
for defining generalized markup languages for
documents.

 HTML is one of a markup language. Other are


XML & XHTML.

3 CSC264: Introduction To Web And Mobile Application July 19, 2024


Introduction
• HTML – Hyper Text Markup Language
• Hypertext – Ability to link to other document
• HTML tell the browser how to and when to display the object in a web page
• Browser will open the text file (formally known as the html file)
• Browser program will interpret the file
• The browser will display the content
• HTML is just a text file that will be interpreted by the browser

4 CSC264: Introduction To Web And Mobile Application July 19, 2024


Example
Browser program (IE)
translate

5 CSC264: Introduction To Web And Mobile Application July 19, 2024


Overview of HTML

• HTML is a language for describing web pages.


• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup
language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
• HTML inform web browser how and where to display items in
the web page.

6 CSC264: Introduction To Web And Mobile Application July 19, 2024


FUNCTION OF HTML

Using HTML you can identify:


– The title of the document
– The hierarchical structure of the document with header levels and section names
– Bulleted, numbered, and nested lists
– Insertion points for graphics
– Special emphasis for key words or phrases
– Preformatted areas of the document
– Hyperlinks and associated URLs

7 CSC264: Introduction To Web And Mobile Application July 19, 2024


Click icon to add picture

HISTORY OF HTML
• Developed by Tim Berners-Lee at Particles Lab, Geneva
• Was popularized by the Mosaic browser developed by
computer scientists of University of Illinois, US
• In 90’s, it has blossomed with the explosive growth of the
web.
• The first publicly available description of HTML was a
document called HTML Tags, first mentioned on the
Internet by Berners-Lee in late 1991. It describes 20
elements comprising the initial, relatively simple design of
HTML. Except for the hyperlink tag, these were strongly
influenced by SGMLguid, an in-house SGML based
CSC264: Introduction To Web And Mobile Application
documentation format at CERN.
8 July 19, 2024
Click icon to add picture

Effective HTML Page

CSC128: Introduction
907/19/2024
https://www.feelingpeaky.com/9-principles-of-good-web-design/#:~:text=An%20effective%20website%20design%20shoul
d,contribute%20to%20good%20website%20design
.

EFFECTIVES WEB DESIGN

Don’t make users Don’t squander Manage to focus Strive for


think users’ patience users’ attention simplicity
• Obvious and • Don’t ask user to • F-shaped pattern • User interface
self-explanatory fill in form reading design must be
friendly and easy
to understand.

A well designed website can help build trust and guide visitors to take action. Creating a great user experience involves making sure your
website design is optimised for usability (form and aesthetics) and how it easy is it to use (functionality).
HTML EDITOR
 There are many editors available nowadays:
• Aardvark Pro
• Adsorb
• Ant-HTML
• Crackerjack
• Dreamweaver
• FrontPage
• Hotdog
• Netscape Composer
• Web Publisher
• Notepad++

11 CSC264: Introduction To Web And Mobile Application July 19, 2024


HTML document:
• with extension .html or htm
• Is a text document
• Use pair of tags start with <HTML> ended with </HTML>
• A browser must be told how to “mark up” objects of the documents using container tags or
noncontainer tag
• Objects of a document can be
• Text
• Image
• Video
• Sound
• Link
• Codes / script

12 CSC264: Introduction To Web And Mobile Application 07/19/2024


HTML VERSION INFORMATION
• A valid HTML document declares the version of HTML is used in the
document
• A HTML document includes The Document Type Definition (DTD)
• Example:
• <!DOCTYPE HTML PUBLIC “-//WC3//DTD HTML 4.01//EN”
• http://www.w3.org/TR/html4/strict.dtd>

13 CSC264: Introduction To Web And Mobile Application July 19, 2024


HTML VERSION INFORMATION
• DTD is a specific definition that follows the rules of the Standard
Generalized Markup Language (SGML).
• A DTD is a specification that accompanies a document and identifies
what the funny little codes (or markup) are that separate paragraphs,
identify topic headings, and so forth and how each is to be processed.

14 CSC264: Introduction To Web And Mobile Application July 19, 2024


FUNCTION OF DTD
• Any location that has a DTD "reader" (or "SGML compiler") will be
able to process the document and display or print it as intended.
• This means that a single standard SGML compiler can serve many
different kinds of documents that use a range of different markup
codes and related meanings.
• The compiler looks at the DTD and then prints or displays the
document accordingly.

15 CSC264: Introduction To Web And Mobile Application July 19, 2024


FUNCTION OF DTD
• The system identifiers of these DTDs, if present in the Document Type Declaration, will
be URI references
• The URI (Universal Resource Identifier) in each DTD allows browser to download the
DTD and any entity sets that are needed.
• A typical HTML doc has this structure;
• <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”>
• <HTML>
• …..the head, body, goes here….
• </HTML>

16 CSC264: Introduction To Web And Mobile Application July 19, 2024


.htm or .html file extension
• When you save an HTML file, you can use either the .htm or
the .html file extension.
• We use .htm in our examples. It is a habit from the past, when the
software only allowed three letters in file extensions.
• With new software it is perfectly safe to use .html.

18 CSC264: Introduction To Web And Mobile Application July 19, 2024


Click icon to add picture

Elements, Attributes, Character


References and Comments

19 CSC264: Introduction To Web And Mobile Application 07/19/2024


HTML ELEMENTS SYNTAX
• An HTML element starts with a start tag / opening tag
• An HTML element ends with an end tag / closing tag
• The element content is everything between the start and the end tag
• Some HTML elements have empty content
• Empty elements are closed in the start tag
• Most HTML elements can have attributes

20 CSC264: Introduction To Web And Mobile Application July 19, 2024


HTML ELEMENTS
• Generally, each element type declaration describes 3 Parts:
1. A start
2. Tag, content and
3. An end tag
• Example:
• For paragraph element or P element
• <P> This is a paragraph</P>

21 CSC264: Introduction To Web And Mobile Application July 19, 2024


HTML elements

• Some HTML elements, we can omit the end tags. e.g: P


& LI element types
• Some elements, we can omit the start tags. e.g; HEAD
& BODY
• Some elements, have no content. e.g; HR & BR

22 CSC264: Introduction To Web And Mobile Application July 19, 2024


Attributes

• Elements may have properties


• Element properties are called attributes
• Attribute/value pairs appear before the “>” of an
element’s start tag.
• Example:
• <body bgcolor=“red” text=“white" link=“yellow" alink
=“blue" vlink=“green" leftmargin = "10" topmargin ="0"
>

23 CSC264: Introduction To Web And Mobile Application July 19, 2024


CHARACTER REFERENCE
• Sometimes, they are numeric of symbolic names for character that may be
used in a HTML Doc.
• Useful for referring to rarely used characters
• Character references begin with a symbol “&” and end with a semi-colon “;”
• Example:
• 1. The sign “<“ = &lt;
• 2. The sign “>” = &gt;
• 3. The copyright symbol = &copy;
• 4. 'λ' = &lambda;

24 CSC264: Introduction To Web And Mobile Application July 19, 2024


COMMENTS
• Comments are text ignored by browser
• The text placed between the comment markup will not be displayed
• The comment begins with “<!-- and end with -->
• Example:
• 1. <!-- This is a comment 
• 2. <!– and so is this one,
• which occupies more than one line -->

25 CSC264: Introduction To Web And Mobile Application July 19, 2024


Click icon to add picture

Lengths: Dates and Times


Lengths
• HTML specifies 3 types of length value for attributes:
• Pixel – The value is an integer that represents the number of pixels of
the canvas.
Example: <img src=/https/www.scribd.com/images/res3.gif border=0 width=38 height=20
• 50 = 50 pixels
• Percentage: Percentage of the total length.
• Example: <HR width= 50%> ( The value “50%” means half of the
available space.)

27 CSC264: Introduction To Web And Mobile Application July 19, 2024


Lengths
MultiLength – The value may be relative length.
• It has the form “i*” where “i” is an integer
• When allotting space among elements competing for that
space, user agents allot pixel and percentage lengths first, then
divide up remaining available space among relative lengths.

28 CSC264: Introduction To Web And Mobile Application July 19, 2024


Lengths
• Each relative length receives a portion of the available space that is
proportional to the integer preceding the "*".
• The value "*" is equivalent to "1*". Thus, if 60 pixels of space are
available after the user agent allots pixel and percentage space, and
• the competing relative lengths are 1*, 2*, and 3*, the 1* will be
alloted 10 pixels, the 2* will be alloted 20 pixels, and the 3* will be
alloted 30 pixels.

29 CSC264: Introduction To Web And Mobile Application July 19, 2024


Example
• rows = multi-length-list [CN]
• This attribute specifies the layout of horizontal frames. It is a comma-
separated list of pixels, percentages, and relative lengths. The default value is
100%, meaning one row.
• cols = multi-length-list [CN]
• This attribute specifies the layout of vertical frames. It is a comma-separated
list of pixels, percentages, and relative lengths. The default value is 100%,
meaning one column.

30 CSC264: Introduction To Web And Mobile Application July 19, 2024


Example
• The next example creates three columns: the second has a fixed width
of 250 pixels (useful, for example, to hold an image with a known
size). The first receives 25% of the remaining space and the third
75% of the remaining space.
• <FRAMESET cols="1*,250,3*"> ...the rest of the definition...
</FRAMESET>

31 CSC264: Introduction To Web And Mobile Application July 19, 2024


Date and time
• Many options and variations in the representation of dates and times
• The current specification uses one of the formats:

32 CSC264: Introduction To Web And Mobile Application July 19, 2024


Date and time
• hh = two-digits of hour (00 – 23)
• mm = two-digits of minute (00 – 59)
• ss = two-digits of second (00 – 59)
• TZD = time zone designator

33 CSC264: Introduction To Web And Mobile Application July 19, 2024


EXAMPLE 1 – Let’s try

<html>
<head>
<title>My WebPage!</title>
</head>
<body> Hello World! All my content goes here!
</body>
</html>

34 CSC264: Introduction To Web And Mobile Application July 19, 2024


References
• Sebesta, R.W. (2010). Programming the World Wide Web, 6th Edition,
Pearson.
• Deitel. (2009). Internet & World Wide Web, How to Program, 4th
Edition, Pearson.
• https://www.internetsociety.org/internet/what-internet/history-internet
/brief-history-internet

• https://www.w3schools.com/html/html5_intro.asp

35 CSC264: Introduction To Web And Mobile Application July 19, 2024


Thank you
Refer w3school.com for more hands-on on HTML

You might also like