Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives

Size: px

Start display at page:

Download "Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives"

Marilynn Blake
5 years ago
Views:

1 Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives In this HTML Tutorial, we will introduce you to the tools used to create, save, view and print a Web

1 1 Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives In this HTML Tutorial, we will introduce you to the tools used to create, save, view and print a Web page. After reading this tutorial, you will be able to do the following: Understand the hardware and software used to create a simple Web page Open Microsoft Notepad to create a simple Web page using HTML Save a Web page created using Notepad and HTML Edit a Web page created in Notepad and HTML Understand how HTML Tags are used to format the Web page Use basic HTML Tags there are more options available in HTML5 Print both the source code created in Notepad and the published view from Microsoft Internet Explorer HTML Basics In order to be able to create, save, and run your Web page, you will need to know certain basic computing operations. Instructions will tell you to save your file to the USB drive. I. Getting started with a Computer running Windows The two applications that you will use are Notepad and the browser Google Chrome. The following steps show you how to access Notepad and Chrome on Microsoft Windows. 1. When you log on to Windows, your screen should look similar to the one below.

2 2 Or you may have a screen similar to this one if using Windows 10. You will need to find and open Notepad. (see white arrow)

If using Windows 7 or Windows 8.1, you may have a screen similar to the one below. 3 2.

If it is, then select it and open Notepad.

3 If using Windows 7 or Windows 8.1, you may have a screen similar to the one below Click on and a menu should appear. Check to see if Notepad is available on the menu. If it is, then select it and open Notepad. If not, type in Notepad in the space below All Programs, Search programs and files. 3. Select from the list. This will open Notepad so that you can create an html page.

4 4 4. Now that you have opened Notepad, you are ready to create your first Web page! For this exercise, you will be provided with the code for your Web page and will be shown how to save and open it in a browser. We will use html5 code. II. Your first Web page <!DOCTYPE html> <html lang="en"> <head> <title> My First HTML Web Page </title> <meta charset="utf-8"> </head> <body> <h1> Module 3 Simple Web page: This is the size of heading 1.</h1> <h3> Module 3 Simple Web page: This is the size of heading 3.</h3> <h6> Module 3 Simple Web page: This is the size of heading 6.</h6> <p>hi, my name is [type your name here], and this is my first HTML Web page.</p> <h2> The Power of the Web</h2> <p> Sir Timothy John (Tim) Berners-Lee is a British computer scientist who is best known as the inventor of the World Wide Web. According to Tim: </p> <blockquote> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. </blockquote> <h1> The RGB Colors are: </h1> <ol> <li>red</li> <li>green</li> <li>blue</li> </ol> <p>before you can open your Web page, you need to save it. </p> </body> </html> Instructions: Type in the above code into Notepad. Blue text will be used to denote HTML code. (Note: the code will actually be Black when entered into Notepad). Once you have added the code to Notepad, you can save your document by following steps in Part III. III. Saving a Notepad file 1. After you have selected your USB drive, create new a folder by clicking the Create New Folder button.

5 5 2. Click on the left-side menu and select Computer, and then select your USB drive from the list. Your USB drive may be recognized as Flash Drive or Removable Disk. 3. After you have selected your USB drive, create a new folder by clicking the New Folder button.

You can also rename a folder at any time by clicking on the folder with the right mouse button and selecting

6 6 4. While the words New Folder are highlighted, rename the new folder by typing MYWEBPAGE (or whatever you wish to call your folder) and pressing Enter. You can also rename a folder at any time by clicking on the folder with the right mouse button and selecting Rename. 5. Double-click on your MYWEBPAGE folder to open it. Now you can save your name HTML file to your USB drive. For this exercise, save your file as: FirstWebPage_YourName.html.

7 Now that your file is saved to your USB drive, you will be able to open and view your Web page in your browser, such as Google Chrome. IV. Opening your html file to View Your Web page 1.

7 7 Now that your file is saved to your USB drive, you will be able to open and view your Web page in your browser, such as Google Chrome. IV. Opening your html file to View Your Web page 1. You can open your html file directly by doing the following: First, click to open. Next, click This PC. I am looking for my Removable Disk. Clicking the Removable Disk opens another menu showing my two folders. Open the MYWEBPAGE folder to see the available files. Open the html file in Chrome.

Your webpage should be similar to the following screenshot. 8 2.

8 Your webpage should be similar to the following screenshot You may choose to search for your webpage file using Internet Explorer. When IE opens, you should see a Web page similar to the one below.

9 9 3. Click File and then Open. 4. A window will appear like the one below. Select Browse.

10 5. A new window will open. Click on the Computer button on the left-side and then select your USB drive. 1

11 10 6. Double-click on the MYWEBPAGE folder to open it. Select FirstWebpage.html. Click Open. This will add your HTML file to the open window for Internet Explorer. 7. Select OK to display your Web page in Internet Explorer.

12 8. After clicking OK, your Web page will open in Internet Explorer. It should look like the one below. 10

13 11 V. HTML Tutorial Review: Here are some things covered in Tutorial 1: 1. < > and </> are known as tags. Tags are used to perform tasks such as creating a body (the main area of text) for your Web page. Usually when you have a < > (beginning tag); you also need to have an </ > (end tag). 2. <html> and </html> are the tags that are used to let the browser know that the file that was created is a Web page. The HTML Web pages that you will be creating should always begin with <html> and end with </html>. 3. <body> and </body> are a major part of any Web page; any text or pictures that are to be displayed on the Web page should be located in between these two tags in your code. 4. <p> and </p> are the paragraph tags. These tags are used to add information into a paragraph format for viewing on a Web page. 5. <h1> and </h1> are the heading element tags for heading 1. There are 6 levels: h1 through h6. The size of the text is largest for <h1>. 6. The <blockquote> and </blockquote> tag is used to indent an area of text on a web page. 7. Ordered lists begin with an <ol> and end with an </ol> tag. (This is the letter o, not the number zero; and the letter l, not the number 1.) 8. Each list item begins with an <li> and ends with an </li> tag. 9. Because multiple versions and types of HTML and XHTML exists, the W3C, World Wide Web Consortium, recommends identifying the markup language used in a web page document with a Document Type Definition (DTD). The DTD identifies the version of HTML contained in the document. In this first tutorial, the DTD statement, commonly called a DOCTYPE statement, is the first line of our web page document. The DTD for HTML5 is: <!DOCTYPE html>.

Background of HTML and the Internet

Background of HTML and the Internet World Wide Web in Plain English http://www.youtube.com/watch?v=akvva2flkbk Structure of the World Wide Web A network is a structure linking computers together for the