1: Hypertext
The first website
What Makes a Good Website?
The website is functional.
The website is accessible.
The website is usable by as many people as possible, whatever their hardware, software, language, culture, location, or physical or mental ability.
The website is fast.
The website conserves the user’s data and time.
The website is maintainable.
The website can be easily modified, upgraded, and adapted to changing requirements, content, and technologies.
The website can be passed on to other maintainers and contributors.
The website is resilient.
The website is designed to last far into the future as technologies and infrastructure change around it.
The website relies on the fewest possible externalities.
The website is beautiful.
The website is designed with creativity, care, and good craft.
The website is open.
The website is free.
The website does not rely on proprietary software.
The website allows users and developers the right to modify, study, redistribute, and improve the code.
The website is humane.
The website contributes to the user’s well-being.
The website safeguards the user’s data, privacy, and sometimes anonymity.
The website does not track the user.
How do Websites Work?
Type in a Uniform Resource Locator (URL), such as google.com.
Browser makes a Domain Name System (DNS) lookup to find the IP address associated with the URL.
The IP address is a unique “name” for a computer (or server) which identifies it on the internet.
The browser creates a connection to the server on port 80 (the default port).
Following the Hypertext Transfer Protocol (HTTP) protocol, the browser sends a GET request to the server asking for the file at the address.
The server sends the Hypertext Markup Language (HTML) text for the web page to the browser.
The browser reads the HTML tags. If it encounters any images or references to other files necessary to display the page, it initiates similar requests for those resources.
The browser displays the page to the user.
What is HTML?
HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage along with the basic layout of the webpage. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/ behavior (JavaScript).
The best way to learn about the usage of HTML elements is to read good documentation, such as the Mozilla Developer Network docs, maintained by a consortium of web browser vendors:
Here is a short list of the most common HTML elements:
How should you learn HTML?
In general, you should get used to googling simple questions about code. Try these:
- "table elements mdn" (Both of the first two results are relevant. HTML table basics | MDN is a tutorial.)
- "how to use html sections mdn" (Using HTML sections and outlines | MDN is useful.)
- "images html mdn" (Images in HTML | MDN is essential reading.)
I'm searching for simple questions with the "mdn" keyword because the MDN docs are the highest quality resource available.
Feel free to consult other sites for HTML information, but stay away from W3 Schools which usually appears high in search results but has a history of showing outdated information.
One other important resource is Stack Overflow, an incredible question-and-answer site that will be a useful resource when you run into a specific issue or bug with your code:
Their homepage isn't very useful, but you will often see Stack Overflow results in Google searches. Searching "what does meta charset="utf-8" mean", for example, yields this helpful Stack Overflow answer.
One important thing to remember when reading about code online: it's okay if you only understand bits and pieces of what you are reading!
Read everything you can get your hands on and you will find gradually that certain concepts and terms keep repeating themselves. Those are the things to try to understand first. Everything else can be filed away mentally as anecdotal or arcane trivia to be fully understood at a later time.
Assignment 3: Start editing HTML in your development environment
Read the tools guide to learn how to use the tools you downloaded in the intro.
Follow the Command Line Bootcamp to get familiar with the command line.
Download the class folder from GitHub and open 1-hypertext/index.html in Sublime Text.
Open your terminal and type $ cd {your class folder location}, for example $ cd ~/code/howtocode/1-hypertext. (As a reminder, the $ character represents the terminal prompt, that is, it signifies that the following text is a command that you should run in Hyper or another terminal. Just type the part starting with cd.)
If it's your first time working in this folder, install the web server dependencies by typing $ npm install.
Now start the web server by typing $ npm run start. (We'll talk more later about what those commands are doing and what kind of server is running. If you're curious, you can learn more about the server we're running here.)
Open localhost:9966 in your browser to see the web page.
Using what you've learned about HTML, try editing some of the content of index.html and seeing the result. Here are some things to try:
- Change the image to a different Manet painting.
- Change the list of works into a table that contains columns for the title of the work and the year it was created.
- Change the title of the page.
- Figure out the best HTML elements to represent the date of Manet's birth and death.
- How would you add a caption to the image?
(When you're done running the web server, press Ctrl+C to exit.)
Assignment 4: Organize the content of your project into an HTML site
Create a new folder and start to compile the content that you will need for the website project you picked in the intro assignment.
Create one or more HTML pages to organize the content.
- How will users browse your content? Multiple pages? Hierarchies?
- What will the home page of your site show?
- Which HTML elements best represent the parts of your content?
Deploy your project with Netlify or Surge. Both services offer free hosting for simple websites.
Other Resources
Building Your First Web Page, Shay Howe
Reading
“Sometimes it Looks like a Duck, Sometimes it Looks like a Rabbit”, Jack Balkin and Dan Michaelson, facilitated by Rob Mathews (2012)