Nolan Miller
Posted on June 10, 2024
In the second part of the HTML & CSS series, you'll be creating your first web page! Yes, already! If you missed the first week, go back and read it here. As with week one, read through the brief lesson below, and then complete the challenge to learn as you code!
Creating an HTML Document
All of the internet is just made up of text. In fact, all computers only read text (or well text, that breaks down to binary), but everything that you see on a website or on your phone screen is made up of characters. To create a web page, we have to put this into a specific format so that the computer knows how to read it. It's kind of like putting your essays in MLA or Chicago format in school so that your teacher could read it easier except much more strict!
Elements
An HTML document is made up of what are called elements. These elements are represented by an opening tag, closing tag, and content. Below is a basic page, but with no content. Notice, will still have three elements on it, the <html> element, the <head> element and the <body> element. A blank page would look something like this:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Most HTML elements will be represented with both an opening tag ( <> ) and a closing tag ( </> ). Anything between the opening and closing tag is said to be within that element, or a child of that element.
<html>, <head> and <body>
In an HTML document, every element is a child of the <html> element, so all of your elements should be inside that one. The <head> and the <body> tags are also top level, structural elements that divide the <html> element into two sections. The <head> element will contain all of your metadata, information about the page, and the <body> element contains all of the visible elements of the page. You need these elements for the page to be HTML. Above is the simplest version of HTML boilerplate, or code that will always need to be there to function as expected.
<!DOCTYPE html>
The other bit of boilerplate that we see in the above example is <!DOCTYPE html> . This is a document type declaration. We give different types of files to a browser to construct a webpage, and to signal to the browser that what it is about to read is HTML, we must include this declaration at the top of all of our HTML documents.
With this information you have all that you need to create a webpage that you can open in a browser on your computer!
Challenge: Build a Web Page
1. Download a text editor.
Go to your web browser and find a text editor. If you want you can use the one on your computer already (TextEdit for Mac, Notepad for Windows). But, I would recommend that you download VS Code from their website for free!
2. Create a file called index.html and add the HTML Boilerplate to it.
Don't forget to declare your document type and to wrap your <head> and <body> tags with your <html> element tags.
3. In between the opening and closing <body> tags, type "Hello World!" and save the document.
You don't have to worry about any other elements for now, and it is okay that the <head> element does not contain anything.
4. Save your index.html file and double click to open your first webpage! Congratulations!
You may have to right click on the document and choose "Open with…" > Google Chrome (or whatever browser you are using.
Congratulations! You're a web developer now. You've just created a document that is readable by your browser! For an extra challenge, go ahead and check out MDN's website and see if you can locate the tag that will allow you to change the text that is displayed in your browser's tab while the page is open!
Good work! In the next part of this HTML and CSS series we will look closer at the different types of visible elements for your web page to make our web page a little more interesting! See you next time, and don't forget to:
Learn as You Code!
Posted on June 10, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related