Tutorial 1: HTML Tutorial (Windows Version) HTML ... · 1 Tutorial 1: HTML Tutorial (Windows...
13
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.
Transcript of Tutorial 1: HTML Tutorial (Windows Version) HTML ... · 1 Tutorial 1: HTML Tutorial (Windows...
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
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)
3
If using Windows 7 or Windows 8.1, you may have a screen similar to the one below.
2. 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. 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
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.
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. 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.
8
Your webpage should be similar to the following screenshot.
2. 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
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.
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.
10
8. After clicking OK, your Web page will open in Internet Explorer. It should look like the one
below.
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> .
