What’s the Web? We’ll start WebFest by visualizing our understanding of the World Wide Web (and we’ll revisit this document later). Our goal this week is to break down the web into its simplest forms to better understand how it works so we can make informed decisions and build better websites.
We’ll spend time creating simple HTML pages that we can use to start prototyping websites. After exploring a local web server, we’ll signup for OU Create, select website domains, and continue investigating how web servers work. Specifically, we’ll discuss the software Apache and how we can use it and “web root directories” to host our websites.
The remaining time of our first session will be spent planning, writing, collecting, and preparing assets for the website you will produce this week.
Illustrate the Web – Sketch your current understanding of the web and how it works. This may look like a flow chart, outline, diagram, etc. Any rendition is fine. Feel free to use any familiar jargon (website, server, domain, etc.). Retain this illustration for the duration of WebFest.
Write “About” page – Using Notepad (Windows) or TextEdit (Mac) (or other text editor) write a summary of the website you want to create this week. If you’re working on a personal website, this may be an “About Me” page. A research or course website could have an “About this Project” page. (We’ll save this text file as a .html for now.)
Decide on domain – When you login to create.ou.edu, the first setup step in this process is to select a domain (URL) for your website. Often people use some form of their name (i.e. firsttlast.com) if they are creating a personal/professional website. Read more about choosing a domain name here.
Host your “About” page HTML File (optional) – During our session, we’ll use the HTML files you create to demonstrate how the web works. You’re welcome to login to create.ou.edu, access the “File Manager” section, and upload your HTML file to the “public_html” folder. If your HTML file is named “index.html,” it should display this file when you (or anyone for that matter) visits your domain. For more information, see this guide.
Readings & Videos
Crafting Your Digital Scholarly Presence – Michigan State University promotional video:
How the web works – Here is a brief overview of our workshop activity demonstrating how computers communicate and share files via internet protocols.
How the Domain Name System (DNS) Work – The Domain Name System is central to the internet. This system assigns numbers to the computers that host web sites and web apps. It also correlates these numbers with the more human readable URLs. When you type http://ou.edu the DNS converts that URL into a number. Your web browser then contacts the server at that number, which returns the files for the OU website.
Seven ways to think like the web – Jon Udell’s blog post helps people understand how the web works and how best to use the web to gather and share information.
HTML Basics – This is a quick introduction to HTML from w3schools.com for those that want a jumpstart on web coding.
Web Technologies Lynda.com Course – If you’d like to take the deep dive into web technologies, a great introduction is this Lynda.com course (~2 hours). These videos go well beyond the scope of WebFest but provide in-depth explanations for those who want to explore how to potentially integrate web technologies in their curriculum. Here’s an example from this course:
Softwares
Brackets – Free & open source text editor for web design. Used to build HTML websites.
Trinket.io – An embeddable widget that allows users to experiment with HTML code directly on a website:
WebFest Glossary
Domain (aka URL) – Text that identifies a particular website on the internet (i.e. webfest.keeganslw.com, experienceplay.education, google.com, etc.). URLs are paired with a particular IP Addresses (see DNS Server).
IP Address – A series of numbers that identifies a particular computer on the internet. These numbers are formatted like so: 127.0.0.1 and you can check your computer’s current IP address using whatismyipaddress.com.
DNS Server – Domain Name System (DNS) servers are used to translate between URLs and IP Addresses in order to find the correct web server when a URL is requested.
Web Server – The computer that stores and distributes website files. These computers are identifiable by their IP Address.
Apache – The most widely used open source software to run a web server.
Web Root Directory – The directory (folder) that contains the files to be distributed as a website. The contents of this folder is distributed by Apache to other computers.
Web Host – Companies (like BlueHost, HostGator, Reclaim Hosting, etc.) that rent web servers to run websites and other services.
Web Browser – The software on a computer to read and visualize website files after they’re received from a web server. Website files consist of .html and .css (etc.) file types.
HTML – HyperText Markup Language (HTML) is the standardized code of web page content. For example, bold text is coded like so: <b>This text is so BOLD.</b> You can learn more about HTML here.
CSS – Cascading Style Sheets (CSS) is the standardized code of web page formatting. For example, colored text is coded like so: p { color: blue; } meaning all HTML text that uses the <p> formatting like so: <p>will be blue</p>.
