Introduction to HTML

Resources

• Slides

Video Script

Welcome back everyone. In this video, we’re going to be taking a look at the Hypertext Markup Language. This is a continuation of our previous videos where we talked about the history of the internet, as well as how the internet actually worked. Now, in those videos, we took a look at Sir Tim Berners-Lee, who invented the Hypertext Markup Language along with the web server and the technology that was used to actually serve those web pages. The first version of HTML that Sir Tim Berners-Lee released in 1990, was still a huge improvement over the content that was being served on the Internet at that time. We really had no unify language that we were able to use to distribute information on the web. HTML 1.0 brought that to light. Even though throughout the 90s, HTML was a pretty static language, meaning that our webpages were still pretty straightforward, there really wasn’t a whole lot of dynamic content. It wasn’t until Web 4.0 released and the late 90s and even into the early 2000s, where we started to make the transition to the Web 2.0 era, where we started to see a lot more social media type content, and very dynamic content being hosted on the web, like a lot of media as well. The big landmark version of HTML, HTML 4.0, was really important because this is also where Cascading Style Sheets came into play. Before, we could still style our web pages to a certain extent, but all of those styles were actually built into the page.

CSS allows us to separate those styles into their own files, into their own language, and allows us to better compartmentalize those styles and as well apply more dynamic styling to our actual web page. This gave not just a single web page, but our entire website, more uniform styling, and it made programming that much easier. Now, in 2014, we had a big gap between HTML 4.0, and HTML5. But in 2014, HTML5 started to bring light to a little bit more of the dynamic content that is Web 2.0. Before then, we really used a lot of Adobe Flash, which was really big in the 2000s, and even JavaScript as well, to a certain extent, to create that dynamic content that Web 2.0 really needed. Around 2014-2015, when HTML5 was released, things like Adobe Flash started to be deprecated, in favor of using pure HTML. Now, HTML5 started to add the capability of adding more dynamic content. And even with the new CSS versions that we actually have, we can do a lot of the things that we would typically need JavaScript for, and do it all in plain HTML and CSS.

Any web pages that you actually utilize today will most likely have a combination of these three technologies being used at that time. So HTML, JavaScript, or CSS in combination of. Now you don’t have to have all three of these to have an actual web page. You can do a web page or an entire website in just HTML. Without any styling, or without any CSS, you could still use embedded styling in your HTML. But most web pages are going to be a little bit more dynamic, a little bit more colorful and a little bit more streamlined, which requires the use of all three of these to make it a ubiquitous experience for the user, especially when we’re now living in a mobile era, where most people are actually browsing the web on their smartphones or their tablets. Throughout this module of videos, we’re going to be taking a look at HTML and CSS, as well as some basic JavaScript.

Basic HTML Part 1

Resources

• Slides

Video Script

Welcome back everyone. In this video, we’re going to continue our talk on HTML and start looking a little bit at HTML tags. As we mentioned before, the language itself works off of a series of tags, tags are denoted by a less than and greater than symbol with the name of the tag in between. Now, some tags may also actually have attributes in between there, but we’ll get to that later. To make a basic web page, we need four primary tags, HTML, head, and body. But we’ll also add in title there, so we can actually have a name for our webpage as well. The HTML tag primarily wraps the entire contents of the web page, although not all of those contents are actually displayed directly on the web page. For example, the head tag will actually have some meta information about the page, but it’s not actually rendered in the web browser, the title tag actually belongs to the head tag. And while it’s not rendered on the page, it’s actually going to denote the name of the webpage in things like your tabs. So when you open up a page in a new tab, and you have the name of the webpage, there, that’s where that comes from. The body tag is going to have all the rest of the content of the actual website.

So the things that you would typically see on a web page will be contained inside of that body tag. But let’s take a look at an example of a basic web page. so here we can see a lot of the tags that we’ve already talked about the HTML tag, the header tag, the title tag and the body tag. But we also have this doctype up here at the top, this tag is a special tag that we don’t necessarily have to include most modern web browsers will actually render HTML without it. But what this tag does is it informs your web browser what type of content it’s actually going to be displaying. So when you make a request to ace a web server, and the webserver responds with content on the web browser will actually look at this tag and determine how to actually treat this particular web page. But other than that, you can see the gist of our website is actually between these two HTML tags. Now, we talked about tags already, but the tags themselves actually have an open tag and a close tag. There are some tags that will actually be self closing and when we have one, but I’ll show one of those here in a little bit. But the open tag is just as what we’ve seen already the less than symbol and greater than symbol with a name of the tag in between. And then we have a corresponding closing tag that has the same name.

But with a slash to start out with, that’s going to indicate the close or the end of that particular content inside of that tag, we have the same thing with the head tag, we have an open and closed head tags, same thing with the title head tag that will typically come first up here towards the top of your HTML or inside of your HTML tags. And then the body tag will follow where our body tag is we have the content of our actual web page. And then here, we’re just doing a simple text for now. But let’s take a look at how this would actually look like when it’s rendered by the browser. But let’s go ahead and type in our tags that we showed in the slide down there. So we first need the doctype, which indicates the contents of this file our HTML. And then we start out with our HTML tag, our open tag, and I like to get into the habit of always doing the open tag and then immediately typing out the closing tag. That way you don’t have any hanging or loose HTML tags. So let’s do our header tag, then close head. And then we have our body tag, and our closed body tag. inside of our body tag, we just have a simple Hello World. And inside of our head tag, we have our title.

So Open title, close title. And then in between here, we’re going to say homepage. Now, let’s save that out. So I can open this file up. So this is just the actual RAW file being loaded into my web browser. So we have our simple Hello World here. And most web browsers like Firefox or Chrome You can actually Inspect Elements here and actually see the contents of the webpage itself. So here is my head tag that we had before which we have header. You can ignore the script here. This is part of some of my browser extensions. But you should see hello world here, and the end of my body tag in the close my HTML, this is a really great way to debug or look at your web page to make sure everything that you put here is actually being rendered. But let’s take a look at a few more HTML tags. So the header tag is going to be indicated using H and then a number you’ll typically see this go from h1 through h6, h1 being the largest header that you can make, and h6 being the smallest P is going to be for your typical paragraph. So if you want to put text anywhere on your webpage, that’ll be the best way to do it, the paragraph tag will actually add some whitespace before and after the tag itself. line breaks here, this is actually a self closing tag, as we talked about before, but we haven’t actually seen one yet, a line break will actually force all the content to the web page to be separated on out onto a new line itself. And this also goes for like a horizontal rule. So if you have a line across your web page, HR, and then a which has a self closing tag as well. But br here break is going to self close, you won’t actually have an open tag and a closing tag, you just have this particular tag. So it opens and then closes all on the same line. So open and then closes, where typical closing tag will actually have the slash before the name of the tag.

The ‘a’ tag here, this is a typical link that you would expect to click on and your web page. So and but it is called an anchor tag, O L and ul which are ordered and unordered lists, so numbered or bulleted lists in that order. And then inside of a ordered or unordered list, you have a list item. So this is what you will actually use to denote each item in the list. But let’s actually go ahead and try to add a list to our webpage. So here are two simple lists that we have here, O L and ul unordered list and a unordered list. And I just have some default items in here. But let’s try to get this on to our actual web page. So here was our original web page that we just did a little bit ago. And I’m actually going to go ahead and change my hello world here to be wrapped inside of a header tag instead of having it directly into the body. But then, let’s go ahead and start getting out some of our other tags that we already did. Let’s do a simple paragraph here. This is a sample website. So in our sample website here, let’s go ahead and add our ordered lists over here. So remember, r o l is the ordered list and ul is the unordered list.

So I’m going to go ahead and start typing this out here, O L, and then close o l remember to always add your closing tag for an open tag. And then let’s do our list items. And I’m going to do the same thing for the unordered list. But all we need to do here is change o l to ul. And note that my formatting here with the indentation of the tags is not required, I could actually toss all of this all on one single line and the webpage would still render just fine. But this is just to get into some better formatting practices to make your HTML a lot more readable if someone is actually going in here to look at your webpage or edit your code. But if we save that, and go and refresh our local file, we now see something like this, where we have our paragraph text here. We also have hello world as part of a header tag now, so it’s much larger than it was before as just plain text. And notice that there is some white space here between I have my paragraph tag here. And likewise, we have a ordered list and our unordered list. But let’s continue on and checking out more of these HTML tags. One of the most common things that we actually use to create an interactive web page, of course, are links, right or anchor tags. And so an anchor tag works just like this. Will we have the open a tag and the closing a tag, but now we’re actually introducing attributes to our tag.

So most attributes are allowed to have any number of specific attributes. These can help define other properties or things that this particular tag actually does. So in this case, for our anchor tag, we’re going to define an href attribute, this href attribute is going to be equal to http cs ksu.edu. This is going to be the location or the URL, the content that is actually loaded, when you click this link, and then the text that actually appears to the user is going to be the click me here. This can be pretty much anything. So you could actually make almost anything clickable in HTML. So let’s say if you wanted to make an image, a link, you could put the image in here and the image would be clickable to that external URL. Okay, so let’s go ahead and add this link into my webpage. So I am going to go ahead and add that up here towards the top underneath my paragraph tag. So we have the A for anchor, and then the corresponding closing tag. And then we had clicked me here as part of the text to visit. And then we want to actually put the attribute href in here. So we have a particular spot to actually go to when we click OK. So the location that I want to go to is HTTP slash colon CS dot k asu.edu. If we save that, and refresh our page, we can now see the click me. And when I click it, it takes us to the computer science homepage. Now, you can also again, right click and open up a new tab. Notice, right, we forgot to mention earlier, notice that the title of our web page is loaded up here as part of the tab. If you want this to open up in a new tab, we can add a target here. And if you set the target to be blank, it actually ends up loading into a separate tab. So that way, you don’t have to actually press back and forth.

Basic HTML Part 2

Resources

• Slides

Video Script

So we talked briefly about CSS or Cascading Style Sheets before when we introduced html 4.0. But we haven’t actually added anything to our webpage yet. So far, our webpage is completely static and unstyled. So Cascading Style Sheets will allow you to modify things like font colors, background colors, styles, as far as like font types, spacing, layouts, pretty much anything that deals with style or looks, the cascading style sheet or the CSS sheet will be able to accommodate that. So how do we actually add any CSS to our web page? Well, we could actually add it directly into the specific tag that we want by adding a style attribute, just like what we did with h ref, but style instead. But this can be very cumbersome, especially as your website grows and becomes very large.

Typically, what you’ll see is a separate CSS file that is managed across the entire website. So let’s look at trying to add one of those. So here is our base web page here, I’m going to go ahead and add in my link to my CSS. So the link tag, what that’s going to do is essentially importing content from another file. This goes inside of your page header. So right underneath title, what we need to do is add our link tag, and this is self closing, by the way, so we can add the slash there. But the attributes that we want to add here is indicating that this is a style sheet. And the style sheet that we want to load is indicated by the href tag, this is going to be called fancy dot CSS. And I’m just going to continue this on another line so everyone can see here. But we have href. And then finally, what we have for the last tag is the type the content in this file. My link tag has three attributes: rel - so this is going to say what type of link this is or what this link is. So it’s a stylesheet, the href. So this is the file that’s going to be actually loaded, and then the type or what content is in that particular file. So if we save that out, nothing’s actually going to happen because we haven’t actually created fancy dot CSS yet. So if we create our CSS file here, I am going to name this out as fancy dot CSS, save it as all types here. But let’s go ahead and save that out. And then if we refresh our webpage over here, you see nothing is actually happening.

So let’s go ahead and create some basic CSS here to color our webpage a little bit. There’s three types of rules that you’ll encounter with CSS. There are tag level rules and class level rules and identifier level rules. So the first one tag level rules will apply to all tags of that type in the web page. So for example, if I wanted to change the paragraph tag, and then I wanted to change the color of that tag to be, let’s say, purple, and refresh my webpage, you can actually see that my text here is now purple. Or we can change this to pretty much any color RGB works here. The hash colors also work here as well, as well as some of the text base colors. a really easy way to get a color that you want is if you look up a color picker, like on w three schools here, you can pick the specific color that you want. So for example, if I had this light purple here, you can see what it looks like down here and you can copy the hash code Hear. So if we, if we copy the color code over the RGB will also work. But I typically go for the pound sign style here makes it a little bit easier to do. This is hex base number. So the first two are for red, the second two are for green, and the last two are for blue RGB. So if I save that out, go back to my homepage here and refresh. Now you can see that it’s that different color purple.

Now, there are some issues with CSS, especially when you’re modifying it very frequently. Sometimes your change is not reflected, because your web browser will actually cache the CSS file, so your webpage loads quicker the next time around, if you’ve made the change in your CSS file, but the change has not been reflected on your website, just do a simple history clear for this particular web page. And that should fix it up really quickly. Let’s go ahead and change some other things with our text. Let’s look at a class level roll first. So a class level rule is going to apply to all classes of the same name. Now classes can be added as an attribute to any HTML tag. So for example, I’m going to make a class called bold. Or let’s say let’s say important. And so this class, I’m going to add to the let’s say that item item one and my order list and item two in my unordered list. So once we have that added there, I can switch back to my fancy CSS and add this class level rule here. Now, the class level rule is going to be indicated by a.so dot and then the name of the class. So let’s go ahead and change this, I’m going to add to font weight here. And I’m going to make that bolder. So if I refresh my web page here, you can see now that item one here and item two, the items that had the class important added to it are now bold, it makes things kind of nice to actually do, if I wanted any content of any tag bolded, all I have to do is simply add this class here, and that CSS is copied around to make things a lot easier to work with. So we don’t actually have to make duplicates of that bolded style, we can just add it as the class and everything that has that class gets that bolded style.

So the last thing that I want to cover with a CSS level rules is the ID level rules. So are the identifier level rules. So any HTML tag, I’m going to pick on item three here. This is going to be thing, thing three. So any tag can have an ID attribute while you can technically duplicate this across multiple tags, it is very poor style. The idea behind the ID attribute is that the idea itself is unique in a given web page. So make sure you never actually duplicate an ID and any other tag. So if we have an ID here, so thing three, I can do pound. And then you don’t want to do iD iD is the name of the attribute, but we’re going to do the ID itself. So this was thing three, and then we have curly bracket there. And let’s go ahead and change the, let’s say font, size, and I’m going to make this 16 pixels. And then let’s go ahead and also do font style. I’m going to make it metallic. Let’s refresh our webpage here. And now you see that this item here as a font size of 16 pixels and metallic. Now if we increase that, hey, you can see the font size change as I kind of ramp things up right So, pixels is a decent measure of size when you’re dealing with HTML. But there are other things like to em, a sizing mechanism will actually help you become more uniform across the screen resolutions. Because pixels are not nearly as relevant before, when we’re developing with web pages, especially in the 90s. And even the early 2000s, everyone had the same screen resolution. But now that we have a lot of screens that are 4k, or 1080 P, and in varying sizes in between pixels become less relevant, because everyone has a different number of them, so it doesn’t scale the same.

So a lot of times we’re getting own, we’re developing things like this, especially with font sizes, or widths and heights, pixels are not always the best way to measure. But let’s take a look at this w three schools website here. Now, when you are working on your HTML project, I’m not going to actually teach you every tag, there’s a lot of them out there. And we can spend an entire course covering just HTML. But since we’ve covered how to add basic HTML tags, along with their attributes to your web page, as well as some of the basic CSS rules, you should be able to make your way through this website fairly easily. So for example, let’s say I wanted to add an image to my webpage, well click HTML here, find images. And voila, here is how to add an image to your web page. So there are lots and lots and lots of different tags and lots of CSS rules out there. And like I said, we can spend and an entire class just covering HTML, CSS, but we don’t have time for that for this particular course. But for your project, looking up a specific tag here should be quick enough to actually add this content to your webpage. So I will be asking you to add some tags to your webpage that we have not yet covered, but are easily looked up here as part of the W three schools website. Likewise, same thing goes with CSS, if you’re trying to do any particular thing, and CSS, like for example, colors, we’ve already talked about that a little bit, but backgrounds as well. So background color, color actually changes the font color, not the background color, so just a small difference there. But this is what you’ll be using as part of your projects. So if you need something to look up, I would just find it here nifty the HTML tab or the CSS tab. But if you can’t find what you’re looking for, please feel free to reach out to us and we’ll help you find either the syntax or how to get that out into your webpage.

The Interactive Web

Resources

• Slides

Video Script

Welcome back everyone. In this video, we’re gonna be taking a look at interactive web technologies. And now we’ve talked a lot about these things in the past about Web 1.0 vs 2.0. So going from the static plain HTML Web to Web 2.0, where everything is much more dynamic, interactive, more media, more content, more interactive technology. And so we’re going to take a look at how we can actually use some of these to make our websites a little bit more interesting. Some of the primary ones that we’ll be talking about today are the Document Object Model, which is fundamentally how a lot of the Web 2.0 pages actually are structured and work. JavaScript, Ajax, and JSON, which also helped make our webpages a lot more interactive. First, let’s take a look at the Document Object Model or DOM. So the document object model is really how a web page is actually structured. So you can kind of think of the window here as like a tab in your web browser. So the entire contents of that is your window. And in that window, we have history of that web page. So maybe even things like cookies, past searches, past form information, things like that, location information. But then we have the document itself, which is the actual page that we’ve loaded. So your document or HTML, everything that was between the open and close HTML tags, actually goes here.

But this operates kind of like a tree structure here. So the base form here, the base is going to be our HTML tags. And then we can kind of dive deeper down in that way. Like, for example, we have the anchor tags, which are links in our web page. Or we could even have a form like if we’re trying to sign up for a website or making a post on Reddit or something like that. So we have basically everything that we can interact with, or click on or work with on our webpage is contained inside of this document. But this gives us a lot of structure as well. So when we’re actually trying to make dynamic and interactive content, having the Document Object Model allows us to manipulate and work our web page, whether or not that is inserting new elements into our web page, or modifying those elements on our web page. So the the root element here is the document itself. So that’s the top of our tree there. And from our document, we go down into the root, actual HTML tag, and then everything else is kind of contained in between.

So before we had the header tag, and if you remember, the header tag doesn’t actually contain information that’s typically displayed on web page itself, but has information that is important to the webpage to render, for example, the title which is shown on your tab inside either Firefox or Chrome. So the head tag contains in this case on this page has a title tag and that title tag has some text. And so that is the actual content of that particular tag. Each tag here is considered an element of the DOM. So each tag is going to be considered an element, each tag contain any number of more tags. And those tags can also contain other types of content, like text. Now, the primary source of content on our webpage was the body tag, if we remember, right. T

he body tag is going to contain everything else that we had on our page, like we have a head tag here, for example. The head tag has some text. This a tag those one becomes a little bit more complex. So we have the a tag, which is our element. The a tag can also contain the attribute href, which contains the information on where that link is actually going to. So if it’s a different web page, if it’s a different image, whatever we’re trying to actually navigate to. And then we have the link text as well as part of the a tag. So you can kind of start to imagine how this rigid structure of the actual HTML allows us to navigate this a little bit better. Because without this, an HTML web page is actually just really kind of a jumbled mess.

So thanks to the Document Object Model, we have a relative standard that we can use to actually search our web page dynamically in order to insert, add, or change anything as part of our webpage, after the web page has loaded or while the web page is being loaded. So this allows us to have again, right we’re going from a very static webpage that never changes, unless we actually change the webpage by hand on the backend if we upload a different file to our server to Web 2.0 where we’re having a little bit more interaction here and more dynamic content. So now instead of having a plain single web page, my webpage can actually change as it’s being loaded or changed based off of who’s logged in. This adds a lot more purposeful information to our websites. But in this series of videos, what we’re going to start taking a look at is how we can make a tic tac toe game in HTML.

Starting Tic Tac Toe

Resources

• Slides

Video Script

Welcome back everyone. In this video, we’re going to be taking a look at how we might make our Tic Tac Toe game using HTML, CSS, and JavaScript. To start out here, we’re going to make a new HTML page. Now this can go straight back into your index.html that we made in the previous videos. The one I’m going to make for this video is going to be called tictactoe.html. And I’m going to save this as all types. As I mentioned, we can just use the files that we had already previously created. Or we can make a new one, if you are using a previously made file, the only things that you might need to actually add in here is replacing our body tag, or just replacing the content with the new Tic Tac Toe stuff that we’re going to be talking about this time. So anyway, so what we actually had just have here, and if I just simply run this file, all I have is my Tic Tac Toe title. So a lot of what we have actually in the PowerPoint slides are also most of the HTML code that I’m copying over today. So if you need that reference, go and pull up those slides. And you can copy and paste a lot of this code in, or you can type it out by hand for some extra practice. The next chunk of code that I’m going to put in here is the actual word that we’re going to use for the Tic Tac Toe game. So let me come and tidy some of this up here. And again, if you remember the previous videos that we did on HTML, you don’t actually have to have proper white spacing, a lot of the time with HTML tags. I’m including proper whitespace, and tabs in here, just so our code looks nice and neat and clean, and it’s a lot easier for us to read.

With this, what our tags that we’re actually having in here today are the table tag. So you’ve already seen the h1 tag that we had before, which is just the header tag. But the new tag that we have not covered before is the table tag, the table tag is going to just as it sounds, create a table just like what you would do in Microsoft Word or even in Excel. Now the table tag has a table body, and the body is actually going to contain the contents of the actual table. Now, inside of the table body and its base form, we have trs, which stands for table row. So the tr tags that’s an open and close tag. And then inside of each row, we have td tags, or our cell tags. These td tags or table data tags are going to represent the content or columns that are contained inside of our table. So let’s go ahead and save this. And I’m going to refresh my web page. And you can kind of see that nothing is actually here, nothing actually shows up. But if we inspect our page, we can actually see that our table is actually there. It’s just super, super tiny and has nothing inside of it. Not yet anyways. So the other step that we can start making to make our table actually visible is adding a little bit of CSS. So what I’ll go ahead and do is I’m going to remake mine. But again, you can reuse the CSS file that we had from previous videos. So I’m going to go ahead and save this out here and I’m going to call this fancy.css. This is going to be all types. Save.

So now I have my CSS. And this couple CSS rules I’m going to paste in here. This first one is going to be for our td tags, which is going to add a border that is five pixels thick. That’s going to be solid, so not dashed, and it’s going to be colored black. And then each of our td tags are going to have a width and height of 100 pixels, a font size of 80 pixels. And it’s going to align the text to center and it’s also going to change the font type. So with that if we save, refresh. Ah, now we’re getting somewhere. Our Tic Tac Toe board is starting to look a lot closer to what we would normally expect a tic tac toe game to look like. But we’re still a little bit off as far as our board goes because typically we don’t have full squares here. We just have two vertical lines and two horizontal lines as part of our Tic Tac Toe board. So let’s take a look at some more CSS rules that we can use to make our Tic Tac Toe game a little bit better looking. So this, these CSS rules are also going to be applying to my td or table data tags. But this time around, what it’s going to do is it’s going to start cutting off the borders that we no longer need.

So for example, this CSS rule is going to find all td tags. And then for the nth child, so the first for every first td tag that it finds, it’s going to set the border left to be none. So what this is basically equating to is for the first column, right, so the first td tag that we find in each of our rows, we’re going to take off the left border. And so that applies to this cell, this cell and this cell. This CSS rule for every third cell, take off the right border, so that applies to the column on the far right the third column. Then, we do the similar thing for the table row. So this tr, so find all tr tags, so find all rows, and then pick the first one that we find. So I’m going to pick the first row and take off the top border. And then this says, Ah, give me the third row and cut off the bottom border. And so this is picking, these are picking the first and third row. And then within those, that first row and third row, it’s picking up all of the td tags, and then applying either a border top of none or a border bottom of none. And this just shows some more of the advanced CSS tags that we can use for our website.

So now we’re pretty satisfied for the most part for how our Tic Tac Toe game actually looks, at least as far as the board goes. But we’re also missing an indication. If we’re going to be playing this as a tic tac toe game, we need to know whose turn it is. So let’s go ahead and switch back over to our HTML file and add in a another piece of HTML. So here, I’m going to add in a div tag, that indicates whose turn it is. And so this is going to go right underneath our head tag. So here, I’m going to say div. And remember ID, the ID attribute should be unique. And I’m just going to call this turn. And it’s going to be first x’s turn that then close div. So the div tag is also new for us. The div tag is going to act more along the lines of a organizing feature in HTML. So div tags are used to gather up or tidy up like content. So let’s say I have a navbar on the left, where all of my website navigation goes. And then we have all the content on the right. So each of those could be a div tag, where we use to organize all the other tags that are contained inside of it. So mostly just used for organizational purposes. But it’s also extremely useful for applying CSS as well.

So with that, let’s go ahead and refresh our page here. And we can see X’s turn there. But X’s turn is kind of small. So we need some more CSS here in order to make that a little bit more interesting. And so the rule that we’re going to apply here is going to take the text inside and make it bold. Remember, the CSS selector for ID tags is the pound sign, so pound, and then the ID so turn, font weight to be bold, it’s going to transform the text that’s contained inside of this tag and capitalize it, center it, change it to 16 point font, change the background color, and then set the width of that particular container. So as I mentioned, right divs are used primarily to organize contents of your webpage or act as containers. So if we save that and then refresh our page here, we can now see that it is X’s turn, and we’ve capitalized. Right? Not all caps, but just capitalized the first letter in our div tag. So that would be x, made it bigger, made it bold, and then change the background color. Now, we could make this a little bit lighter of a gray too. And you can kind of play around with those colors a little bit to make it your own as well. But, as I mentioned, we should end up that looks something like this. But this is just our static page. If we click over here, click on any of these cells over here. It’s X’s turn, but no x actually show up in our web page. So here in a little bit we’ll have another video that explains how we might actually make our webpage or Tic Tac Toe game interactive.

Javascript

Resources

• Slides

Video Script

Welcome back everyone. In this video we’re gonna be looking at JavaScript. But let’s look into some of the history behind it. To start, we’re going to talk about Brendan Eich. Brendan Eich was actually one of the people who co founded the Mozilla project to of course launching the major browser Firefox, but he’s also the creator of JavaScript. Eich had a master’s degree from the University of Illinois at Urbana Champaign, but then he started working at Silicon Graphics, working about seven years or so on an operating systems project, and primarily a lot of networking code. But he then started at Netscape in 1995. And when he joined Netscape, he really intended to put the language called scheme into the web browsers. Now, Netscape, of course is no longer prevalent in today’s internet world, but Netscape was really primarily one of the leading internet companies back in the mid to late 90s. But as Brendan started to work and putting scheme into the web browser, Netscape noted that his project actually resembled the Java syntax, and pushed really quickly after after that point. His project released a little over a week later, to accommodate Netscape Navigator 2. And so he was really pushed really time pressed underneath, and a lot of pressure to get this language actually released. And it actually underwent many different name changes during that time. One point it was called mocha, then LiveScript, and then eventually called JavaScript all in the same month. While it does resemble Java, JavaScript itself is actually an entirely different category of programming language. While Java is very object oriented JavaScript is more of a as as it sounds, right, more of a scripting programming language designed specifically for the web.

Now, JavaScript, as I mentioned, originally called LiveScript at a time, was finally released in 1995, and has gone over multiple iterations since then, many and different important updates as we as we go along. But JavaScript was used to manipulate the Document Object Model after a page was actually loaded. So JavaScript was one of the first languages out there that allowed us to manipulate the webpage. After it was actually presented to the user. When HTML was first released, the page was served and loaded on the user’s web browser. And that was it. Nothing actually changed after the page was, was loaded. So if you wanted something to change, you’d have to be redirected or reloaded into an entirely different page or refresh the page to get that change to actually happen. JavaScript allows you to edit that page live, so the page doesn’t actually have to completely be reloaded in order for an interactive component to be utilized as part of the content. So this makes the webpage much more interactive, and much more entertaining overall, and much more useful for the user. And while it was mentioned by Netscape to be related, or looking like the Java programming language, it is completely unrelated. As far as the general structure and usage of and operation of the languages.

JavaScript, while it does allow you to manipulate the Document Object Model behind the scenes, it can be a little bit cumbersome, and it had its limitations. And so that’s when jQuery was released in 2006. jQuery is a cross platform JavaScript library that made it a lot easier to manipulate and edit the DOM elements. So JavaScript caught a lot of flack because it was kind of difficult to use and very clunky. And if you wanted to do anything fancy, there’s a lot of code. And overall, it really just wasn’t that user friendly. So jQuery made a leak to try to make this process a lot easier for developers to get the results that they wanted in much cleaner and shorter amount of code. So JavaScript and jQuery in general, what you’ll see as you start using, it has a lot of different plugins and a lot of different frameworks. So very rarely anymore. Will you see a web page that uses JavaScript purely in its raw form, majority of web pages anymore are going to utilize some form of framework or external library to actually work and get the end functionality that they want. But we’ll talk more about this later.

Tic Tac Toe JS

Resources

• Slides

Video Script

Welcome back everyone. In this video, we’re going to start making our Tic Tac Toe game a little bit more interesting by enabling us to actually play the game. So a few pieces that we need before we actually start programming with the JavaScript. The first part is our script tag. So we need to actually embed JavaScript into our web page. So to do that, we’re going to add a couple tags, right after our table or our board that we had before. So down here towards the bottom right above your body tag, right underneath the table tag, we’re going to add our script tags. And these script tags are going to be used to import the JavaScript. So just like what we’ve done with our CSS up here, where our link tag is actually importing our CSS, our Cascading Style Sheets into our page. Our script tag is going to work very much the same. So I’m going to go ahead and just paste these in here. And then let’s go ahead and talk about them. So each script tag has a source attribute, where the source attribute is going to be the actual location of the script that you’re actually pulling in. And inside, typically, you won’t see one unless you’re importing JavaScript. Typically won’t see anything in between the opening and closing tag, but you could just leave the source blank, and actually put the JavaScript straight inside of the tag itself.

But in this situation, we’re importing two different things. The first one is jQuery. Now, we’ve talked about jQuery before. jQuery is the JavaScript library that enables us to manipulate and modify the DOM elements on the web page in a way that is a little bit easier to utilize than raw JavaScript itself. And then the second script tag, there is going to be our Tic Tac Toe JavaScript that we use to play our game. So let’s go ahead and save that out. Now, nothing is going to change as part of our web page here. So our JavaScript still stays the same as we had before. But let’s go ahead and create our JavaScript. So in our, and you may need to create a new file here if you don’t have one already. So let’s go ahead and change this to all types. I’m going to call this script.js for JavaScript. And on our next slide here, we actually have all of the JavaScript that you want to actually put onto your web page. So let’s go ahead and copy this over. Now, do be careful when you’re copying and pasting this particular chunk of code because whitespace can make a difference here, depending on what you’re copying and pasting from. So just be careful with the whitespace and spaces. So everything should match up exactly as I have it. So just to explain our JavaScript here just a little bit before we move forward here.

JavaScript is very similar to how Python works in the sense that it is a dynamically typed language, meaning that we don’t actually have to declare data types. But variables in JavaScript are typically declared using something, a keyword called let or var. So we have a variable called turn, it is initially x, because x always goes first. And then here, every everywhere you see a $ is referring to the jQuery library that we actually imported. So what the dollar sign is going to do is it’s going to select. This is going to select all of the DOM elements that match this search or this search parameter. And so this search here is going to be looking for td tags. And the search is very much based off of the CSS rules that we’ve had before. So the selector or the search, or this query is going to look for all the td tags, and then it’s going to link to it this onClick event. So this function is going to be ran or executed, every time a td tag is clicked. When the td tag is clicked, we’re actually going to select that square.

So we’re going to take that square or that td tag that was selected. And then if there is no data inside of it or text inside of it, so meaning that there is no X or there is no O, we’re going to insert the text for whoever’s turn it is. So if it’s X’s turn, we’ll add an X. If it’s O’s, turn we’ll add an O, and then we’ll change turns. And lastly here, at the end of our click, we need to update the div tag that we had before with new text that indicates whose turn it is an actual game. So if we save that out, and then go back over to our webpage and refresh, and we click, we can see that our page actually updates with X’s and O’s. Now, you can see here that it actually alternates, but it’s not going to recognize when you win, or lose. So that will just kind of a scouts honor sort of thing. We’re not going to code this up to indicate whether or not there’s a winner or loser in this class. But it’s still kind of a fun little exercise all with CSS and JavaScript that we can make a really simple game in a relatively short amount of time.

More Web 2.0

Resources

• Slides

Video Script

Welcome back, everyone. Now let’s continue our discussion on interactive web technologies. So we’ve done a little bit of JavaScript so far to get our Tic Tac Toe game working. But there are a lot of other technologies out there that really make web 2.0 really work. So in concert with JavaScript, we have Ajax Ajax was released in 2005. And it allowed for a synchronous JavaScript. So really what happens with Ajax is once the web page loads, the JavaScript can run on the webpage. But what if you wanted more data from your web server? Well, typically, what would end up happening is that you would have to have the page refreshed in its entirety in order to get that web request fulfilled. But Ajax allows you to send information back and forth to your web server behind the scenes without having to have the whole entire page reload. This isn’t really useful, because we can have the entire page get loaded once, especially if it’s a really large, complicated page. And then your JavaScript can handle sending requests back and forth to your web server to reload certain things. Like for example, new comments that were on the page, a new likes, or even maybe a new reply to a Reddit thread, this drastically decreases the amount of time you spend browsing the web page by having to wait for the entire page to reload, just to see who the latest comment was on your post. Now, in this case, this also applies with XML, which we’ll talk about here in a little bit. Now, most Ajax anymore will actually heavily favor using JSON, which we’ll also talk about here in a little bit. But let’s take a look at XML first. xml stands for the Extensible Markup Language, oh, what really XML is, is kind of looks like HTML.

So HTML works off of a series of tags, just like what XML works off of within this particular set of XML data, we have our person all the way up here at the top, our person is the top level object or top level tag here, and a person has certain attributes for them. So this particular person, as a first name of john, and a last name of Smith, in age of 25, it also has an address, and this address has different elements about it. So this address has a city postal code, state street address, and so on. And so notice each bit of information has a tag that describes it, and a closing tag, that opening closing tag nerves, the actual information, and the tag name itself describes that information. So this is a pretty useful way of sending information, especially in the early days, the internet. And a lot of other applet types of applications actually use XML to send information like this as well. json works in a very similar manner. json or JavaScript Object Notation has a series of keys and values, these keys indicate the actual description of the data. And the value is the of course, the actual data itself. So we have this exact same sort of object that we had from last time from the XML. But instead of having a top level type of person, now we have a JSON object. JSON objects are denoted using a set of curly brackets. And inside here are our each of our particular elements. So we have a first name element. And then that first name has a value of john, the same thing with last name, age. And so you can kind of notice we’re mixing data types.

So here, we have strings, and here we have an int. Now, to denote sub objects, we have a address which value is a JSON object. So we can nest JSON objects inside of JSON objects, which helps denote relationships between attributes or between elements just like what we had with our XML, which had nested tags and other things here, we can also have a list. So we here with this person has multiple phone numbers. So we have a list of JSON objects here, which also have elements inside of it with data associated with it. And so a lot of what JavaScript actually works with most things that have multiple pieces of information about it, like a person or maybe a car, or whatever it may be, typically is represented as a JSON object. Now, many other languages use this sort of syntax for a lot of different things, for example, and Python. When we cover dictionaries and Python, you’ll actually notice that the sentence Tax and representation in Python for dictionaries is very, very similar to how JSON objects are actually represented. They work very similar. But there’s a lot of different technologies out there in the web, especially the web 2.0, with the sheer amount of different websites and the variety that we actually have, there’s a lot of different technologies that are actually running those behind the scenes. Much of the core of that, of course, is HTML, JavaScript, and CSS, especially with JavaScript, though there are a lot of different frameworks that are being used out there that have all sorts of different functionalities.

This functionality varies between libraries that allow you to, let’s say, graphic data, right. So make charts or these complete different frameworks that change the actual structure of your web page, like react view, or Angular JS, which are all JavaScript frameworks that are used to design more dynamic web pages using templates, a lot of what react view and angular do mixes a lot of what JavaScript and Ajax tried to accomplish. So you’re only sending the smallest amount of data or refreshing the smallest amount of the webpage at any given time. And you’re dynamically generating a lot of that content instead of statically, creating it. Or you also have things like SAS or SAS, which is a better way of organizing and structuring structuring your CSS. So there’s a lot of different packages, frameworks and libraries out there that we can use, make very beautiful dynamic webpages. And depending on your use case, there’s probably a library out there that will help you and help you either improve your code, or make your project better. These are just some of the current popular technologies that are being used right now. But Lastly, I kinda want to conclude our talk on web 2.0, because this is the last major web module or internet module that we have for this course. Now, as we mentioned, right web one point O is very static web 2.0 is very dynamic. And we’ve been kind of repeating this throughout these modules. But it’s not just about the technology.

But Web 2.0 has really enabled us as a society to interact and relate in an entirely different way than we’ve ever been able to before in the past. And even now, even then, past 10 years, web 2.0 has grown, especially in regards to things like social media, social media has significantly taken off compared to 10-15 years ago when it was just in its infancy stages. And so as you work around on the internet, try to think about, or reflect about how the switch and web technologies and the advancements of web technologies has really impacted you on how you actually work in your daily life, how you interact with your friends and family. But the last thing I want to close with is the machine is us/ing us, which is a video made by one of K-State’s professors, Dr. Michael Wesch, who works in the anthropology department, but I’ll link that video up for you to watch.

The Machine is Us/ing Us (Final Version)

CIS Linux

Resources

• Slides

Video Script

Welcome back everyone. In this video, I’m going to talk a little bit about how we can get connected to the CS Linux server. So when we’re working with our webpages, we can actually open up our web page just fine in our local web browser if you’re working on your computer. For this class, we’re going to be hosting our web pages on CS Linux, so we can actually access them throughout the web. Because if we’re just working on our local machines, we’re not going to be able to access that website from anywhere else in the world. In order to achieve this, we’re going to need a tool that allows us to use SSH. The easiest way for Windows is to download something like PuTTY so PuTTY.org, or MobaXterm. If you decide to download or use PuTTY, you’ll be taken to a website once you actually click the download link on their main page to something that looks like this. Now, the file that you’ll actually need, you can kind of ignore all the alternative binary files down here, all you need is the MSI Windows Installer and pick if you’re using a 32 bit machine or 64 bit machine. Most people are going to be using the 64 bit machine. So that’s how you can download PuTTY. If you do a quick Google search for MobaXterm, you’ll actually find the download for that as well. Both of these are 100% free; although, MobaXterm does have a pro version, which essentially allows you to save more connections than the standard version. But for most people, the standard free version will be just fine. If you’re actually a CS major, I encourage you to download and install MobaXterm over PuTTY, because it can actually be a lot more useful and flexible for you in the future for other classes. But PuTTY will work just fine for those as well.

When you actually download and install PuTTY, it’s a pretty basic application. To connect to the Linux server, all you need is the hostname the port and then your Computer Science username and password. You should have already requested and received your CS account by now, but if you haven’t, you can go to selfserve.cs ksu.edu, or you can find that link from our CS homepage and request one. If you happen to forgot your password, or if you try to incorrectly log into your account three times in a row, you will get locked out and your password will be required to be reset. You can do that at password.cs ksu.edu. Once we have all that in place, what you’ll want to do is enter the hostname so linux.cs.ksu.edu into the hostname location and Port 22 for the port, and then click Open. Now, you can also save this connection. So if you type in a name for this, I use CS Linux as my name. So if you type in CS, Linux underneath the saved sessions section there and click Save. You can load this for future sessions that you may actually use this for. For example, like your homework or any other time you might want to connect to CS Linux.

When you click open for the first time, you might see a security alert that looks something like this. Really what this is doing is it’s confirming that you know the server that you’re actually connecting to. And in our case, we know who we’re connecting to so you can just click Yes to actually jump through this particular screen. But that should take you to a screen that looks something like this, where you have a terminal window open for you on CS Linux. Now most of you will either be connected to Cougar or Viper. There are two Linux servers here, both are going to work identical. And even if you’ve connected to Cougar in the past, but you’re now connected to Viper, all of your files should be there just the same. A little helpbit too when you’re trying to actually connect using PuTTY or even MobaXterm. If you are typing in your password and your username into the prompts as you are getting connected through SSH, you won’t see your password being typed. So as you type typically like any a login form, you’ll see like little dots pop up for each character you type. You will not see those here. So if you’re typing and you’re worried that your your typing isn’t actually working- it is. You’re just going to have to be very careful when you enter your password. And that’s also why I listed the password reset website up here, just in case you get locked out of your account.

Now, for Mac users to connect to CS Linux, it’s pretty much the same process but you don’t actually have to install anything. So on Mac or Linux, please open up a terminal window. On Mac, you can find this underneath your applications and utilities. Once you have that terminal window open, all you’re going to need to do is type in this command here, SSH, and then space, then whatever your eID is. You don’t need an actual underscore there. So in my case, my username or my eID is weeser, than the at symbol linux.cs.ksu.edu, which is the domain name, or the address for the Linux server. eID@linux.cs ksu.edu. What that is telling the SSH command here is your username for this particular server that you’re connecting to. And again, the same thing applies here. When you’re typing into the terminal with your password, you’re not going to see your password being typed. So just make sure you’re very careful when entering the password. And again, if you enter your password incorrectly more than three times in a row, you will be required to reset your password at password.cs ksu.edu. Now that you’re logged in, we can actually start doing a little bit of work in Linux. My screen here looks a little bit different than what yours probably does, because I’m actually using PowerShell in this case. If you’re using PuTTY, or MobaXterm, your screen is probably black. Same thing with you are using Mac or Linux. If you’re using MobaXterm, though, you can actually modify the background color and text color and things like that if you’d like. Before we get rolling in with the HTML stuff, we need to actually be a little bit more confident on how we can actually navigate through Linux.

Now we’ve used some of these commands in the class before, like cd, which is change directory. But to know where we’re actually currently at, we’re going to use the command pwd. pwd stands for present working directory, which allows us to see where we’re currently at. So I am now in home/w/wieser, which is my default user directory. Now we’ve used like I said cd we’ve used that before. So cd can be used to change directory. Now a couple handy commands here for that is cd ~. cd ~ will take you back to your home directory on CS Linux. Otherwise, you can do cd and then the name of the directory or path that you want to actually switch to. ls is going to show us the stuff in our current directory. If you also type ls -l that will show it in list form, which you’ll actually see on the left hand side here, the folder permissions or file permissions here, the user that this belongs to, the group that this belongs to, and then the last day modified here, and then the name of the file or folder. The folder that we’re actually going to be working with primarily today is the public HTML folder. But we’ll talk about that here in a little bit.

Other handy commands that we might want to utilize here is going to be the move command. So mv. So it’ll be mv, and then space, the thing that you’re moving, space, the destination where you’re moving it to. You may not have to actually use this command for this class. But it is useful to actually be aware of. cp is copy command works very similar to the move command, but copies the file instead of moving it around. cp works in a very similar way as move where you takes the source and the destination. But this just simply copies the file. rm removes the file. Now, I will put a disclaimer here with rm. rm can be very detrimental to you if you don’t know what you’re doing. So be careful when you’re using rm in any Linux environment. Specifically, if you do rm star, which is basically going to remove everything in the current directory, rm -r is recursive, so it’ll actually go in to subdirectories as well. So just be careful with rm because you can accidentally delete more than you bargained for. And there is no Recycle Bin in Linux. So once it’s gone, it’s gone. So be very careful with the remove command. Cat will just simply output the contents of a file to the terminal itself. And so that can be very useful just to kind of peek at what is in a particular file.

Editing files on a terminal environment is pretty straightforward. What I’m going to showcase here is nano, which is the most basic command line text editor that we have in Linux. Let’s go ahead and do this in our terminal window here. If you want to just clear your screen, by the way, if you just have a bunch of stuff on there, you can type clear and everything goes away. You can just scroll back up, and all of that reappears though, so it doesn’t really delete anything from your screen, it just moves the scroll bar. Likewise, if you press the up arrow or down arrow, you can actually scroll through the commands that you’ve had previously. So what I want to do here is cd into my public HTML directory. Now I did list a command down there, it says mkdir public HTML, you should not actually have to do that command. But if your public HTML folder happens to get deleted or is not there, that is the command you want us to actually make it. So once you’re in your public HTML directory, you can type in nano index.html. Once you have typed nano index.html, press enter, and you should get a screen that looks something like this. So this is our basic text editor here. And all the commands down here at the bottom are what you can use to actually write out anything, save it, cut, replace, that sort of thing. So some of the basic stuff that you would do with a normal text editor you can do here. So to save contents of our actual file, here, we’re going to use the write out command. Now the write out command can be done by holding the Ctrl key and the O key. So once you press Ctrl O, it will actually prompt you for a file name. And since we already typed out the file name, when we when we said nano, we don’t want to change it or we don’t need to change it here. And then all we need to do here is press enter, and it says wrote zero lines. Well because I haven’t really typed anything yet. But that’s okay. If we press Ctrl X as well here, we will actually cause our program to exit. And so that is the basics of nano here. So we have our new index.html file. We can actually load it up using nano so typing nano, and then the file name. Also, by the way, handy dandy little bit of information when you’re working with Linux, or any terminal by the way, or most terminals. If you start typing the thing that you’re looking for, and you press tab, it will generally autocomplete that for you. So makes things a lot easier to use.

But let’s take a look at a another option for us to actually be able to load our webpage on to the Linux server. It is actually really useful for you to be able to use nano and be comfortable with using a command line text editor because sometimes you’ll find yourself on a server that has no interface and it has no graphical capabilities of being able to open up interface that you can actually click through and make edits to a file. So things like nano or even vim which is a more advanced version of that is very useful to be comfortable with if you ever find yourself working on a server like Linux. But if you’re using PuTTY to connect to CS Linux, what I’ll want you to do is also download a program called FileZilla. FileZilla is a secure File Transfer Protocol software that we can use to actually transfer files from our local computer to CS Linux, or vice versa. And so the free version here is just fine for what our purposes are going to be doing here. So save that out. So I will say that when you install FileZilla, it’s going to prompt you to install additional software. That’s why it’s a free software. So make sure you don’t blindly click through the installation because you’ll install some extra stuff on your computer otherwise. If you’re a Windows user, or using MobaXterm, you don’t need to download FileZilla because you can actually use MobaXterm to copy your files over directly. Over here you can kind of see the directory that I did ls on, although you can actually kind of see all the hidden folders now. But here is my public-html folder that I had before that we just created. So once you have FileZilla downloaded, I just wanted to kind of show you the click through for the installation process here. So click I Agree through the agreement. Anyone on the computer that’s just fine, you can add a desktop icon if you would like to. Click Next, choose the install location. Next. And here is if you wanted to actually add the shortcuts here, click Next again. Now here, I think it cycles through different pieces of software, you’ll want to decline this. So don’t install McAfee here. Don’t install this stuff, you don’t need it. So just decline your way through those. But the installation is actually really quick and straightforward.

And once you have it installed, it’ll look something like this. We’re going to connect to CS Linux very similar to what we did with PuTTY. All you’ll need to do is click new site here. And this is going to be for Mac, Linux, and Windows here. So FileZilla works on all of them. I’m going to call this CS Linux again. The host, I want linux.cs.ksu.edu. So the same host that we had before, same port number. But instead of doing FTP, here, we want SFTP. So Secure File Transfer Protocol. So it’s FTP. But the connection is used done using SSH, so it’s encrypted. I am going to go ahead and let it ask for my password here. But I am going to type in my username. You can also change the background color if you want. But then I’m just going to click ok there. So now that has been saved. So if I go up here and click the little triple dots, next to the little server button that I had clicked, and then click on CS Linux. If we type in our password, then now we are connected to CS Linux. And again here, if you try your password, and you don’t connect, and you fail three times in a row, you’re going to have to reset your password. So once you’ve connected, you will see your files here on the left from your personal computer and the files on the right from CS Linux, I’ve gone ahead and made a 115 folder for us to work out of for this particular video, I would encourage you to do the same and make things a little bit easier to work out of. And on the right hand side, I’m going to open up the public-html directory over here on the right hand side where my CS Linux files are. And I can just drag that over from the right to the left, and it will complete the transfer.

Now I can do the same thing and transfer it back to the right. If I wanted to make edits to index.html, and then copy it back over to the server, I could do that. And then what you’ll want to do here is just overwrite and just kind of depends on what the files done, it’ll tell you a little bit of information about what the file is and what the transfer is. But I typically just say overwrite and then I usually just check the always use this action makes things easier, you don’t have to click through as much. Now that we’ve got our basic file, copy over in CS Linux, we can actually try to go and visit our website as well. Now, the website or the URL that you want to go to is people.cs ksu.edu/~ and then whatever your eID is. So for example, mine can be accessed at people.cs ksu.edu/~weeser. If you’ve been following along with exactly what I’ve been doing so far, you should come up to a completely blank webpage because we haven’t really done anything yet. In our index.html file, which is typically the default homepage file for HTML, doesn’t even have any HTML inside of it yet, but we’ll get there in just a moment. If you’re having any issues getting your web page to be displayed, please contact me or one of the TAs or post in the Microsoft Teams help channels and we can help you out as soon as we can. Other kind of issues that you might actually encounter here is any issues with your folder permissions. So if your public-html directory was not there and you had to make it, you might have some file permission issues there. You might have also accidentally named index.html incorrectly, or you might not have put it in the public-html folder. But if none of this actually fixes your issue here, like I said, please contact us. And if we’re not able to help you fix it, you can actually look at the support pages. If you go to support.cs ksu.edu, you can actually find some help pages that our internal IT department has made to help students get your initial web page started up. These should be all of the tools that we’ll need when we start typing in some HTML for our basic webpage.