Scribd
Upload
18 views

Introduction To HTML

Uploaded by

nurin atira
Copyright
© © All Rights Reserved
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
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