Lesson #2: Bare Bones
"Madi, can we please start coding!?!?"
Yes, Yes, YES!!! AHH 😄 THE TIME IS HERE. 👏
As I mentioned in the previous page, we are only focusing on building the index.html file, our web page's structure without all the glitter and sparkles ✨.
-
Make a new file within your text editor by right clicking the project folder and selecting
New File.
-
A prompt will ask you to specify the path of this new file, type
index.htmlto title this new fileindex.htmlin the main folder of your project.
Now let's play!!! 🙌
Every html page starts with the same line:
<!DOCTYPE html>Reason being, the server needs to know how to read the file. It is just like the process of calling in to make a reservation at your favorite restaurant (mine is Suraya in Philadelphia 😍, if you're ever in town TAKE ME WITH YOU). When you arrive at the restaurant, you tell the host your name (aka the <!DOCTYPE html>). Thus, informing the host who you are/what to do with you and your party. 🎉
There are several different versions of html, but someone was very smart and thought instead of typing what version you want to use, it will default to the most recent version (unless explicitly told otherwise). 💡 This line will not be visible when the web page is displayed (do you see it anywhere on this page?). Now go ahead and type <!DOCTYPE html> in the first line of your index.html file.
- We're going to commit this change to our
index.htmlfile to enforce great habits!-
Save the updated
index.htmlfile - Open GitHub Desktop application to your current repository
- Write a commit message and push the changes by clicking on the
commitbutton - Click Sync at the top right corner to synchronize the changes with the
lesson #2branch. - Celebrate 🎉
-
Save the updated
Elements are the building blocks of HTML, the pieces of equipment you'll need to format your content in the way that you want. Have you ever seen this when you open Microsoft Word? Think of html elements as the list of text display options on the right, like Heading 1, Title, and Subtitle.
Elements are formatted in your index.html file by a way of tags. These are keys/hidden instructions on how the web browser should display and format the content. In the Microsoft Word example above, tags are the method of select highlighting the words you want to attach a specific format/element to (like bold or italicize).
Tags are often denoted by an opening and closing tag, with the content to be formatted in betweet. An opening tag is written with <element>, enclosing the type of HTML element within the "<>"'s. The closing tag is almost exactly the same, containing the same HTML element in the middle of the "<>"'s, but also include a forward-slash (/) character </element>. The forward-slash character is often referred to as the "close" or "end" character. In the most basic form, you'll see <someElement>blah blah content blah blah blah</someElement>.
There are some tags that do not have an opening and a closing tag, because in certain cases the closing tag is not necessary.
👍 Let's add them to our index.html file!