Chapter 1 introduction
This presentation is the property of its rightful owner.
Sponsored Links
1 / 42

CHAPTER 1: INTRODUCTION PowerPoint PPT Presentation


  • 82 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

CHAPTER 1: INTRODUCTION

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


Chapter 1 introduction

CHAPTER 1: INTRODUCTION


Contents

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

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.


Networks1

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

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.


Web servers and web browsers2

Web Servers and Web Browsers


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 document1

Creating an HTML Document


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:

    <element>content</element>

    • 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

<html>

<head>

head content

</head>

<body>

body content

</body>

</html>


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 >

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


Marking block level elements2

Marking Block-Level Elements

  • A paragraph

    <p>con tent</p>

  • A block quote

    <blockquote>content</blockquote>

  • A generic block-level element

    <div> content</div>


Marking block level elements3

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>


Marking block level elements4

Marking Block-Level Elements


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>

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


Marking block level elements6

Marking Block-Level Elements


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:

      <OL>

      <LI>Item1

      <LI>Itemn

      </OL>


Marking a list1

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>


Marking a list2

Marking a List


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:

      <UL>

      <LI>Item1

      <LI>Itemn

      </UL>


Marking a list4

Marking a List

  • Example:

    <ol>

    <li> Primary Area</li>

    <li> Transition</li>

    <li> Secondary Area</li>

    <li> Closing Area </li>

    </ol>


Marking a list5

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>


Marking a list6

Marking a List


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

      <dl>

      <dt>Term1</dt>

      <dd>description1 </dd>

      <dt>Termn</dt>

      <dd>descriptionn </dd>

      </dl>


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

    <div>content</div>

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

    <span>content</span>


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>


  • Login