HTML - Week 01
- HTML - Week 01
- HTML Content
- Markup
- Creating HTML Files
- Editing HTML Files
- Viewing HTML Files
- HTML Tags
- Researching
- Deploying HTML Files
- Iterating
- Inspecting HTML
- Additional Resources
Now that you have your environment set up, you’re ready to start learning about web development!
This week focuses on HTML.
HTML Content
Before we start writing HTML, let’s think about webpages for a minute.
Generally, webpages contain different types of content. That content is often different types of text, but it can also be things like links, images, videos, and sound files.
Take a look at a few websites you use. (Or just start with this page!) What types of content do you see? Here are a few things to look for:
- Normal text
- Headings
- Lists (like this one!)
- Links
- Images
What other types of content do you notice?
Markup
Let’s say we have two lines of text:
My Website
Welcome to my website!
And now we want to show My Website as a heading, and Welcome to my website! as normal text.
My Website
Welcome to my website!
In a word processor like Microsoft Word or Google Docs, you might highlight each line and then select some formatting options. But if you aren’t using a word processor, how do you specify how to display your content?
The answer is you can include markup in your text to specify rules about how to display that text. This is similar to how you might “mark up” a physical copy of text, for example to correct spelling mistakes with a red pen.
(photo by Jo)
There are many different markup languages. Here are a few examples:
# My Website
Welcome to my website!
\section(My Website)
Welcome to my website!
= My Website =
Welcome to my website!
No matter what markup language you’re using, the idea is similar: you add markup to specify options about your content; that markup is used to format the output; but the markup itself is not shown in the output. (That’s what makes it markup!)
Web browsers use a markup language called Hyper Text Markup Language, abbreviated as HTML. Here’s the above example in HTML:
<h1>My Website</h1>
<p>Welcome to my website!</p>
The things in <> angle brackets are called HTML tags, which are markup that tell the web browser how to display content.
The rest of this week is all about creating, editing, and deploying HTML.
Creating HTML Files
You can create an HTML file the same way you can create any text document.
On your own computer:
If you have your own computer that lets you install programs and download files, then you can create an HTML file by opening your favorite text editor (use something like Notepad or Atom, not something like Microsoft Word or Google Docs), and then paste in some HTML content:
<h1>My Website</h1>
<p>Welcome to my website!</p>
Then save that as a file that ends with the .html extension. Many people use index.html as a default, but you could call it my-amazing-webpage.html if you want.
On Replit:
If you have a computer that doesn’t let you install programs and download files (like a Chromebook), or if you’re using a shared computer, then you can use Replit instead.
From a replit project, click the Add file button, and then give your file a name that ends with the .html extension. Many people use index.html as a default, but you could call it my-amazing-webpage.html if you want.
Then paste some HTML content into that new file and save it.
Note: The class project repo contains a week-zz-scratch directory that you can use for testing, and please feel free to add other directories and files, or to create new Replit projects for testing.
Editing HTML Files
Editing HTML files is similar to creating them.
On your own computer:
Right-click the HTML file and then select Open with...` and pick your text editor.
Alternatively, open your text editor first and then open the HTML file from there.
On Replit:
Click the HTML file to show its content in the editor section in the middle of the page.
Viewing HTML Files
Now you know how to create and edit HTML content using a text editor, but to view the output you need to open it in a web browser.
On your own computer:
Right-click the HTML file and then select Open with... and pick your web browser.
Alternatively, open your web browser first and then press ctrl + O to open the HTML file from there.
Note: When you open a file that’s on your computer, the URL should start with file://.
On Replit:
From a Replit project, click the Run button at the top to run a web server. Then navigate to your HTML file in the preview section on the right.
HTML Tags
You know that HTML tags are markup that tell the web browser what type of content to display, and you know how to create, edit, and view HTML file.
Generally, HTML content will consist of an opening tag in <> angle brackets, then some text, and then a closing tag in </> angle brackets with a / slash. For example:
<h1>My Website</h1>
This HTML contains an opening <h1> tag to specify that the content is a heading, and then it contains the content of the heading, and then a closing </h1> tag to end the heading.
Note: The most common problem when writing HTML is forgetting a closing tag. So if your output is different from what you expected, check your closing tags!
For more HTML tag examples, read through this guide:
And for learning more about HTML, these are your new best friends:
- W3Schools has some of the best HTML tutorials on the internet.
- MDN also has great tutorials, and an even better reference.
Researching
Believe it or not, my goal with this class is not to teach you a bunch of HTML tags. When you’re coding, a big part of the process is researching, learning more, and experimenting. These skills are way more important than memorizing a bunch of HTML tags.
So instead of trying to memorize a bunch of HTML tags, get into the habit of searching for tags when you need them, and then reading through documentation to learn more. Experiment, see how it works, and then add it to your code!
For example, let’s say I wanted to highlight a section of my webpage, but I wasn’t sure how to do that. I would search the internet for terms like “html highlight tag” and read through the results. I might find the W3Schools page for the <mark> tag, and I’d read through that and try it out to see how it works. Then I’d write something like this:
Some of <mark>this text</mark> is highlighted!
And it would display like this:
Some of this text is highlighted!
Being able to search the internet, read documentation, and experiment are all very important skills when you’re writing code. Those are the real skills I’m hoping you learn during this class!
Deploying HTML Files
Now you have some content in an HTML file, and you’ve tested it by opening it in a browser either from your computer or from Replit.
When you’re ready to publish your changes for other people to see, you need to push your changes to GitHub.
From your own computer:
For testing, you can save your HTML files anywhere on your computer. But to publish them, make sure your files are somewhere inside your intro-to-web-dev directory.
Then use GitHub Desktop to push your changes to GitHub. See the desktop setup guide for more info.
From Replit:
Use the Version control tab to push your changes to GitHub. See the Replit setup guide for more info.
After you push your changes to GitHub, you should see them in your GitHub repo. And because we’re using GitHub Pages, your changes will be automatically publish to your GitHub Pages URL. That’s the URL you should share with me and the rest of the class!
Iterating
I mentioned above that researching and experimenting are more important skills than memorizing a bunch of HTML tags. Another important skill is iterating.
In other words, don’t try to do everything all at once! Try to get one tag working first. Then test that it works locally, and then deploy that. Don’t wait until you feel “finished” to test out what you have!
Think in terms of prototypes and minimum viable products instead of trying to make everything perfect.
If you try to add 10 new tags to your page, and then you only open your HTML file in your browser after you’ve added all of them, chances are you’ll have a bunch of problems, and fixing them all will be really difficult! Instead, add a single tag, test that out, push it to GitHub, and then repeat that process.
This also makes it easier for you to get help. “I’m trying to add an img tag but I don’t see the image” is a lot easier to debug than “I added 10 tags and my page is broken and I’m not sure why”.
Inspecting HTML
When you’re writing HTML, you’re going to encounter a time when your HTML output isn’t what you expected. This is totally normal! Coders probably spend more time debugging code than they do writing it.
One of the best ways to debug your HTML is through your web browser’s developer tools.
From your web browser, you can open your developer tools by pressing F12 or ctrl + shift + I. From Chrome you can also select the three-dot menu in the upper-right, and then expand More tools and then select Developer tools.
Alternatively, you can right-click anywhere in a webpage and then click Inspect.
Either way, your developer tools will show you the HTML source and let you interact with it in various ways. This is a great way to spot missing closing tags!
You can use your deveoper tools on any page. Try inspecting a few webpages that you use often. What kinds of HTML tags do they use? How easy or hard is it to understand?
Additional Resources
- Soft Corruptor is an interactive poem that uses HTML tags in an interesting way.
- W3Schools has some of the best HTML tutorials on the internet.
- MDN also has great tutorials, and an even better reference.
When you’re finished, continue working through week 1: