In this video I will review in creating a Web Development folder, Review Notes on some basic internet terms, Notes on Introduction to Web Page Design, Notes on the basic HTML Tags. But the important sets in creating a Testdrive.html webpage.
The Basic HTML Tags:
HTML works in a very simple and very logical format. It reads for left to right from top to bottom just like we do. It is written with text (English text) with a series of tags. All tag formats are the same. They begin with a less than sign (<) and end with a greater than sign (>). The command goes inside the < and > signs. You will come to notice that these tags will not show up on the web page. In addition, the majority of tags do require both an open or beginning tag and a close or ending tag. Below is an example of having a beginning and ending tag. Notice the slash (</) within the ending tag. All ending tags must have the slash. This example will bold and underline the text “The Basic HTML Tags”:
Your First HTML Page: During class you will be asked to create a test drive page. This is a test page that will be used in class to view and experience what HTML tags do. There will be times that you must participate in class when working with new HTML tags. In addition you will see that there will be links from this course web site that will take you to other educational web sites that discuss and support HTML concepts. There will not be a classroom textbook that you will use throughout the next two units.
Below is the main structure that is used when developing a web page. If you were to write your first HTML page, the two items that are most important to every page are the <HTML></HTML> tags and <TITLE></TITLE>. These tags are required and necessary when saving this as an HTML file. The other tags listed below the <HEAD> and <BODY> help support the structure of the web page browsers. Please review and always enter the tags when creating an HTML document. You will be assigned to create a Template file that will always have these tags present in your document.
Make a Module folder:
If you have not yet I would like you to start by creating a folder and calling it Web Development in side the Programming folder. We will be using this folder to save all students web files for through Module 7 and 8.
Creating a Testdrive Web Page: At this time you are to load up the word processor called Notepad and enter in the above structure tags and save it as Testdrive.html on to your computer. Once you have completed the save process then close the file and try to look on your computer disk to locate this file. You will notice that you will see a browser file called that same file. By saving your document as an html, the computer automatically converts the format over to a web page. Pretty cool. You will use this file "Testdrive.html” to create new web pages.
Steps to create a webpage:
1. Load up a blank Notepad.
2. Copy and paste the following HTML tags into the notepad: The Standard Webpage with a Table
3. Complete a Save As: Testdrive.html. Please locate your Programming / Web Development folder and make sure you type the .html after the file name. This is the key to creating a web page is the .html.
4. Go ahead and find the web page inside your Programming / Web Development folder and open the Testdrive.html document. Once opened you will not see much of anything because at this point you have not generated any information yet for this web page. I have provided a single table structure in addition to the basic HTML tags to aid in working with a simple table struct web page.
Steps to open the Notepad or code of the webpage:
1. Find the icon or web page inside your Programming / Web Development and right click over the file and select Open With on the menu and then select Notepad (See image)
2. When working with both a Notepad and the webpage browser, try to rest both icons on your taskbar right next to each other. This will allow the user to switch back in forth between the two easy. Please note that any changes you make on the notepad you will have to complete a save. Then you will need to refresh the browser to see those web changes.
Teacher comments: When working to learn HTML and web pages, you will find yourself working with two windows (the Notepad window and the Browser window). Try saving your web page often and review your changes as you build these pages. A continues manor of reviewing your work as you develop it will help one to understand what your web pages looks like and in finding tag errors. I hope you will enjoy these world of web page design.