CHAPTER 1: INTRODUCTION

CONTENTS  Networks  World Wide Web  Hypertext Documents  Web pages - Web site  Web Servers and Web Browsers  HTML: The Language of the Web  Marking Elements with Tags

Networks  A network is a structure that links several points called nodes allowing for the sharing of information and services.  For computer networks, each node is a device such as a computer, a printer, a scanner …, capable of sending and receiving data electronically over the network.  A computer node is also called a host to distinguish it from other node devices.

Networks  As the network operates, nodes are either providing data to other nodes on the network (server) or requesting data (client).  Networks can follow several different designs. One of the most commonly used designs is the client- server network in which several clients access information provided by one or more servers.

World Wide Web  The World Wide Web is a system of interlinked hypertext documents accessed via the Internet on which users to easily navigate from one topic to another.  With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them by using hyperlinks.

Hypertext Documents  Hypertext is a method of organizing information that gives the reader control over the order in which the information is presented.  With hypertext, you progress through pages in whatever way is best suited to you and your objectives.  Hypertext lets you skip from one topic to another

Hypertext Documents  Linear versus hypertext documents

Hypertext Documents  The key to hypertext is the use of hyperlinks which are the elements in a hypertext document that allow you to jump from one topic to another.  A link may point to another section of the same document, or to another document.  A link can open a document on your computer, or through the Internet, a document on a computer anywhere in the world.

Web pages - Web site  An entire collection of linked documents is referred to as a Web site.  The hypertext documents within a Web site are known as Web pages.  Individual pages can contain text, audio, video, and even programs that can be run remotely.

Web Servers and Web Browsers  A Web page is stored on a Web server, which in turn makes it available to the network.  To view a Web page, a client runs a software program called a Web browser, which retrieves the page from the server and displays it.

Web Servers and Web Browsers  The earliest browsers, known as text-based browsers, were incapable of displaying images. Today most computers support graphical browsers which are capable of displaying not only images, but also video, sound, animations, and a variety of graphical features.

Web Servers and Web Browsers

HTML: The Language of the Web  A Web page is a text file written in a language called Hypertext Markup Language.  A markup language is a language that describes a document’s structure and content.  HTML is not a programming language or a formatting language.

HTML: The Language of the Web  Styles are format descriptions written in a separate language from HTML that tell browsers how to render each element.  Styles are used to format your document  Tools for Creating HTML Documents – Basic text editor like Notepad, NotePad++ – Dreamweaver, …

Creating an HTML Document  It is a good idea to plan out a Web page before you start coding.  Draw a planning sketch or create a sample document using a word processor.  Preparatory work can weed out errors or point to potential problems.

Creating an HTML Document

 In planning, identify a document’s different elements.  An element is a distinct object in the document, like a paragraph, a heading, or a page’s title.  Formatting features such as boldfaced font, and italicized text may be used.

Creating an HTML Document  The core building block of HTML is the tag, which marks each element in a document.  Tags can be two-sided or one-sided.  A two-sided tag is a tag that contains some document content. General syntax for a two-sided tag: content – Example: Content

Creating an HTML Document  A two-sided tag’s opening tag ( ) and closing tag ( ) should completely enclose its content.  HTML allows you to enter element names in either uppercase or lowercase letters.  A one-sided tag contains no content. General syntax for a one-sided tag: – Example:

The Structure of an HTML Document head content body content

The Structure of an HTML Document  Where head content and body content are the content you want to place within the document 's head and body.  To specify the page title, enter the following tag within the head section content  where content is the text of the Web page title

Create the basic HTML document  Start your text editor (NotePad, NotePad++), opening it to a blank document  Type the code HTML in your document  Save file with the extension.html or htm

Adding Comments  As you create a Web page, you might want to add notes or comments about your code.  These comments might include the name of the document's author and the date the document was created. The syntax

Displaying an HTML File  As you continue modifying the HTML code, you should occasionally view the page with your Web browser to verify that you have not introduced any errors.  Press F5 to refresh the web page

Marking Block-Level Elements  Working with Headings – Heading elements are elements that contain the text of main headings on the Web page. – They are often used for introducing new topics or dividing the page into topical sections. The syntax to mark a heading element is Content Where from n=1 to 6

Marking Block-Level Elements  Example: Header Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Marking Block-Level Elements  A paragraph con tent  A block quote content  A generic block-level element content

Marking Block-Level Elements  Example: The Space Expo is an annual, student-run event that showcases recent developments in astronomy and space sciences and demonstrates how these developments can be applied to everyday life. The event includes student, government and industrial exhibits, and features presentations from NASA, Ball Aerospace, Rockwell, and IBM.

Marking Block-Level Elements

Doc-Centric Sales: Midwest Region The Midwest region had another strong sales year with record-setting sales of both the M and M models. Doc-Centric Sales: Northeast Region The Northeast region had a mixed sales year last year. Some models like the C performed admirably, while others like the C had disappointing years.

Marking Block-Level Elements

Marking a List  Ordered Lists: Use an ordered list for items that must appear in a numeric order. – Use tag. Each item within that ordered list is subsequently – The syntax of an ordered list is: Item1 … Itemn

Marking a List  Example: Education Colorado State University ( ) Graduated May: 2001.M.A. International Telecom Grade Point Averge: 3.5 overrall, 3.9 in major Dean's List :September 1999-May 2001 Member,Phi Alpha Omega Honor Society

Marking a List

 Unordered Lists: To mark a list in which the items do not need to occur in any special order. – Syntax: Item1 … Itemn

Marking a List  Example: Primary Area Transition Secondary Area Closing Area

Marking a List Exposition Primary Area Transition Secondary Area Development Recapitulation Primary Area Secondary Area Coda

Marking a List

Definition Lists  Definition list: which contains a list of terms, each followed by the term's description. – The syntax for creating a definition list is Term1 description1 … Termn descriptionn

Generic Elements: div and span  The div element is used to mark general block level content and has the syntax content  The span element, used to mark general inline content, has the syntax content

Using Element Attributes  You apply an attribute to an element by adding it to the element's markup tag using the syntax content  attribute1, attribute2, etc. are the names of attributes associated with the element  value1, value2, etc. are the values of those attributes.

Using Element Attributes  Example: Trường Đại Học Công Nghiệp TP. HCM