Start here1Website2Domain3Browser Page ExamplePractice and quizWords and resources

Start hereWelcome

Listen to the story0:52

The Lakeview Community Center wants a website so families can see the events calendar from home. The director has three questions: What name should we use, and who do we pay for it? Where do the pages live? And what happens when someone types our address and presses Enter? In about a second, the visitor's browser reads the address, finds the right computer, asks for the page, and builds it on the screen. This class answers the director's questions one picture at a time.

What you will learn

  • Explain what a domain name is, why it is rented every year, and what a web host does
  • Read a web address and say what each part means
  • Describe the four steps your browser takes when you press Enter
  • Point out the parts of a web page and the three languages that build it

In this class

1WebsiteWhat happens in the second after you press Enter: your browser finds the right computer and asks it for the page.2 pictures2DomainEvery website needs a name people can remember and a computer that stores its files. Here is how to get both.2 pictures3Browser Page ExampleA real page, piece by piece: the parts of your browser and the three kinds of text that build every page.2 pictures✓Practice and quizTry it yourself, the three things to remember, and a short quiz.

Part 1Website

What happens in the second after you press Enter: your browser finds the right computer and asks it for the page.

Finding the Server: DNS
Listen to this part1:34
Finding the Server: DNSA laptop asks a DNS resolver for numu.tech. The resolver asks a root server, then a .tech server, then the numu.tech server, and returns the IP address 203.0.113.25 to the laptop.FINDING THE SERVER: DNSnumu.tech?DNS resolverRoot server.tech servernumu.tech server203.0.113.25123456
Read all 6 details
  1. 1You type a name. Computers find each other by number, but people remember names. When you type numu.tech, your device first has to find that site's number, its IP (Internet Protocol) address. The system that does this is called DNS, the Domain Name System.
  2. 2Ask the resolver. Your device asks a DNS resolver, usually run by your internet service provider (ISP). Think of it as a librarian who knows where to look things up.
  3. 3The root. If the librarian does not already know, it asks a root server. The root does not know the answer, but it knows who handles every name ending in .tech.
  4. 4The .tech server. The .tech server points to the name server that holds the official records for numu.tech.
  5. 5The final answer. The numu.tech name server answers with the IP address, such as 203.0.113.25.
  6. 6Back to you, and remembered. The resolver hands the address to your browser, which can now contact the website. The answer is saved for a while, so the next visit skips most of these steps.
Asking and Answering: HTTP
Listen to this picture1:20
Asking and Answering: HTTPA browser sends a GET /about request through a locked HTTPS tunnel to a web server, which answers with HTML, CSS, JavaScript, and image files and the status 200 OK. Badges show 200, 301, 404, and 500 codes.ASKING AND ANSWERINGYour browserWeb serverGET /aboutHTMLCSSJSIMG200 OKHTTPS200 OK301 Moved404 Not found500 Server error1234
Read all 4 details
  1. 1The request. Your browser sends the web server a short message, like "GET /about," which means "please send me the About page." This shared language is called HTTP (Hypertext Transfer Protocol), and GET is its word for "send me."
  2. 2The answer. The server sends back the files that make up the page: HTML (HyperText Markup Language), CSS (Cascading Style Sheets), JavaScript (JS), and images (IMG). A big page can be dozens of files.
  3. 3Status codes. Every answer starts with a three-digit code. 200 means OK. 301 means the page moved. 404 means not found. Codes in the 500s mean something went wrong on the server's side.
  4. 4The padlock. HTTPS (the secure version of HTTP) seals the conversation like a locked envelope, so others on the network cannot read or change it. The padlock means the connection is private. It does not prove the website itself is honest, so still be careful where you type passwords.
← Start here

Part 2Domain

Every website needs a name people can remember and a computer that stores its files. Here is how to get both.

A Name and a Home for a Website
Listen to this part1:43
A Name and a Home for a WebsiteThree panels: renting a domain name from a registrar every year, a DNS address book matching the name to a number, and a web host server storing page files. A visitor's laptop asks DNS, then the server.A NAME AND A HOME FOR A WEBSITE1. RENT THE NAME2. LIST IT IN DNS3. STORE THE FILESlakeviewcenter.exampleRegistrara company that keepsthe name recordsEVERY YEARRenewNameNumberlakeview...192.0.2.44numu.tech(listed)library...(listed)DNS: the address bookindex.htmlevents.htmlphotos/Web host: a serverlakeviewcenter.exampleA visitor types the namePage files come back12345
Read all 5 details
  1. 1Pick a domain name. A domain name is the easy-to-remember name of a website. Our example, lakeviewcenter.example, uses the .example ending, which is set aside for teaching. Real names end in .com, .org, .tech, .gov, and many others. ICANN (Internet Corporation for Assigned Names and Numbers) keeps the list of these endings.
  2. 2You rent it, every year. You cannot buy a domain name forever. You pay a registrar for the right to use it for one or more years, then renew. If nobody renews it, someone else can take it, so put the renewal date on the office calendar.
  3. 3DNS points the name to a number. DNS (Domain Name System) is like an address book for websites. It matches each name to the number address, called an IP (Internet Protocol) address, of the computer that holds the site.
  4. 4The web host stores the files. A web server is both a computer that stores a website's files and the software that sends them out. Hosting means putting your files on that server, often in a data center that runs day and night.
  5. 5A visitor arrives. When someone types the name, their computer asks DNS for the number, then asks that server for the page. The pages come back in small pieces called packets.
Reading a Web Address
Listen to this picture1:05
Reading a Web AddressA browser address bar showing https://www.numu.tech/about with each part colored and labeled: scheme, subdomain, domain name, top-level domain, and path.READING A WEB ADDRESShttps://www.numu.tech/aboutSchemeSubdomainDomain nameTop-level domainPathRead it left to right: how to talk, which website, which page.12345
Read all 5 details
  1. 1Scheme. https:// is the scheme. It tells the browser how to talk to the website. HTTPS stands for Hypertext Transfer Protocol Secure, and the "S" means secure: the conversation is scrambled so others on the network cannot read it.
  2. 2Subdomain. www is a subdomain, a section of a website's name. Many sites work with or without it.
  3. 3Domain name. numu is the name the website's owner registered. Domain names are easy for people to remember, unlike the number addresses computers use.
  4. 4Top-level domain. .tech is the top-level domain, the last part of the name. Others include .com, .org, .gov, and .edu.
  5. 5Path. /about points to a specific page on the website, like a room inside a building.

Planning a website for your program or business

  1. 1
    Choose the name

    Pick something short and easy to say on the radio. Check that it is free at a registrar, and register it in the organization's name, not a staff member's.

  2. 2
    Write down the renewal date

    Domain names are rented for one or more years. Put the renewal date and the account login in a safe, shared place so the name is never lost when staff change.

  3. 3
    Pick a web host

    Many hosts offer simple website builders. Ask about the yearly cost, backups, and whether HTTPS is included.

  4. 4
    Plan the pages

    Start with the basics people ask for: hours, location, phone, upcoming events, and how to get help.

  5. 5
    Keep it current

    Name one person to update the site each month. An out-of-date calendar sends people to events that already happened.

← Website

Part 3Browser Page Example

A real page, piece by piece: the parts of your browser and the three kinds of text that build every page.

A Web Page in Your Browser
Listen to this part1:51
A Web Page in Your BrowserA browser window showing tabs, back and reload buttons, an address bar with a padlock and https address, and a community center page with a menu, heading, picture, link, button, and footer. A side panel shows the same page as HTML code.A WEB PAGE IN YOUR BROWSERCommunity EventsWeather←→↻https://lakeviewcenter.example/eventsLakeview Community CenterHomeEventsContactCommunity EventsRead the full scheduleSign upContact | Hours | PrivacyView page source<header> <nav>...</nav></header><h1>Community Events</h1><img src="lake.jpg"><a href="/schedule"> Read the full schedule</a><button>Sign up </button>The same page,written in HTML1234567
Read all 7 details
  1. 1Tabs. Each tab is its own page. You can keep several pages open and switch between them, like folders on a desk.
  2. 2Back, forward, and reload. The arrows take you to the page you saw before or after. The circle arrow, reload, asks the server for the page again, which helps if it did not load right.
  3. 3The address bar and padlock. The address bar shows the page's full address, called a URL (Uniform Resource Locator). The padlock and https mean the connection is encrypted with HTTPS (Hypertext Transfer Protocol Secure), so others cannot read it. It does not prove the site is honest.
  4. 4The menu. The menu at the top is a list of links to the site's main pages. On a phone it often hides behind a button with three lines.
  5. 5Headings, pictures, and text. Headings, pictures, and paragraphs are written in HTML (HyperText Markup Language). CSS (Cascading Style Sheets) sets the colors and layout you see.
  6. 6Links and buttons. Underlined words are links to another page. Buttons do something when you click them, often with JavaScript, a programming language that makes pages respond.
  7. 7View the source. Most computer browsers let you right-click a page and choose View page source to see its HTML. Every page on the web is built from text like this.
Three Building Blocks of Every Page
Listen to this picture1:16
Three Building Blocks of Every PageThree houses: a bare wooden frame labeled HTML structure, a painted house labeled CSS style, and a house with glowing lights and a ringing doorbell labeled JavaScript action.THREE BUILDING BLOCKS OF EVERY PAGE<h1><p> <img>HTMLSTRUCTURECSSSTYLEJavaScriptACTIONYour browser puts all three together1234
Read all 4 details
  1. 1HTML: the frame. HTML (HyperText Markup Language) is the structure of the page: the headings, paragraphs, pictures, and links. It is like the frame and walls of a house. Tags such as <h1> for a heading and <p> for a paragraph mark each part.
  2. 2CSS: the paint. CSS (Cascading Style Sheets) controls how the page looks: colors, fonts, spacing, and layout. It is like the paint, furniture, and decorations. The same HTML can look very different with different CSS.
  3. 3JavaScript: the wiring. JavaScript, often shortened to JS, is a programming language that makes the page respond when you do something, like opening a menu, playing a video, or checking a form before you send it. It is like the electrical wiring that runs the lights and the doorbell.
  4. 4Your browser builds it. Your browser reads all three and paints the finished page on your screen in a moment. On most computers you can right-click a page and choose "View page source" to see its HTML.
← Domain

ReviewPractice and quiz

Listen to the practice steps1:00

Try it at home

Use any browser on a phone or computer:

  1. Open a website you trust and find the padlock next to the address. Tap or click it to see the connection details.
  2. Copy the full web address and paste it into a note. Circle the scheme, the domain name, the top-level domain, and the path.
  3. Type a page that does not exist on purpose, such as numu.tech/no-such-page, and look for the 404 message.
  4. On a computer, right-click a page and choose View page source. Find one heading tag, such as <h1>.
  5. Open two tabs and use the back and forward arrows to move between pages.

Remember

numu.tech

A web address says how, which site, and which page

DNS turns names into numbers

</>

HTML builds it, CSS styles it, JavaScript makes it move

Check what you learned

1. The community center's website disappeared, and the name now shows an ad page. What most likely happened?

2. What does DNS (the Domain Name System) do?

3. A page says 404. What happened?

4. What does the padlock next to the address mean?

5. Which part of a web page sets its colors and layout?

← Browser Page Example

ResourcesWords and resources

Words to know

URL
Uniform Resource Locator. A full web address, such as https://www.numu.tech/resources.
TLD
Top-Level Domain. The last part of a web name, such as .com, .org, .gov, or .tech.
DNS
Domain Name System. The internet's phone book: it turns a name like numu.tech into a numeric IP address.
HTTP / HTTPS
HyperText Transfer Protocol (Secure). The rules a browser and a web server use to ask for and send pages. The S means the conversation is locked.
HTML
HyperText Markup Language. The text that tells a browser what is on a page: headings, paragraphs, pictures, and links.
CSS
Cascading Style Sheets. The part of a web page that sets colors, fonts, and layout.
JS
JavaScript. The programming language that makes web pages interactive.
IP, IPv4, IPv6
Internet Protocol, versions 4 and 6. The addressing system every device uses. IPv4 looks like 192.0.2.1; IPv6 looks like 2001:db8::1.
ISP
Internet Service Provider. The company or tribal utility that connects your home to the internet.
Domain name
The easy-to-remember name of a website, such as numu.tech. You rent it from a registrar for one or more years.
ICANN
Internet Corporation for Assigned Names and Numbers. The nonprofit that keeps the list of top-level domains such as .com and .org.
Registrar
A company that registers domain names and keeps the records of who is using each name.
Web host
A company or computer that stores a website's files and sends them to visitors. Putting your files there is called hosting.
Web server
A computer that stores website files, plus the software that sends pages to browsers when they ask.
Browser
The app you use to visit websites, such as Chrome, Edge, Firefox, or Safari.
404
The message a server sends when it cannot find the page you asked for.

Learn more

For teachers and digital navigators: how to run this class (45 minutes)

Lesson plan

  1. 5 minStart here: read the story. Ask: what website would you want for a program or business here?
  2. 10 minWebsite: DNS and the request. Have two volunteers act out the browser and the server.
  3. 12 minDomain: renting a name and hosting, then read a web address together. Hand out the planning steps.
  4. 10 minBrowser Page Example: open a real page and point out each part, then view its source.
  5. 8 minPractice and quiz together and the three Remember cards.

What you need

  • Projector or large TV for the slides
  • Printed handouts
  • A computer with a browser for a live demonstration
  • Optional: sticky notes for the address-reading activity

Talk about it

  • What information do people here have trouble finding online?
  • Who should own a program's website name, and how do you keep it from being lost?
  • How can you tell if a website is the real one before you type personal information?

The PowerPoint slides follow this plan, with the story and every picture detail in the speaker notes.

References

  1. Cloudflare. (n.d.-a). What is DNS? Cloudflare Learning Center. https://www.cloudflare.com/learning/dns/what-is-dns/
  2. Cloudflare. (n.d.-b). What is HTTPS? Cloudflare Learning Center. https://www.cloudflare.com/learning/ssl/what-is-https/
  3. Code.org. (n.d.). How the Internet works [Video series]. https://code.org/videos
  4. MDN contributors. (n.d.-a). How the web works. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works
  5. MDN contributors. (n.d.-b). HTTP response status codes. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status
  6. MDN contributors. (n.d.-c). HTTPS. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Glossary/HTTPS
  7. MDN contributors. (n.d.-d). What is a domain name? MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name
  8. MDN contributors. (n.d.-e). What is a URL? MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL
  9. MDN contributors. (n.d.-f). What is a web server? MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server
  10. MDN contributors. (n.d.-g). What is JavaScript? MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript
← Practice and quiz

Questions about internet service for your community?

Our team is happy to help guide your community's broadband plan.

Contact our team