Tutorial 1: HTML Tutorial (Windows Version) HTML ... 1 Tutorial 1: HTML Tutorial (Windows Version) HTML

  • View
    38

  • Download
    2

Embed Size (px)

Text of Tutorial 1: HTML Tutorial (Windows Version) HTML ... 1 Tutorial 1: HTML Tutorial (Windows Version)...

  • 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 My First HTML Web Page Module 3 Simple Web page: This is the size of heading 1. Module 3 Simple Web page: This is the size of heading 3. Module 3 Simple Web page: This is the size of heading 6.

    Hi, my name is [type your name here], and this is my first HTML Web page.

    The Power of the Web

    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:

    The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. The RGB Colors are: Red Green Blue

    Before you can open your Web page, you need to save it.

    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.

  • 1 0

    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. and 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 and end with

    .

    3. and 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.

    and

    are the paragraph tags. These tags are used to add

    information into a paragraph format for viewing on a Web page.

    5. and are the heading element tags for heading 1. There are 6

    levels: h1 through h6. The size of the text is largest for .

    6. The and tag is used to indent an area of

    text on a web page.

    7. Ordered lists begin with an and end with an 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 and ends with an 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: .