The typed text which creates a web page is the HTML source code for the web page. The text which appears in the above frame is an example of HTML source code. The typed source code must be saved as a text file (an "ASCII file", a "DOS text file", a "simple text file", or an "unformatted text file") with an extension of "htm" or "html" (use "htm" if a three character extension is required by your operating system). The "html" extension is utilized in the lessons herein.
The Lesson 1 practice activities include the typing and saving of HTML source code with a text editor or word processor and then the opening of this file with an Internet browser (causing the web page to appear on the computer screen).
The html source code utilizes tags to provide instrucitons to the browser for the display and/or manipulation of each web page component (text, image, etc..). Each tag begins with the less than symbol, "<" , and ends with the greater than, ">", symbol. The typed characters within the tags are instructions to the browser. The tags (this includes all characters typed within the tags) must be in accordance with the HTML syntax (rules).
When the following explanations are read, scroll the source code in the above frame to keep the source code and the explanations coordinated.
The first line of source code in the above frame (frame entitled "Lesson1 Source Code") is the comment tag. The text within this comment tag reads as follows; "Filename: Less1Code.html". The text within the comment tag does not appear on the web page. Comments can contain any documentation which will be beneficial to the author and/or others during future editings of the source code. Documentation is an important matter in complex HTML source code.
The syntax for the comment tag is as follows; the comment tag begins with the less than symbol (<) followed by the exclamation point (!), followed by two hyphens (--), followed by the author's comments (the comments may be on one line or on multiple lines), followed by two hyphens (--), followed by the greater than (>) symbol. Comments may be typed at any location within the source code.
The next line of source code is the "html" tag. This tag appears in each source code file as a matter of HTML syntax. The html tag is a paired tag which means the tag will have an opening tag and a closing tag. This first html tag is the opening tag and specifies the beginning of the html source code (this is an instruction to the browser that the souce code for the web page begins here). The closing html tag is the last line of source code and specifies the end of the html source code (this tag will be viewed later in this lesson). Closing tags have a slash immediately following the less than symbol of the tag.
The next line of code appears in each source code file as a matter of syntax and is comprised of a "head" pair of tags with an inner "title" pair of tags and the text, "Lesson 1 Source Code", between the two pairs of tags. The text, "Lesson 1 Source Code", does not appear on the web page. This text appears on the browser as an identity of the web page being displayed, is used by search engines during searches, and appears in the user's list of "bookmarks" or "favorites" when the user adds the web page to his/her list. The author of the source code should consider these utilizations when determining the text that will appear within the title tag pair. The inner pair of tags (the title pair of tags) are also referred to as a nested pair of tags. The opening and closing title tags are nested within the opening and closing head tags. Note the slashes which indentify the closing title tag and the closing head tag).
The head pair of tags are introduced at this point to create a familiarity with these tags. The head tags are not required for this simple web page. The head tags are utilized for particular purposes, including but not limited to scripts. Scripts provide a way to utilizie computer programming in conjunction with web pages to create interactive web pages.
The next line of code is the opening "body" tag (a paired tag). This tag specifies the beginning of the code for the web page components (text, images, etc.). This tag appears in each source code file as a matter of syntax. The closing body tag is near the end of the source code and specifies the end of the code for the web page components (this tag will be viewed later in this lesson). The closing body tag has a slash immediately after the less than symbol of the tag.
The next line of code contains a pair of "h2" heading tags with the text "Paragraph Tag" between the tags. Note the slash which indentifies the closing h2 tag. The text typed between the heading tags appears on the web page. Six heading tags are available for six sizes of text; h1, h2, h3, h4, h5, and h6. The h1 tag is for the largest size text and the h6 tag is for the smallest size text.
The next segment of code is 7 lines of code. Scroll all 7 lines of this code into view in the above frame. This code begins with an opening paragraph tag, followed by the paragraph text, followed by a closing paragraph tag. Note the slash in the closing paragraph tag which identifies this tag as a closing tag. The paragraph tag pair causes a blank line to appear on the web page immediately before the paragraph.
The text typed between the paragraph tags appears on the web page in paragraph form. The browser handles the word wrap when the paragraph is displayed on the web page. The lines as they appear on the web page do not match the lines as they appear in the source code (striking the enter key in the source code does not cause a new line on the web page). The new line tag which creates a new line on the web page is presented in Lesson 2.
The source code in the above frame indicates that the enter key was pressed 6 times when the paragraph was typed (creating 7 lines of source code for this paragraph). The 7 lines of source code for this paragraph could be typed as one long line of source code (lots of horizontal scorlling in the source code) and this would not change the appearance of this paragraph on the web page. Typing longer lines (less use of the enter key) or typing shorter lines (more use of the enter key) when typing the source code is referred to as the use of white space and is, among other things, a matter of style. Style is a content of subsequent lessons.
The next line of code is the closing "body" tag. Scroll this code into view in the above frame (note the slash which identifies this tag as a closing body tag). The closing body tag appears in each source code as a matter of syntax.
The next and last line of code is the closing "html" tag. Scroll this code into view in the above frame (note the slash which identifies this tag as a closing html tag). The closing html tag appears in each source code as a matter of syntax. This tag is the end of the HTML source code.
Lessosn Comments:
In the Lesson 1 source code, all tag identities (html, head, title, body, h1, and p) are in lower case. Some current browser capabilites require a lower case syntax (this in not a requirement for older browser capabilities). Typing all tag identities in lower case simplifies the upgrading of web pages to current browser capabilities. All tag identities for all lessons herein are in lowercase.
For some current browser capabilites, a syntax requirement is the closing of every paired tag (this is not a requirement for older browser capabilities). Closing every paired tag simplifies the upgrading of web pages to current browser capabilities. All paired tags are closed in all lessons herein.
Text Syntax:
Text alignments with spaces, tabs, and new lines can be achieved by utlizing the
"pre" tag which is presented in
Lesson 6.
End of Lesson 1.