People talk about the web every single day. They talk about websites and memes they saw. They talk about videos and music they heard. But for all the talk, very few people know what a website actually is or how it works. And if the goal of a web design course is to give you the skills to design web pages and websites, then it seems only appropriate that we start really talking about the concept of a website. If you take away all the complicated stuff that goes into designing a website, the basic idea is the same. A website is a visual presentation. Sort of like a PowerPoint or a poster or a magazine. But the difference between a website and all these other kinds of visual presentations is that a website can only be seen by someone who has access to an Internet browser like Chrome or Firefox.
In this lesson, you will learn a little bit about how all these things fit together and then you’ll start to build your very first web page.
LEARNING GOAL #2: The Basics of HTML
Students will be able to design multiple web pages with HTML through the use of simple Text Editors.
PART 1: Introduction to WebsitesRead More
Topic #1 – Before You Roll Your Eyes
One of the great challenges about teaching and learning technology is that teachers and students are usually coming from two very different points of view. In many cases, students already know more than their teachers. But not always. In some cases, students only think they know more than their teachers. So before your web design teacher gets into any of the details about this lesson, the time has come for students to share what they think they know about the topic. We’re going to turn off our screens and listen for students to answer the following questions.
Begin by turning to your team and seeing if anyone can answer these questions. You have three minutes to get through as many of them as you can.
- What is the Internet?
- What is the Web?
- What is a Web Site?
- What is a Browser?
- What is Social Media?
Topic #2 – The Internet
The Internet is a massive network of computers connected to each other all around the world. It began as a student research project that the government set up after World War II and then ignored. A group known as the Advanced Research Projects Agency (ARPA) connected a few college computers together and then figured out how to make those computers communicate with each other and pass information back and forth. Originally, the group called their project the ARPANET, but by 1982, they were already starting to call it the Internet.
Topic #3 – The Web
The Web, also known as the World Wide Web, or WWW, is a space on the Internet where people can go to share information by agreeing to use a certain kind of basic code known as HTML. After the Internet became official in the 1980s, the only people in the world who had access to it were people in the schools and the government and the military. One of these people was Tim Berners-Lee, an engineer who used the Internet to share ideas with other engineers. On August 6, 1991, he finished building an open space on the Internet that he called the World Wide Web (www) and then published an explanation of what he had just designed and how it worked. He shared his new creation, which he called “The Project,” with anyone who had access to the Internet. Here is the first website ever created.
Topic #4 – Web Pages
A web page is a hypertext document that offers a visual presentation of content and information. When Tim Berners Lee created the World Wide Web and shared his idea with everyone connected to the Internet, he was doing something that had never been done before. He was creating pages that could link back and forth to each other through clickable words. The language he used to created these pages was HTML, or Hypertext Markup Language. So any page written with HTML is considered a web page.
But as you already know, a web page, like the one you’re looking at right now, has everything from colors and shapes to images and videos. That means a web page requires more than just a coded language. It requires a few things to work together with that coded language. Consider the photographs you take on your phone or your personal camera. Every image and every video you take is a file that takes up space in a folder somewhere on your phone. The same is true of everything that you see on a web page. The only thing holding these images and colors and shapes together is a code written with HTML. Which means, basically, that when you look at a web page, you are looking at a bunch of files from a bunch of folders all tied together through a code.
You might even say that a website (below) is nothing more than a bunch of files and folders connected together through a code.
Topic #5 – Web Sites
A website is a central location for related web pages. For example, when you arrive at k12digitalcourses.com, you arrive at a page with a black bar across the top, an image in the background, some links across the middle, and a video near the bottom, but that page is also the central location for finding all the other related pages for K12 Digital Courses. If someone asked you to go to a place where you could find a bunch of six second videos, you would probably go to the “site” known as Vine. If someone asked you to go to a place where you could search for information or images, you would probably go to the “site” known as Google or Bing. These are “sites” because they are central locations for a specific purpose with other related web pages.
There are three main structures that determine how someone will experience or navigate through a website.
Any website that is designed for visitors to move logically from one page to the next is known as having a Linear Structure because there is an understood order for all of the information that is presented. Most of this course website could be classified as linear because students go from lesson to lesson, rather than jumping around to unpredictable pages. A small website with five or six pages would also be called linear because there isn’t much to it, but the information will probably be easy to find by moving from page to page. Here is an example of a local website with a Linear Structure.
Any website with a Hierarchical Structure is usually a website that has a ton of pages and most of them are not visible from the Home Page. You have to dig down from one page to the next page to the next page to find the specific page you’re looking for. Think of a Hierarchical Structure as being the kind of website with sections and subsections and subsections below those. The kind of website with lots of information and most of it buried in the website under other pages. Big corporations usually have these kinds of sites. Here is an example of a familiar and local website with a Hierarchical Structure.
Most websites have a combination of linear and hierarchical structures, but a website with a Random Structure means the content and the information on that site has no particular order. This might be true of a website that is trying to achieve many things and doesn’t necessarily have one central theme. It also means the creator of that site follows no particular rules and has no restrictions. Most users on those sites do not enjoy their experience because it’s difficult to follow the design and the information is a little chaotic, but it gives more freedom to the designer. Here is an example of a website with a Random Structure.
While a lot of web designers focus on designing their sites using one of the main three structures above, the two most popular types of websites are social media sites (for sharing) and search engine sites (for searching). Almost always, these sites have their own type of design and their own type of structure that depends more on the user than the designer.
Topic #6 – Browsers
The only way to access web pages and web sites on the World Wide Web is to have a browser like Chrome, Firefox, Edge, or Safari. That’s because a browser is a web application used to access content on the web. There are a few other browsers outside these main four, and one that we’ll try in a moment, but for the most part, everyone accesses the Web using a browser that they are most comfortable.
Topic #7 – Four Quick Web Activities
- Activity #1 – Managing Your Own Internet Connection
- Activity #2 – Exploring a Source Code
- Activity #3 – Saving our Lesson Page to the Desktop
- Activity #4 – Trying out the Vivaldi Browser
PART 2: Introduction to CodingRead More
Challenge #1 – Folder Setup
Since the web is based on files inside of folders, then we have to create a few folders to work with throughout the semester. Follow the steps below with your teacher:
- Step #1 – Go to your U:Drive
- Step #2 – Create a New Folder called “webdesign1” (lowercase)
- Step #3 – Go into your “webdesign1” folder
- Step #4 – Inside of your “webdesign1” folder, Create a New Folder called “img” (for images)
- Step #5 – Inside of your “webdesign1” folder, Create a New Folder called “pgs” (for pages)
- Step #6 – Inside of your “webdesign1” folder, Create a New Folder called “msc” (for miscellaneous)
- Step #7 – Inside of your “webdesign1” folder, Create a New Folder called “css” (for style sheets)
- Step #8 – Click on “view” at the top of your folders, change the layout to “Extra Large Folders”
Challenge #2 – Text Editors: Notepad & Notepad++
In order to create a web page that you can look at on a browser, you have to use the right kind of program, known as a text editor or an HTML editor. On your computer, there are two of these programs: Notepad and Notepad++. For the first few weeks, we will be using Notepad to write all of our pages with HTML. Then, after you get used to Notepad, we will graduate up to the Notepad++ program. Go ahead and find Notepad, then open it up.
Challenge #3 – Notepad Settings
At the top of your Notepad program, we are going to change a few things. Follow the steps below with your teacher:
- Step #1 – Type a long sentence into your Notepad so that it goes off the page.
- Step #2 – Go to Format > Word Wrap
- Step #3 – Go to Format > Font (Readable) and Size (20-26)
- Step #4 – Go to File > Save As “2-1_firstpage.html” in your “pgs” subfolder
(Follow the Teacher’s Instructions)
- Step #5 – Type out the following code
Challenge #4 – Coding with the Teacher