'What Is The Internet?: - Digital Subscriber Line 2. Cable Modem - Provided by VERIZON

George Banis
`What is the Internet?

The internet is a worldwide collection of interconnected computer networks that enables
business, organizations, governments, and individuals to communicate.
Publishing and interacting with Web pages is the most popular way users communicate with the
internet.
The World Wide Web (www) consists of a giant collection of documents or pages stored on
computers around the world.
Types of Internet Connection
1. DSL-digital subscriber line

2. Cable Modem
3. ISDN-Integrated services digital network.
4. FIOS-provided by VERIZON
URLS and LINKS
Each page on the web has its own unique address called a URL (Uniform Resource Locator). An
example of what a URL looks is:
http://www.example.com/index.html
HOW TO LOCATE PAGES ON THE WEB

1. Use the URL of the page if you know it.
2. HYPERLINKS of SIMPLY LINKS- clickable words or images on Web pages. All link
on a web page is associated with a URL.
WHAT IS A BROWSER
A Web browser is software that allows you to view and interact with web pages.
INTRODUCTION TO HTML
HTML- HyperText Markup Language
HTML is used to build Web pages.
WEB DOCUMENTS CONSIST OF:

1. Text content.
2. Special codes know as tags.
3. Tags tell the web browsers how to display the content of the document.
• World Wide Web-The World Wide Web is a system of interlinked hypertext
documents accessed via the Internet.
• DSL- is a family of technologies that provides digital data transmission over the
wires of a local telephone network.
George Banis
• Cable Modem- is a type of modem that provides bi-directional data
communication via radio frequency channels on a cable television (CATV)
infrastructure. Cable modems are primarily used to deliver broadband Internet
access in the form of cable Internet, taking advantage of the high bandwidth of a
cable television network. A modem is an electronic device that makes possible
the transmission of data to or from a computer via telephone or other
communication lines.
• FIOS- is a bundled communications (Internet, telephone, and TV) service,
operating over a fiber-optic communications network.
• URL- Uniform Resource Locator: a protocol for specifying addresses on the
Internet. It is an address that identifies a particular file on the Internet, usually
consisting of the protocol, as http, followed by the domain name.
• Web Browser- a software program that facilitates entry to and usage of the
Internet. Safari, Firefox, Internet Explorer, Google Chrome.
• Hypertext Markup Language- is the predominant markup language for web
pages. It provides a means to create structured documents by denoting structural
semantics for text such as headings, paragraphs, lists etc as well as for links,
quotes, and other items. It allows images and objects to be embedded and can be
used to create interactive forms.
• Tags- act as indicators to a web browser as to how the document is to be
interpreted by the browser and ultimately presented on the user's computer screen.
TAGS
<HTML> </HTML> appears at the beginning and end of the document- it identifies the
text as HTML code.
<HEAD> contains information that does not appear in the browser window such as
metadata.
<TITLE>your title</TITLE>
</HEAD>
<BODY>actual content of your web page
</BODY>
</HTML>
WHAT IS METADATA
Metadata is data about other data. It is used to facilitate the understanding, usage, and
management of data both by humans and computers.
Metadata can help search engines categorize your page.
In Web Pages Metadata exists in many types:
1. Keywords
2. Descriptive Text (page description)
3. Author
George Banis
4. Copyright
TO ADD AN AUTHOR NAME
1. Click between <HEAD> and </HEAD>tags and press Enter to start a new line.
2. Type<META NAME=” My Name”> replacing My name with your name.
TO ADD A PAGE DESCRIPTION
1. Type <META NAME=” description” and a blank space.

2. Type CONTENT=” Page Description”> replacing Description with your own page
description.
3. Press Enter.
CREATE A NEW PARAGRAPH
The paragraph tag <P> is used to start new paragraphs in a HTML document.
To create a new paragraph:
1. Type <P> to start a new paragraph

2. Type your text
3. Type <P> at the end of the paragraph
Horizontal positioning of the paragraphs can be controlled by the ALIGN attribute.
Paragraphs by default are left aligned. You can choose a different alignment using the align tags.
To change a paragraph alignment

1. Click inside the <P> tag in which you want to change the alignment.
2. Type a space and then ALIGN=”?”, replacing the ? with Left, Center, Right, or Justify.
HOW TO ADD A LINE BREAK
You can use the line break tag, <BR> to control where your text ends or breaks. Most Web
browsers wrap text automatically so line breaks are important.
Line breaks can also be used to add blank lines between paragraphs.
TO ADD A LINE BREAK

1. Type <BR> in front of the line of text that you want to appear as a new line.
2. Type additional <BR> tags wherever you want a line break.
UNDERSTANDING HTML
HTML STANDARDS
George Banis
The World Wide Web consortium is the primary group guiding the evolution of the HTML
language.
HTML Editors- such as Adobe, Dreamweaver, and Microsoft Expression are dedicated
programs for writing HTML code and managing Web pages.
Word Processing Programs- can be used to create code and text for a web page.
Ex. Microsoft Word

Microsoft WordPad
Microsoft Notepad
UNDERSTANDING HTML SYNTAX
Writing HTML- governed by rules or syntax.
TAGS
1. Determine how page content is organized and formatted consist of words or abbreviations
surrounded by angle brackets, <>.
2. Can be typed in upper or lowercase.
3. Typing tag names in uppercase to help distinguish code from text.
4. Tags identify different parts of your HTML document. The <BODY> and </BODY>
tags indicate that the text between the two tags is the body content.
5. Frequently tags are written as opening tags and closing tags. Such as the paragraph tags
(<P> and </P>).
HOW TO TYPE A NUMBERED LIST
NUMBERED LISTS can be used to show steps or prioritize items.
STEPS TO CREATING A NUMBERED LIST
1. <OL> above the text tells the computer that you want to turn your text into a numbered
list.
2. Each item in the list is started with <LI> and ended with </LI>(capital L capital I)
3. Repeat step two for each item in the list.
HOW TO SET A NUMBER STYLE
Type TYPE=”?” within the <OL> tag, replacing the ? with a number style code:
A. A, B, C
a. a, b, c
I. I, II, III
i. i, ii, iii
1. 1, 2, 3
The numbered list will be displayed in the style that you indicate within the <OL> tag.
George Banis
Bulleted lists help to set a list of items apart from the rest of the document. By default a bulleted
list will appear as solid circles. If you want to choose another bullet style, you must add a TYPE
attribute to the <UL> tag.
Steps to Create a Bulleted List

1. Type <UL> above the text you want to change into a bulleted list.
2. Type <LI> in front of each item in the list.
3. Type </LI> after each list item.
4. Type </UL> after the list text.
TO SET A BULLET STYLE
Type TYPE=”?” within the <UL> tag, replacing the ? with a bullet style code such as:
circle, disc, or square.
HOW TO CREATE A NESTED LIST
Nested lists allow you to display listed text at different levels.
Steps to Create a Nested List

1. Click where you want to insert a nested list.
2. Type <UL> for an unordered list or <OL> for a numbered list.
3. Type the new list text using <LI> and </LI> tags.
4. Type </OL> or </UL> at end of nested list.
FORMATTING TEXT
1. BOLD TEXT
a. Type <B> in front of text you want to bold.
b. Type </B> at end of text to be bolded.
2. ITALICIZE TEXT
a. Type <I> in front of text.
b. Type </I> at the end of text.
3. UNDERLINE TEXT
a. Type <U> in front of text to be underlined.
b. Type </U> at end of text being underlined.
4. CHANGE FONTS
a. Use Arial, Helvetica, san serif fonts
b. If first font you use is not available, the computer will use the second choice.
c. San Serif, Serif and Monospace = commonly supported by font families.
d. Type <FONT FACE=”?”> in front of text you want to change.
e. Type </FONT> at end of text being changed.
5. CHANGE FONT SIZE
a. Type <FONT SIZE=”?”> in front of text to be changed.
b. Type </FONT> at end of text being changed.
c. Font size goes from 1 to 7. Seven being the LARGEST.
6. CHANGE FONT COLOR
a. Type <FONT COLOR=”?”> before text.
b. Type </FONT> after text.
George Banis
c. SPECIFY COLOR by
i. Hexadecimal value
ii. Some common colors use color’s same, such as red.
d. To change color of ALL the text in a Document.
i. Within <BODY> tag type TEXT=”?” with the hexadecimal value of the
color you desire and all text will appear in the new color.
7. ADJUST MARGINS
a. Within <BODY> tag type MARGIN=”?”
b. Replace ? with margin you want to change such as:
i. LEFTMARGIN
ii. RIGHTMARGIN
iii. TOPMARGIN
iv. BOTTOMMARGIN
v. MARGINWIDTH
c. Can set margin for one or all four margins.
d. Replace ? with the amount of indentation in PIXELS.
8. SET A BACKGROUND PAGE COLOR
a. Within the <BODY> tag, type BGCOLOR=”?”
Example: <BODY BGCOLOR=”#00FFF”

AQUA: #00FFFF
GREEN: #008000
HORIZONTAL LINE
1. Type <HR> where you want to inset a horizontal rule.

2. To set line thickness and width do the following.
a. Within the <HR> tag, type SIZE=”?”
b. Within the <HR> tag, type WIDTH=”?%”
INSERT AN IMAGE IN A WEB PAGE
TO INSERT A PHOTOGRAPH
1. Type <IMG SRC=”?”>
2. Replace ? with the full path to the file you want to insert.
Example: <IMG SRC=”mt_everest.jpg”>
TO INSERT A GRAPHIC FILE

1. Type <IMG SRC=”?”>
2. Replacing ? with the full path to the file you want to insert.
SPECIFY AN IMAGE SIZE

1. Click inside the <IMG> tag and type WIDTH=”?”
2. Replacing ? with the width measurement you want to set (in pixels or a % percent of the
overall window size).
3. Type a space.
4. Type HEIGHT=”?” replacing ? with the height measurement you want.
George Banis
CREATE AN IMAGE LABEL
1. Within the <IMG> tag, put a space and type TITLE=”?”

2. Replace the ? with the image label.
a. Example: <IMG SRC=”mt_everest.jpg” TITLE=”Mt. Everest, elev. 29,029 feet”>
3. The label appears when you move the mouse pointer over the image.
ADD COPYRIGHT TEXT TO IMAGES

1. Type and copy; to create the copyright symbol
2. Type a space, and then type the copyright text you want to add
3. A line break tag will put the copyright text on a new line.
ALIGN AN IMAGE HORIZONTALLY

1. Click inside the <IMG> image tag and type ALIGN=”?” replacing the ? with the
alignment you want to apply, either left or right.
ALIGN AN IMAGE VERTICALLY

1. Click inside the <IMG> tag and type ALIGN=”?” replacing the ? with the alignment you
want to apply, either middle, top, or bottom (bottom is the default).
CENTER AN IMAGE
1. Click before the <IMG> tag and type <DIV>
2. Click inside the <DIV> tag and type ALIGN=”center”
3. Click after the closing bracket of the <IMG> tag and type </DIV>
ADD A BACKGROUND IMAGE

1. Click inside the <BODY> tag and type BACKGROUND=”?”
2. Replace the ? with the path to the image file you want to use.
UNDERSTANDING THE WORLD OF LINKS

TYPES OF LINKS:
1. Text links- usually underlined, differently colored words on a page.
2. Image- any image on a web page that can be turned into a link.
3. Links to external Web pages- direct users to other pages on the internet.
4. Links to other pages on your site- main page may provide links to other pages about
products, ordering information, etc.
5. Links to other areas on the same page- to different sections or information on the page.
6. Absolute and Relative Links
a. Absolute Links use a complete URL to point to a specific page on a specific Web
server.
b. Relative links use shorthand to reference a page and don’t specify the server- used
for documents on the same Web site.
7. Anchor Tag- the HTML code you use to create a link- consists of the beginning <A> and
the ending </A>
LINK TO ANOTHER PAGE
Insert a Text Link

1. Type the text you want to use as a link.
2. Type <A HREF=”?”> in front of the text replacing ? with the URL of the page to which
you want to link.
George Banis
3. Type </A> at the end of the link.
CHANGE LINK COLORS

1. Click within the <BODY> tag and type LINK=”?”
2. Replace ? with the color value you want to apply to the unselected links on your page.
3. Type a space
4. Type ALINK=”?”
5. Replace ? with the color value you want to apply to the active links on your page.
6. Type a space
7. Type VLINK=”?”
8. Replace ? with the color value you want to apply to the previously selected links on your
page.
TABLE STRUCTURE
Tables use columns and rows to help you to organize and present large amounts of data or
control the page layout.
Tables can be used to organize the overall structure of a Web page.
Example: A two-column table can be used to organize a list of links in one column and
main text in another.
Tables are rectangles containing rows and columns. Cells are the places where rows and
columns intersect. Cells can hold text, images, and other content.
TABLE ELEMENTS (tags)
<TABLE> - defines the table itself

<TR> - defines a table row
<TD> - defines the table data or cell content
TO ADD A TABLE
1. Type <TABLE> where you want to insert a table
2. Type <TR> to start the first row in the table – type each row tag on a new line
3. Type <TD> for the first cell you want to create
4. Type the cell data
5. Type <TD> to complete the cell
6. Repeat steps 3 to 5 to add cells
7. Type <TR> at the end of the first row
8. Continue adding rows and cell data as needed
9. Type </TABLE> at the end of the table data
If you want your first row to include bold column labels you can use the <TH> tag instead of
<TD>.
To make it easier to distinguish between cells, you will place each cell on a new line in your
html document.
ADDING A BORDER TO TABLES
Table borders add structure and dimension to a table.

George Banis
When you set border thickness it applies only to the outer edge of the table – not the cells inside
the table.
Steps in Adding a Border
1. In the <TABLE> tag, type BORDER=”?”

2. Replace the ? with the value for the border thickness.
3. To set a border color, type BORDERCOLOR=”?” in the <TABLE> tag.
4. Replace ? with the color value you want to apply.
5. The default border color is gray.
WHAT IS CELL PADDING
Cell Padding is adding space between the border and the contents of a cell.
To Set Cell Padding
1. In the <TABLE> tag, type CELLPADDING=”?”

2. Replace ? with the pixel value you want to assign.
RED, BLUE, YELLOW, and BEIGE CODES!

'What Is The Internet?: - Digital Subscriber Line 2. Cable Modem - Provided by VERIZON

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

'What Is The Internet?: - Digital Subscriber Line 2. Cable Modem - Provided by VERIZON

Încărcat de

Drepturi de autor:

Formate disponibile

George Banis

`What is the Internet?

Types of Internet Connection

1. DSL-digital subscriber line

URLS and LINKS

HOW TO LOCATE PAGES ON THE WEB

HTML- HyperText Markup Language

HTML is used to build Web pages.

WEB DOCUMENTS CONSIST OF:

Metadata can help search engines categorize your page.

In Web Pages Metadata exists in many types:

TO ADD AN AUTHOR NAME

TO ADD A PAGE DESCRIPTION

1. Type <META NAME=” description” and a blank space.

CREATE A NEW PARAGRAPH

To create a new paragraph:

1. Type <P> to start a new paragraph

Horizontal positioning of the paragraphs can be controlled by the ALIGN attribute.

To change a paragraph alignment

HOW TO ADD A LINE BREAK

TO ADD A LINE BREAK

Ex. Microsoft Word

UNDERSTANDING HTML SYNTAX

Writing HTML- governed by rules or syntax.

HOW TO TYPE A NUMBERED LIST

NUMBERED LISTS can be used to show steps or prioritize items.

STEPS TO CREATING A NUMBERED LIST

HOW TO SET A NUMBER STYLE

Steps to Create a Bulleted List

TO SET A BULLET STYLE

HOW TO CREATE A NESTED LIST

Nested lists allow you to display listed text at different levels.

Steps to Create a Nested List

Example: <BODY BGCOLOR=”#00FFF”

1. Type <HR> where you want to inset a horizontal rule.

INSERT AN IMAGE IN A WEB PAGE

TO INSERT A GRAPHIC FILE

SPECIFY AN IMAGE SIZE

1. Within the <IMG> tag, put a space and type TITLE=”?”

ADD COPYRIGHT TEXT TO IMAGES

ALIGN AN IMAGE HORIZONTALLY

ALIGN AN IMAGE VERTICALLY

ADD A BACKGROUND IMAGE

UNDERSTANDING THE WORLD OF LINKS

LINK TO ANOTHER PAGE

Insert a Text Link

CHANGE LINK COLORS

TABLE ELEMENTS (tags)

<TABLE> - defines the table itself

ADDING A BORDER TO TABLES

Table borders add structure and dimension to a table.

Steps in Adding a Border

1. In the <TABLE> tag, type BORDER=”?”

WHAT IS CELL PADDING

To Set Cell Padding

1. In the <TABLE> tag, type CELLPADDING=”?”

RED, BLUE, YELLOW, and BEIGE CODES!

S-ar putea să vă placă și