Your First Web Page

HTMLHTML

HTML is the language used by web browsers to display text and images on web pages. (Styles are used to format the appearance of text, images and page layout.) stands for HHYPERTEXT

Hypertext is text which contains links to other files or Web pages.yperText MMARKUP

Markup refers to annotating a document in appropriate places to indicate how the file should be displayed. That is basically what HTML tags do: display information. Markup indicators are often called tags.

An example of the term markup is the Show Markup menu option in Microsoft Word, which shows proposed document changes which will affect what is displayed and how it will be displayed.arkup Language. HTML is the language that Web pages are written in. It uses tags to display text and images in a Web browser. TagsTAGS

The word Tag refers to something used to mark or label items; in this case those items might be headings or paragraphs or tables. In HTML, tags are used to markup the document to command or instruct the browser what text or images to display and how to display them. (such as <head> or <body> or <h1>) are HTML commands or instructions.

Tags have Attributes or properties, such as color or width or font-size. And attributes have Values.
They use this syntaxSYNTAX

Syntax refers to the rules of a language, such as the order of the words and the spelling. Even punctuation, such as the colon (:) which separates HTML Attributes from Values is very significant, and if it is used incorrectly or omitted, it can cause a browser to misinterpret a statement.: Attribute:Value
For instance: color:blue or width:200px or font-size:large or text-align:center.

A complete line of HTML code is called an ElementELEMENT

An element is an HTML statement and includes everything between a start tag (<) and its matching end tag (>). and is surrounded by angle bracketsANGLE BRACKET

Yes, these angle brackets really are less than and greater than signs; however many Web professionals refer to them as angle brackets. (< >); it is everything between the start of a tag (<) and the end of a tag (>).
For example: <h1 style="color:blue">This is my main heading</h1>

Tags are turned on and then they are turned back off by placing a slash (/) in front of the tag name.

For instance:

To turn on html (to start a Web page) enter: <html>
To turn off html (to end a Web page) enter the html end tag: </html>
To turn on the page body (to start the page content) enter: <body>
To turn off the page body (to end the page content) enter the body end tag: </body>
To turn on the heading1 tag enter: <h1>
To turn off the heading1 tag enter the h1 end tag: </h1>

An exception to this start tag /end tag rule is an Empty Element, such as the self-closing line break <br /> tag, which is used to insert line breaks to end a line and begin the next line. In this case, the empty element is closed within its own start tag. If you are coding in HTML 5, you can use either the <br> or the self closing <br /> tag for a line break.

Notepad is a simple and free text editor. It comes with Microsoft Windows. Unlike a word processor, Notepad does not allow you to set colors, or use multiple fonts in a document, or insert graphics into text files. Notepad files are very small. The following short exercise will show you how to quickly create and edit an introductory Web page using Windows Notepad.

1. Click Start > All Programs > Accessories > Notepad.

2. When Notepad opens, type the opening tag: <html> and tap [Enter].

3. Enter the tag to open the body of the Web page: <body> and tap [Enter].

4. Type This is my first Web page and tap [Enter].

5. Enter the tag to close the body of the Web page: </body> and tap [Enter].

6. Then enter the tag to close the Web page: </html> and tap [Enter].
Your Notepad code should now look like this:

Code for first part of My First Web Page

7. Click File > Save As and name the file FirstWebPage.htm

Note 1: The extension must be .htm or .html, not the default Notepad .txt extension.
Note 2: Avoid using spaces in Web filenames.
Note 3: filenames are case sensitive on Linux / UNIX servers, so pay careful attention to how you type your filename; you must use the same case structure when accessing it on the Web. In this tutorial, the first letter of each word within the filename is capitalized for readability.
Note 4: By convention, HTML tags are typed in all lowercase.

8. Locate FirstWebPage.htm in the Windows Explorer, double-click it, and it will open in your browser displaying the words: This is my first Web page. Leave the browser open.

9. To display a descriptive title in the Titlebar tab, immediately after the opening <html> tag, insert the three lines of code shown below:
<head>
<title>My First Web Page</title>
</head>

10. Comments or remarks are ignored by the browser and are used by webweavers to save notes for future reference. Comments open with .When in code view, browsers and Web page editors often display comments in a different color than regular HTML code. To display a comment after your <title> tag providing the creation date you would type:

11. The <h1> tag is used to insert the largest HTML heading. <h2> to <h6> tags are used for respectively smaller headings. Add the <h1> tag before the first sentence and the </h1> closing tag after the first sentence, to set the opening line of text as an h1 heading. Click File > Save, then select the browser window and view the effects of the change by clicking or selecting Refresh or by tapping [F5].

12. The <p> tag starts a new paragraph.
The <strong> tag is used to bold text. In HTML 5 typically the <b> is once again used for bold.
The <em> tag is used for italics. In HTML 5 typically the <i> is once again used for italics.
In Notepad, insert a blank line after This is my first Web page and before the closing </body> tag; then add a paragraph <p> tag and type:
<p>This is my <strong><em>first</em></strong> paragraph</p>
<p>This is my <strong><em>second</em></strong> paragraph</p>

Notice how the HTML <p>, <strong>, and <em> tags above are "nested" - the <em> tag is nested within the <strong> tag, and the <strong> tag is nested within the <p> tag. And they are all nested within the <body> container. Nesting is like one container stacked inside another, with the inner container sealed (opened and closed) within the outer container.

Note: <strong> replaced the <b> or bold tag in HTML4. However, in HTML 5 <b> can be used to indicate a key word or product. In reality you can use either <strong> or <b>.
<em> replaced the <i> or italics tag in HTML4, but in HTML 5 <i> can be used for a technical term or mood.

13. On the line after the last </p> tag enter the following two lines, followed by the line break tag <br>:
Line one <br>
Line two <br>
Note: <br /> replaced the <br> in HTML4, but in HTML 5 typically the <br> is used.

Your code should now look like this:

Code for second part of My First Web Page

14. Click File > Save, then select the browser window, refresh the screen, and view the effects of the change. Depending on your browser, your display should look like the following screen:

Click here to see this sample web page live (then right-click > View Source for code)

Notice how <p> tags leave more vertical space than <br> tags which are merely line breaks.
Notice how the comment does not display in the browser.

15. Close Notepad. Locate FirstWebPage.htm in the Windows Explorer.

16. To edit your practice file: Right-click on FirstWebPage.htm and choose Open with > Notepad from the shortcut menu or open Notepad and choose File > Open to open FirstWebPage.htm.

17. This is just a short practice demo. Add another paragraph. Add an <h2> and then add the smaller <h5> tag. Experiment and add more text and tags.

18. Finally, add <!DOCTYPE html> before the opening <html> tag as your first line of code, so that the browsers recognize that you are coding in HTML5. The DOCTYPE declaration will help browsers display your documents consistently. For more information on DOCTYPE, see the lesson titled: Adding DOCTYPE and Meta Tags.

Click the play icon below to see a short You Tube video tutorial covering many of the steps discussed above. (Please wait for load.)

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com

Many webweavers open the Notepad window on the left sideSetting Screens

In Windows 7, you can tap [Ctrl] + [left arrow] to automatically set the active window to occupy the full left half of the screen. of the screen and have the browser window open on the right side of the screen, or vice versa. Once both windows are displayed, you can tap [Ctrl] + [S] to save your Notepad edits and then in the browser window click Refresh or [F5] to see the current results side by side with your code.

Review Assignment Learning Project: 10 Practice Review Steps

Your First Web Page in Notepad