1. Basic HTML The Magic Of Web Pages

2. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.  Save your Word document as HTMLNotes_XX (xx=your intials) in your HTML folder. Revised August 2008 Online PD Basic HTML2

3. Revised June 2008 Online PD Basic HTML3 What is HTML?  HTML are initials that stand for H yper T ext M arkup L anguage  Hyper is the opposite of linear (linear meaning going from place to place in some given order, like a PowerPoint presentation)  Text is what you will use; real English letters!  Mark up is what you will do, using real English letters!  Language (not really a computer language)

4. Revised June 2008 Online PD Basic HTML4 HTML Documents  are documents that can be interpreted by your Web browser to display a page as you intend it to be viewed.  (Remember, a browser is the computer application you use to see Web pages – Examples: Internet Explorer, Firefox, Netscape)  HTML documents are plain-text files that can be created using any text editor like Notepad for Windows.  We are going to use Notepad to type in our HTML pages.

5. Revised June 2008 Online PD Basic HTML5 Required To View a Web Page  Computer  A browser: oGraphic browsers such as Internet Explorer (IE), Netscape or Firefox. oThere are text browsers, like Opera, but we will not be interested in those at this point.  Internet connection to view online Web pages

6. Revised June 2008 Online PD Basic HTML6 Required to Develop a Web Page  Computer  Text editor (we will use Notepad)  A Web browser to “view” your work  Internet connection is NOT required to work on a web page. It will show perfectly well in any browser with no Internet connectivity.

7. Revised June 2008 Online PD Basic HTML7 Elements of a Web Page  An element is a fundamental part of a text document (or Web page)  Some elements are tables, paragraphs, ordered lists (with numbers like 1,2,3,…), unordered lists (with bullets), hyperlinks, or images.  You use HTML tags to place elements on a Web page.  Elements can contain plain text, other elements like graphics, or both.

8. Revised June 2008 Online PD Basic HTML8 Source Code  “Source Code” is the HTML coding behind a Web page or the instructions used to create a web page.  You can view the source code used to develop a Web page. Let’s look at a sample page to see the HTML used. There are lots of elements here to see. You will not use all of these tags in Basic HTML, but you might like to see how they work.  To view the Sample Page, Open Internet Explorer and go to www.rcsd.ms/~debra.mason/HTML www.rcsd.ms/~debra.mason/HTML  Click on the Sample Page  After the page has opened in your Web browser oIn the menu at the top right of the page, choose Page > View Source oThe HTML coding should open in Notepad.

9. Revised June 2008 Online PD Basic HTML9 File Naming Conventions  Choose a meaningful name. For example, if you want to make a page about puppies, you would not name the page as “rabbits.htm”  You may add a suffix of either.htm or.html – either works as well as the other. But, we will use the file extension.htm for our pages.

10. HTML Tags

11. Revised June 2008 Online PD Basic HTML 11 HTML Tags  HTML works in a very simple, logical format  It reads from left to right, top to bottom, just like you do.  An HTML tag begins with the less-than sign,.  In between these two signs are the commands  HTML is written with text, and the tags are used to highlight certain elements, like making larger text, or smaller text, bolder or underlined text, etc.

12. Revised June 2008 Online PD Basic HTML12 Page Sections – Head and Body Elements In Notepad In Internet Explorer } Head Elements Body Elements }

13. Revised June 2008 Online PD Basic HTML13 Exploring the Head Element  The Head element identifies the first part of your HTML coded document that contains the title.  This title (not to be confused with the page title that shows on the Web page) is shown in the blue Title Bar at the very top of your browser’s window.  Look back at the previous slide with the image of the practice1.html Web page to see it’s title.

14. Revised June 2008 Online PD Basic HTML14 The Title  The Title element contains your document title that is typically displayed in the Title Bar of your browser  The title should identify the subject or purpose of you Web page.  It also displays in someone’s bookmark list or on search engines like Google.

15. Revised June 2008 Online PD Basic HTML15 The Body  The largest part of your HTML document is the body. It contains the contents of your document. It begins with the tag and ends with the tag.  This is what actually displays within the text area of your browser window.

16. Revised June 2008 Online PD Basic HTML16 Commands  Think of tags as commands.  You put the tag exactly where you want an action to start happening, just as in the Sample Web Page.  For example, if you want a word to be bold, put the tag where bold starts (at the beginning of the word or sentence) and the “end” tag where you want bold to stop (at the end of the word or sentence.)

17. Revised June 2008 Online PD Basic HTML17 Tag Specifications  HTML is not case sensitive. is read the same by the browser as or even But, is easier to find in your code than other variations!

18. Revised June 2008 Online PD Basic HTML18 Remember  All tags are formatted the same.  All tags begin with an open bracket ‘ ’ Like  Tags are usually paired. (called a start tag) and (called an end, or close, tag)  Learning HTML is simply learning which tag performs which action!

19. Adding Images to Web Pages

20. Revised June 2008 Online PD Basic HTML20 Saving An Image  Adding an image adds interest to a Web page. But, your image files MUST be saved in the same folder where your html document is saved.  Choose a meaningful name! NO SPACES in the file name!  Go to the Blackboard, Web Design, HTML, More Images, and choose one of the images you like. Right click on it, choose “Save picture as…” or “Save image as…” then save it in the same folder where your practice10.htm file is located.

21. Adding Hyperlinks to Web Pages

22. Revised June 2008 Online PD Basic HTML22 Adding A Hyperlink  Hyperlinks are what make the Internet the Internet! A hyperlink is a tag used to put text on your web page that links to other web pages.  We will use Google as an example.  Let’s add a tag before the heading sentences to link to Google. Be sure to add some tags to make yourself a few blank lines between text.  Click Here to Go To Google!  The tag is, the attribute is href, the text in between the tags is the actual link that shows on the web page for the user to click on, and we only close the tag, which is.  Save your file as “practice12.htm” and Check It Out!