1 of 187

Web Design

Lecture & Discussion

Web Basics

Professor Jean Robison

2 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

3 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

4 of 187

Web Literacy

5 of 187

Web Literacy

html

6 of 187

Web Literacy

Structure/Semantics

html

7 of 187

Web Literacy

Structure/Semantics

Hypertext Markup Language (HTML)

html

8 of 187

Web Literacy

Structure/Semantics

Hypertext Markup Language (HTML)

HTML documents provide the structure of a website.

html

9 of 187

Web Literacy

Structure/Semantics

Hypertext Markup Language (HTML)

HTML documents provide the structure of a website. An HTML document is comprised of a system of <tags> </tags> �that describe (or “markup”) the content of a webpage.

html

10 of 187

Web Literacy

Structure/Semantics

Hypertext Markup Language (HTML)

HTML documents provide the structure of a website. An HTML document is comprised of a system of <tags> </tags> �that describe (or “markup”) the content of a webpage.

css

html

11 of 187

Web Literacy

Structure/Semantics

Hypertext Markup Language (HTML)

HTML documents provide the structure of a website. An HTML document is comprised of a system of <tags> </tags> �that describe (or “markup”) the content of a webpage.

​

Style/Design

html

css

12 of 187

Web Literacy

Structure/Semantics

Hypertext Markup Language (HTML)

HTML documents provide the structure of a website. An HTML document is comprised of a system of <tags> </tags> �that describe (or “markup”) the content of a webpage.

​

Style/Design

Cascading Style Sheets (CSS)

html

css

13 of 187

Web Literacy

Structure/Semantics

Hypertext Markup Language (HTML)

HTML documents provide the structure of a website. An HTML document is comprised of a system of <tags> </tags> �that describe (or “markup”) the content of a webpage.

​

Style/Design

Cascading Style Sheets (CSS)

CSS rulesets hold the visual instructions for each HTML <tag>, using selectors, {declarations: and values;}.

html

css

14 of 187

Web Literacy

15 of 187

Web Literacy

So <tags> in the HTML

html

16 of 187

Web Literacy

So <tags> in the HTML

html

17 of 187

Web Literacy

So <tags> in the HTML

html

<html>

<head>

<title>My site</title>

</head>

<body>

<h1>My site</h1>

</body>

</html>

18 of 187

Web Literacy

So <tags> in the HTML

Match selectors in the CSS

html

css

<html>

<head>

<title>My site</title>

</head>

<body>

<h1>My site</h1>

</body>

</html>

19 of 187

Web Literacy

So <tags> in the HTML

Match selectors in the CSS

html

css

<html>

<head>

<title>My site</title>

</head>

<body>

<h1>My site</h1>

</body>

</html>

20 of 187

Web Literacy

So <tags> in the HTML

Match selectors in the CSS

html

css

<html>

<head>

<title>My site</title>

</head>

<body>

<h1>My site</h1>

</body>

</html>

body {

background-color: green;

}

21 of 187

Web Literacy

So <tags> in the HTML

Match selectors in the CSS

html

css

<html>

<head>

<title>My site</title>

</head>

<body>

<h1>My site</h1>

</body>

</html>

body {

background-color: green;

}

​

h1 {

color: yellow;

}

22 of 187

Web Literacy

23 of 187

Web Literacy

html

24 of 187

Web Literacy

Structure/Semantics (HTML)

html

25 of 187

Web Literacy

Structure/Semantics (HTML)

+

html

26 of 187

Web Literacy

Structure/Semantics (HTML)

+

html

css

27 of 187

Web Literacy

Structure/Semantics (HTML)

+

Style/Design (CSS)

html

css

28 of 187

Web Literacy

Structure/Semantics (HTML)

+

Style/Design (CSS)

=

html

css

29 of 187

Web Literacy

Structure/Semantics (HTML)

+

Style/Design (CSS)

=

html

css

www

30 of 187

Web Literacy

Structure/Semantics (HTML)

+

Style/Design (CSS)

=

Browser Display (WWW)

html

css

www

31 of 187

Web Literacy

Structure/Semantics (HTML)

+

Style/Design (CSS)

=

Browser Display (WWW)

An Internet browser (such as Chrome, Firefox, Internet Explorer, or Safari) is software that is able to read and synthesize web-based media and coding languages, including audio/video/imagery, such as HTML, CSS, JavaScript, PHP, Python, Flash, etc.

html

css

www

32 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

33 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

34 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

​

​

In linguistics, syntax refers to the arrangement of words �and phrases to create well-formed sentences.

​

In web design, syntax refers to the names that we use�to refer to the different elements in our HTML and CSS markup.

35 of 187

HTML Syntax

36 of 187

HTML Syntax

Structure/Semantics

​

html

37 of 187

HTML Syntax

Structure/Semantics

<html>

<head>

<title>My site</title>

</head>

<body>

<h1>My site</h1>

<h2>Welcome to my site!</h2>

</body>

</html>

​

html

38 of 187

HTML Syntax

Structure/Semantics

​

html

39 of 187

HTML Syntax

Structure/Semantics

<p>This <em>is</em> a paragraph.</p>

​

<img src="cat.jpg">

​

html

40 of 187

HTML Syntax

Structure/Semantics

​

​

​

​

​

​

Most HTML elements consist of an opening <tag>

<p>This <em>is</em> a paragraph.</p>

​

<img src="cat.jpg">

​

html

41 of 187

HTML Syntax

Structure/Semantics

​

​

​

​

​

​

Most HTML elements consist of an opening <tag> and a closing </tag>.

<p>This <em>is</em> a paragraph.</p>

​

<img src="cat.jpg">

​

html

42 of 187

HTML Syntax

Structure/Semantics

​

​

​

​

​

​

Most HTML elements consist of an opening <tag> and a closing </tag>. Some elements have content or other tags nested inside them.

<p>This <em>is</em> a paragraph.</p>

​

<img src="cat.jpg">

​

html

43 of 187

HTML Syntax

Structure/Semantics

​

​

​

​

​

​

Most HTML elements consist of an opening <tag> and a closing </tag>. Some elements have content or other tags nested inside them.

<p>This <em>is</em> a paragraph.</p>

​

<img src="cat.jpg">

​

html

44 of 187

HTML Syntax

Structure/Semantics

​

​

​

​

​

​

Most HTML elements consist of an opening <tag> and a closing </tag>. Some elements have content or other tags nested inside them. The image tag <img> opens and closes in the same tag (it’s an unpaired tag)…

<p>This <em>is</em> a paragraph.</p>

​

<img src="cat.jpg">

​

html

45 of 187

HTML Syntax

Structure/Semantics

​

​

​

​

​

​

Most HTML elements consist of an opening <tag> and a closing </tag>. Some elements have content or other tags nested inside them. The image tag <img> opens and closes in the same tag (it’s an unpaired tag), with an attribute src="" for the image source.

<p>This <em>is</em> a paragraph.</p>

​

<img src="cat.jpg">

​

html

46 of 187

HTML Syntax

Structure/Semantics

<p>This is a paragraph.</p>

​

Element:

Open tag

Element content

Close tag

​

html

47 of 187

HTML Syntax

Structure/Semantics

<p>This is a paragraph.</p>

​

An HTML Element has three parts:

Open tag

Element content

Close tag

​

html

48 of 187

HTML Syntax

Structure/Semantics

<p>This is a paragraph.</p>

​

An HTML Element has three parts:

Open tag

Element content

Close tag

​

html

49 of 187

HTML Syntax

Structure/Semantics

<p>This is a paragraph.</p>

​

An HTML Element has three parts:

Open tag

Element content

Close tag

​

html

50 of 187

HTML Syntax

Structure/Semantics

<p>This is a paragraph.</p>

​

An HTML Element has three parts:

Open tag

Element content

Close tag

​

html

51 of 187

HTML Syntax

Structure/Semantics

<img src="funny-cat.gif">

​

Element:

Open tag

Attribute

Value

Close tag

​

html

52 of 187

HTML Syntax

Structure/Semantics

<img src="funny-cat.gif">

​

An HTML Void Element has four parts:

Open tag

Attribute

Value

Close tag

​

html

53 of 187

HTML Syntax

Structure/Semantics

<img src="funny-cat.gif">

​

An HTML Void Element has four parts:

Open tag

Attribute

Value

Close tag

​

html

54 of 187

HTML Syntax

Structure/Semantics

<img src="funny-cat.gif">

​

An HTML Void Element has four parts:

Open tag

Attribute

Value

Close tag

​

html

55 of 187

HTML Syntax

Structure/Semantics

<img src="funny-cat.gif">

​

An HTML Void Element has four parts:

Open tag

Attribute

Attribute Value

Close tag

​

html

56 of 187

HTML Syntax

Structure/Semantics

<img src="funny-cat.gif">

​

An HTML Void Element has four parts:

Open tag

Attribute

Attribute Value

Close bracket

​

html

57 of 187

CSS Syntax

58 of 187

CSS Syntax

Style/Design

Selector

Declaration

Property

Value

​

​

css

59 of 187

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt;

}

Selector

Declaration

Property

Value

​

​

css

60 of 187

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt;

}

A CSS Rule Set has four parts:

Selector

Declaration

Property

Value

​

​

css

61 of 187

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt;

}

A CSS Rule Set has four parts:

Selector {

Declaration

Property

Value

​

​

css

62 of 187

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt;Xxxxx

}

A CSS Rule Set has four parts:

Selector {

xxxxDeclaration Block Property-Name: Property-Value; xxxx

}

Property

Value

​

​

css

63 of 187

CSS Syntax

Style/Design

p {

xxx font-size: 12pt; Xxx

}

A CSS Rule Set has four parts:

Selector {

xxxxDeclaration Block Property-Name: Property-Value; xxxx

}

​

css

64 of 187

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt; Xxx

}

A CSS Rule Set has four parts:

Selector {

xxxxDeclaration Block Property-Name: Property-Value; xxxx

}

​

css

65 of 187

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt; Xxx

}

​

css

66 of 187

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt;

Xxx font-style: italic;

}

​

​

​

​

​

A CSS Rule Set can contain just �one Property Declaration Block… �Or two…

​

css

67 of 187

CSS Syntax

​

​

​

​

​

A CSS Rule Set can contain just �one Property Declaration Block… �Or two… Or three…

Style/Design

p {

Xxx font-size: 12pt;

Xxx font-style: italic;

Xxx font-weight: bold; Xxx

}

​

css

68 of 187

CSS Syntax

​

​

​

​

​

A CSS Rule Set can contain just �one Property Declaration Block… �Or two… Or three… Or four…

Style/Design

p {

Xxx font-size: 12pt;

Xxx font-style: italic;

Xxx font-weight: bold;

Xxx color: black;

}

​

css

69 of 187

CSS Syntax

Style/Design

p {

Xxx font-size: 12pt;

Xxx font-style: italic;

Xxx font-weight: bold;

Xxx color: black;

Xxx …

Xxx …

Xxx …Xxx

}

​

​

​

​

​

A CSS Rule Set can contain just �one Property Declaration Block… �Or two… Or three… Or four… �Or all of the CSS properties �(there are about 560 of them!)

​

css

70 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

​

​

In linguistics, syntax refers to the arrangement of words �and phrases to create well-formed sentences.

​

In web design, syntax refers to the names that we use�to refer to the different elements in our HTML and CSS markup.

71 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

​

In graphic design, format refers to the shape, �size, and presentation of a book or periodical.

​

In web design, format refers to a defined structure �for the processing, storage, or display of data.

72 of 187

HTML Format

Structure/Semantics

​

​

html

73 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

html

74 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

This configuration of �<tags> will appear in virtually every HTML page.

​

html

75 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

<!DOCTYPE> declares to the web what type �of file this document is.

​

​

html

76 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

​

The <html> tags note the beginning and ending of the markup.

​

​

​

html

77 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

​

​

The <head> section contains the “thinking” part of the website. �Non-visible metadata goes here.

​

​

​

html

78 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

​

​

​

The content inside �of the <title> tag appears at the top �of the internet browser window or its tabs.

​

​

​

html

79 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

​

​

​

It appears in the <head> because it modifies �the browser software, �not what is inside the display window.

​

html

80 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

​

​

​

​

​

​

The <link> tag connects the HTML document to the stylesheet in the CSS folder.

​

html

81 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

​

​

​

​

​

​

​

This allows the document to inherit the style instructions from CSS.

​

​

​

html

82 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

Indenting HTML elements is an important way to see how elements are nested together.

​

html

83 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

<head> and <body> are nested inside <html>, making this file more human readable, because they are one tab in from the <html> tags.

​

html

84 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

Learning to read non-linearly is an important coding skill.

​

html

85 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

Learning to read non-linearly is an important coding skill.

​

html

86 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

Learning to read non-linearly is an important coding skill.

​

html

87 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

Learning to read non-linearly is an important coding skill.

​

html

88 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

It would be illogical �to write (or read) �the entire markup �in a linear sense �(like a book).

​

html

89 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

It would be illogical �to write (or read) �the entire markup �in a linear sense �(like a book).

​

html

90 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

It would be illogical �to write (or read) �the entire markup �in a linear sense �(like a book).

​

html

91 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

It would be illogical �to write (or read) �the entire markup �in a linear sense �(like a book).

​

html

92 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

It would be illogical �to write (or read) �the entire markup �in a linear sense �(like a book).

​

html

93 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

You should learn to read HTML and CSS through and around the nested elements, �or non-linearly.

​

html

94 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

You should learn to read HTML and CSS through and around the nested elements, �or non-linearly.

​

html

95 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

You should learn to read HTML and CSS through and around the nested elements, �or non-linearly.

​

html

96 of 187

HTML Format

Structure/Semantics

<!DOCTYPE html>

<html>

xxxxxx<head>

xxxxxxxxxxxx<title>This is a title.</title>

xxxxxxxxxxxx<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

xxxxxx</head>

xxxxxx<body>

xxxxxxxxxxxx<p>This is a paragraph.</p>

xxxxxx</body>

</html>

You should learn to read HTML and CSS through and around the nested elements, �or non-linearly.

​

html

97 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

98 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

99 of 187

HTML

Markup

​

​

​

Here is the given content of a website, without tags or notation.

​

​

​

html

Facebook Email or Phone: Password: Log In Forgot your password? �Connect with friends and the world around you on Facebook. See �photos and updates from friends in News Feed. Share what's new �in your life on your Timeline. Find more of what you're looking for �with Facebook Search. Sign Up

​

100 of 187

HTML

Markup

​

​

​

Without markup (i.e. structure), the browser ignores line-breaks, and sees the content as a jumbled mess. It lacks any formatting.

​

​

Facebook Email or Phone: Password: Log In Forgot your password? �Connect with friends and the world around you on Facebook. See �photos and updates from friends in News Feed. Share what's new �in your life on your Timeline. Find more of what you're looking for �with Facebook Search. Sign Up

​

​

html

101 of 187

HTML

Markup

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

​

​

This shows the markup and content within just the <body> </body>.

​

(This is abbreviated, not showing the other required HTML tags, such as <html> and <head>).

​

​

​

html

102 of 187

HTML

Markup

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

<h1> (24pt)

<h2> (18pt)

<h3> (14pt)

<h4> (12pt)

<h5> (10pt)

<h6> (9pt)

​

Heading tags identify the hierarchy of the page headings (#1-6).

​

html

103 of 187

HTML

Markup

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

These tags are required for semantics and search engine optimization (SEO).

​

They help to identify the most important, semantically relevant information, describing what information can be found on the website.

​

​

html

104 of 187

HTML

Markup

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

<a> tags are anchors, more commonly known as “hyperlinks” or “links”. These tags allow users to navigate to external websites or to local subpages.

​

The href=" " attribute contains the path to the target page. In this example, they use partial URLs on the local directory (in the same folder).

​

html

105 of 187

HTML

Markup

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

<ol> ordered lists and <ul> unordered lists allow you to create bulleted or numbered lists.

​

<ul> is used here because the four links �on the page are not inherently ordered.

​

<ol> would be appropriate for driving directions, cooking recipes, etc.

​

html

106 of 187

HTML

Markup

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

<li> tags identify the individual elements within the list.

​

By default, where ever you see <li> in HTML, you will see a bullet or number in the browser.

​

html

107 of 187

HTML

Markup

Facebook

​

Email or Phone:

Password:

Log In Forgot your password? �

• Connect with friends and the world around you on Facebook.

• See photos and updates from friends in News Feed.

• Share what's new in your life on your Timeline.

• Find more of what you're looking for with Facebook Search.

​

Sign Up

​

​

The browser would display these tags in this way by default.

​

​

​

html

108 of 187

HTML

109 of 187

HTML

Markup

​

html

110 of 187

HTML + CSS

Markup

​

html

111 of 187

HTML + CSS

Markup + Style

​

html

​

css

112 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Here are some of the default settings that most web browsers apply to our HTML.

body {

background-color: white;

}

​

h1, h2, h3 {

font-family: "Times New Roman", serif;

font-weight: bold;

color: black;

}

​

h1 {

font-size: 24pt;

}

​

h2 {

font-size: 18pt;

}

​

h3 {

font-size: 14pt;

}

​

html

​

css

113 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Here are some of the default settings that most web browsers apply to our HTML.

​

body {

background-color: white;

}

​

h1, h2, h3 {

font-family: "Times New Roman", serif;

font-weight: bold;

color: black;

}

​

h1 {

font-size: 24pt;

}

​

h2 {

font-size: 18pt;

}

​

h3 {

font-size: 14pt;

}

​

css

​

html

114 of 187

HTML + CSS

Markup + Style

Let’s mess with the default settings using Cascading Style Sheets (CSS)!

​

css

​

html

115 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Let’s mess with the default settings using Cascading Style Sheets (CSS)!

​

css

​

html

116 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Let’s mess with the default settings using Cascading Style Sheets (CSS)!

body {

background-color: magenta;

}

​

h1 {

font-family: "Comic Sans MS", cursive;

font-size: 36pt;

}

​

h2 {

font-family: "Impact", sans-serif;

color: cyan;

}

​

h3 {

font-family: "Courier", serif;

}

​

li {

background-color: white;

}

​

css

​

html

117 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Let’s mess with the default settings using Cascading Style Sheets (CSS)!

body {

background-color: magenta;

}

​

h1 {

font-family: "Comic Sans MS", cursive;

font-size: 36pt;

}

​

h2 {

font-family: "Impact", sans-serif;

color: cyan;

}

​

h3 {

font-family: "Courier", serif;

}

​

li {

background-color: white;

}

​

css

​

html

118 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Let’s mess with the default settings using Cascading Style Sheets (CSS)!

body {

background-color: magenta;

}

​

h1 {

font-family: "Comic Sans MS", cursive;

font-size: 36pt;

}

​

h2 {

font-family: "Impact", sans-serif;

color: cyan;

}

​

h3 {

font-family: "Courier", serif;

}

​

li {

background-color: white;

}

​

css

​

html

119 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Let’s mess with the default settings using Cascading Style Sheets (CSS)!

body {

background-color: magenta;

}

​

h1 {

font-family: "Comic Sans MS", cursive;

font-size: 36pt;

}

​

h2 {

font-family: "Impact", sans-serif;

color: cyan;

}

​

h3 {

font-family: "Courier", serif;

}

​

li {

background-color: white;

}

​

css

​

html

120 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Let’s mess with the default settings using Cascading Style Sheets (CSS)!

body {

background-color: magenta;

}

​

h1 {

font-family: "Comic Sans MS", cursive;

font-size: 36pt;

}

​

h2 {

font-family: "Impact", sans-serif;

color: cyan;

}

​

h3 {

font-family: "Courier", serif;

}

​

li {

background-color: white;

}

​

css

​

html

121 of 187

HTML + CSS

Markup + Style

<body>

<h1>Facebook</h1>

​

<h2>Email or Phone:</h2>

<h2>Password:</h2>

<a href="login.html">Log In</a>

<a href="forgot.html">Forgot your password?</a> �

<ul>

<li>Connect with friends and the world around you on Facebook.</li>

<li>See photos and updates from friends in News Feed.</li>

<li>Share what's new in your life on your Timeline.</li>

<li>Find more of what you're looking for with Facebook Search.</li>

</ul>

​

<h3><a href="signup.html">Sign Up</a></h3>

</body>

Let’s mess with the default settings using Cascading Style Sheets (CSS)!

body {

background-color: magenta;

}

​

h1 {

font-family: "Comic Sans MS", cursive;

font-size: 36pt;

}

​

h2 {

font-family: "Impact", sans-serif;

color: cyan;

}

​

h3 {

font-family: "Courier", serif;

}

​

li {

background-color: white;

}

​

css

​

html

122 of 187

HTML + CSS

Markup + Style

Facebook

​

Email or Phone:

Password:

Log In Forgot your password? �

• Connect with friends and the world around you on Facebook.

• See photos and updates from friends in News Feed.

• Share what's new in your life on your Timeline.

• Find more of what you're looking for with Facebook Search.

​

Sign Up

​

​

Wow!

​

Much doge!

​

Amaze!

​

Very internet!

​

​

​

css

​

html

123 of 187

HTML + CSS

Markup + Style

Facebook

​

Email or Phone:

Password:

Log In Forgot your password? �

• Connect with friends and the world around you on Facebook.

• See photos and updates from friends in News Feed.

• Share what's new in your life on your Timeline.

• Find more of what you're looking for with Facebook Search.

​

Sign Up

Cool! We were able to go from this very boring, default style website…

​

css

​

html

124 of 187

HTML + CSS

Markup + Style

Facebook

​

Email or Phone:

Password:

Log In Forgot your password? �

• Connect with friends and the world around you on Facebook.

• See photos and updates from friends in News Feed.

• Share what's new in your life on your Timeline.

• Find more of what you're looking for with Facebook Search.

​

Sign Up

Cool! We were able to go from this very boring, default style website to this really awesome looking website…

​

css

​

html

125 of 187

HTML + CSS

Markup + Style

Facebook

​

Email or Phone:

Password:

Log In Forgot your password? �

• Connect with friends and the world around you on Facebook.

• See photos and updates from friends in News Feed.

• Share what's new in your life on your Timeline.

• Find more of what you're looking for with Facebook Search.

​

Sign Up

Cool! We were able to go from this very boring, default style website to this really awesome looking website using just a few CSS rule sets, properties, and property declarations!

body {

background-color: magenta;

}

​

h1 {

font-family: "Comic Sans MS", cursive;

font-size: 36pt;

}

​

h2 {

font-family: "Impact", sans-serif;

color: cyan;

}

​

h3 {

font-family: "Courier", serif;

}

​

li {

background-color: white;

}

​

css

​

html

126 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

127 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

128 of 187

Anchors

129 of 187

Anchors

The <a> anchor tag </a> defines a hyperlink connection between two pages.

​

The <a> anchor tag </a> can be applied �to any element on the page: words, images, shapes, videos, etc.

130 of 187

Anchors

131 of 187

Anchors

External Anchors

132 of 187

Anchors

External Anchors

<a href="https://www.google.com">Google</a>

133 of 187

Anchors

External Anchors

<a href="https://www.google.com">Google</a>

​

External <a> anchors use the absolute URL of the �target page within the href=" " attribute value.

134 of 187

Anchors

External Anchors

<a href="https://www.google.com">Google</a>

​

Internal/Local Anchors

​

135 of 187

Anchors

External Anchors

<a href="https://www.google.com">Google</a>

​

Internal/Local Anchors

<a href="vacation/europe.html">Europe</a>

​

Internal or local <a> anchors specify a path using the forward slash symbol "/" to navigate from the current HTML file to the directory and file that you are trying to link.

136 of 187

Anchors

External Anchors

<a href="https://www.google.com">Google</a>

​

Internal/Local Anchors

<a href="vacation/europe.html">Europe</a>

​

In this case, the <a> anchor tag tells the internet browser to navigate into a directory (folder) called "vacation", then to find and open the HTML file in that directory (folder) called "europe.html"

137 of 187

Anchors

External Anchors

<a href="https://www.google.com">Google</a>

​

Internal/Local Anchors

<a href="vacation/europe.html">Europe</a>

<a href="../index.html">Main Page</a>

​

From within any directory (folder), you can use "../" to back out �of a directory (folder), in this case, to get back to the root directory.

138 of 187

Anchors

External Anchors

<a href="https://www.google.com">Google</a>

​

Internal/Local Anchors

<a href="vacation/europe.html">Europe</a>

<a href="../index.html">Main Page</a>

​

The browser displays only the content between �the opening <a> and the closing </a> tags.

139 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

140 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

141 of 187

External Resource Links

142 of 187

External Resource Links

The <link> resource link tag defines a connection between the HTML document and a resource document that it can use.

​

Typically, we only use the resource <link> tag to connect CSS stylesheets to our HTML page. The <link> tag is a “self-closing” or void element, so we don’t need a </link>.

143 of 187

External Resource Links

Local External Resource Link

144 of 187

External Resource Links

Local External Resource Link

​

<head>

xx<link type="text/css" rel="stylesheet" href="css/stylesheet.css">

</head>

145 of 187

External Resource Links

Local External Resource Link

​

<head>

xx<link type="text/css" rel="stylesheet" href="css/stylesheet.css">

</head>

​

I’m declaring a link to a resource file

146 of 187

External Resource Links

Local External Resource Link

​

<head>

xx<link type="text/css" rel="stylesheet" href="css/stylesheet.css">

</head>

​

I’m declaring a link to a resource file

The type of resource file is a text file in the form of CSS

147 of 187

External Resource Links

Local External Resource Link

​

<head>

xx<link type="text/css" rel="stylesheet" href="css/stylesheet.css">

</head>

​

I’m declaring a link to a resource file

The type of resource file is a text file in the form of CSS

Its relation to the HTML is that it is the CSS stylesheet

148 of 187

External Resource Links

Local External Resource Link

​

<head>

xx<link type="text/css" rel="stylesheet" href="css/stylesheet.css">

</head>

​

I’m declaring a link to a resource file

The type of resource file is a text file in the form of CSS

Its relation to the HTML is that it is the CSS stylesheet

The styles are called "stylesheet.css" in the folder "css"

149 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

150 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

151 of 187

File Naming Conventions

152 of 187

File Naming Conventions

If one of your hyperlinks doesn’t work correctly, or if any image on your page is broken the problem may be that the names of your files or folders are not correctly formatted.

​

Follow these simple rules to help avoid page errors!

153 of 187

File Naming Conventions

Best Practices for Naming Files

154 of 187

File Naming Conventions

Best Practices for Naming Files

no%20spaces%20ever.html

155 of 187

File Naming Conventions

Best Practices for Naming Files

no%20spaces%20ever.html

hyphens-are-ok.html

156 of 187

File Naming Conventions

Best Practices for Naming Files

no%20spaces%20ever.html

hyphens-are-ok.html

underscores_are_also_cool.html

157 of 187

File Naming Conventions

Best Practices for Naming Files

no%20spaces%20ever.html

hyphens-are-ok.html

underscores_are_also_cool.html

NEVER-UPPERCASE-EVER.html

158 of 187

File Naming Conventions

Best Practices for Naming Files

no%20spaces%20ever.html

hyphens-are-ok.html

underscores_are_also_cool.html

NEVER-UPPERCASE-EVER.html

always-lowercase-everything.html

159 of 187

File Naming Conventions

Best Practices for Naming Files

no%20spaces%20ever.html

hyphens-are-ok.html

underscores_are_also_cool.html

NEVER-UPPERCASE-EVER.html

always-lowercase-everything.html

nº--$pe©i@l--©h@®@çters!!!!.html

160 of 187

File Naming Conventions

These are special characters, they are bad!

& ampersand ‘ apostrophe @ at sign

* asterisk \ back slash / forward slash

` backtick blank spaces : colon $ dollar sign

= equal sign ! exclamation point

< left angle bracket > right angle bracket

{ left bracket } right bracket

% percent | pipe + plus sign

# pound “ ” quotes ? question mark

161 of 187

File Naming Conventions

Best Practices for Naming Files

no%20spaces%20ever.html

hyphens-are-ok.html

underscores_are_also_cool.html

NEVER-UPPERCASE-EVER.html

always-lowercase-everything.html

nº--$pe©i@l--©h@®@çters!!!!.html

less-than-thirty-letters-long.html

162 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

163 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

164 of 187

Folder Structure

165 of 187

Folder Structure

Root Directory

​

The folder that you submit all of your HTML and CSS files in should be labeled with the first two letters of your first name, a dash symbol, and the first two letters of your last name (no spaces, no capital letters).

​

fi-la

166 of 187

Folder Structure

Root Directory

​

The folder that you submit all of your HTML and CSS files in should be labeled with the first two letters of your first name, a dash symbol, and the first two letters of your last name (no spaces, no capital letters). So, if your name is Firstname Lastname, your root directory folder should be called: fi-la

​

fi-la

167 of 187

Folder Structure

Root Directory

​

fi-la

168 of 187

Folder Structure

Root Directory

​

Index index.html

html

​

fi-la

169 of 187

Folder Structure

Root Directory

​

Index index.html

�

​

​

We’ve already learned �that the index.html file is our main website

html

​

fi-la

170 of 187

Folder Structure

Root Directory

​

Index index.html

html

​

fi-la

171 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

html

css

css

​

fi-la

172 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

The CSS file controls the page styles,�and should be placed in a sub-folder �to keep the root directory neat and orderly

html

css

css

​

fi-la

173 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

html

css

css

​

fi-la

174 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

​

Images Folder

css

html

img

css

​

fi-la

175 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

​

Images Folder

Images should also be placed �in their own sub-folder so that they �don’t clutter-up the root directory folder

css

html

img

css

​

fi-la

176 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

​

Images Folder

css

html

img

css

​

fi-la

177 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

​

Images Folder

​

Pages Folder

css

html

html

html

html

html

css

html

img

pages

​

fi-la

178 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

​

Images Folder

​

Pages Folder

Finally, sub-pages (like your �exercise and project assignment �submissions) should be placed �in a sub-folder called “pages”

css

html

html

html

html

html

css

html

img

pages

​

fi-la

179 of 187

Folder Structure

Root Directory

​

Index index.html

​

CSS Folder stylesheet.css

​

Images Folder

​

Pages Folder

css

html

html

html

html

html

css

html

img

pages

​

fi-la

180 of 187

Folder Structure

Root Directory

​

Rather than re-creating a new root directory folder each week, you should just use the same root directory folder and index.html file.

​

fi-la

181 of 187

Folder Structure

Root Directory

​

Rather than re-creating a new root directory folder each week, you should just use the same root directory folder and index.html file. Then simply add your new assignment submission HTML file into the pages folder, along with an anchor tag link to the new assignment web page.

​

fi-la

182 of 187

Folder Structure

Root Directory

​

For this class, please note that your root directory folder size should never exceed 40 MB.

​

fi-la

183 of 187

Folder Structure

Root Directory

​

For this class, please note that your root directory folder size should never exceed 40 MB. This means that you need to be very thoughtful about the resolution and dimensions of the images (especially PNG and GIF files) that you use on your website.

​

fi-la

184 of 187

Folder Structure

Root Directory

​

Warning! Submitting a root directory folder that is larger than the maximum limit of 40 MB will negatively impact your class participation grade!

​

fi-la

185 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

186 of 187

Web Literacy

Syntax & Format

Markup + Style

Anchors, Resource Links

File Naming Conventions

Folder Structure

187 of 187

Web Design is an open-source learning resource.

Class material developed by Ian Besler.�

Licensed under a Creative Commons�Attribution-NonCommercial-ShareAlike�4.0 International License.