Introduction to HTML - First Step

  So, you guys want to make a website, but you have no idea how. We are going to start at the very beginning by learning Hypertext Markup Language, which is more commonly known as HTML. As we move along our learning, we will get into the full technical details of HTML and build some simple webpages. Part of what makes web design and web development so fun when compared to other forms of software development, is that you can instantly see the results of your efforts. Even if you have never made a website before, I think you are going to be pleasantly surprised by how easy it is to make your content appear inside of a web browser. 

HTML forms the foundation of nearly every website, no matter how big or small. So, by the time you finish learning about HTML, you will be ready to move on to other technologies like CSS, Java Script and much more. As we will learn, there is no individual technology or language that enables the creation of modern websites and web applications. Rather, it is a broad collection of technologies that gives us the pieces we need to complete the puzzle. If none of what I said makes any sense to you right now, don't worry. We are going to take things one step at a time. After this video, we will get into a more formal introduction to HTML as a language, but first, let's just dive right in and create our first webpage, step by step.     

  To create a website, all we need is a text editor and a web browser. Let's start out with the text editor first. A text editor is simply a program that is capable of creating or modifying plain text files, and every computer comes with a text editor built right in. If you are using Windows, we will start out by using Notepad. If you are on a Mac, you can use Text Edit in your applications folder. However, be careful, because a more advanced word processing application like Microsoft Word or Pages on the Mac, will oftentimes provide additional styling rules and metadata that are hidden from your view. This won't work for our HTML page, so make sure that you are using a basic text editor. Like I said, Text Edit on the Mac or Notepad on Windows will work just fine for now. Once you have your text editor open, simply type in some text as you normally would. I am going to type in the phrase "Hello World!" which is a common test phrase used in the field of computer science and software development to test that a system is working properly. Next, save your file in a place that you will be able to open it later, and be sure to save it with the file extension “.html.”

  So, we will go ahead and save the file here, and I am going to save it to the desktop, and I am going to name the file "index.html" and hit save. If you have already saved the file as a “.txt file”, don't worry. Simply find the file again and rename it with the extension “.html”, and you will be fine. After you have saved your HTML file, leave your text editor open because we will need it again later. Now for the web browser part. A web browser is a program that allows you to view webpages and browse the web. If you use Windows, the browser that came with your computer is called "Internet Explorer." There are other alternative browsers that you can use, such as Google Chrome or Mozilla Firefox, but we will talk about that later. If you are on a Mac, the browser that came with your computer is called "Safari." My web browser might look different from the one that you are using, but if a webpage is coded properly, it should look very similar on any computer.   

  In fact, as we will discover, that's part of the beauty of designing websites. Let's go ahead and open our web browser.   

  Again, if you are using Windows, the browser that came with your computer is called "Internet Explorer," and it should have an icon that looks like a big blue E. If you are using a Mac, the browser that came with your computer is called "Safari," and it has an icon that looks like a compass. If you typically use another browser, like Firefox or Google Chrome, those will work fine as well. 

  So, let's go ahead and double click this, and once you have your favorite web browser up and running, you can go to the file menu and select "open" and "open your file," or you should be able to just double click on index.html. In your browser, you should see the text that you typed into your text editor. Now, that was surprisingly easy, wasn't it?  

  You will find that creating HTML documents is a bit more complex than that, but in general, especially in the early days of the internet, a simple website is just a collection of HTML files similar to any other files on your computer. Inside of the web browser, you will be able to select the text, but you should not be able to edit it. But, what if you want to make a change? Well, that's actually very simple. If you closed your text editor earlier, reopen the HTML file that we were just editing.  

  First, we will type in some new text, such as the sentence "Look what I can do!" Next, we will save over the original document by going to file, save. Then we'll go ahead and switch back to our web browser, and all we have to do is click the refresh button. Clicking the refresh button will tell the browser to fetch the latest version of our document.  

  So, if we have made any changes, refreshing the page will allow us to see those new changes in our web browser. Before we finish up, here's a quick tip. When we refresh the webpage, we can see the changes reflected in our web browser.  

  As we continue to create and edit HTML documents, you will find that we use the refresh button very frequently to see the latest changes. In the interest of saving time, it's a good idea to learn the keyboard shortcut for refreshing a webpage. If you are using Internet Explorer on Windows, you'll want to press the control key and "F5" at the same time. If you are using Safari on the Mac, you will want to press the command key and the R key at the same time. This will refresh the browser. Using the keyboard shortcut is much faster than pointing and clicking on the browser refresh button every time. And that's it, you've made your very first webpage. Making your own custom content appear in a web browser is hopefully easier than you thought it would be.  

  Now, obviously, creating more complex websites will require more effort, but, as I mentioned previously, we are going to walk through everything in full detail and take things one step at a time. In the next video in this series, we will get a more formal introduction to HTML.