Chapter 1

Introduction to the Internet and Web Design

Chapter 1 Objectives

Read Chapter 1 and make sure you understand the following:

Define the Internet and associated key terms
Recognize Internet protocols
Discuss web browsers and identify their main features
Describe the types and purposes of websites
Plan a website for a target audience
Define a wireframe and a site map
Explain how websites use graphics, navigation tools, typography, and color
Design for accessibility
Design for multiplatform display
Define Hypertext Markup Language (HTML) and HTML elements
Recognize HTML versions and web programming languages
Identify web authoring tools
Download and use a web authoring tool
Create and view a basic HTML webpage

The Internet and Webpages

People and organizations create webpages to attract attention to information such as products, services, multimedia, news, and research.

Although webpages display content including text, drawings, photos, animations, videos, and links to other webpages, they are created as documents containing only text.

Introduction to HTML

Hypertext Markup Language (HTML) is used to create webpages.

HTML uses tags which consist of a start tag, content, and an end tag.

Creating a Basic Webpage

DOCTYPE
Basic tags
Meta tag
Unicode Transformation Format (UTF)

DOCTYPE Declaration

<!DOCTYPE> is the first line of HTML code for all HTML webpages.

All HTML5 webpages must begin with:

<!DOCTYPE html>

HTML Root Element

<html> and its closing tag </html> wrap all webpage content.

lang="en" is an attribute contained within the opening html tag and defines the language used (English).

Head Section

<head> and </head> contain information about the webpage.

The meta tag contains information about the data on the webpage.

UTF-8 is the standard for HTML5 pages and is the preferred encoding standard for email and other applications.

The encoding chosen is also important when validating a webpage.

Title and Body Tags

<title> and </title> appear inside the head section and display the page title in the browser tab.

<body> and </body> contain all visible webpage content.

Class Note

Day One we created a basic webpage, then we used GitHub.com to host and display the webpage in the Chrome browser.

Basic HTML Example

<!DOCTYPE html>
<html>
    <head>
        <title>Day1 | studentName</title>
    </head>
    <body>
        <h1>studentName first webpage</h1>
        <p>"Made it through day1"</p>
    </body>
</html>

Open a text editor (VS Code)
Add HTML tags (listed above)
Add text
Save the file with a .html extension
Open the file in a web browser

Terms from Class

Internet – Developed in the 1960s by the Department of Defense (DOD)
ARPA – Advanced Research Project Agency
ARPANET
Node – Any device connected to a network
Data Lines
Internet Backbone
ISP – Internet Service Provider
World Wide Web – Linked files known as webpages
Website – A collection of webpages
Homepage – Main page of a website
Hyperlink – Elements that connect webpages together

Types of Websites

Internet
Intranet
Extranet
E-commerce

Planning a Website

Purpose of the website
Target audience

Four HTML Concepts

Elements – Most made up of two tags (open and close)
Tags
Attributes
Values

HTML Lists

ul – Unordered list
ol – Ordered list
dl – Definition list

Protocols Covered in Class

HTTP, FTP, TCP/IP, IP, DNS