UNIT 1 - Weeblymswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_1_-_intro_to... · WHAT IS THE...

UNIT 1Intro to HTML & Elements of a Webpage!

DAY 1Networks, the Internet, and the World Wide Web!!

LESSON LEARNING TARGETS

I can

• describe networks, the Internet, the World Wide Web, and how they are related.

• describe the parts of the internet and how they are related to each other.

• describe the different types of networks.

• describe the type and parts of web addresses.

WHAT IS A NETWORK?

• Network: a group of two or more

computers that are:

• connected together

• share resources and information

• Networks can be

• interconnected with other networks

• contain subnetworks

WHAT IS THE INTERNET?• Internet: a worldwide collection of computer

networks that

• links millions of computers!!!

• communicate using modems, telephone lines, television cables, and other communications devices and media

• any computer on the Internet can, with permission, access any other computer on the network

WHAT IS THE INTERNET?

• Internet backbone:

• a collection of high-speed data lines that

connect major computer systems located

around the world

• originally formed by connecting 6

supercomputers throughout the country

• now the backbone is comprised of many

supercomputers and other computers covering

the whole globe



• Internet Service Provider (ISP)• a company that has a permanent connection to

the Internet backbone

• ISPs utilize high- or medium-speed data lines to

allow clients (individuals or companies) to

connect to the backbone for access to the

Internet

• Internet services include:

• e-mail

• newsgroups

• the World Wide Web

INTERNET AND NETWORKS

Pause and Reflect:

Summarize in your own words with a partner

1) The relationship between networks and the internet.

2) The purpose of your Internet Provider!!

WHAT IS THE WORLD WIDE WEB?

• The World Wide Web, also called the Web

• the part of the Internet that supports

multimedia and

• consists of a collection of linked documents

• the resources and users on the internet that

use HTTP


• Hypertext Transfer Protocol (HTTP)

• a set of rules for exchanging text, graphics,

sound, and other multimedia files

• Web Browsers (such as Internet Explorer) use

HTTP to control the transfer of information


• Web page

• Single page of information on the Web

• Web site

• a related collection of Web pages

• Home page

• the first document users see when they access a Web site

WORLD WIDE WEB

Pause and Reflect:

You all browse the internet often. Think of an example you’ve seen on the internet of the following:

• Web Page

• Web Site

• Homepage


WEB SERVERS

• Web Server (or Host)

• a computer that stores and sends (serves) requested Web pages and other files

• the place that all Web pages are stored

• can be any computer with server software and connected to the Internet

WEB SERVERS

• Publishing a Web Site

• copying Web pages and other files to a Web server

• once published, a Web site can be accessed by anyone in the world with Internet access

WEBSITE TYPES

1. Internet

• Used by: Anyone

• Access: Public

• Application: Share information with public

• Store catalog

• Personal information

• Classroom Information

• Etc

WEBSITE TYPES

2. Intranet

• Used by: Employees or members of organization

• Access: Private

• Application: Share information with employee/members

• Forms

• Manuals

• Schedules

• Etc

WEBSITE TYPES

3. Extranet

• Used by: Select Business Partners or Customers

• Access: Private

• Application: Share information with partners and customers

• Inventory updates

• Product Specifications

• Financial Information

Project 2: Creating and Editing a Web Page

20

WEB SITE TYPES AND PURPOSES

• Uses of Internet (Web) Sites:

• personal use

• educational use

• Electronic commerce (e-commerce)

• the buying and selling of goods and

services on the Internet


• Intranet:

• private network

• contained within a company or

organization’s network

• used within the organization for it’s private

purposes and communications

• may or may not be password protected


• Extranet:

• private network

• used to share business information with select

corporate customers or key customers

• usually password protected to restrict access to

specific clients

• may support e-commerce

WORLD WIDE WEB

Pause and Reflect:

In your own words, compare/contras the Internet, Intranet, and Extranet.

WEB BROWSERS

• Web browser (also called a browser)

• a program that interprets and displays Web

pages and enables you to view and

interact with a Web page

• Examples:

• Microsoft Internet Explorer

• Mozilla Firefox

• Google Chrome

• Safari

WEB BROWSERS

• Hyperlink (also called a link)

• an element used to connect one Web

page to another

• allows user to navigate site in a variety of

ways

WEB BROWSER

• Uniform Resource Locator (URL)

• the address of a document or other file accessible on the Internet

• Examples:

• http://www.scsite.com/html4e/index.htm

• http://www.mukwonago.k12.wi.us/~ferweja/index.html

PARTS OF A URL

• Scheme:

• tells the browser how to deal with the file it is to

open

• common examples:

• http:// (Hypertext Transfer

Protocol)

• https:// (for secure Web pages)

• ftp:// (File Transfer Protocol)

• mailto: (for sending e-mail)

PARTS OF A URL

• Server Name: www.DomainName.Extension

• tells the browser the name of the Web server

where the file is located

• common domain extensions:

• .com (commerce)

• .org (non-profit organization)

• .edu (education)

• .net (network)

• .gov (government)

Note: these

may also may

be country

codes:

- .us (USA)

- .uk (Britain)

- .ca (Canada)

PARTS OF A URL

• Path:

• tells the browser the location of the file

within the subdirectories of the Web server

• may be no directories or multiple

subdirectories in the listing

PARTS OF A URL

• File Name:

• name of the file to be opened

• common file extensions:

• .html or .htm (HTML documents)

• .exe (executable files)

• .doc (Word document)

• .jpg or .gif (picture or

graphics)

HOMEWORK

• Worksheet 1A

• Quizlet – Start a set of flashcards for Unit 1

• There is A LOT of Vocabulary


32

DAY 2Fundamentals of HTML


I can

• describe the components of HTML.

• describe and apply HTML tags for creating Web pages.

• use proper structure for writing HTML code.

• describe the different tools for creating HTML programs.

WHAT IS HYPERTEXT MARKUP LANGUAGE?

• Hypertext Markup Language (HTML)

• the Language in which Web pages are created

• the authoring language used to create documents on the World Wide Web


• Tags (or markup)

• a set of special instructions used in HTML

• used to define

• the structure and layout of a Web document

• specify how the page is displayed in a browser

• a Web page is a file containing text and HTML tags

Project 1:

Introduction to

HTML

37


Figure 1-7 (p. 10)

Project 1:

Introduction to

HTML

38


Figure 1-7 (p. 10)

HTML

Pause and Reflect:

In your own words, summarize what HTML code looks like. What will our code look like as we create web-pages this semester?

39


• HTML is platform independent

• this means:

• you can create, or code, an HTML file on

one type of computer

• then use a browser on another type of

computer to view that file as a Web page

HTML ELEMENTS

• HTML combines descriptive tags with special

tags that denote formatting styles for how a

document should appear in a Web browser

• Example elements

• headings

• paragraphs

• hyperlinks

• lists

• images

• tables

HTML ELEMENTS

• 3 Parts of (most) HTML

elements

• Start tag

• Content

• End Tag

• Example: for text to

appear in bold:



sample text



SOME COMMON HTML ELEMENTS

• Title <title> </title>

• Body <body> </body>

• Paragraph 

• Line Break 

HTML CODING PRACTICES

• Syntax Rules

– the rules that any programming language uses to

allow programmers to work in that language

– HTML is no exception!

• Syntax Error

– when the syntax rules of the language are violated


• Coding Practices

– guidelines used to

• simplify the process of creating and editing

HTML files

• ensure Web pages appear correctly in different

browsers

HTML CODINGPRACTICES

• Coding Practices

• ignored by computer; useful for programmers

• examples:

• using blank lines between sections

• using comments within the code

• indenting sections of code

Project 1:

Introduction to

HTML

47


Figure 1-8 (p. 12)

48

CASCADING STYLE SHEETS

• Cascading Style Sheets (CSS)

• a type of code document

• allows you to control the formatting of a single element throughout an entire website

• Recommended for large Web sites

• allows Web sites to easily have the same formatting throughout all of its pages

TOOLS FOR CREATING HTML DOCUMENTS

• Text Editor

• a program that allows a user to enter, change, save, and print text, such as HTML

• Examples:

• Microsoft Word

• WordPad

• NotePad (what we will primarily use)

Project 1:

Introduction to

HTML

50


Figure 1-9 (p. 14)

51


• HTML editor

• a program that provides

• basic text-editing functions

• also more advanced features, such as:

• color-coding for various HTML tags,

• menus to insert HTML tags, and

• spell checkers

• Examples:

• Macromedia HomeSite

• BBEdit


• Software Applications

• certain programs that allow you to save documents as Web pages

• using “Save as Web Page” features

• inserts tags automatically

• however, pages do not always come out the way you designed them

• Examples:

• Microsoft Word, Microsoft Excel, Microsoft, Powerpoint


• WYSIWYG editor

• a program that provides a graphical user interface that allows a developer to preview the Web page during development

• “What You See is What You Get”

• allows you to visually design a Web Page

• Examples:

• Microsoft FrontPage

• Macromedia Dreamweaver

HTML

Pause and Reflect:

In your own words, summarize what HTML code looks like. What will our code look like as we create web-pages this semester?

HOMEWORK

• Worksheet 1A

• Quizlet – Continue flashcards for Unit 1



56

DAY 3Fundamentals of HTML


I can

• I can describe the stages of development of a Web page.

• I can describe the different ways Web sites can be structured.

WEB DEVELOPMENT LIFE CYCLE

• Web Development Life Cycle

– like any software development project, a

systematic methodology (or process) should be

followed to assure consistency and completeness

– all software follows a “life cycle” - a series of steps

from conception to obsolescence

5 STAGES

1. Planning

2. Analysis

3. Design and Development

4. Testing

5. Implementation and Maintenance

60


• 1. Planning– Identify the goals and purposes of the Web site

– Questions to ask:

• What is the purpose of the Web site?

• Who will use the Web site?

• What are the user’s computing environment? (computer

speed, ISP, etc)

• Who owns and authors the information on the Web site?

• Who decides if / where the information goes on the Web

site?


• 2. Analysis

– Make decisions about Web site content and

functionality


• What tasks do the users need to perform?

• What information is useful to the users?

• What process considerations must be made?


• 3. Design and Development

– Design of Web site is based on Planning and

Analysis phases

– Some Questions to ask:

• How will the Web site be organized?

• What type of Web site structure is appropriate

for the content?

WEB SITE DESIGN AND DEVELOPMENT


• Linear Web site structure

• connects Web pages in a straight line

• information is meant to be read in a specific order


• Hierarchical Web site structure

• connects Web pages in a tree-like structure

• home page acts as “table of contents”

• other pages provide more detail


• Webbed Web site structure

• has no set organization

• has pages that do not need to be viewed in any specific order

• includes many navigation options


• Broad Web site structure

• the home page is the main index page

• all other Web pages are linked individually to the home page and only accessible through the main page


• Deep Web site structure

• has many levels of pages, requiring the user to click many times to reach a particular Web page

• forces user to navigate several levels first

MOST WEB SITES

• Most Web Sites

• Are a combination of linear, hierarchical, and webbed structures


• 3. Design and Development (continued)

– More Questions to ask:

• What design structure(s) best balances breath and depth

for this site?

• What forms of multimedia contribute positively to the

Web site?

• How can accessibility issues / speed of internet

connection be addressed without limiting usability?

• Do we need to design for an international audience?


• 4. Testing

– Should occur frequently during design and

development


• Is the Web site content correct?

• Does the Web site function correctly?

• Are users able to find the information they need and to

complete desired tasks?

• Is navigation easy?

WEB SITE TESTING

• Testing Content and Functionality

• proofreading content for spelling and grammar

• checking that all links work correctly

• checking graphics for appearance and linking

• ensure accessibility issues are addressed

• testing forms and other interactive elements

WEB SITE TESTING

• Testing Content and Functionality (continued)

• testing pages to make sure they quickly load, even over low speed connections

• be sure pages print correctly

• reviewing HTML for W3C standards

• testing with a variety of browsers

WEB SITE TESTING

• Usability

• the measure of how well a product allows a user to accomplish his or her goals

• Usability testing

• users of a Web site or other product are asked to perform certain tasks in an effort to measure the product’s ease-of-use and the user’s perception of the experience


• 5. Implementation and Maintenance

– Implementation - publishing the Web site to a

Web server

• Publishing can be done by

– some HTML or WYSIWYG editors

– FTP software (such as WS_FTP)

• Be sure to test the published site again!

– Maintenance - maintaining and updating the

Web site after it has been published


• 5. Implementation and Maintenance (cont.)


• How is the Web site published?

• How is the Web site updated?

• Who is responsible for content updates?

• Who is responsible for structure updates?

• How will users be notified about updates to

the Web site?

• Will the Web site be monitored? Will a log

of activity be kept?

HOMEWORK

• Worksheet 1C

• Quizlet – Continue a set of flashcards for Unit 1


DAY 4Fundamentals of HTML – Project 1


I can

• I can describe the stages of development of a Web page.

• I can describe components of a webpage.

PROJECT 1A

• Design your own Web Page for a school Computer Club.

• Due Monday February 1st, 2016

DAY 5Elements of a Web Page


I can

• I can identify the different components of a webpage.

RECALL:

• Phases of Web Development Life Cycle

• Planning• Analysis• Design and Development• Testing• Implementation and Maintenance

• First three phases are crucial to good Web page development!

RECALL:

• HTML• Language used to create Web pages• Uses tags to define the Web page’s

• Structure• Layout• Appearance

• HTML documents can be created in Notepad or Notepad++

• HTML documents are viewed in a Web browser

IN CLASS - PROJECT• Creating a Web page for the Campus Tutoring

Service

• Include:

• General information

• Contact information

• List of courses for tutoring

• Uses paragraphs, bulleted lists, colorful image, horizontal rule, background color

89

ELEMENTS OF A WEB PAGE


• Window Elements

• Title

• Appears in title bar of the browser

• Assigned to Favorites / Bookmarks if user adds it to his/her list

• Should be concise yet descriptive


• Window Elements

• Body• Contains the information displayed in the

browser window

• Background can be solid color or a graphic, but be sure not to overpower info on the page

93Title

Body

WINDOW ELEMENTS

Pause and Reflect:

Sketch an example of a web page and label the title and body of the webpage


• Text Elements

• Normal Text• Used for main content of Web page

• Can be formatted to be bold, italics, underlined, in different colors, etc.


• Text Elements

• Lists• A series of text items listed together

• Can be bulleted (unordered) or numbered (ordered)


Normal

Text

List


• Text Elements • Headings

• Used to set apart different paragraphs or sections of text

• Larger font than normal text• Six sizes:

• h1: Largest• h6: Smallest

• Be consistent with the use of headings• Use h1 for main titles / most important titles• Use h2 for next secondary titles• etc.

TEXT ELEMENTS

Pause and Reflect:

In your own words summarize the three types of text elements and describe an example of when each could be used in a web site.


Headings


• Image Elements

• Inline Image

• An image is not part of the HTML file, but

is a separate file

• The browser merges image into its display

• <img> tag – tells browser which image

file to include, where to insert it, and how

to display it


Inline

Image


• Some types of Inline Images

• Image map: has one or more hotspots

• Hotspot: an area of an image that

activates a function when selected

• Example: may be a link to another Web page or site

• Animations: include motion and can

change appearance


• Image Elements

• Horizontal Rules• Lines that are displayed across a Web page

to separate different sections of the page

• Can be done using <hr /> tag

• Can be an inline image to make it fancier

ELEMENTS OF A WEB PAGE• Image Elements

• Caution on use of images on a Web page

• Don’t overdo it!

• Can make the page look cluttered

• Can distract user from important information

• Each image should have a purpose!

Horizontal

Rule


• Hyperlink Elements• Hyperlink (or Link)

• Text, image, or other Web page elements

that you click to tell the browser to go to a

different location in the page, to a new

page, or a new Web site

• Used to navigate around and between Web

sites

• Can link to graphics, sound, video,

programs, etc.


• Hyperlink Elements

• Hypertext link (or Text Link)

• A text-based link

• Usually appears underlined and in a

different color from the rest of the text

HYPERLINK ELEMENTS

Pause and Reflect:

In your own words describe the difference between a hyperlink and hypertext.

HOMEWORK

• Worksheet 1D

• Quizlet – Continue a set of flashcards for Unit 1

Date post:	24-Jun-2018
Category:	Documents
Upload:	phamngoc
View:	218 times
Download:	0 times

UNIT 1 - Weeblymswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_1_-_intro_to... · WHAT IS THE...

Documents