Web design

Create

Internet

Internet Terminology

What you need to know to succeed

What is the Internet

Internet – A worldwide collection of networks that link together businesses, governments, education, and individuals.

How? – Modems, Satellite, telephone lines and other communication devices

How do we use the Internet?

World Wide Web (WWW)Is the part of the Internet that supports multimedia and consists of a collection of linked documents.

What makes WWW work?

Outstanding feature - hypertext, a method of instant cross-referencing.

Hypertext can be: buttons

images

or portions of images that are "clickable."

When pointer changes into a hand

click and be transferred to another site.

Hypertext, what is it?

Hypertextthe organization of information units

Allows a user pick where to go.

Hypertext was the main concept that led to the invention of the World Wide Web.

Hypertext vs. Hypermedia vs. Hyperlinks

Hypermediaderived from hypertext

include links using any set of multimedia objects, including sound, motion video, and virtual reality.

hyperlink is a synonym for both link and hypertext link.

So Links are…

A link is a selectable connection from one word, picture object to another.

The most common form of link is the highlighted word or picture

The highlighted object is referred to as an anchor.

So what does the Web link together?

Web PagesA collection of documents that can contain:

TextMultimediaGraphicsSoundvideo

Web SitesA Web site is a related collection of files or pages that include a home page

What is a homepage?

The home page Starting point for a browser

Starting point of a web page

"browsing" originated prior to the Web as a generic term for user interfaces that let you browse text files online.

What is a browser?

A browser is an application programWeb browser is a client program that uses the Hypertext Transfer Protocol (HTTP) to make requests of Web servers The first widely-used browser, Netscape Navigator. Microsoft followed with its Microsoft Internet Explorer.

Where is all this stuff stored?

Server or Host:A server is a computer that holds the files for one or more sites.

Specific to the Web, a Web server/host is the computer program (housed in a computer) that serves requested HTML pages or files.

What is a client?

A client is the requesting program or user

The Web browser in your computer is a client that requests HTML

What is HTTP?

The Hypertext Transfer Protocol (HTTP) is the set of rules for exchanging files on the World Wide Web

HTTP is an application protocol

Protocols???

A special set of rules for telecommunication connections to communicate. Both client and server must recognize and observe a protocol. Protocols are often described in an industry or international standard.

Types of protocols

TCP/IP (Transmission Control Protocol/Internet Protocol) is the basic communication language or protocol of the InternetHow it works:

Your computer is provided with a copy of the TCP/IP program when connectedEvery other computer that you may send messages to or get information from also has a copy of TCP/IP.

Types of Protocol

File Transfer Protocol (FTP), a standard Internet protocol, is the simplest way to exchange files between computers on the Internet

FTP is commonly used to transfer files to the computer that acts as the server It's also commonly used to download programs and other files to your computer from other servers.

Types of Protocol

SMTP (Simple Mail Transfer Protocol) is a TCP/IP protocol used in sending and receiving e-mail

users typically use a program that uses SMTP for sending e-mail and either POP3 or IMAP for receiving messages

How does the information find where it is going?

TCP takes care routing through the Internet

IP delivery of the data

IP…

Each computer must have its own address on the Internet in order to communicates.

unique network number

So IPs and TCPs deal with Packets and…

A packet is the unit of data

Each of these packets are numbered and include the Internet address of the destination.

They may travel different routes to arrive

They reassemble at destination

Routers

A router is a device or software

determines the next network point to which a packet should go

A router connects to at least two networks

A router is located where one network meets another

So what about Domains?

a domain consists of a set of network addresses

Then what is a domain name?

A domain name locates an organization or other entity on the Internet.

Part of the Uniform Resource Locator(URL) The domain name is mapped to an IP address

A domain name is a meaningful and easy-to-remember "handle" for an Internet address.

And a web page is what?

HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page.

The markup tells the Web browser how to display a Web page's words and images for the user.

There’s more??

A URL is the address of a file accessible on the Internet.

The type of file depends on the Internet application protocol

So does it all mean?

HTTP://WWW.Yahoo.com

Hypertext Transfer ProtocolCommercial

Domain Name

Host computerName

Web Page Design

When creating a web page…

Just because you found it on the web doesn’t mean you can “borrow the code”, create your own work!Spelling is importantColor combinations can be hazardous to your viewing audienceThink about design…. Functional and attractive

Elements

The title – the first thing the you see and identifies the purpose or content of the page

The bodyContains the information to be displayed in your web browser window

The backgroundColor, picture or graphic… don’t over power your information

Elements

Headings – Sets off different sections of your pageSeparate main topics and make your page easier to read

Graphics or images – Icons, bullets, photos, illustrations or other pictures

Horizontal Rules – Inline images that are lines across your pagesUse to separate ideas and graphical break up the page

Links – Navigation between pages

Web site Organization

Linear – Your pages are displayed to be read one page after another

Hierarchical – Displays pages in a tree like structure, similar to a table of contents or index

Webbed – No set structure, no particular order in which pages are to be read

Web Page Organization

What will organizeHeadings Horizontal Rule Paragraphs

Use to divide large portions of text so it is more readable shorter sections

Web Page Organization

Lists – Utilize whenever text is conducive to bullets, a good way to organize information

Page Length – A half a page is too little but 6 pages is too much… find a happy medium

Emphasize the most important first by putting it at the top, users want to find information quickly and may not want to scrollIncorporate your email address into the page and include a date of last modification

Creating an HTML Document

HTML

Typically, these tags come in pairs Tags are a sequence of characters that start with a < and end with a >.

HTML

When used in pairs, HTML tags are always related.

An opening tag and a closing tag. Some HTML tags appear alone, without a closing tag. To set off HTML tags you can use capital letters and indentationTags are usually not case sensitive, sometimes attributes are though

The Tags

<HTML> </HTML>browsers recognize the <HTML>tag as the beginning of a web page They are the start and end of a web document.

TagsAn HTML document is divided in into two different sections: the Head and the Body.<HEAD> </HEAD>

The <HEAD> tag marks an HTML document's starting information. By default the heading contains the document title, index information and important settings for that specific page.

<BODY> </BODY>The <BODY> tag is what displays the rest of an HTML document. organizes the meat of your document. The attributes of this tag effects determines how info is displayed.

Basic structure

<HTML><HEAD>

<TITLE> </TITLE></HEAD><BODY></BODY></HTML>

What is included?

The Blue Bar Title:requires using the <TITLE> </TITLE> tags.Titles can be any length desired. The <TITLE> tags are within your <HEAD> and </HEAD> tags on your web page.use one that will describe the page accurately

Background Color

To change the default color of your entire page add an attribute in your <BODY> tag. To Change Background color - <BODY BGCOLOR="color">To change text color <Body text = “color”>

Headings

Headings - <Hn> </Hn>6 different sizes headings are eye catching Heading Tags can each use one of the following attributesAlign = “left” Align = “right”Align = “Center” Align = “Justify”

Always use headings in numerical order.

Paragraphs

<P> </P> tag Paragraphs can also have the same attributes as the heading tags

<h2>The Paragraph Tag</h2>

<p>The paragraph tag has an optional ending tag. When the browser finds a paragraph tag it starts a new line and adds vertical space between the lines.

<p align = “right”> Always type large blocks of text using paragraph tags.</p>

Horizontal Rule

Horizontal Rule.... <HR>The horizontal rule tag is a different way to separate and organize paragraphs. The <HR> tag inserts a solid line that goes completely across the screen  Not a container tag,

Horizontal Rule Attributes<HR align=” “ width=” “ size=” “>

Align = “left”, “right”,”center”Size = n : specifies the rule width in pixelsWidth = “%”: length measured as percentage of document widthColor = “” – specify color of rule

The Break Tag

Line Breaks.... <BR>the <BR> tag places text on the next line without a blank line in between.

<BR> tag is similar to the carriage return on the type writer.

 

Add to code:

<h2>The Break Tag</h2>

Another tag used to break up text is the break tag<br>

As soon as the browser encounters a break tag<br> the text moves to the next line.

Creating a List

Lists structure your text in an outline formatFive types of lists

Unordered – bulleted listsOrdered – numbered or lettered listsDefinition – allows for two levels of informationMenu – same as using <UL> tagDirectory – same as using <UL> tag

List Tags

<OL> - specifies that information appears in an ordered list

<UL> - specifies that information appears in an unordered list

<LI> - Specifies a line item in either ordered or unordered lists

List Attributes

For Numbered Lists:Type = A Type = aType = I Type = iType = 1

For Bulleted ListsType = Disc Type = Squaretype = Circle

Unordered List

<h2>Lists</h2>

<ul>The unordered list

<li>normal</li>

<li>bulleted</li>

<li>list</li>

</ul>

Ordered List

<ol>The ordered list

<li>normal</li>

<li>numbered</li>

<li>list</li>

</ol>

Ordered List using Letters

<ol type = A>The ordered list using Letters

<li>sequentially</li>

<li>lettered</li>

<li>list</li>

</ol>

Unordered List with bullet change

<ul type = square>The unordered list using different bullets

<li>Use bullets for non-sequential items</li>

<li>Use numbers for sequential items</li>

</ul>

Unordered list with bullet change in <LI>

<ul>The unordered list different bullet on each line

<li type = circle>Use bullets for non-sequential items</li>

<li type = disc>Use numbers for sequential items</li>

</ul>

Ordered List using Start

<ol start = 10>The ordered list start with a specific number

<li>normal</li>

<li>numbered</li>

<li>list</li>

</ol>

Ordered list with Value and Type in <LI>

<ol start = 10>The ordered list start with a specific number and include a change of type with specific number

<li>normal</li>

<li>numbered</li>

<li type = I value = 10>list</li>

</ol>

Nested List<ol type = I>The Nested Ordered list

<li>top level</li>

<ol type = A>

<li>second level</li>

</ol>

<ol type = 1>

<li>third level</li>

</ol>

<LI> another top level</li>

</ol>

Definition List

<DL> - Specifies that the information appears as a definition<DT> - Identifies the term to be defined<DD> - Identifies the definitionUsed for glossary type informationCan also be used for Dates and Information or what’s new on your website

Definition List

<DL>Definition List

<DT>Term to be defined or date

<DD> Definition of the term or activity</DD>

</DL>

Common Character Formatting Tags

<B> </B>: Bold<I> </I>: Italic<U></U>: Underline<SUB></SUB>: Subscript<SUP></SUP>: Superscript<STRIKE></STRIKE>:Strikethrough

Insert this code:

<H2> Common Format Tags</H2><B> Bold Text</B><br><I>Italic</I><br><U>Underline</U><br><S>Strikethrough</S><br>Testing<SUB>subscript</SUB><br>Testing<SUP>superscript</SUP><br>

Other Text Tags

<PRE></PRE> - Preformatted Text. Works well when adding information programming code or scanned textIt is a plain text format<Blockquote></Blockquote> - used when quoting one or more paragraphs from another source

Add this code:<H2>Preformatted Text</H2><pre>

Using the preformatted text container tags are used to specifically arrange text to appear in a distinct manner.

All tabs, carriage returns and extra spaces are displayed exactly as they appear</pre>

<H2>Blockquote</H2>

<BlockQuote>A web page is made up of elements, each defined

by an HTML tag. Most tags come in pairs and are Enclosed in angle

brackets</Blockquote>