web design create internet. internet terminology what you need to know to succeed
TRANSCRIPT
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>