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

2. 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

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

4. 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

5. 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

6. 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

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

8. 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
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

9. 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

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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

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

20. 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

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

22. 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= 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