Essentials of HTML Instructor: Jeanne Hart

Your Instructor  I have been designing web sites for almost 20 years.  I worked as a part of a Web Team for the State of NJ Judiciary.  I’m a stickler for proper HTML code!  I have a BA in Art History and a Masters in Education in Adult and Distance Learning.  I can be reached by at:

What you should expect from me I will be here on time I will be here on time I will teach all 4 classes I will teach all 4 classes Hopefully I will make learning HTML a fun experience Hopefully I will make learning HTML a fun experience I will always be available for help I will always be available for help

I expect from you: to be on time to class to be on time to class to attend all 4 classes to attend all 4 classes to ask for help if you need it to ask for help if you need it not to be afraid to offer help not to be afraid to offer help not to be afraid of HTML code not to be afraid of HTML code have fun learning have fun learning

Let’s Get Acquainted!

What’s this class all about In this class you will learn why HTML is so important to the internet. In this class you will learn why HTML is so important to the internet. You will also learn the basic tags to create your first HTML page and learn how to use HTML to add text and headings in your Web page and how to format your text. You will also learn the basic tags to create your first HTML page and learn how to use HTML to add text and headings in your Web page and how to format your text.

What is HTML? Does anyone know? Does anyone know?

Why is this so important? Can’t anyone write for the web?

How do they work?  Languages such as HTML, serve an important purpose when it comes to sharing information over long distances.”

How does it work con’t Your computer has a Web browser, such as Internet Explorer or FireFox, or Chrome installed on it. First, your browser has to find the computer that is storing that information and it does this using the HTTP. Your computer has a Web browser, such as Internet Explorer or FireFox, or Chrome installed on it. First, your browser has to find the computer that is storing that information and it does this using the HTTP. The storage computer, or server, sends the new web page (as a plain text file) back to your computer using the same HTTP. The storage computer, or server, sends the new web page (as a plain text file) back to your computer using the same HTTP. Finally, and this is what you need to know, the browser sees the new Web page and interprets the text and HTML tags to show you the formatting, graphics, and text that appear on the page. Finally, and this is what you need to know, the browser sees the new Web page and interprets the text and HTML tags to show you the formatting, graphics, and text that appear on the page.

Using Web Browsers As great as Web browsers are, you should be aware that they have limitations! As great as Web browsers are, you should be aware that they have limitations!

Browsers con’t Some older browsers do not understand the newer HTML commands and might produce errors rather than text. Some older browsers do not understand the newer HTML commands and might produce errors rather than text. What's more, some of the newest browsers enable viewers to determine which window display sizes, fonts, and colors they prefer when viewing Web pages (even if those settings are different from what you, the Web author, want them to see) What's more, some of the newest browsers enable viewers to determine which window display sizes, fonts, and colors they prefer when viewing Web pages (even if those settings are different from what you, the Web author, want them to see)

Getting Connected You can create Web page files in any plain text editor and view them in any browser but, you have to decide how you are going to store the files. You can create Web page files in any plain text editor and view them in any browser but, you have to decide how you are going to store the files. You already know that you can't surf the Net without having an Internet Service Provider (ISP). You already know that you can't surf the Net without having an Internet Service Provider (ISP). In the same way, you need a Web Presence Provider (WPP) or an ISP or your own Web server to store your pages before they can be viewed from the Web. In the same way, you need a Web Presence Provider (WPP) or an ISP or your own Web server to store your pages before they can be viewed from the Web.

Using Good Form #1 Tonight, you will create a template for yourself that already includes the tags that you need to create your first web page. Then, when ever you want to create a new Web page you will be able to open your template file, add your new text, and save the new file.

Using Good Form #2

Using Good Form #3

Ok let’s get started!  The next thing you have to do is give the page a DOCTYPE, which by the way is the only tag in HTML that uses all caps!  Why, you ask, must I do this?

You add a DOCTYPE because…  Adding a DOCTYPE is what the browser is going to look at first!”

What will the DOCTYPE look like?

There 3 types of Doctype The tag has three variations: The tag has three variations: Strict Strict Transitional Transitional Frameset Frameset You declare which one you are using in the top of the file. You declare which one you are using in the top of the file.

HTML isn ‘t as difficult as you might think. It’s a language that just includes an opening tag like this, and a closing tag like one HTML isn ‘t as difficult as you might think. It’s a language that just includes an opening tag like this, and a closing tag like one Any guess what the stands for? What exactly are HTML tags?

Creating Your First Page You can create Web pages using some WYSIWYG programs, for now you’ll concentrate on learning HTML and use Note Pad for all your labs.

What exactly are the required elements? After the DOCTYPE, every HTML document must begin with the tag and end with its compliment, the tag. After the DOCTYPE, every HTML document must begin with the tag and end with its compliment, the tag.

A web page has 2 parts! All HTML documents are separated into two parts: All HTML documents are separated into two parts: the head and the body. the head and the body. Because the title contains information about the document, the and closing tags are placed within the opening and closing Because the title contains information about the document, the and closing tags are placed within the opening and closing tags. tags.

1. The head tag 1. The opening tag and the closing tags are used to indicate any information about the document itself. You'll learn how to add some of this information in later lessons. tags are used to indicate any information about the document itself. You'll learn how to add some of this information in later lessons.

2. The title tag 2. The and tags are used to add a title to your browser's Title bar. The Title bar is the colored band at the top of any browser that gives the name of the html page.

3. The body tag 3. The opening tag and the closing tags are used to surround any and all content that appears in the HTML page. And, there is only, ever, one opening body tag and one closing! And, there is only, ever, one opening body tag and one closing!

So……..  Your page would look like this :

a simple web page If you were to create a simple HTML page, you would see that the four tags we just discussed are present in this document If you were to create a simple HTML page, you would see that the four tags we just discussed are present in this document Doctype – (the doctype always come first in any html document) Doctype – (the doctype always come first in any html document) My First Web Page My First Web Page This is my First Web page This is my First Web page

You should know that For now, almost all HTML tags come in pairs. For now, almost all HTML tags come in pairs. You use the first tag in the pair (for example, ) to tell the computer to start applying the format. You use the first tag in the pair (for example, ) to tell the computer to start applying the format. You use the second tag (for example, ) requires a slash in front of the tag name that tells the computer to stop applying that format. You use the second tag (for example, ) requires a slash in front of the tag name that tells the computer to stop applying that format.

Tip Con’t The first tag is usually referred to by the name within the bracket, for example, opening html tag. The first tag is usually referred to by the name within the bracket, for example, opening html tag. You can refer to the second tag as the the closing tag, for example, closing html tag. You can refer to the second tag as the the closing tag, for example, closing html tag.

Saving and Viewing your page To view your own page in a browser, you must first save it. Because you've created an HTML document, you want to save your file with an.htm extension (first.htm, for example) so that you recognize it quickly. To view your own page in a browser, you must first save it. Because you've created an HTML document, you want to save your file with an.htm extension (first.htm, for example) so that you recognize it quickly. You should also be aware of difference between html and htm You should also be aware of difference between html and htm

Caution  Some people prefer to name their HTML files with an.html extension (for example, first.html). Some older computer systems, however, still require the file extension to be three characters or fewer and might have trouble reading (or storing) a file with a longer extension.

Previewing your page You can preview any HTML file in your browser, even when that file is stored on your computer rather than on a Web server. You can preview any HTML file in your browser, even when that file is stored on your computer rather than on a Web server. In Internet Explorer, you can view your new file by selecting Open from the File menu and finding the page you created to view. In Internet Explorer, you can view your new file by selecting Open from the File menu and finding the page you created to view.

Paragraphs In HTML, a paragraph is created whenever you insert text between the tags. In HTML, a paragraph is created whenever you insert text between the tags. My HTML Page My HTML Page This is my first HTML page. This is my first HTML page.

Paragraphs – con’t Web browsers see that you want a paragraph and they display it. Web browsers see that you want a paragraph and they display it. Web browsers don't pay any attention to how many blank lines you put in your text; they only pay attention to the HTML tags. Web browsers don't pay any attention to how many blank lines you put in your text; they only pay attention to the HTML tags.

Paragraphs – con’t  In the following HTML code, you see several lines of text and even a blank line, but the browser only recognizes paragraphs surrounded by the and tags (or paragraph tags). The tag tells the browser to add a blank line before displaying any text that follows it.

Con’t Typing Paragraphs in HTML Typing Paragraphs in HTML </head><body> This is the first paragraph. But is this the second? This is the first paragraph. But is this the second? No, this is. No, this is. </body></html>

Tip Web browsers do something else with paragraph text that you should be aware of: Web browsers do something else with paragraph text that you should be aware of: They wrap the text at the end of the browser window. In other words, when the text in your Web page reaches the edge of the browser window, it automatically continues on the next line regardless of where the is located. They wrap the text at the end of the browser window. In other words, when the text in your Web page reaches the edge of the browser window, it automatically continues on the next line regardless of where the is located. The tag always adds a blank line, but you might not always want a blank line between lines of text. Sometimes you just want your text to appear on the next line (such as the lines of an address or a poem). You can use a new tag for this: the line break, or tag The tag always adds a blank line, but you might not always want a blank line between lines of text. Sometimes you just want your text to appear on the next line (such as the lines of an address or a poem). You can use a new tag for this: the line break, or tag

Text Emphasis You will occasionally want to add emphasis to your text to make it stand out. You will occasionally want to add emphasis to your text to make it stand out. HTML enables you to quickly apply some standard formats, such as boldface and italic, using a predefined set of tags. HTML enables you to quickly apply some standard formats, such as boldface and italic, using a predefined set of tags. for italics and for italics and for bold for bold

Caution Other formatting tags exist in HTML, but their use is discouraged in HTML in favor of style sheets. Other formatting tags exist in HTML, but their use is discouraged in HTML in favor of style sheets.

Important terms to remember Deprecated Tags - Some older HTML tags, specifically related to formatting, have been replaced by the formatting capabilities of style sheets. Deprecated Tags - Some older HTML tags, specifically related to formatting, have been replaced by the formatting capabilities of style sheets. Style Sheets - Web developers use style sheets to specify formatting instructions for a single document or a group of documents. Style Sheets - Web developers use style sheets to specify formatting instructions for a single document or a group of documents.

Headings  Separating your text into paragraphs isn't the only way to format your Web pages.  HTML enables you to add six different heading tags to your pages by using the tags through. These tags are very simple to use. Let’s look at them:

Headings con’t This is Heading 1 This is Heading 1 The closing heading tags also create an automatic paragraph break. In other words, all headings automatically include a blank line to separate them from the text. Heading 1, the tag, has the largest font of the heading tags and The closing heading tags also create an automatic paragraph break. In other words, all headings automatically include a blank line to separate them from the text. Heading 1, the tag, has the largest font of the heading tags and Heading 6, the tag, has the smallest. In fact, you usually only see Web page authors use the tags because the remaining tags,, are actually smaller than normal text. Heading 6, the tag, has the smallest. In fact, you usually only see Web page authors use the tags because the remaining tags,, are actually smaller than normal text.

Tip Unless you or the people viewing your pages have adjusted the browser's default settings, normal HTML body text appears in 12 point Times New Roman font on most computer systems. Unless you or the people viewing your pages have adjusted the browser's default settings, normal HTML body text appears in 12 point Times New Roman font on most computer systems.

Text formatting tags For tonight they will include: DOCTYPE Html tag Head tag Title tag Heading tags Paragraph tag Paragraph tag Bold tag Bold tag Emphasis tag Emphasis tag

Tip Here's a special character that you should remember: Here's a special character that you should remember: The symbol stands for nonbreaking space and is used to insert a space inside an HTML document. The symbol stands for nonbreaking space and is used to insert a space inside an HTML document. HTML ignores extra spaces between words and tags so you'll need to have a way of including extra spaces. HTML ignores extra spaces between words and tags so you'll need to have a way of including extra spaces. You can do that with the character. You can do that with the character.

Adding Comments  A great tag to remember is the comment tag  It looks like this:  It looks like this:  And where the text goes can be any text but it will not be seen by the browser.

Refresh tag  If you have a page that you update several times a day and you want to make sure that people always see the most recent version, you can enter the page's own URL in the refresh tag. When the browser sees the refresh tag, it presents the requested URL in the specified time.  If you have a page that you update several times a day and you want to make sure that people always see the most recent version, you can enter the page's own URL in the refresh tag. When the browser sees the refresh tag, it presents the requested URL in the specified time.  Why might that be helpful on a web and on what type of page?

Tonight’s Summary  Tonight you learned about: 1. The DOCTYPE 2. the 4 basic tags to create a web page 3. how to format the text on your pages 4. how to add comments to your web page

Summary for tonight You also learned about: Web browsers Web browsers the DOCTYPE the DOCTYPE 4 basic tags needed to create web pages 4 basic tags needed to create web pages the html tag, the head tag, the body tag and all their closing tags the html tag, the head tag, the body tag and all their closing tags Tags to format the text for your web pages Tags to format the text for your web pages

End of Class 1 Take 15 minutes and when you come back you’ll be doing the labs for tonight