Online PD Basic HTML The Magic Of Web Pages 1/27/2018 Basic HTML The Magic Of Web Pages DMasonDesigns

Create an HTML folder Make a folder in your I 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 HTML

Online PD Basic HTML 1/27/2018 What is HTML? HTML are initials that stand for HyperText Markup Language 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) Revised June 2008 Online PD Basic HTML DMasonDesigns

Online PD Basic HTML 1/27/2018 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. Revised June 2008 Online PD Basic HTML DMasonDesigns

Required To View a Web Page Online PD Basic HTML 1/27/2018 Required To View a Web Page Computer A browser: Graphic browsers such as Internet Explorer (IE), Netscape or Firefox. There are text browsers, like Opera, but we will not be interested in those at this point. Internet connection to view online Web pages Revised June 2008 Online PD Basic HTML DMasonDesigns

Required to Develop a Web Page Online PD Basic HTML 1/27/2018 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. Revised June 2008 Online PD Basic HTML DMasonDesigns

Online PD Basic HTML 1/27/2018 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. Revised June 2008 Online PD Basic HTML DMasonDesigns

Online PD Basic HTML 1/27/2018 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 Click on the Sample Page After the page has opened in your Web browser In the menu at the top right of the page, choose Page > View Source The HTML coding should open in Notepad. Revised June 2008 Online PD Basic HTML DMasonDesigns

File Naming Conventions Online PD Basic HTML 1/27/2018 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. Revised June 2008 Online PD Basic HTML DMasonDesigns

Online PD Basic HTML 1/27/2018 HTML Tags DMasonDesigns

HTML Tags HTML works in a very simple, logical format Online PD Basic HTML 1/27/2018 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, <, and ends with a greater-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. Revised June 2008 Online PD Basic HTML DMasonDesigns

Page Sections – Head and Body Elements Online PD Basic HTML 1/27/2018 Page Sections – Head and Body Elements } Head Elements } Body Elements In Notepad In Internet Explorer Revised June 2008 Online PD Basic HTML DMasonDesigns

Exploring the Head Element Online PD Basic HTML 1/27/2018 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. Revised June 2008 Online PD Basic HTML DMasonDesigns

Online PD Basic HTML 1/27/2018 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. Revised June 2008 Online PD Basic HTML DMasonDesigns

Online PD Basic HTML 1/27/2018 The Body The largest part of your HTML document is the body. It contains the contents of your document. It begins with the <BODY> tag and ends with the </BODY> tag. This is what actually displays within the text area of your browser window. Revised June 2008 Online PD Basic HTML DMasonDesigns

Commands Think of tags as commands. Online PD Basic HTML 1/27/2018 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.) Revised June 2008 Online PD Basic HTML DMasonDesigns

Online PD Basic HTML 1/27/2018 Tag Specifications HTML is not case sensitive. <HTML> is read the same by the browser as <html> or even <hTmL> But, <HTML> is easier to find in your code than other variations! Revised June 2008 Online PD Basic HTML DMasonDesigns

Remember All tags are formatted the same. Online PD Basic HTML 1/27/2018 Remember All tags are formatted the same. All tags begin with an open bracket ‘<‘ have the tag command in the middle, then close with a ‘>’ Like <H1> Tags are usually paired. <HTML> (called a start tag) and </HTML> (called an end, or close, tag) Learning HTML is simply learning which tag performs which action! Revised June 2008 Online PD Basic HTML DMasonDesigns

Adding Images to Web Pages Online PD Basic HTML 1/27/2018 Adding Images to Web Pages DMasonDesigns

Online PD Basic HTML 1/27/2018 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. Revised June 2008 Online PD Basic HTML DMasonDesigns

Adding Hyperlinks to Web Pages Online PD Basic HTML 1/27/2018 Adding Hyperlinks to Web Pages DMasonDesigns

Online PD Basic HTML 1/27/2018 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 <BR> tags to make yourself a few blank lines between text. <BR><BR><A href=http://www.google.com> Click Here to Go To Google! </A> The tag is <A>, 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 </A>. Save your file as “practice12.htm” and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns