If you're building web pages there are three languages you must learn: HTML, CSS, and JavaScript. To better understand how these languages help us I'd like you to visualize your web page as a human body. HTML (Hyper Text Markup Language) is like the bones. It decides the elements and structure of your web page. CSS (Cascading Style Sheets) is like the skin. It defines what different colors and unique look of your page. JavaScript is more like the mind. It defines how your page interacts based on logic you've written.
When viewing a web page, usually it's in a browser. The browser takes the .html file, as well as the CSS and JavaScript, to pass to it's rendering engine. Back in the day, browser engines kinda sucked because they varied so much. You could design a button in one browser and it looked completely different in a few others.
Fortunately, we have an organization called the W3C (World Wide Web Consortium) who control the standards on HTML, CSS, and JavaScript.
The problem back in the day was that the standards on these rendering engines were pretty ambigious. Also, let's not forget that differing from the pack was used as a way for companies to force developers onto their platform. * cough * Microsoft * cough *. Thankfully, our browsers savage rendering engines have grown up and got some standards. We can code as we like, knowing that it will render the same in all browsers. When you start getting fancy, it may still be worth it to do some testing.
To view you HTML, you can right click on it in the Explorer/Finder window and then click open. This should open it up in your default browser. You can also open it in the terminal by running the open command on the HTML file.
At some point in your coding journey you will write some HTML that won't render how you want to. For this, you will want to do some debugging. We use something called the "developer tools" to do that. Here's a list of ways to do that in each browser:
- Firefox: Right-click the page and then click "Inspect Element"
- Chrome: Right-click the page and then click "Inspect"
- Safari: First, you have to activate the "Develop" tab by clicking "Safari" at the top. Then go to the "Advanced" tab and click the box that says "Show Develop menu in bar". After it is enabled hold the
option,command, andikeys. This will open up the developer tools.
You can actually see all the source code that the developers wrote for any page you're on. Even this one! If you right-click this page and then click "View Page Source"(or something like that, it varies oer browser) you can see all the HTML code.
In the next lesson we'll talk about the basics of HTML, what it is, and how to write it. Can you feel the power within you? You're becoming a developer. I sense the force is strong with you....if you keep following the lessons.