HTML - Building Your Site [LESSON]
Building Your Site
Choosing a Text Editor
You have now learned some HTML coding and you need to put your knowledge to work. You will build a web page in a text editor. For this course, we are going to use the text editor, Replit, to build our pages or sites. Replit is available online, so you don’t have to have a text editor on your computer, and we can all use the same type of text editor. Replit allows you to create an account in your teacher’s team, you don’t have to give any personal information for your account. Your teacher does need access to your pages, so you must join the team and not create your own separate account. Use the link your teacher gave you to create your account in Replit. Replit is free for educational purposes, but not for individuals or organizations. The good thing about using Replit is that the program gives you a template page and you can see the result of your coding as you go. Do not delete the template pieces unless your teacher tells you to do so. Don’t move them around, they are in the correct locations to begin with. If you move them, you may end up with elements in the wrong location.
Building and Saving Your Web Pages
Building the site means that you use HTML5 coding to create the web page. In a regular text editor, you have a plain page that you start coding on, in Replit you have a template that includes some of your basic coding already. You’ll need to add the codes you need for a basic site, as you learned earlier in the module. After you have entered the template structure of the page, you should go ahead and save the page before moving on. The home page for websites should be saved as “index.html.” This is because the browsers look for the index page to know which page is the home page of the site. The rest of the pages of the site should be named a short name that indicates what the page is about, such as “about_us.html” or “products.html.” It is also a best practice in computer science to save your work either in lower case or camel case (capitalize the first letter of each word) and to not have any spaces in a file name. To keep from having spaces and still be able to easily read the file name, you either use underscores (_) or camel case and don’t have any spaces, like this: about_us.html or AboutUs.html. After you’ve saved the page, you’ll go back and start adding the heading of the page (the page title), the navigation bar, and the remainder of your content. It is good practice to save as you go and test the page to make sure it is working. You don’t want to enter all that coding and then find out that there is a problem, or worse lose it because your computer shut down or something. Remember TETO, Test Early and Test Often. When you enter codes, you nest them. That means if something is to be inside something else, you open the container, such as body and then you open the next item. Don’t forget to close each tag after you are through. See the image below to understand nesting. Remember, the last 2 codes on every web page are the closing body tag and the closing html tag.
Follow along with this video so you know how to create your Replit Template Example.
[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION