-
-
Notifications
You must be signed in to change notification settings - Fork 1
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 in your project folder by selecting
File>New File. Title this new fileindex.html.
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
HTML is built with tags. Tags are keys/hidden instructions on how the web browser should display and format the content. Have you ever seen this when you open Microsoft Word? Think of html tags as a way of select highlighting the words you want to bold or italicize.
Tags are often denoted by an opening and closing tag. An opening tag is written with <tag>, enclosing the type of HTML tag within the "<>"'s. The closing tag is almost exactly the same, containing the same HTML tag in the middle of the "<>"'s, but also include a forward-slash (/) character </tag>. The forward-slash character is often referred to as the "close" or "end" character.
_There are some tags that do not have an opening and a closing tag, because in certain cases the closing tag is not necessary.