History of the Internet

The History of the Internet (Part 1)

Resources

• Slides

Video Script

In this module, we’re going to talk about the history of the Internet. The history of the internet is a very interesting topic in computer science. But I think it’s one that we don’t think about very often today, we just take the internet for granted and just know that it’s always there. So let’s take a look at where the internet came from. The internet was really built to solve a unique problem.

Networking is complicated. And in the early days of computer networking, the only way two computers could talk to each other was via a direct connection between those systems, much like the phone systems of the olden days. And so we’ve already seen some network connected computers such as the NLS system that Douglas Engelbart talked about, for example. But networking was really complicated. And so because of this, we had to have direct connections. And it was very slow and very tedious to have really powerful computer networks. We ran into problems that were very similar to the tyranny of numbers problem that we talked about in an earlier Module. So the internet was really created to solve that particular problem.

One of the visionaries of the creation of the internet was J.C.R. Licklider. Licklider was a computer scientist at the defense, the Department of Defense Advanced Research Projects Agency, or DARPA. And he was interested in how we could build computer systems to aid the work of his agency. And so his work was really around some of the earliest networked computers such as ones at MIT in Santa Monica. But the real frustration he had was each one of those computer systems required a different terminal and different commands to interact with it. And J.C.R. Licklider really dreamed of having just one computer terminal on his desk, and one set of commands that he had to memorize. And from that terminal, he could access any computer system nationwide to get the information that he needed. And so he really famously talked about this and came up with some really interesting ideas. Let’s take a look at a video of J.C.R. Licklider talking about his ideas For what became the internet.

J.C.R. Licklider Video

Man-Computer Symbiosis

Man-Computer Symbiosis by J. C. R. Licklider

Memorandum For Members and Affiliates of the Intergalactic Computer Network - J.C.R. Licklider

https://www.kurzweilai.net/memorandum-for-members-and-affiliates-of-the-intergalactic-computer-network

The History of the Internet (Part 2)

Resources

• Slides

Video Script

J. C. R. Licklider his idea inspired him to write a paper in 1962 titled Man Computer Symbiosis. And in that paper, he had this quote, that he foresaw a network of such computers connected to one another by wideband communication lines, which could provide the functions of present day libraries together with anticipated advances in information storage and retrieval, and other symbiotic functions. And while there’s a lot of words here, he’s really thinking about building computer connections where computers can store libraries worth of information that we can access at our fingertips.

And so a few years later, he started talking with his colleagues. And he came up with this idea of what he called the intergalactic computer network, which I really admit I wish we called the internet the intergalactic computer network, I think is a really catchy idea. But he envisioned this idea of a global network of computers all interconnected and accessible to each other. And so you can easily ask access data from data and programs from any of those computers on any other computer. And he actually even submitted a memorandum called a memorandum for members and affiliates of the intergalactic computer network to encourage people to participate in this new idea. And while this never really came to be, this idea of forms the basis of a lot of the internet and cloud computing resources that we use today in our daily lives.

Another major figure in the history of the internet is Leonard Kleinrock. Leonard Kleinrock was a major figure in the history of the internet and was a researcher at UCLA. And he helped develop the technology behind packet switched networking, which we will take a look at in the next lecture. And it was really developed and proposed to the government as a way to build computer systems that were very fault tolerant in case of an attack or an emergency. His work was really revolutionary. And there’s actually a great video of Leonard Kleinrock himself discussing the importance of his work at UCLA in the early days of these computer networks. So let’s take a look at that video.

The first Internet connection, with UCLA's Leonard Kleinrock

The History of the Internet (Part 3)

Resources

• Slides

Video Script

On October 29, 1969, the first message was transmitted across the newly created ARPANET between computers at UCLA and SRI, the Stanford Research Institute. And so in this particular picture, we see the notes from Leonard Kleinrock notebook taken on October 29, 1969, showing that they talked to SRI hosts to host and it was really revolutionary moment on the internet. Because this was the first instance of a packet switch network being used that now forms the basis of the internet. Of course, it wasn’t exactly a success. They tried to transmit the word login, but only got the letters L o before the system crashed. So it wasn’t exactly a huge success, but it was a very small step toward the creation of the internet.

And so with that, ARPANET was born, ARPANET was the Advanced Research Projects Agency Network, and it was really the first computer network of its kind in the United States. Connecting all sorts of research areas together. Above me is a picture of the ARPANET map from March 1977, showing several hosts all connected to the network and all the different ways that they talk to each other. It was originally started as a packet switch network of just four different sites that were connected to these devices called interface message processors, or IPS, which are really modern, early precursors to what a modern router does, taking the messages from a computer and translating it so that it can be sent over a packet switch network.

Of course, ARPANET wasn’t the only network at that time. As we saw in the video at the beginning of this module, there are many different networks created all across the world. For example, with ARPANET by the 1970s, there were sometimes 20 new hosts coming online every day, you had the National Physical Laboratory in Great Britain, you had merits, the Michigan Educational Research Information Triad. You had supply days in France, and then you had the proliferation of public networks such as X25, and Usenet. Which were all public networks that were available through telephone providers at that time.

But all these different networks were disconnected you really couldn’t get from one network to the other network. And so we needed something else to really build the modern internet that we use today. And so that comes from the work of Vinton Cerf and Robert Kahn, who were two engineers for ARPANET. And they began working in the 1970s for a way that we could connect all of these computer systems together using a similar technology. And so their work really led to the creation of what we call TCP, the Transmission Control Protocol, which is the underlying technology for most computer networks today. And their work was so revolutionary that the two of them received the Presidential Medal of Freedom in 2005. So let’s take a quick look as Vinton Cerf talks a little bit about the history of the internet and around the birth of the modern internet that we know today.

Internet History part 4: Vint Cerf on the Birth of the Internet in 1983

The History of the Internet (Part 4)

Resources

• Slides

Video Script

The technology that Vinton Cerf and Robert Kahn developed is the transmission control protocol or TCP. TCP allows small networks to talk to each other using a common standard or protocol that determines how they actually interact. The biggest benefit of TCP is there’s no single point of failure in the system. They’re not all talking to a central hub, each computer can talk point to point or host a host and pass the packets along as needed to the next system. And the other important thing about TCP is computers could also acknowledge successful transmission or if the transmission wasn’t received, but expected it could request to retransmit all of that missing data, making the system very robust against errors. And so because of that data transmission was very tolerant of any errors and any lost data.

By 1985 small networks had started to connect to each other and larger networks. Were starting to connect all using this TCP network. Work. And so most of the network computers were using TCP by 1985. And there’s a real big push to bring more computers onto the internet. Every few years there were these interconnectivity conferences where small network owners were encouraged to adopt TCP so they could connect to the internet as it was growing. But unfortunately, there really wasn’t much out there. At that time, there were computer systems available, but there wasn’t any way to just publicly access information on those systems.

So we really needed one more piece to make the internet into the useful information sharing tool that we know today. The last piece of the puzzle is the creation of the world wide web. The World Wide Web is the interconnected web of webpages that we use today that most of us think of as the internet. And the World Wide Web actually debuted on this very system and next cube from 1990 that makes up the very first web server. And this technology was all developed by one man, Tim Berners-Lee, Tim Berners-Lee was an engineer at CERN in Europe, and in the 1980s. He was really interested in creating a way that they can better present information on the internet. CERN had a lot of research that they wanted to share. And they needed a way to make it available to the general public.

So over the next few years, he worked on creating all of the underlying technologies needed to build his vision of the world wide web, including the web browser, the web server, the Hypertext Markup Language, and the hypertext transfer protocol, HTTP, all very core technologies to what we do on the internet today. And so with the development of the World Wide Web, you had personal computers that started to get computer browsers such as mosaic installed on it. This is one of the early web browsers showing what the World Wide Web looked like in the early 1990s. And so mosaic is built on this idea of the hypertext transfer protocol. It’s a protocol for sending and requesting data from the servers connected on the internet’s and so with the work of Tim Berners-Lee had the creation of the first web server, the first web browser and all together they may up the World Wide Web. So let’s take a quick look at a video interviewing Tim Berners-Lee as the World Wide Web turned 25 in the year 2015 and just get some thoughts of his experience developing the World Wide Web in the last 25 years.

World Wide Web Turns 25: Interview with inventor Sir Tim Berners-Lee

The History of the Internet (Part 5)

Resources

• Slides

Video Script

In the previous video we saw mosaic as an example of one of the first web browsers. It’s really credited with bringing a large number of people to the web because they could easily install it on their personal computers at home. Mosaic was eventually sold to eventually became Netscape Navigator, which was then sold to a new company called Mozilla, and rebranded as Mozilla Firefox. So in a way you can think of mosaic being the early ancestor to Mozilla Firefox. Lynx was another popular text based web browser at the time, and it was actually co-developed at the University of Kansas, so it’s pretty close to home.

Another one of the earliest web browsers was line mode. Line mode was really the first widely used web browser of its time, and CERN actually brought it back for the 20th anniversary of the World Wide Web. So if you go to the URL shown on this slide, you can actually browse the web as it looked in the early days in the early 1990s. So next, we move on to the later part. of the world wide web development, which is the rise of the commercial web from 1996 to 1999. As the World Wide Web grew larger and more popular, companies started to take notice and figure out how they could use the World Wide Web to connect new customers make their businesses well known. And eventually they figured out how to sell things on the internet. So for example, this screenshot is from Tiger Direct, which is a computer parts sales website. And this is the very first website that you can find for Tiger Direct using the Wayback Machine to see what it looked like in the early days. And so not only did TigerDirect have early webpages, but Apple computers was there.

And you saw the development of some companies that we have today, such as Amazon, that leads to the era known as the Dot com boom from 1999 to 2001. This graph actually shows the stock market during that time and you can see it peaked right around 2000 before there was a huge crash into 2002 and 2003. So what happened is the internet really had some unprecedented growth from 1999 to 2001. And venture capitalists started investing in companies that really believe they would be the next big thing. In theory with the Dot Com Boom, they thought that if you spent a lot of money up front, then eventually you’d figure out ways to make money down the road. Unfortunately, that really didn’t work out as well as everyone thought, and many companies went bankrupt within a couple of years.

There were some survivors, of course. But let’s take a look at some real sobering statistics from the Dot com bust just to show you exactly what’s going on here. Infospace was a really big company in the early days of the World Wide Web and its stock price peaked at 1,300 a share in March 2000. By June 2002. It was down all the way to 2.67 cents, the learning company which was an early computer software company, to behind things such as the Oregon Trail and the common San Diego video games. It was bought for three and a half million dollars in 1999 but sold for just 27 million a year later. Another early product on the worldwide web was geo cities. One of the first places where you could host your own website on the web kind of like WordPress and Tumblr are today, Geo Cities was purchased by Yahoo for 3.5 billion dollars in 1999. But it was officially closed about 10 years later at a total loss. Of course, from the ashes of the Dot Com Bubble rises the internet that we know today.

And the big thing we can think about that has changed the world wide web over the last 20 years is the rise of what we call web 2.0 and social media. With web 2.0. The focus is instead of a very few users knowing how to develop web pages, we have the creation of web content from the masses itself. Think about websites such as Wikipedia, but even Facebook and YouTube where a lot of the content is being generated by users such as you and I. You also have the rise of ubiquitous internet access. You don’t have to To be at a computer in a home anymore, or go to the library to access the internet, almost all of us carry around smart devices that we can access the internet at a moment’s notice. And we have access pretty much anywhere we go in the modern world today. Because of this, we’ve had the rise of mobile devices, and the easy access to data that we never thought it was even possible then. But of course, we’ve also had other things happen, such as the rise of search engines, the power of search engines, such as Google can’t be understated. In short, if Google doesn’t know about it, it’s really hard to find it on the internet. And so because of that, we can still be limited in the scope of things that we can see on the internet.

But with all of that today, the internet and the World Wide Web is a really core part of what we do as computer scientists and how we interact as humans today. And so I hope this video was really interesting in giving you some background and what the history of the internet looks like. In the next module, we’ll spend a little bit more time talking about the technologies to make the internet and the World Wide Web possible, as we know it today.

Line Mode Browser 2013

https://line-mode.cern.ch/

Dot-com Bubble on Wikipedia

https://en.wikipedia.org/wiki/Dot-com_bubble

Introduction

Resources

• Slides

Video Script

In this module, we’re going to dive a little bit deeper into the technologies that allow the internet and the World Wide Web to work today. As we discussed in a previous video, early computer networks relied on circuit switching, where each computer had to have a direct connection to each other computer it needed to talk to. This was very cumbersome and very prone to error. And so we needed to come up with a better system for doing this.

So a circuit switch network works a lot like a telephone network. If you want to call somebody in New York and you’re in Los Angeles, there has to be solid wire connection between New York and Los Angeles from phone to phone to really enable that connection to work. But of course, with computers there is one major difference between how two computers communicate and how two humans communicate. Think about a phone call. When humans are on the phone, there’s almost no downtime, either one person is speaking or the other person is speaking. With a computer network, however, the communication is much more interrupted computer will send a command. And it will have to wait for some time before it receives any data back. And likewise, the sending and receiving can be much, much faster. And so with packet switched networks, instead of needing a solid connection all the time, can we just take those little bursts of data and somehow transmit them as needed, leaving the other spaces open for other bits of data to come in as well.

That’s really what led to the idea of packet switch networks. And this is one of the big reasons that computers and phones really need different network architectures. And it was something we realized in the 1960s. So the work of building packet switching actually lies in the work of Paul Baran. Paul Baran was a researcher at the RAND Corporation in 1959. And he worked on building computer networks or any any type of network really, that would be reliable in the case of a nuclear attack. So for example, if we want to send a message across the United States and there’s a nuclear attack somewhere in the middle, could we make sure that that message could get around the attack and still be received everywhere that it needed to be? Or more precisely, if networks went down? How could you actually get a communication across a network that was broken? So let’s take a look at a video looking at the work of Paul Moran and his creation of packet switched networking and why it was so important.

High Tech Heroes #32, part 1: Paul Baran

Protocols

Resources

• Slides

Video Script

The topmost layer of the seven layer OSI network model is the application layer. In this video, we’ll take a look at some application layer protocols and discuss what they do. These protocols are usually used to send data across two different computers using different programs. For example, there are protocols such as pop, SMTP, and eye map for sending and receiving email. We have HTTP and FTP for sending and receiving files and webpages using the World Wide Web. We have DNS and DHCP for helping us configure and set up our networks. And we can use protocols such as SSH, RDP, or telnet to remotely connect to computer systems all across the globe. So let’s take a look at a few of these application layer protocols and see how they work.

Probably the most important of the application layer protocols is DNS or the Domain Name System. You can think of DNS like the phonebook for the internet. Earlier in this module, we talked about how each computer on the is assigned a unique IP address, which is kind of like a phone number. However, just like phone numbers, IP addresses can be very confusing and hard to remember, it’s just a random string of numbers that we have trouble associating to anything. So instead, DNS allows us to remember domain names, and then it will associate them with IP addresses that actually are the computers we want to talk to. For example, when we open up a web browser and type in www.ksu.edu, DNS actually looks up the value of ksu.edu in the DNS system and returns an IP address like 129.130.8.41. And it says here, you need to talk to this computer to get the ksu.edu. The same thing happens for Google.com, ibm.com. Any website that you put into your web browser, we use DNS to figure out what the IP addresses of the computer system you want to talk to. The domain namespace itself is actually a hierarchical system. At the very top level, you have the root domain name servers. And then below that you have the top level domain servers for domains such as.org.com, dotnet.edu. Each of those have their own domain name servers. Then below that you can have servers for each individual domain names such as ksu.edu, ibm.com, espn.com, they all can maintain their own servers. And they can even delegate to further sub zones. For example, the computer science department runs its own DNS server at cs.ksu.edu. So we can have our own systems.

The process for looking up a domain name using DNS is interesting because it’s recursive. In computer science. We’re very familiar with recursive algorithms. So let’s say we want to look up the IP address for wikipedia.org. We would start by going to a DNS for cursor, which is usually a piece of software on our computer, it would go out and try and contact the root name server and say, Where is www.wikipedia.org and the root name server would say, I don’t know but I know where the .org name server is. Why don’t you try there? So then our recursive would go to the.org name server and say, Hey, where is wikipedia.org? And the.org name server says, Well, I know where Wikipedia is, why don’t you go try there. So then we’ll go talk to the wikipedia.org name server and ask it Where is www.wikipedia.org. And that org name server will say, Aha, I am the authoritative name server for wikipedia.org. And I can tell you that it is at this IP address. So then your DNS cursor will tell your computer Oh, you want to go to wikipedia.org. It’s this IP address. And usually this process happens within just a fraction of a second after you press the Enter key to load a webpage.

The next protocol we’ll discuss is the Dynamic Host Configuration Protocol or DHCP. DHCP is what allows a computer to connect to an unknown computer network and get an IP address and get connected without any other configuration needed. Before DHCP was really commonly used bringing your computer to a new office, usually required quite a lot of technical setup. And it made it very hard to have portable computers available like we do today. The Dynamic Host Configuration Protocol consists of four very simple steps that happen whenever a new computer connects to the network. Let’s go through those steps really quick and see what they do. In the first step, the client will send a DHCP discover message, which is basically a shout message that goes to every single system on the network. And it says, Hi, I’m new, I need an IP address. Then, on the network, there’s a DHCP server that is listening for those shout messages. And it will send back its own shot message of a DHCP offer that says Hi, I’m a DHCP server. Here’s an IP address and some configuration information you can use. Then the client once it gets that information, we’ll send a short message that says hey, that’s great. I’d like to use that information. And finally the DHCP server will send back one final shout that acknowledges Okay, good. That’s your information. Good luck. And then it will record that that IP address has been used by that particular computer. Meanwhile, the computer will use that information to configure its network settings so that it can talk to the network. So whenever you come to campus and you bring your computer and you see your wireless icon flashing for a few seconds before it goes solid, the DHCP protocol is actually what’s going on. It is connecting your computer to K-State’s wireless network requesting an IP address and getting connected so that you can use the internet on your mobile device.

Another important protocol at the application layer is the hypertext transfer protocol or HTTP. HTTP was developed by Tim Berners-Lee to actually send webpages using the World Wide Web. And it was developed in the late 1980s. And it’s really a revolutionary part of the internet we use today. Here’s what the HTTP protocol actually looks like. It is very interestingly, a text based protocol. So at the top of this image in red, we have the request where we’ve connected to wikipedia.org and we’ve requested to get the main page. So then the web server we’ll respond. And in blue, it responds with the response headers that tell us about the information we’re about to receive, such as the size and different things about it. And then finally, in green, you see the body of the response, which is actually the HTML that makes up the webpage that gets sent. And so if you’re really good, you can use tools such as telnet to browse the web. By typing in these HTML, HTTP requests and getting the response directly from the web server. It’s a really fun activity to try if you’re interested.

To make things a little bit simpler HTTP requires several different commands. For example, there is the get command that used to request a webpage, the post command that used to send data back to a web page, the head command, which gets information about the page without actually loading the page itself. And then there are other commands that are less often used, such as put and delete to change pages and delete pages off a web server.

To further simplify things, HTTP also defines a set of status codes that the server can respond to With telling more information about the response, the sending the most common response hopefully is 200, which simply means Okay, I received it and I’m sending back data. You can also get responses like 301 moved permanently if a website has been moved, you can get 434 bitten if you try and log into a website that you don’t have access to. And you can get some dreaded errors such as the 404 not found error if that web page can’t be found on the server. Of course, there are other errors, such as the 500 errors, the internal server errors, that means the server itself is having a problem and can’t respond right now. There’s also the 503 error, which means that the service is unavailable, but it might come back soon. As you can see, there are a lot of different application layer protocols that are used on the internet today, and they all serve a variety of different purposes. I hope this has been a really interesting look into the technology behind how the internet works. In the next few modules will actually explore what it takes to build web Websites ourselves.

Seven Layer OSI Model

Resources

• Slides

Video Script

As we saw in the video, the work of Paul Bran led to the creation of packet switch networks, a packet switch network might look something like this diagram, we have three computers. But we actually have six network devices that are creating a complicated network infrastructure that connects these three devices. So looking at this diagram, can you see some advantages to this network setup. For example, if one node goes down, can we still find a way to get a message to all the other nodes, it looks like we can in a lot of cases. So that makes this network very fault tolerance. In addition, if we want to add more computers to the network, we just have to plug them in at one of these open spots and they’ll be able to communicate as well. So packet switch network is really important. One of the key concepts in packet switch networking is routing. And routing is figuring out a way to create a path in the network to get from point A to point B using the shortest path which means Be the fewest number of hops, it really depends. And so with networking, if any one particular system goes down, our routing can actually figure out a way to get around that problem without any issues.

When we talk about modern computer networking, we can think of it in terms of the seven layer OSI network model, sometimes referred to as the network stack. Each of these layers performs a particular task in turn involved in getting data sent from one computer application to another application on a different computer. The top three layers application presentation and session are usually handled in the software itself. So we’re not going to talk about those too much in this video, but we’ll take a look at the bottom four layers and how they are actually used to get data from one computer to another computer using the modern internets. The big concept here is encapsulation. Each of those layers adds a little bit of data around the data that we want to send, allowing it to get where it needs to go. So we start with data from the application. Then we go down to the transport layer and we add a little bit of data to it. Then we go down to the internet layer, we add some more data. And finally we get to the link layer and add even more data.

This may seem really confusing, but let’s use a little metaphor to try and understand it better. For example, think about a letter you’re sending through the postal system. We have the letter, we might put it in an envelope, and that envelope might have a name on it, such as mom and dad, then we can take that nice envelope and put it in another envelope. And that’s the actual mailing envelope that has the address information on the back and the stamp and the return address. And then we put that letter in the mailbox. And when that letter gets picked up by the Postal Service, it might go into a box full of letters going to the same destination making up the frame. Then when the letter gets to the destination post office, it’s taken out of that box, they read the address, it gets to the location where it needs to go. They open the outs envelope, they look at the inside envelope, they see who it’s intended for. And then that person can open that envelope and get their data back out. And so encapsulation is really the important concept around this layered model of networking.

And we’ll take a look at each layer and what it does in particular, just to see a little bit more about how it works. The very bottom layer of the network model is the physical layer. And the physical layer handles the actual sending of individual bits and bytes across the network wires. He uses technologies such as hundred 10, or 1000, base T or gigabit And the important thing about the physical layer is it doesn’t have any knowledge of the packet whatsoever, just the next hop the next destination that it needs to be sent to on the network itself.

The next layer up is the data link layer. The DataLink layer or the Ethernet layer deals with different frames of packets and it deals with things such as congestion. One of the most important things that happens at the DataLink layer is Establishing the rules of the road for each packets, it assures that a packet has a location and an address. And so the data link layer really handles the way the data is routed across individual Ethernet cables between different networking devices. You can think of it kind of like working with a zip code.

Next, we go up to the network layer. And the network layer is the Internet Protocol layer. And this is actually what defines the end points of the packet where the packet starts at one computer and the destination of the packet at the other end. And so in the network layer, we have this packet structure that has a lot of different information in it. But the most important thing that it has is the IP address of the computer that sends it and the IP address of the destination computer that should receive it. You can think of an IP address like a phone number. It’s a unique number that identifies a single computer on the internet itself. And it tells us where it’s coming from and where it’s going to. This is the packet structure for IP version four but it is Quickly being replaced by IP version six.

Let’s take a look at the difference between IP version four and IP version six. IP version four uses addresses that have 32 bits of data. And so if you think about it two to the 32nd is about 4.2 billion. So really big number. And for a long time, we thought that that was going to be enough IP addresses on the internet. Of course, the internet has become much, much larger of the last few years. And so it’s very easy to imagine that there well more than 4.2 billion devices in the world. I mean, there are over 7 billion people in the world. So we don’t even have enough IP addresses for each person to have just one device. And if you’re anything like me, you probably have multiple devices that you’re using. So we’re looking at moving toward IP version six, which uses 128 bit addresses. It’s four times as many bits but we get to the point where we can have 340 undecillion IP addresses. Another way to think of it is Each atom in the basically each grain of sand on the earth can be assigned its entire ipv4 address space of 4 billion addresses and we’d still have plenty of them leftover. So I’m hoping that ipv6 is probably enough, at least for now. So of course, the network packet at the ipv6 layer looks very similar with just a larger source address and a destination address. And so hopefully this works for a long time to come.

This graphic taken from an XKCD comic shows the IP address space as it looked like a few years ago, in 2006, when this comment was written, all of the greenspaces were still available as open IP address space that could be taken on the internet. But of course, it’s all now gone. And so we’re running out of address spaces on the ipv4 internets. One interesting thing to note is originally on the internet, the 256. First octets of IP addresses were originally assigned to individual companies. For example, IBM was the assigned any IP address starting in nine. The K-State IP address range if you’re interested, is 129.130. And so we have one 256 of one square of this particular diagram was assigned to K-State originally.

The fourth layer is the transport layer. And the transport layer is where the transmission control protocol or TCP resides. The biggest thing that TCP does is it adds ports to the IP address. And so on a computer we can have many different programs that are all connecting via the internet at the same time, and we need a way to tell which data goes with which program. That’s what the transport layer does for us by assigning ports to programs on a computer. As we receive packets or as we send packets, we can mark them with a certain port that is associated with a certain program that should be able to interpret that data. Computers today use a set of ports, the US 65,535 unique ports. And some of them you might be familiar with. For example, the internet. The World Wide Web uses Port 80 for TCP or for HTTP connections.

So there are two different things that operate at the transport layer. There’s TCP the Transmission Control Protocol. And the other protocol at the transport layer is UDP the User Datagram Protocol. And you can see here the UDP packet structure has a lot less information. This is because unlike TCP, UDP has no technology to guarantee transmission of data. As we’ve discussed earlier, TCP relies on verification and retransmission of missing data so that TCP can guarantee every single packet is delivered if possible, whereas UDP does nothing like that. It just sends the packets and hopes they received, but it doesn’t have any way of controlling that. TCP of course is very useful for when we need to make sure every single bit of data gets there, but UDP also has its uses. For example, think of streaming data or store streaming video, or streaming video game data. If you don’t need every particular packet, instead of trying to retransmit those packets that have been missed, UDP will just skip them entirely and keep moving on.

This, of course leads to the two worst jokes in the history of computer science. Do you want to hear a TCP joke? I could tell it to you. But then I’d have to keep repeating it until I was sure you got it. Do you want to hear a UDP joke? I could tell it to you. But I’d really never be sure if you got it or not. See what I mean. It’s really two different technologies trying to do two different things. But they all have their very important uses in the internet today.

So to summarize, TCP is a connection orientated, reliable protocol that uses acknowledgments to verify the data has been sent and received properly. UDP on the other hand, is a connectionless protocol that is not really reliable, because it doesn’t use that system of acknowledgments to make sure the data has been received properly. These two texts analogies are two of the core technologies that operate at the transport layer on the internet in that seven layer OSI model that allows different computer programs to talk to each other using the internet.

The World Wide Web: Crash Course Computer Science #30

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.