BIS 4226 HTML 1 Joseph Lee

BIS

4226 HTML 1HTML 1

Joseph LeeJoseph LeeEmail: [email protected]: [email protected]

Copyright © 2001 by Joseph Lee 2

BIS

4226

The World Wide WebThe World Wide Web• Client/server architecture:Client/server architecture:1.1. You run a You run a Web browserWeb browser client program on your computer. client program on your computer. 2.2. You request a page from a site on the Web. Your browser sends You request a page from a site on the Web. Your browser sends

a message over the Internet that includes the following: a message over the Internet that includes the following: - the transfer - the transfer protocolprotocol (http://) (http://) - the address, or - the address, or Uniform Resource LocatorUniform Resource Locator (URL), e.g., (URL), e.g., www.somesite.com www.somesite.com

3.3. The The serverserver receives your request and retrieves the requested receives your request and retrieves the requested Web page, which is composed in Web page, which is composed in HTMLHTML (HyperText Markup (HyperText Markup Language). Language).

4.4. The server then transmits the requested page back across the The server then transmits the requested page back across the Internet to your computer. Internet to your computer.

5.5. Your browser program receives the HTML text and displays its Your browser program receives the HTML text and displays its interpretation of the page you requested. interpretation of the page you requested.


BIS

4226URL (1)URL (1)

• Unique adress of an object on the webUnique adress of an object on the web• Independent of protocolIndependent of protocol• url = (type of resource) + (name of url = (type of resource) + (name of

server) + (name of resource)server) + (name of resource)• For example:For example:

ftp://ftp.eee.hku.hk/pub/www/cc32d476.exeftp://ftp.eee.hku.hk/pub/www/cc32d476.exehttp://www.hku.hk/index.htmlhttp://www.hku.hk/index.html


BIS

4226URL (2)URL (2)

• Common URL syntaxCommon URL syntaxURL syntaxURL syntax Type of accessType of accessfile://file:// A local fileA local fileftp://ftp:// A remote fileA remote filehttp://http:// A web pageA web pagehttps://https:// A secured web pageA secured web pagenews://news:// A USENET newsgroupA USENET newsgrouptelnet://telnet:// A remote hostA remote host


BIS

4226

HTTPHTTP

• Hypertext transfer protocolHypertext transfer protocol• A simple request/response protocol run A simple request/response protocol run

over TCPover TCP


BIS

4226

HTMLHTML

• Hypertext markup languageHypertext markup language• A simple page description languageA simple page description language• An HTML page = (an ASCII text file) + An HTML page = (an ASCII text file) +

(embedded control codes)(embedded control codes)• Reference:Reference:http://www.w3c.orghttp://www.w3c.org


BIS

4226

HTML HistoryHTML HistoryHTML (1992)

HTML+ (1993)

HTML 2.0 (1995)

HTML 3.2 (1997)

XHTML (2000)HTML 4.01 (1999)

HTML 4.0 (1997)


BIS

4226

HTML TagsHTML Tags

• A defined set of tagsA defined set of tags• Things inside < >Things inside < >• Case insensitiveCase insensitive• Most HTML tags looks like:Most HTML tags looks like:<Tag>the affected text</Tag><Tag>the affected text</Tag>


BIS

4226Basic TagsBasic Tags

<HTML>…</HTML><HTML>…</HTML> The first tag in every HTML The first tag in every HTML page; indicate that it is an web page; indicate that it is an web pagepage

<HEAD>…</HEAD><HEAD>…</HEAD> Contains the prologue to the Contains the prologue to the rest of the filerest of the file

<TITLE>…</TITLE><TITLE>…</TITLE> Indicates what the web page Indicates what the web page isis

<BODY>…</BODY><BODY>…</BODY> All the text and other contentsAll the text and other contents


BIS

4226

The first HTML pageThe first HTML page

<HTML><HTML><HEAD><HEAD><TITLE>First HTML Page</TITLE><TITLE>First HTML Page</TITLE></HEAD></HEAD><BODY><BODY><H1>Hello World!</H1><H1>Hello World!</H1></BODY></BODY></HTML></HTML>


BIS

4226

Choosing a filenameChoosing a filename

• Examples: Examples: index.html, hello.htmlindex.html, hello.htmlindex.htm, hello.htmindex.htm, hello.htm

• Either Either .html.html or or .htm.htm extension extension• index.htmlindex.html (or (or index.htmindex.htm) has ) has

special meaning!special meaning!

Viewing the result:


BIS

4226

How about thisHow about this

<HTML><HTML><HEAD><HEAD><TITLE>First HTML Page</TITLE><TITLE>First HTML Page</TITLE></HEAD></HEAD><BODY><BODY><H1>Hello <H1>Hello World!</H1>World!</H1></BODY></BODY></HTML></HTML>

It looks the same!:


BIS

4226

FormattingFormatting

• Any extra spaces, tabs, and carriage Any extra spaces, tabs, and carriage returns are ignored!returns are ignored!

• The only thing that format an HTML The only thing that format an HTML page is HTML tagpage is HTML tag


BIS

4226

The The <BODY><BODY> Tag Tag

• specify global settings:specify global settings:ElementElement TagTag

Background colorBackground color <BODY <BODY BGCOLOR="color">BGCOLOR="color">

Regular textRegular text <BODY TEXT="color"><BODY TEXT="color">LinksLinks <BODY LINK="color"><BODY LINK="color">Visited linkVisited link <BODY VLINK="color"><BODY VLINK="color">Active linkActive link <BODY ALINK="color"><BODY ALINK="color">


BIS

4226HeadingsHeadings

• used to divide text into sectionsused to divide text into sections• displayed in bigger, bolder or other displayed in bigger, bolder or other

formattingformatting• 6 levels of headings in HTML6 levels of headings in HTML• H1H1 through through H6H6


BIS

4226

Example: HeadingsExample: Headings

<H1>Heading 1</H1><H1>Heading 1</H1><H2>Heading 2</H2><H2>Heading 2</H2><H3>Heading 3</H3><H3>Heading 3</H3><H4>Heading 4</H4><H4>Heading 4</H4><H5>Heading 5</H5><H5>Heading 5</H5><H6>Heading 6</H6><H6>Heading 6</H6>


BIS

4226

Horizontal RulesHorizontal Rules

• <HR><HR> creates a horizontal line creates a horizontal line• no closing tag and no associated textno closing tag and no associated text• SIZESIZE attribute indicates thickness in attribute indicates thickness in

pixels (default = 2)pixels (default = 2)• WIDTHWIDTH attribute indicates horizontal attribute indicates horizontal

width, either in pixels or the percentage width, either in pixels or the percentage of the screen widthof the screen width


BIS

4226

Example: <HR>Example: <HR>

<HR><HR><HR SIZE=10><HR SIZE=10><HR WIDTH=50><HR WIDTH=50><HR WIDTH=50%><HR WIDTH=50%>


BIS

4226

Line BreaksLine Breaks

• <BR><BR> breaks a line of text at the point breaks a line of text at the point where it appearswhere it appears

• Will not add extra space above or below Will not add extra space above or below the new linethe new line


BIS

4226

Example: <BR>Example: <BR>It's clear that the ad It's clear that the ad hoc development that hoc development that characterized early, characterized early, <BR><BR>content-oriented content-oriented Internet brochureware Internet brochureware doesn't measure up to doesn't measure up to the demands of today's the demands of today's transaction-intensive transaction-intensive environment. environment. <BR><BR>But are But are Web projects simply Web projects simply projects, presenting the projects, presenting the same quality challenges same quality challenges as projects of the past? as projects of the past? <BR><BR>Or does Internet Or does Internet development demand a new development demand a new approach to quality? approach to quality?


BIS

4226

ParagraphsParagraphs

• a paragraph is indicated using <P> … a paragraph is indicated using <P> … </P></P>

• </P> is optional</P> is optional• use extra <P> tags between paragraphs use extra <P> tags between paragraphs

to speed out the text on the pageto speed out the text on the page


BIS

4226

Paragraph AlignmentParagraph Alignment

• the the alignalign attribute specifies how text attribute specifies how text in a paragraph is alignedin a paragraph is aligned

• format:format:

<P ALIGN=center><P ALIGN=left><P ALIGN=right>


BIS

4226

<P ALIGN=center><P ALIGN=center><P align=center><P align=center>It's clear that the ad hoc It's clear that the ad hoc development that development that characterized early, characterized early, content-oriented Internet content-oriented Internet brochureware doesn't brochureware doesn't measure up to the demands measure up to the demands of today's transaction-of today's transaction-intensive environment. But intensive environment. But are Web projects simply are Web projects simply projects, presenting the projects, presenting the same quality challenges as same quality challenges as projects of the past? Or projects of the past? Or does Internet development does Internet development demand a new approach to demand a new approach to quality? quality?


BIS

4226

<P ALIGN=left><P ALIGN=left><P align=left><P align=left>It's clear that the ad hoc It's clear that the ad hoc development that development that characterized early, characterized early, content-oriented Internet content-oriented Internet brochureware doesn't brochureware doesn't measure up to the demands measure up to the demands of today's transaction-of today's transaction-intensive environment. But intensive environment. But are Web projects simply are Web projects simply projects, presenting the projects, presenting the same quality challenges as same quality challenges as projects of the past? Or projects of the past? Or does Internet development does Internet development demand a new approach to demand a new approach to quality? quality?


BIS

4226

<P ALIGN=right><P ALIGN=right><P align=right><P align=right>It's clear that the ad hoc It's clear that the ad hoc development that development that characterized early, characterized early, content-oriented Internet content-oriented Internet brochureware doesn't brochureware doesn't measure up to the demands measure up to the demands of today's transaction-of today's transaction-intensive environment. But intensive environment. But are Web projects simply are Web projects simply projects, presenting the projects, presenting the same quality challenges as same quality challenges as projects of the past? Or projects of the past? Or does Internet development does Internet development demand a new approach to demand a new approach to quality? quality?


BIS

4226

ListsLists

• HTML provides 5 kinds of lists:HTML provides 5 kinds of lists:– Ordered list (numbered)Ordered list (numbered)– Unordered list (bulleted)Unordered list (bulleted)– Glossary listGlossary list– Menu listMenu list– Directory listDirectory list


BIS

4226

Lists - Ordered listsLists - Ordered lists

• Indicated using Indicated using <OL> … </OL><OL> … </OL>• Each item begins with Each item begins with <LI><LI>

Application procedures:<ol><li>Obtain and fill in the application form;<li>Pay the application fee;<li>Submit the application form with receipt</ol>


BIS

4226


BIS

4226

Lists - Unordered listsLists - Unordered lists

• Indicated using Indicated using <UL> … </UL><UL> … </UL>• Each item begins with Each item begins with <LI><LI>

<P>Lists in HTML</P><UL><LI>Ordered lists<LI>Unordered lists<LI>Menus<LI>Directories<LI>Glossary Lists</UL>


BIS

4226


BIS

4226

Bullet TypesBullet Types• <LI TYPE=DISC><LI TYPE=DISC>

– A solid bulletA solid bullet• <LI TYPE=CIRCLE><LI TYPE=CIRCLE>

– A hollow bulletA hollow bullet• <LI TYPE=SQUARE><LI TYPE=SQUARE>

– A square bulletA square bullet• <LI TYPE=A><LI TYPE=A>

– A sequence of uppercase lettersA sequence of uppercase letters• <LI TYPE=a><LI TYPE=a>

– A sequence of lowercase lettersA sequence of lowercase letters• <LI TYPE=I><LI TYPE=I>

– A sequence of uppercase Roman numeralsA sequence of uppercase Roman numerals• <LI TYPE=i><LI TYPE=i>

– A sequence of lower Roman numeralsA sequence of lower Roman numerals• <LI TYPE=1><LI TYPE=1>

– A sequence of numbersA sequence of numbers


BIS

4226

Example: Bullet types Example: Bullet types (Ordered Lists)(Ordered Lists)

Application procedures:Application procedures:<ol><ol><li type=a>Obtain and <li type=a>Obtain and

fill in the fill in the application form;application form;

<li type=a>Pay the <li type=a>Pay the application fee;application fee;

<li type=a>Submit the <li type=a>Submit the application form with application form with receiptreceipt

</ol></ol>


BIS

4226

Example: Bullet types Example: Bullet types (Unordered Lists)(Unordered Lists)

<P>Lists in HTML</P><P>Lists in HTML</P><UL><UL><LI TYPE=CIRCLE>Ordered <LI TYPE=CIRCLE>Ordered

lists lists <LI TYPE=CIRCLE>Unordered <LI TYPE=CIRCLE>Unordered

listslists<LI TYPE=CIRCLE>Menus<LI TYPE=CIRCLE>Menus<LI TYPE=SQUARE>Directories<LI TYPE=SQUARE>Directories<LI TYPE=SQUARE>Glossary <LI TYPE=SQUARE>Glossary

ListsLists</UL></UL>


BIS

4226

Lists - Glossary listsLists - Glossary lists

• a.k.a. Definition lista.k.a. Definition list• each item has a term and a definitioneach item has a term and a definition• indicated using indicated using <DL> … </DL><DL> … </DL>• a term is indicated using a term is indicated using <DT><DT>• a definition is indicated using a definition is indicated using <DD><DD>


BIS

4226

Example: Definition listsExample: Definition lists<H1>Glossary</H1><H1>Glossary</H1><DL><DL><DT>applets<DD>Small <DT>applets<DD>Small

programs in the Java programs in the Java programming language programming language delivered over the Web.delivered over the Web.

<DT>bit<DD>A single, <DT>bit<DD>A single, smallest piece of smallest piece of digital information.digital information.

<DT>chat rooms<DD>Sites <DT>chat rooms<DD>Sites where users can engage where users can engage in interative, real-in interative, real-time, text-based time, text-based discussions.discussions.

</DL></DL>


BIS

4226CommentsComments

• Comments are documentations that Comments are documentations that describe the page itselfdescribe the page itself

• Not rendered by browsersNot rendered by browsers

<!– This is a comment -->


BIS

4226

Lab Exercise 1Lab Exercise 1

Use a text editor (e.g., notepad) to create Use a text editor (e.g., notepad) to create your first HTML file ‘your first HTML file ‘hello.htmlhello.html’ as ’ as follow:follow:

<HTML><HTML><HEAD><HEAD><TITLE>First HTML Page</TITLE><TITLE>First HTML Page</TITLE></HEAD></HEAD><BODY><BODY><H1>Hello World!</H1><H1>Hello World!</H1></BODY></BODY></HTML></HTML>


BIS

4226

Lab Exercise 2Lab Exercise 2

Create an HTML file Create an HTML file that looks like the one that looks like the one on the right, when on the right, when viewed from a viewed from a browser.browser.


BIS

4226

Creating LinksCreating Links

• a link is indicated by a link is indicated by <A> … </A><A> … </A>, the , the anchor taganchor tag

• HREFHREF attribute specifies the name or attribute specifies the name or URL of the file where this link pointsURL of the file where this link points

• Example:Example:

<A HREF=”menu.html”>Main Menu</A>


BIS

4226

Relative PathnamesRelative Pathnames

• point to files based on their location relative to the point to files based on their location relative to the current filecurrent file

PathnamePathname MeaningMeaningHREF=”file.html”HREF=”file.html” file.htmlfile.html is located in is located in

the current directorythe current directoryHREF=“”a/file.html”HREF=“”a/file.html” in the directory called in the directory called aa

HREF=“”a/b/HREF=“”a/b/file.html”file.html”

in the directory in the directory bb, which is , which is in directory in directory aa

HREF=“”../file.html”HREF=“”../file.html” in parent directory (one in parent directory (one level up)level up)


BIS

4226

Absolute PathnamesAbsolute Pathnames

• point to a file by starting at the top level point to a file by starting at the top level of your directory hierarchyof your directory hierarchy

• always begin with a slash (always begin with a slash (//))• Example: the file Example: the file file.htmlfile.html in in

directory directory docsdocs on on CC drive drive

HREF=”/C|/docs/file.html”


BIS

4226

Links to remote pagesLinks to remote pages

• pages contained somewhere on the Webpages contained somewhere on the Web• instead of a filename or a path, the URL instead of a filename or a path, the URL

of that page is specified in of that page is specified in HREFHREF• Example:Example:

HREF=”http://www.hku.hk/space”

BIS 4226 HTML 1 Joseph Lee

Documents

Transcript of BIS 4226 HTML 1 Joseph Lee