1.4 The first tag - Video Tutorials & Practice Problems

<v Instructor>In the last section,</v> we set up a new GitHub repository for our sample website and actually showed that the blank index HTML file that's here was rendered correctly. And we checked it with curl -I which shows the HTML header in here. 200 OK. But of course we actually want to have some content on our webpage. So in this section, we'll get started with that. By the way, you can see here is 0, that means zero bytes, indicates that index HTML is empty. So let's fill it up with something. And just to practice a good habit, I'm going to open the entire project in atom right here with atom dot. There's only one file right now, but this is good because if we add files, they'll automatically be available using the fuzzy finder inside of our text editor. Our first tag will be the important paragraph tag which is used to wrap paragraph content in HTML pages. And we'll just fill it with the phrase Hello, world. Now I can type it out like this, with an angle bracket and then a closing angle bracket, but there's a shortcut in atom. I can do P and then press tab. (quiet keyboard clicking) Like that. And save it. And let's open it locally. (quiet keyboard tapping) You see that there. Hello, world! By the way, that trick of using the open command only works on Mac OS and on other systems, you'll have to use your technical sophistication to figure out how to open the local HTML file. And we can also change it up a little bit. (quiet mouse clicking) If you compare this to the sample code of the tutorial you'll see that there are extra lines here. There are new lines. So the tutorial has this, and this matches the original tag that we saw when we talked about strong. So I'm gonna save this. You can see that it's the same. And this is an important lesson, that HTML is insensitive to whitespace. So we've got some extra new lines, we've got some tabbing here that atom put in automatically. That doesn't affect the rendered output. Let's take a look at the browser again. If you look closely here, you can see that it says file://. So this is actually just the indication of what this is, what this resource is. It's not HTTP://, it's file://. And then this slash here is part of the directory. /user/mhartl, then repost sample website, and then the name of the file. The reason it looks like this is because we're currently working locally. This is just the file here, right? And we can do print working directory. This is the file path. So this here is what appears here, this path. So to get this on the live web, we can make a commit and push up to GitHub Pages. So right now we've got this. You can see HTTP. It's actually HTTPS, this is for secure. So the structure here is HTTPS:// and then the URL. Compare these two. Note here that the URL at GitHub omits the index HTML part. That's because index HTML is automatically served up unless otherwise specified. To see the result on the live site, we can make a commit and then push up. (quiet keyboard tapping) Remember, we could do git push origin gh pages here with a branch name, but once we've made that initial push we can omit those two things. We can omit origin, which in this case is GitHub and the branch name. So we can just do git push If we refresh it now. Why didn't that work? Okay, so there's sometimes a delay, let's give it a second. Nope. (quiet keyboard tapping) Okay. We can do log -p to look at the actual changes. Yeah, it says Hell, world! Oh, there it is. So there was a delay. Even though this is really simple, this is a huge accomplishment. We have just deployed a website to production. It's live on the web. And this is industrial grade because of the static nature of the website, it can be efficiently served by GitHub and GitHub Pages also supports custom domains. So for example, michaelhartl.com, my personal website, is served out of GitHub Pages, which means everything we do in this tutorial is for real, this is not just toy. This is a real website on the live web.