Lecture 1: Introduction to Internet Programming (JavaScript, Ajax)
Internet
- World wide public computer networks- Its services:
+Email
+Web
+ Chat
+ File transfer
+ Much more…
-Organization private network
- Share securly:
+ information and operation
+ Within the organization
*Note: the organization can be geographically distributed.
Usages
- Workforce productivity
- Time & cost effective
- Communication
- Business operation & management
- Enhance collaboration
- Promote common corporate culture
- Cross platform capability
Extranet
- Private network
- Organization
- Its Partners: supplier, customers…
Share information and operations.
# Exchange large volume of data
~ Share
- Product catalogue
- Training program
- Services
- News
Address Schemes
# Internet Address Classes (decimal Notation)
- Class C: NetID.NetID.NetID.hostID (192-223)
- Class B: NetID.NetID.hostID.hostID (128-191)
- Class A: NetID.hostID.hostID.hostID (1-126)
# Example:
64.233.187.99
192.168.0.100
IP Address
IANA Reserved Private Network RangesStart of rangeEnd of range
Web Address
- Internet Names
host.subnet.organization.type
# Rightmost identifies
- the type
-- organization
-country
– edu, com, mil, org, net
– kh, vn, th, cn, ca, de, uk, fr, au, jp
-- Example: www.rupp.edu.kh
What is an Internet ?
•The Internet is a medium for instant communication via e-mail, chat rooms, newsgroups and e-commerce (figure 1.1)
•The Internet is a large network of networks
•The WWW is the largest and most popular segment of the Internet. It supports all multimedia capabilities (text, color, graphics, images, audio and video)
•A web page (HTML document) is the basic information unit of the WWW
The roots of the Internet goes back to the 1960s when networking research began
The sequence of Internet development is:
ARPANET (1960s) => CSNET, USENET, BITNET, NSFNET (1970s, 1980s) => WorldWideWeb (1990s - )
The Web was conceived by Berner-Lee in the CERN Center in 1989
The Web exploded when the Mosaic browser became available from the NCSA Center at the University of Illinois, Urbana-Champaign in 1992
History of the Internet/WWW
Internet, Intranets, and Extranets are all networks that transmit data. The difference is the geographical limits and level of security (fig. 1.3)
An Intranet is a secure (via the use of a firewall) network that is contained within an organization. A firewall is a special hardware and software. Intranets are used only by company employees
An Extranet is a secure network that allows outsiders to use an Intranet with permission. It is used to connect company suppliers , contractors and partners with the company employees
Intranets and Extranets
KUTM HTML
<HEAD>
KUTM HTML
<BASE> tag
• The <BASE> tag allows Web authors to specify a reference URL (path) from which all relative URLs are measured from
• The <BASE> tag must be used in the <HEAD> section
• Example:
<HTML><HEAD><TITLE>The BASE tag Web page</TITLE>
<! Specify the folder (path) where the HTML files of the <A> tags shown below reside>
<BASE HREF = “file://c:/windows/desktop/”></HEAD><BODY>
<A HREF = “myFileOne.html”>Check our first product</A>
<A HREF = “myFileTwo.html”>Check our second product</A>
<A HREF = “myFileThree.html”>Check our thirdproduct</A></BODY>
</HTML>
History of the Internet/WWW
• The roots of the Internet goes back to the 1960s when networking research began
• The sequence of Internet development is:
– ARPANET (1960s) => CSNET, USENET, BITNET, NSFNET (1970s, 1980s) => World Wide Web (1990s - )
• The Web was conceived by Berner-Lee in the CERN Center in 1989
• The Web exploded when the Mosaic browser became available from the NCSA Center at the University of Illinois, Urbana-Champaign in 1992
Intranets and Extranets
• Internet, Intranets, and Extranets are all networks that transmit data. The difference is the geographical limits and level of security (fig. 1.3)
• An Intranet is a secure (via the use of a firewall) network that is contained within an organization. A firewall is a special hardware and software. Intranets are used only by company employees
• An Extranet is a secure network that allows outsiders to use an Intranet with permission. It is used to connect company suppliers , contractors and partners with the company employees
Introduction
• Web pages are written using HTML
• Two key concepts of HTML are hypertext (links Web pages together) and markup (embeds special tags in Web pages to structure and format them)
• A Web page, regardless of how complex it looks, can have a maximum of eleven elements. They are text, hyperlinks, color, lists, images, image maps, sound, video, forms, frames, and tables
• HTML supports all the MIME extensions
Design of Web pages
• A Web page is content and design. The design should enhance content presentation
• Page design is related to the goal of the page whether it is to sell a product or convey information
• When designing a Web page, Web authors should take advantage of HTML power such as links, colors, etc.
Markup language
• HTML Markup language uses tags
• HTML tags convert Web page design into an actual Web page that can be viewed in a browser
• HTML tags surround page content to format it
• Browsers render HTML tags and display their results
• The generic format of an HTML tag is
<tag_name> content goes here </tag_name>
• Many HTML tags have attributes to provide finer control of the tag formatting results
Developing HTML documents
• Top-down approach: build the Web page elements using an HTML editor, and then view the HTML code later
Steps:
• Open an HTML editor
• Add HTML elements using the editor’s GUI
• Save the automatically generated HTML code in a file as xxx.html
• Exit the editor and view the page
Bottom-up approach: write HTML code in a text editor, and then view the Web page in a browser
Steps:
• Open a text editor
• Enter text and tags
• Save file as xxx.html
• Open the file in a browser to view the Web page
• Repeat above steps if you need to debug the page
HTML document structure
• Three parts make a well-structured HTML document: header, body, and footer
• The header includes the <HTML>, <HEAD> and <TITLE> tags
• The body includes the <BODY> tag
• The footer includes the <ADDRESS> tag
• HTML tags do not have to appear in caps
HTML tags and categories
• HTML tags may have a matching start and end tags; e.g. <H1>…</H1>. Other tags may not close; e.g. <HR>
• HTML tags may be nested according to this rule: first open, last closed; or last open, first closed; e.g. <H1><B> …</B></H1>
• The broad categories of HTML tags are structure, text, hyperlinks, lists, colors, images, image maps, sound, video, forms, frames, and tables
Document structure tags
• The basic structure of an HTML file is:
<HTML>
<TITLE> Title goes here </TITLE>
</HEAD>
<BODY>
Body and content go here
</BODY>
<ADDRESS>
footer goes here
</ADDRESS>
</BODY>
</HTML>
(Cont’d)
Example 1.1 Document
structure tags
<HTML>
<HEAD>
<TITLE>My Web page Template</TITLE>
</HEAD>
<BODY>
Page contents go here
<ADDRESS>
Copyright © 2000<BR>
Abe Zeid<BR>
please e-mail me at zeid@coe.neu.edu<BR>
Revised - January 2000<BR>
</ADDRESS>
Text and tags
• Text, in general, consists of headings, paragraphs, and words. HTML has tags to format each
• Heading tags are <H1> - <H6>, with <H1> providing the largest size text, and <H6> providing the smallest size. All <H> tags have the ALIGN attribute
• The <P> tag is the only tag for paragraphs. It has the ALIGN attribute
• The tags for words are <B>, <I>, <U>, <BR>, <FONT>, <CENTER>, <HR>, <BLOCKQUOTE>, <BIG>, <CITE>, <CODE>, <EM>, <KBD>, <SMALL>, and <STRONG>
• The <FONT> has the attributes COLOR and SIZE
• The <HR> has the attributes ALIGN, COLOR, NOSHADE, SIZE, and WIDTH
(Cont’d)
Text and tags
Example 1.2 Heading tags
<HTML>
<HEAD>
<TITLE>Heading tags Web page</TITLE>
</HEAD>
<BODY>
<H1>This text is size H1</H1><BR>
<H2 ALIGN = "center">
This text is centered and size H2</H2><BR>
<H3 ALIGN = "right">
This text is right justified and size H3
</H3><BR>
<H4>This text is size H4</H4><BR>
<H5>This text is size H5</H5><BR>
<H6>This text is size H6</H6>
</BODY>
</HTML>
(Cont’d)
• Example 1.3 The <P> tag
<HTML>
<HEAD>
<TITLE>Paragraph tag Web page</TITLE>
</HEAD>
<BODY>
This page illustrates how to use the paragraph tag to create paragraphs.
<P>When surfers browse the Web, they are accessing and reading home Web pages and pages that are linked to them. These pages are written using a scripting language called HTML (HyperText Mark up Language). We here begin covering HTML and page layout, organization and design.
<P>The markup language is a method to embed special tags that describe the structure as well as the formatting of a document. The markup language allows the non-sequential way of reading HTML documents. The simplicity and power of HTML let anyone create Web documents. Making Web documents is easy and straight forward. The markup nature of HTML is what is behind the incredible breadth and reach of the Web
</BODY>
</HTML>
(Cont’d)
• Example 1.4 Word tags
<HTML><HEAD><TITLE>Formatting tags Web page</TITLE>
</HEAD><BODY>
<B>This text uses the Bold tag</B><BR>
<BIG>This text uses the BIG tag</BIG><BR>
<BLOCKQUOTE>This text uses the BLOCKQUOT tag</BLOCKQUOTE><BR>
<CENTER>This text uses the CENTER tag</CENTER><BR>
<CITE>This text uses the CITE tag</CITE><BR>
<CODE>This text uses the CODE tag</CODE><BR>
<EM>This text uses the EM tag</EM><BR>
<FONT SIZE=2 COLOR="green">This text uses the FONT tag</FONT><BR>
<HR SIZE= 5 WIDTH=50% ALIGN="center" NOSHADE>
<I>This text uses the Italic tag</I><BR>
<KBD>This text uses the KBD tag</KBD><BR>
<SMALL>This text uses the SMALL tag</SMALL><BR>
<STRIKE>This text uses the STRIKE tag</STRIKE><BR>
<STRONG>This text uses the STRONG tag</STRONG><BR>
<U>This text uses the Underline tag</U><BR>
</BODY></HTML>
Links and tags
• The <A> tag creates hyperlinks between documents, figure 7.5, (known as interdocument links) and anchors within documents (known as intradocument links)
• The attributes of the <A> tag are HREF, TITLE, NAME, CHARSET, TYPE, HREFLANG, and REL
• Example 1.5 The <A> tag
<HTML><HEAD>
<TITLE>Hyperlink tag Web page</TITLE>
</HEAD><BODY>
<H2>This Web page uses the <A> tag with some of its attributes</H2>
<A HREF="http://www.neu.edu">This link uses a Web server</A><BR>
<A HREF=mailto:zeid@coe.neu.edu>This link uses the mailto: protocol</A><BR>
<A HREF="ftp://ftp.netscape.com">This link uses the ftp: protocol</A><BR>
<A HREF="telnet://elvis.coe.neu.edu">This link uses the telnet: protocol</A><BR>
<A HREF="http://www.neu.edu" TITLE="Northeastern Univ. Web site">This link has a title to illustrate using the TITLE attribute</A><BR>
<A HREF="http://www.w3.org" CHARSET="ISO-8859-1">This link uses the CHARSET attribute</A><BR>
<A HREF="example6.4.html">This link uses the relative path of a local file</A><BR>
<A HREF="file://c:/windows/desktop/example6.4.html">This link uses the absolute path of a local file</A><BR>
</BODY></HTML> (figure 7.7)
Anchors
• Anchors are links created within the same Web page
• Anchors are used to create a table of contents for a Web page, or to specify a given location in a Web page
• Anchors are created via using the <A> tag and its HREF and NAME attributes
• Some URLs use anchors in this names
(Cont’d)
• Example 1.6 Anchors (shortened) (figure 7.8)
<HTML><HEAD><TITLE>Anchors Web page</TITLE></HEAD><BODY>
<! Define a destination tag>
<A NAME="Contents"><B>Table of contents</B></A><BR>
<! Define source tags>
<A HREF="#Section1">Document structure tags</A><BR>
<A HREF="#Section2">Text and text tags</A><BR>
<A HREF="#Section3">Links and link tags</A><BR>
<BASE> tag
• The <BASE> tag allows Web authors to specify a reference URL (path) from which all relative URLs are measured from
• The <BASE> tag must be used in the <HEAD> section
• Example:
<HTML><HEAD><TITLE>The BASE tag Web page</TITLE>
<! Specify the folder (path) where the HTML files of the <A> tags shown below reside>
<BASE HREF = “file://c:/windows/desktop/”></HEAD><BODY>
<A HREF = “myFileOne.html”>Check our first product</A>
<A HREF = “myFileTwo.html”>Check our second product</A>
<A HREF = “myFileThree.html”>Check our thirdproduct</A></BODY>
</HTML>
Meta data and tags
• Meta data refers to data that is not part of the content of an HTML document
• Meta data describes Web pages to search engines.
• Search engines use meta data to index and rank page hits in a given search
• The <META> tag declares meta data. It must be used in the <HEAD> section.
• Example:
<META NAME = “description” CONTENT = “Everything you would want to know about using HTML”>
<META NAME = “keywords” CONTENT = “HTML 4.0, tags, attributes, editors”>
<A HREF="#Section4">Developing HTML documents</A><BR>
<! Define destination tag for Section1 source tag>
<P><A NAME="Section1"><B><I>Document structure tags</I></B><BR>
A well-structured HTML document ... <BR>
<! Define a source tag for the first destination tag on the top>
<A HREF="#Contents">Return to table of contents</A>
<! Define destination tag for Section2 source tag>
<P><A NAME="Section2”><B><I>Text and text tags</I></B><BR>
One of the main elements of a Web ... <BR> … </BODY></HTML>
Meta data and tags
• Meta data refers to data that is not part of the content of an HTML document
• Meta data describes Web pages to search engines.
• Search engines use meta data to index and rank page hits in a given search
• The <META> tag declares meta data. It must be used in the <HEAD> section.
• Example:
<META NAME = “description” CONTENT = “Everything you would want to know about using HTML”>
<META NAME = “keywords” CONTENT = “HTML 4.0, tags, attributes, editors”>
Building Web pages
• Here are some rules to writing Web pages
• Provide excellent content and look
• Keep page design and layout simple/easy to follow
• Display most important information at top of page
• Do not cram the page with too much information. Have enough white space in the page
• Keep page short (one screen long)
• Choose the right page title and headings
• Divide the page into paragraphs and lists
Hierarchy of Web pages
• A Web site consists of multiple Web pages with a home (index) page that have links to the other pages
• Web authors usually develop structures for their Web sites
• Web authors may design their structures on a piece of paper
• The most natural structure is a Web (figure 7.12)
Tutorials
Tutorial 1.14.1 A Web page with
hyperlinks (top tags are not shown)
<BODY><H2><B><CENTER>
<FONT COLOR = "red">Welcome to my Web page</FONT></CENTER></B></H2>
<B><CENTER><FONT COLOR = "red">Name goes here</FONT></CENTER></B>
<B><CENTER><FONT COLOR = "red">
Address goes here</FONT></CENTER></B>
<B><CENTER><FONT COLOR = "red">phone number goes here</FONT></CENTER></B>
<P>Let me introduce myself. I have mastered HTML.<BR>
I have been working with many people. This is my personal<BR>
Web page, in case you want to know more about me.
<P><A HREF="resume.html">Resume</A><BR>
<A HREF="professional.html">Professional</A><BR>
<A HREF="personal.html">Personal</A><BR><P>
<ADDRESS>Copyright © 2000<BR>Abe Zeid<BR>
<A HREF="mailto:zeid@coe.neu.edu">Please e-mail me</A><BR>
Revised - January 2000<BR></ADDRESS></BODY></HTML>
Tutorials
Tutorial 1.14.1 A Web page with
hyperlinks (top tags are not shown)
<BODY><H2><B><CENTER>
<FONT COLOR = "red">Welcome to my Web page</FONT></CENTER></B></H2>
<B><CENTER><FONT COLOR = "red">Name goes here</FONT></CENTER></B>
<B><CENTER><FONT COLOR = "red">
Address goes here</FONT></CENTER></B>
<B><CENTER><FONT COLOR = "red">phone number goes here</FONT></CENTER></B>
<P>Let me introduce myself. I have mastered HTML.<BR>
I have been working with many people. This is my personal<BR>
Web page, in case you want to know more about me.
<P><A HREF="resume.html">Resume</A><BR>
<A HREF="professional.html">Professional</A><BR>
<A HREF="personal.html">Personal</A><BR><P>
<ADDRESS>Copyright © 2000<BR>Abe Zeid<BR>
<A HREF="mailto:zeid@coe.neu.edu">Please e-mail me</A><BR>
Revised - January 2000<BR></ADDRESS></BODY></HTML>
Tutorial 1.14.2 A Web page
With anchors (shortened)
<A NAME="Contents"><B>Table of contents</B></A><BR><! Define source tags>
<A HREF="#resume">Resume</A><BR>
<A HREF="#professional">Professional</A><BR>
<A HREF="#personal">Personal</A><BR><P>
<! Define destination tag for resume source tag>
<P><A NAME="resume"><B><FONT COLOR = "blue">RESUME</FONT></B><BR>
<B><I>Education:</I></B><BR>
Education credentials go here<BR>
<B><I>Experience:</I></B><BR>
Current and previous employment go here<BR>
<B><I>Skills:</I></B><BR>
computer, software, and other skills go here<BR>
<! Define a source tag for the first destination tag on the top>
<A HREF="#Contents">Return to table of contents</A>
Tutorial 1.14.3 ISO
character sets
<HTML><HEAD><TITLE>Using HTML character sets</TITLE>
</HEAD><BODY>
<H2><B><CENTER><FONT COLOR = "red">Using ISO 8859-1 (Latin-1) and Greek character sets</FONT></CENTER></B></H2>
54>30<P>25<10
<P>You may want to consider joining
the πτΣ (Pi Tau Sigma)
and τβπ (Tau Beta Pi) honor societies.
<P><ADDRESS>
Copyright © 2000<BR>Abe Zeid<BR>
<A HREF="mailto:zeid@coe.neu.edu">Please e-mail me</A><BR>
Revised - January 2000<BR>
</ADDRESS>
</BODY>
</HTML>
Tutorial 6.11.4 Using
hyperlinks as footers (shortened)
<A HREF="resume.html">Resume</A><BR>
<A HREF="professional.html">Professional</A><BR>
<A HREF="personal.html">Personal</A><BR>
<P><! Add hyperlink footer>
<! Use this style><P><CENTER>
[<A HREF="tutorial6.4.html">Home Page</A>]
[<A HREF="resume.html">Resume</A>]
[<A HREF="professional.html">Professional</A>]
[<A HREF="personal.html">Personal</A>]
</CENTER>
<! Or use this style>
<P><CENTER>|<A HREF="tutorial6.4.html">Home Page</A>|
<A HREF="resume.html">Resume</A>|
<A HREF="professional.html">Professional</A>|
<A HREF="personal.html">Personal</A>|
Tutorial 6.11.4 Using
hyperlinks as footers (shortened)
<A HREF="resume.html">Resume</A><BR>
<A HREF="professional.html">Professional</A><BR>
<A HREF="personal.html">Personal</A><BR>
<P><! Add hyperlink footer>
<! Use this style><P><CENTER>
[<A HREF="tutorial6.4.html">Home Page</A>]
[<A HREF="resume.html">Resume</A>]
[<A HREF="professional.html">Professional</A>]
[<A HREF="personal.html">Personal</A>]
</CENTER>
<! Or use this style>
<P><CENTER>|<A HREF="tutorial6.4.html">Home Page</A>|
<A HREF="resume.html">Resume</A>|
<A HREF="professional.html">Professional</A>|
<A HREF="personal.html">Personal</A>|
<HTML><HEAD>
<TITLE>Using HTML character sets</TITLE>
</HEAD><BODY>
<H2><B><CENTER><FONT COLOR
= "red">Using ISO 8859-1 (Latin-1)
character sets</FONT></CENTER></B></H2>
Borrowing $5000 @ 10% annual
rate costs$500 a year.<P>
<ADDRESS>
Copyright © 2000<BR>
Abe Zeid<BR>
<A HREF="mailto:zeid@coe.neu.edu">
Please e-mail me</A><BR>
Revised - January 2000<BR>
</ADDRESS></BODY></HTML>
<HTML>
<HEAD>
<TITLE>Using the BASEFONT tag</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE = 5>
<FONT SIZE = +2 COLOR = "red">This text is size 7</FONT><BR>
<FONT SIZE = +1 COLOR = "blue">This text is size 6</FONT><BR>
<FONT COLOR = "green">This text is size 5</FONT><BR>
<FONT SIZE = -1 COLOR = "red">This text is size 4</FONT><BR>
<FONT SIZE = -2 COLOR = "brown">This text is size 3</FONT><BR>
<FONT SIZE = -3 COLOR = "green">This text is size 2</FONT><BR>
<FONT SIZE = -4 COLOR = "blue">This text is size 1</FONT>
</BODY>
</HTML>
• រូបភាព
• មេរៀន HTML
• គំនិតល្អៗ ជុំវិញពិភពលោក
• រូបភាពអស់សំណើច
• ប្រវត្តិសង្ខេប
• FACEBOOK
• GMAIL
• My Upload ក្នុង Youtube
• GOOGLE
• ពត័រមានដើមអំពិល
Edition Mr. TY TORN ®
Email: ty.torn@gmail.com™
Tell: (+855-10) 708 887/ (+855-97) 746 9888
វិបផ្សាយបន្ថែមទៀត
