Web Design I

Class 01: Introduction to Web Design

Topics

Class Introduction
The Internet
Web Design
HTML Basics
Week 01 Fixed-Width Page (HTML) Lab

Toggle box

Hi There!

I'm Jon Cone

I am one of the full-time faculty in Cecil’s Visual Communication Program. I am mostly responsible for the game design and web design programs. I am also a freelance animator typically working on visualizations.

Office Hours: Tues 10:00am - 1:50pm
Wed 10:00am - 1:50pm, 4:30pm - 6:20pm
Honestly just e-mail me. I will make time when it works for you.: Contact Information: jcone@cecil.edu (prefered); (240) 466-1996 (personal); 410-287-6060 X 1470

This is an actual picture of me.

Cone

Assistant Professor, Cecil College

Demo Reel (a short collection of work)

Name:: What’s your name? What do you go by?
Why you are here:: Is this required for your major? Are you taking this course as an elective? Personal Enrichment?
Experience:: Do you have any history with graphic arts or arts in general? Any experience with Adobe or other graphics software?

Think about your response to these questions and post the answers to the Introduction Discusson Board on canvas.

Alright here is an actual picture of me.

Cone

Assistant Professor, Cecil College

Labs:

Each week a new lab assignment will be given. These mimic the exercises we would do in a face to face course. Think of them as “in class time.” You must simply follow the instructions given as closely as possible. All labs will be submitted by the end of the week on Blackboard.

Projects

Three long form projects will be due by the end of the course. These are similar to completing many labs at once but with your own designs and without limitation.

Discussion Boards

After each project is completed, the appropriate media should be posted displaying your work along with a brief description. You will also post an introduction video the first week of the course.
You must also reply to two of your peers posts for full credit. You will have two weeks to post and reply from when the Discussion Board opens.

13 Labs

3 Projects

4 Discussion Boards

Canvas:

We will using Canvas pretty significantly throughout the course. Although most materials can be found here you will need to submit assignments via Canvas. This is also where you will find your grades.

Click the image to the right to go to Cecil’s Canvas login page.

The Internet

How it came to be:

The video below gives a quick overview of how the internet came to be.

(video not required viewing)

World Wide Web (www):

The internet is a collection of electronic files linked together like a spider web.
Is a two part system consisting of servers (places you visit) and clients (you) that communicate via the hypertext transfer protocol (http). The video below explains the process pretty well.

(video not required viewing)

How the Internet Works:

The user connects to the internet with a variety of devices (computer, phone, etc.) and browser (ie, chrome, firefox, safari, etc.) via an Internet Service Provider (ISP) and inserts a web address.
Your computer makes contact with a network of servers called Domain Name System (DNS) servers. This “phone book” tells your computer the IP address “phone number” associated with the requested domain name.
Using the unique number from the DNS your computer contacts the web server that hosts the website you requested. A web server is a computer that is constantly connected to the web.
The web server responds and send the requested page back to your browser where is assembles it.

Web Design

Design vs Development
Web Design:: Web design is the planning and creation of websites which includes the information and architecture, user interface, site structure, navigation, layout, color, fonts, and imagery.
Web Development:: Web development is the more concerned with the “back-end” or server-side programming.

Web designers are more concerned with the look of the webpage. Web developers produce the technology behind a website that makes it work.

This is a web design course.

Design Considerations

When creating a website a web designer will consider the website structure and the webpage layout among other things.

Website Structure:: Is the organization of the various pages in a site and how they are linked.

Webpage Layout: Each webpage is designed similar to printed page layout. Below is an example of a wireframe.

home

products

services

news

contact

about us

page 01

page 02

page 03

page etc.

logo

Banner

vert nav

content

footer

Website Production:

Like all applied arts your process is very important. You must be able to produce a specific product in a timely manner. Before you start you need to answer these questions:

Purpose/objective (why is this being made?)
Target audience (who will be viewing the website? for whom is the site being built?)
Content (what kind of information will you be displaying?)

After you have determined a concrete goal you draw a mockup or wireframe of you site. You may also create a flow chart or site map.

With the wireframe as a guide the “shell” of the site is developed. Typically you start with the homepage. Stand-in content (text & image) may utilized at this point.

When the site has been satisfaction-ally laid out you will insert the final content into it.

The final step of web production is to publish the site by uploading it to a server.

HTML Basics

HTML (Hypertext Markup Language):

The language written to describe the content of a webpage. HTML is not a complex programming language.
Hypertext: Hyper means more or extra. Text is obviously written words. So basically writing with extra meaning or function.
Markup Language: Markup refers to the fact that you “wrap” content, usually text, with other information. Think about how a teacher might “markup” your report with comments. In HTML you annotate text, which provide additional meaning to the contents of the document. HTML uses Tags as the markup.

<a href="https://www.pointless.com/">pointless sites</a>

pointless sites

In the example above the <a href=”https://www.pointless.com/”> and </a> are on either side of the text pointless sites. This wraps the text (markup) and gives it the extra ability (hyper) to be a link.

HTML is like Word:

In Microsoft Word you can create a hierarchy of information by using headings, sub-headings, paragraphs, etc. You can apply bold, italics, underline, etc.

HTML simply allows you to organize the information in your web page more specifically. Instead of writing your text and clicking a button change the way it looks, you write the tags around the text manually. This allows you to control it much more specifically. I am sure you have had weird things in Word where it indents the text weirdly and you can’t seem to fix it. When you write it yourself you can see exactly how it is being formatted.

Coding in HTML is pretty simple it is a matter of memorizing the plethora of tags.

Code Editor:

HTML is just a text file that is interpreted by the browser. As such, you can really use any text editor. If you are in a pinch you could use Text Edit (Mac) or Notepad/Wordpad (Win).

In this course I am going to use Microsoft Visual Studio Code but you may use whatever you are comfortable with.

Visual Studio Code

A free lightweight code text editor that is compatible with loads of software languages

Other notable editors:

Brackets

Another free code text editor that is compatible with loads of software languages

Sublime Text

A semi-free code text editor that is compatible with loads of software languages

Notepad++

Free code text editor that is compatible with loads of software languages

HTML:

The language (keywords) of HTML is be described below.

Elements and Tags:

HTML uses elements to describe the structure of pages.

A simple web page is made of several different elements. Each element is defined by an opening and closing tag.

Tags act like container. They tell you something about the information that lies between their opening and closing tags.

Element

<p>this is a paragraph</p>

opening tag content closing tag

Attributes:

Attributes provide additional information about the contents of an element.
They appear in the opening tag of the element and are made up of two parts; a name and a value, separated by an equals sign.

Name:: indicates what kind of extra information you are you are supplying about the element’s content.
Value:: is the information or setting for the attribute.

Attribute

name value

Semantics vs. Syntax:

Sentences may be defined by both semantics and syntax. Lines of code follow these same rules.

Syntax:: The grammatical structure.
Semantics:: Refers the to meaning of the vocabulary within a syntax.

HTML tags either add meaning to the content written or provide structural components.

<!DOCTYPE html>

<html>

<!–The content of your webpage goes here–>

</html>

Body, Head, Title, Meta:

<head> This contains information about the page but is not visible in the main browser window.

<title> The contents are displayed in the title bar of the browser window.

<body> Everything inside this element is shown in the main browser window.

<head>

<title>this is the title</title>

<!–This is not readily visible to the user but contains information about the site the browser utilizes–>

</head>

<body>

<!–The area visible to the user is entered here–>

</body>

Headings:

There are six “levels” of headings.

<h1>: Is used for main headings
<h2>: Is used for sub headings

Each subsequent heading is displayed with a smaller and smaller font size.

Paragraph:

<p>: Obviously used to produce a paragraph on a new line.

<!–This is all contained inside the <body> tags–>

<h1>This is the first “level” main heading</h1>

<p>This is a paragraph</p>

<h1>This is the second “level” heading</h1>

<p>Another paragraph? Oh wow!</p>

<h1>This is the third “level” heading</h1>

<p>I think you get it now</p>

<!DOCTYPE html>

<html>

<head>

<title>this is the title</title>

</head>

<body>

<h1>This is the first “level” main heading</h1>

<p>This is a paragraph</p>

<h1>This is the second “level” heading</h1>

<p>Another paragraph? Oh wow!</p>

<h1>This is the third “level” heading</h1>

<p>I think you get it now</p>

</body>

</html>

this is the title

This is the first “level” main heading

This is a paragraph

This is the second “level” heading

Another paragraph? Oh wow!

This is the third “level” heading

I think you get it now

Lists:

<ol>: Ordered Lists: represents lists that have an order such as letters, numbers, roman numerals, etc.
<ul>: Unordered Lists: Simply lists item with bullets.
<li>: Each item is written with this tag.

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

Browser View

First item
Second item
Third item

First item
Second item
Third item

Tables:

<table>

Used to create a table.

<tr>

Table Row: Represents the start of each row.

<td>

Table Data: Represents each cell of a table.

<th>

Table Heading: Represents the heading for a column or row.

You can use the scope attribute to indicate a row or column heading:: <th scope=”row”>; <th scope=”col”>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Browser View

	1	2	3
A	1A	2A	3A
B	1B	2B	3B
C	1C	2C	3C

Common Formatting Tags:

These tag change the look of the content but offers no meaning.

<b>: Bold
<i>: Italic
<sup>: Superscript (like n^th degree)
<sub>: Subscript (like h₂o)
<br />: New line; (like hitting enter)

<hr />: Horizontal rule (creates a horizontal line)

Common Semantic Tags:

Provides extra information; such as where emphasis is placed in a sentence, that something you have written is a quotation (and who said it), the meaning of acronyms, and so on. These are considered better to use since they carry extra meaning.

<strong>: Indicates strong importance usually shown in bold
<em>: Indicates emphasis usually shown in italics
<blockquote>: Usually shown as a paragraph indentation (actually placed before <p>)
<q>: Used to place quotes (does not work in internet explorer)
<abbr>: Used for abbreviations or acronyms
<cite>: Used to reference<dfn>Used to indicate the defining instance of a new term
<address>: Contains the contact information of the author
<ins>: Used to show words that have been added
<del>: Used to show words that have been removed
<s>: Used to show words that are no longer accurate/relevant but should not be removed

Week 01 Fixed-Width Page (HTML) Lab

Week 01 Fixed-Width Page (HTML) Lab:

The first set of labs are directed toward the production of a fixed-width, manually-coded, single web page. In this assignment you will write the basic HTML content. It will follow the basic structure and at minimum, contain the following:

Three levels of headings (ex. <h1> <h2> <h3>).
Paragraphs (<p>).
Semantic and/or formatting tags (ex. <strong>, <em>,<hr />, <br />, etc.).
List or Table (ex. <ul>, <ol>, <table>, etc.).

You will be graded on the following:

File Submission:
- The file/folders are named correctly and submitted as a zip folder with all content included.
Basic Structure:
- Correct HTML structure; html>, <html>, , , etc.
- No erroneousness code.
Content:
- Three levels of headings (ex. <h1> <h2> <h3>).
- Paragraphs (<p>).
- Semantic and/or formatting tags (ex. <strong>, <em>,<hr />, <br />, etc.).
- List or Table (ex. <ul>, <ol>, <table>, etc.).
Aesthetics:
- Code is written cleanly with proper spacing and tabbing.
- Resulting web-page is readable and functional.

Resources:

Assignment Video Tutorials: You may watch these tutorial videos below to help you complete your assignment.
Ghost-It: This application allows you to apply transparency to a window. This mean you can make a tutorial video see-through behind the document you are working on. It could be helpful while completing tutorials. You may download it here.

Lab Tutorial Slideshow

This tutorial will guide you through basic HTML document construction for the completion of the lab assignment.

Lab Introduction

Fixed-Width Page (HTML) Lab

Introduction

This is the first lab in the Fixed-Width Page series. This slideshow will guide you in producing a very basic HTML document. Simply follow the directions on each page and once completed you will submit for a grade. You should follow the directions exactly but exploration and creativity is highly encouraged. Don't be afraid to make it your own.

If you run into any issues please do not hesitate to contact me:

jcone@cecil.edu
(240) 466-1996
messenger pigeon (his name is Tom)

Installing Software

Fixed-Width Page (HTML) Lab

Instructions

Open a new tab and visit visual studio code site (

Hint:

This slideshow is meant to be displayed on half your screen. You should put this on the left or right and put your work on the opposite side.

Files and Folders Setup

File and Folder Setup

Fixed-Width Page (HTML) Lab

Instructions

Create a folder on your desktop (or wherever you keep your homework files) called lastName_site (your last actual name, not literally "lastname". Come on guys!)
Inside the folder you just made, create two more folders. Name them css, and js
Open Microsoft Visual Studio Code.
Select File > New File. A new tab will appear labeled Untitled-1 or something similar
Select File > Save. In the popup window navigate to the root folder of what will be your site, lastName_site
Enter index.html and press Save
You now have an empty webpage we can start coding in!

Structure

Your file/folder structure should appear as above. There should be a root folder named lastName_site. Inside that folder should contain two folders, css & js, and a file named index.html

HTML Document Setup

Fixed-Width Page (HTML) Lab

Code


<!DOCTYPE html>
<html>


</html>

Instructions

The browser interprets our code. So first we must let it know what version of HTML we are using.
Type <!DOCTYPE html> at the top of the page to assign HTML 5.
Next we must let the browser know when the HTML code starts and ends.
Type <html> on the next line after <!DOCTYPE html> to mark the start of HTML
Type </html> at the bottom of the document to mark the end of HTML
The rest of the code is written between these opening and closing tags (<html>, </html>).

Write the Head

Fixed-Width Page (HTML) Lab

Code


<!DOCTYPE html>
<html>
<head>
   <title>Biography of Cone</title>
   <meta charset="UTF-8">
   <meta name=“description” content=“a narrative about cone” />
</head>


</html>

Instructions

The HTML document is broadly broken down into two sections, the head and body. The head is not generally visible in the browser window but tells the browser information about the page and how it should appear
First type <head> on the line below the opening <html> tag
Type </head> on the line below the opening <head> tag you just wrote
The next steps should be written inside the opening and closing tags, <head> & </head>
Type <title>Biography of Cone </title>. This is the title of the page and will be visible in the tab of the browser window
Type <meta charset="utf-8">. This tells the browser what character set you are using to write your code.
Type <meta name=“description” content=“a narrative about cone” />. This tells the browser what the site is about.
There are other <meta /> that may be entered but they are not yet necessary.

Write the Body

Write Up the Body

Fixed-Width Page (HTML) Lab

Code


<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the primitive shape.</p>
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
   

</body>
</html>

Instructions

Type <body> below the closing tag </head>
Below the opening tag <body> write the closing tag </body>
The body contains all of the content actually visible in the browser window. The remaining steps should be written inside the opening and closing tags, <body> & </body>
Let's add heading level one. Type <h1>Cone</h1>. The largest most important heading
Under that type <p>The man, the myth, the primitive shape.</p>. Basic paragraph text
Type <h2>In the beginning...</h2> for the second level heading.
Next type <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
We will continue the body on the next slide.

Write the Body (cont)

Write the Body (continued)

Fixed-Width Page (HTML) Lab

Code


<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the primitive shape.</p>
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <h2>His Future</h2>
    <p>He wants to make the best courses ever, create more short films, and be more fit. But really...</p>
    <h4>He has none.</h4>
    <h3>Things he dislikes</h3>
    <ul>
        <li>Cats</li>
        <li>Vehicles that go Vroom</li>
        <li>Bug Meat</li>
    </ul>
</body>
</html>

Instructions

After the last text you wrote, write:
<h2>Presently coding this document</h2>
<p>Write now he is teaching this class and writing this code. Insprational.</p>
<h2>His Future</h2>
<p>He wants to make the best courses ever, create more short films, and be more fit. But really...</p>
<h4>He has none.</h4>
<h3>Things he dislikes</h3>
That is a good amount but let's add a list. Type <ul> as the opening tag of an unordered list. Add </ul> to close the list
<li> is used for the opening and </li> for the closing of each list item. Type:
<li>Cats</li>
<li>Vehicles that go Vroom</li>
<li>Bug Meat</li>
inbetween the <ul> & </ul> tags
At this point you should have a basic page you can preview.

Preview Your Progress

Fixed-Width Page (HTML) Lab

Instructions

You have written enough now to preview your work in the browser.
First save your file (File > Save)
Navigate to your file on your Desktop. It should appear as a web document. Double-click it to open
High five yourself!

Code


<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the primitive shape.</p>
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <h2>His Future</h2>
    <p>He wants to make the best courses ever, create more short films, and be more fit. But really...</p>
    <h4>He has none.</h4>
    <h3>Things he dislikes</h3>
    <ul>
        <li>Cats</li>
        <li>Vehicles that go Vroom</li>
        <li>Bug Meat</li>
    </ul>
</body>
</html>

Browser

Cone's Biography
Cone

The man, the myth, the primitive shape.

In the beginning...

He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.

Presently coding this document

Write now he is teaching this class and writing this code. Insprational.

His Future

He wants to make the best courses ever, create more short films, and be more fit. But really...

He has none.
Things he dislikes

Cats
Vehicles that go Vroom
Bug Meat

Apply Format & Semantic Tags

Fixed-Width Page (HTML) Lab

Code


<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the <strong>primitive shape</strong>.</p>
    <hr />
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
    <br />
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <br />
    <h2>His Future</h2>
    <p>He wants to make the <em>best courses</em> ever, create more <em>short films</em>, and be <em>more fit</em>. But really...</p>
    <h4>He has <strong>none</strong>.</h4>
    <br />
    <h3>Things he dislikes</h3>
    <ul>
        <li>Cats</li>
        <li>Vehicles that go Vroom</li>
        <li>Bug Meat</li>
    </ul>
</body>
</html>

Instructions

The main content of the site is produced but it could use some more format and semantic meaning applied. This will make it look a little nicer.
Let's place an <hr /> tag under the first <p> element. This will add a horizontal rule
Create a break (like pressing enter) after each of the remaining <p> elements by typing <br />. This will help separate the sections
To give the appearance of more importance and make the text bold we use <strong>. Wrap the text, primitive shape and none. It should look like this:
<strong>primitive shape</strong>
<strong>none</strong>
<em> is used to emphasize text. Wrap the text, best courses, short films, more fit. It should look like this:
<em>best courses</em>
<em>short films</em>
<em>more fit</em>

Final Review and Submission

Fixed-Width Page (HTML) Lab

Instructions

Before you submit you should review your code and Save your file (File > Save), navigate to your file on your Desktop, and double-click it to open
Look for any errors. If there are any, look through your code and fix them. When you are happy, proceed
Your site is not just the single HTML document you have created but the root folder and all contents therein. You MUST submit the ENTIRE folder
You cannot submit folders on Blackboard. Instead we can zip the folder and submit that. Navigate to the location of your site folder. Right-click over top of it and select Send to > Compressed (zipped) folder on Windows and Compress on MacOS. A new zipped file will be created
Lastly, log into Blackboard (Here) and click on this course. Inside the course, select Week 01, then the Week 01: Fixed-Width Page (HTML) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.

Code


<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the primitive shape.</p>
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <h2>His Future</h2>
    <p>He wants to make the best courses ever, create more short films, and be more fit. But really...</p>
    <h4>He has none.</h4>
    <h3>Things he dislikes</h3>
    <ul>
        <li>Cats</li>
        <li>Vehicles that go Vroom</li>
        <li>Bug Meat</li>
    </ul>
</body>
</html>

Browser

Cone's Biography
Cone

The man, the myth, the primitive shape.

In the beginning...

He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.

Presently coding this document

Write now he is teaching this class and writing this code. Insprational.

His Future

He wants to make the best courses ever, create more short films, and be more fit. But really...

He has none.

Things he dislikes

Cats
Vehicles that go Vroom
Bug Meat

Lab Synopsis

Reflection

You have created your very first web site. It's not very exciting quite yet but we will build on this in the next lab. Good job!

If you run into any issues please do not hesitate to contact me:

jcone@cecil.edu
(240) 466-1996
messenger pigeon (his name is Tom)

Wait! Before you go!

Did you remember to?

Familiarize yourself with Blackboard
Read through this webpage
Watch the videos
Submit Week 01 Fixed-Width Page (HTML) Lab on Blackboard
Post an introduction on the Introduction Discussion Board

Web Design I

Topics

Class Introduction

Hi There!

I'm Jon Cone

Demo Reel (a short collection of work)

Course Description:

Labs:

Projects

Discussion Boards

13 Labs

3 Projects

4 Discussion Boards

Canvas:

The Internet

How it came to be:

World Wide Web (www):

How the Internet Works:

Web Design

Design vs Development

Design Considerations

Website Production:

HTML Basics

HTML (Hypertext Markup Language):

HTML is like Word:

Code Editor:

Visual Studio Code

Brackets

Sublime Text

Notepad++

HTML:

Elements and Tags:

Element

Attributes:

Attribute

Semantics vs. Syntax:

Doctype, HTML:

Body, Head, Title, Meta:

Headings:

Paragraph:

this is the title

This is the first “level” main heading

This is the second “level” heading

This is the third “level” heading

Lists:

Browser View

Tables:

Browser View

Common Formatting Tags:

Common Semantic Tags:

Week 01 Fixed-Width Page (HTML) Lab

Week 01 Fixed-Width Page (HTML) Lab:

You will be graded on the following:

Resources:

Lab Tutorial Slideshow

Wait! Before you go!

Did you remember to?