CHAPTER 1: INTRODUCTION

1. CHAPTER 1: INTRODUCTION

2. 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

3. 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.

4. 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.

5. 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.

6. 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

7. Hypertext Documents • Linear versus hypertext documents

8. Hypertext Documents • The key to hypertextis 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.

9. 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.

10. 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.

11. 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.

12. Web Servers and Web Browsers

13. 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.

14. 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, …

15. 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.

16. Creating an HTML Document

17. 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.

18. 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: <element>content</element> • Example: <body> Content</body>

19. Creating an HTML Document • A two-sided tag’s opening tag (<p>) and closing tag (</p>) 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: <element /> • Example: <br>

20. The Structure of an HTML Document <html> <head> head content </head> <body> body content </body> </html>

21. 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 <title> content</title> • where content is the text of the Web page title

22. 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

23. 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 < ! - - comment - - >

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

25. 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 <Hn> Content</Hn> Where from n=1 to 6

26. Marking Block-Level Elements • Example: <html > <head><title>Header</title></head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>

27. Marking Block-Level Elements • A paragraph <p>con tent</p> • A block quote <blockquote>content</blockquote> • A generic block-level element <div> content</div>

28. Marking Block-Level Elements • Example: <body> <p>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. </p> <p>The event includes student, government and industrial exhibits, and features presentations from NASA, Ball Aerospace, Rockwell, and IBM. </p> </body>

29. Marking Block-Level Elements

30. Marking Block-Level Elements <p>Doc-Centric Sales: Midwest Region<br /> The Midwest region had another strong sales year with record-setting sales of both the M300-25 and M100-11 models. </p> <blockquote> <p>Doc-Centric Sales: Northeast Region<br /> The Northeast region had a mixed sales year last year. Some models like the C300-25 performed admirably, while others like the C200-20 had disappointing years. </p> </blockquote>

31. Marking Block-Level Elements

32. Marking a List • Ordered Lists: Use an ordered list for items that must appear in a numeric order. • Use <ol> tag. Each item within that ordered list is subsequently • The syntax of an ordered list is: <OL> <LI>Item1 … <LI>Itemn </OL>

33. Marking a List • Example: <body> <p>Education<br/> Colorado State University (1999-2001)</p> <ul type="square"> <li> Graduated May: 2001.M.A. International Telecom</li> <li> Grade Point Averge: 3.5 overrall , 3.9 in major</li> <li> Dean's List :September 1999-May 2001</li> <li> Member,Phi Alpha Omega Honor Society</li> </ul> </body>

34. Marking a List

35. Marking a List • Unordered Lists: To mark a list in which the items do not need to occur in any special order. • Syntax: <UL> <LI>Item1 … <LI>Itemn </UL>

36. Marking a List • Example: <ol> <li> Primary Area</li> <li> Transition</li> <li> Secondary Area</li> <li> Closing Area </li> </ol>

37. Marking a List <ol> <li>Exposition <ul> <li> Primary Area</li> <li> Transition</li> <li> Secondary Area</li> </ul> </li> <li> Development</li> <li> Recapitulation <ol> <li> Primary Area</li> <li> Secondary Area</li> </ol> </li> <li> Coda </li> </ol>

38. Marking a List

39. 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 <dl> <dt>Term1</dt> <dd>description1 </dd> … <dt>Termn</dt> <dd>descriptionn </dd> </dl>

40. Generic Elements: div and span • The div element is used to mark general block level content and has the syntax <div>content</div> • The span element, used to mark general inline content, has the syntax <span>content</span>

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

42. Using Element Attributes • Example: <H1 align="center"><font color="#FF0000">Trường Đại Học Công Nghiệp TP. HCM</font></H1>