Chapter 1 introduction
1 / 42

CHAPTER 1: INTRODUCTION - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' CHAPTER 1: INTRODUCTION' - dwight

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


  • 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


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


  • 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
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 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 documents1
Hypertext Documents

  • Linear versus hypertext documents

Hypertext documents2
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.

Web pages web site
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
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 browsers1
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.

Html the language of the web
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 web1
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
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 document2
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 document3
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:


    • Example:

      <body> Content</body>

Creating an html document4
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>

The structure of an html document
The Structure of an HTML Document



head content



body content



The structure of an html document1
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

Create the basic html document
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
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 - - >

Displaying an html file
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

Marking block level elements
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

Marking block level elements1
Marking Block-Level Elements

  • Example:

    <html >



    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    <h3>Heading 3</h3>

    <h4>Heading 4</h4>

    <h5>Heading 5</h5>

    <h6>Heading 6</h6>



Marking block level elements2
Marking Block-Level Elements

  • A paragraph

    <p>con tent</p>

  • A block quote


  • A generic block-level element

    <div> content</div>

Marking block level elements3
Marking Block-Level Elements

  • Example:


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


Marking block level elements5
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>


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


Marking a list
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:





Marking a list1
Marking a List

  • Example:



    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>



Marking a list3
Marking a List

  • Unordered Lists: To mark a list in which the items do not need to occur in any special order.

    • Syntax:





Marking a list4
Marking a List

  • Example:


    <li> Primary Area</li>

    <li> Transition</li>

    <li> Secondary Area</li>

    <li> Closing Area </li>


Marking a list5
Marking a List




<li> Primary Area</li>

<li> Transition</li>

<li> Secondary Area</li>



<li> Development</li>

<li> Recapitulation


<li> Primary Area</li>

<li> Secondary Area</li>



<li> Coda </li>


Definition lists
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



      <dd>description1 </dd>


      <dd>descriptionn </dd>


Generic elements div and span
Generic Elements: div and span

  • The div element is used to mark general block level content and has the syntax


  • The span element, used to mark general inline content, has the syntax


Using element attributes
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.

Using element attributes1
Using Element Attributes

  • Example:

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