1 / 52

Essentials of HTML

Essentials of HTML. Instructor: Jeanne Hart. 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.

zachery-guthrie
Download Presentation

Essentials of HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Essentials of HTML Instructor: Jeanne Hart

  2. Ihave 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 email at: jhartmccc@verizon.net Your Instructor

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

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

  5. Let’s Get Acquainted!

  6. 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. What’s this class all about

  7. Does anyone know? What is HTML?

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

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

  10. 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. • Finally, and this is what you need to know, the browser sees the new Web page and interprets the text and HTML tagsto show you the formatting, graphics, and text that appear on the page. How does it work con’t

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

  12. 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) Browsers con’t

  13. 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). • 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. Getting Connected

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

  15. Always use lowercase for all tags! • To the browser, <HEAD>, <Head>, and <head> all mean the same thing. But hat won't always be true! Use the same lowercase spelling for all your commands and you won't be caught having to recode your pages as the standards change! Using Good Form #2

  16. Never use spaces in filenames! Older computer systems have trouble reading filenames that include spaces (for example: my first page.htm). Using Good Form #3

  17. 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? Ok let’s get started!

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

  19. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"> What will the DOCTYPE look like?

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

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

  22. 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. Creating Your First Page

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

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

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

  26. 2. The <title> and </title> 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. 2. The title tag

  27. 3. The opening <body>tag and the closing </body> 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! 3. The body tag

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

  29. 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) • <html> • <head> • <title> My First Web Page </title> • </head> • <body> • <p> This is my First Web page</p> • </body> • </html> a simple web page

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

  31. 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. Tip Con’t

  32. 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 Saving and Viewing your page

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

  34. 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. Previewing your page

  35. In HTML, a paragraph is created whenever you insert text between the <p> tags. • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> • <head><title>My HTMLPage</title></head> • <body> • <p>This is my first HTML page.</p> • </body> • </html> Paragraphs

  36. 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. Paragraphs – con’t

  37. 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 <p> and </p> tags (or paragraph tags). The <p> tag tells the browser to add a blank line before displaying any text that follows it. Paragraphs – con’t

  38. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>Typing Paragraphs in HTML</title> </head> <body> <p>This is the first paragraph. But is this the second?</p> <p>No, this is.</p> </body> </html> Con’t

  39. 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 <p> is located. • The <p> 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 <br /> tag Tip

  40. 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. • <em> </em> for italics and • <strong> </strong> for bold Text Emphasis

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

  42. 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. Important terms to remember

  43. 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 <h1> through<h6>. These tags are very simple to use. Let’s look at them: Headings

  44. <h1>This is Heading 1</h1> • 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 <h1> tag, has the largest font of the heading tags and • Heading 6, the <h6> tag, has the smallest. In fact, you usually only see Web page authors use the <h1><h2><h3> tags because the remaining tags, <h4><h5><h6>, are actually smaller than normal text. Headings con’t

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

  46. For tonight they will include: DOCTYPE Html tag Head tag Title tag Heading tags Paragraph tag <p></p> Bold tag <strong> </strong> Emphasis tag <em> </em> Text formatting tags

  47. Here's a special character that you should remember: &nbsp; • 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. • You can do that with the &nbsp; character. Tip

  48. A great tag to remember is the comment tag • It looks like this: <!- - text goes in here - -> • And where the text goes can be any text but it will not be seen by the browser. Adding Comments

  49. 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.<meta http-equiv="refresh" content="time in seconds, URL for this page" /> • Why might that be helpful on a web and on what type of page? Refresh tag

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

More Related