1 / 49

BASIC HTML CODING

< HTML> <HEAD >. BASIC HTML CODING. CIS67 Foundations for Creating Web Pages Professor Al Fichera. Rev. August 25, 2010 — All HTML code brought to XHTML standards. Historical and Practical Information. What is HTML? What is XML? What is XHTML? HTML Structure HTML Style HTML Layout

helene
Download Presentation

BASIC HTML CODING

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. <HTML> <HEAD> BASIC HTML CODING CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.

  2. Historical and Practical Information • What is HTML? • What is XML? • What is XHTML? • HTML Structure • HTML Style • HTML Layout • HTML Appearance • What Should You Do? • Browser Specific Basic HTML Coding by Professor Al Fichera http://profal2.com

  3. What is HTML? • HTML stands for Hypertext Markup Language, it’s based upon a much larger system called SGML (Standard Generalized Markup Language). • In the very early basic HTML, not all tags have a beginning and an end. Some tags are one-sided, and some are containers that hold extra information. Basic HTML Coding by Professor Al Fichera http://profal2.com

  4. XML • The Extensible Markup Language (XML) is the universal format for structured documents and data on the Web. • XML is covered in another course. • XML in 10 brief points: http://www.w3.org/XML/1999/XML-in-10-points Basic HTML Coding by Professor Al Fichera http://profal2.com

  5. XHTML • XHTML 1.0 is written in XML, and is the up-and-coming standard that will help Web designers prepare for the future. • XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools. • Extensible HyperText Mark-Up Language: http://www.w3.org/TR/2001/WD-xhtml1-20011004/#xhtml Basic HTML Coding by Professor Al Fichera http://profal2.com

  6. XHTML • XHTML 1.0 and HTML 4 are very similar and virtually the same but there are a few simple rules we will uncover as this course proceeds. • All XHTML tags need: • To be closed. • Use lower-case for tags. • Have double quotes " after the = sign. Basic HTML Coding by Professor Al Fichera http://profal2.com

  7. HTML Structure • HTML is a language for describing the structure of a document, not its actual presentation. Basic HTML Coding by Professor Al Fichera http://profal2.com

  8. HTML Style • HTML defines a set of common styles for the Web page. • Headings, Paragraphs, Lists, and Tables • Plus, character styles: Bold, Italic, etc. Basic HTML Coding by Professor Al Fichera http://profal2.com

  9. HTML Layout • HTML does not describe page layout. • HTML tags indicate what an element is, e.g., Heading, List. • Your job is to decide what type of Heading or List it is. Basic HTML Coding by Professor Al Fichera http://profal2.com

  10. HTML Appearance • You can not control the way your readers computers and browsers interpret your Web pages. • You can expect it to look different than what you thought! Basic HTML Coding by Professor Al Fichera http://profal2.com

  11. What Should You Do? • Design your pages so they work in most browsers. • Focus on clear, well-structured content that is easy to read and understand. • Do not design your pages based on what they look like on your computer system and on your browser. Basic HTML Coding by Professor Al Fichera http://profal2.com

  12. Browser Specific • How many pages have you found on the net that suggest they were written for a specific browser? • These were written for appearance only. • Certainly, the times have changed and you’ll probably not find this feature any longer unless it’s a very old page. Basic HTML Coding by Professor Al Fichera http://profal2.com

  13. Stick with the Rules • Stick to the rules and you’ll design Web pages that can easily be read by just about every browser. Basic HTML Coding by Professor Al Fichera http://profal2.com

  14. HTML is a Markup Language • Start with text and add special tags around the words and paragraphs. • A lot like the old DOS for Word! • There is a defined set of tags you can use. • Some are browser specific, Netscape has many limitations as a browser for the Web. Basic HTML Coding by Professor Al Fichera http://profal2.com

  15. A Brief History of HTMLTags • HTML 2.0 is the old standard, and maintained by the W3 Consortium. • HTML 3.2 developed in 1996 and supported by several software vendors: IBM, Microsoft, Netscape, Novell to name a few. Basic HTML Coding by Professor Al Fichera http://profal2.com

  16. HTML 3.2 Features • The primary additions included: • Tables, Applets, Text flow around images. • Provided full backward-compatibility with HTML 2.0 standard Basic HTML Coding by Professor Al Fichera http://profal2.com

  17. HTML 4.0 Introduction • HTML 4.0 introduced in 1997, the “current generation” and still supported by the consortium. • Only Internet Explorer and Netscape vers. 4 support this version. Basic HTML Coding by Professor Al Fichera http://profal2.com

  18. HTML 4.0 Features • Primary additions included at the time: • Cascading Style Sheets and Dynamic HTML • New standards: Framesets (introduced by Netscape 2.0); Floating Frames (introduced by Internet Explorer 3.0). • Currently, we are not suggesting Framesets since they can be difficult to make accessible for everyone. Basic HTML Coding by Professor Al Fichera http://profal2.com

  19. More on HTML • For more on the HTML 4.0 Specification: http://www.w3.org/TR/1998/REC-html40-19980424/ Basic HTML Coding by Professor Al Fichera http://profal2.com

  20. More on the Future of HTML • For more on the HTML 5.0 Specification: http://dev.w3.org/html5/spec/Overview.html Basic HTML Coding by Professor Al Fichera http://profal2.com

  21. HTML Editors • HTML documents are basically ASCII text documents. • Any Word Processor, preferably Window’s Notepad should be used to create the necessary text. • For MACs, use your SimpleText editor. Basic HTML Coding by Professor Al Fichera http://profal2.com

  22. Notepad.exe for Creating HTML • This program creates basic HTML but does not allow the use of multiple files, you’ll need multiple Notepads open. Basic HTML Coding by Professor Al Fichera http://profal2.com

  23. Opening Tags • Start all pages with these tags: <html> <head> <title> </title> </head> <body> Basic HTML Coding by Professor Al Fichera http://profal2.com

  24. Closing Tags • End all pages with these tags: </body> </html> • Newer browsers are not too strict about these opening and closing tags… but older browsers are! Basic HTML Coding by Professor Al Fichera http://profal2.com

  25. Headings • Headings serve as headlines for a document. • There are six (6) levels of header tags. Level 1 is the largest and boldest, Level 6 is the smallest. • (There is additional space provided above and below any heading level text.) Basic HTML Coding by Professor Al Fichera http://profal2.com

  26. More Heading Properties • Headings can also include placement information inside the tag. • For Example:<h1 align="center"> text here </h1> • Or:<h1 align="right"> text here </h1> Basic HTML Coding by Professor Al Fichera http://profal2.com

  27. Paragraphs • HTML does not recognize carriage returns or enters, you will need to add a Paragraph tag. • The paragraph tag is <p> and the closing tag is a </p> (The tag can be either before after the paragraph.) • The only time you really need to close the <p> tag is when you place an attribute inside, more on this later. • NOTE: To get the look of a <p> paragraph tag without really using one, you may choose to use two (2) break tags <br /> together. Basic HTML Coding by Professor Al Fichera http://profal2.com

  28. Line Breaks & Paragraphs • The <br /> tag leaves normal spacing between lines, whereas the <p> tag leaves 2 to 3 times the space. • This sentence example simulates the tag.<br />This sentence represents the spacing between <br /> lines with the break tag. • This sentence example simulates the <p> tag.<p>This sentence represents the spacing between<p>lines with the paragraph tag. Basic HTML Coding by Professor Al Fichera http://profal2.com

  29. Justified Text in Paragraphs • Use the <p align="justify">Text </p> tags. Basic HTML Coding by Professor Al Fichera http://profal2.com

  30. Listing Items on a Web Page • Adding lists to your Web page: • Bullets called Unordered Lists <ul> • Numbered listscalled Ordered Lists <ol> Basic HTML Coding by Professor Al Fichera http://profal2.com

  31. Unordered Lists <ul> • When you want to make a bulleted list to drive your point home, do the following: • Use the <ul> tag as in the following example: <ul> <li>How </li> = l How <li>Now </li>= l Now <li>Brown </li>= l Brown <li>Cow </li>= l Cow </ul> Basic HTML Coding by Professor Al Fichera http://profal2.com

  32. Ordered Lists <ol> • When you want to make a numbered list to drive your point home, do the following: • Use the <ol> tag as in the following example: <ol> <li>How </li> = 1. How <li>Now </li>= 2. Now <li>Brown </li> = 3. Brown <li>Cow </li> = 4. Cow </ol> Basic HTML Coding by Professor Al Fichera http://profal2.com

  33. Modifying Lists • You can change the appearance of your bullets in an Unordered List <ul> tag. • Add the attribute TYPE= to the <ul> tag, followed by either: • disc • square • circle • For example to make square bullets type: <ul type=“square"> Basic HTML Coding by Professor Al Fichera http://profal2.com

  34. Changing Ordering Lists • You can change the numbering scheme for Ordered Lists <ol> too! • By default numbered lists start at 1. Basic HTML Coding by Professor Al Fichera http://profal2.com

  35. Change to Lettering Lists • To change the type of ordering used in your listing, add this to your <ol>tag: • <ol type="A" (or a)> this will begin a list with uppercase or lowercase letters instead of numbers. Basic HTML Coding by Professor Al Fichera http://profal2.com

  36. Change to Roman Numeral • To change the type of ordering used in your listing, add this to your <ol>tag: • <ol type="I" (or i)> this will begin a Roman numerals list with uppercase or lowercase letters instead of numbers. Basic HTML Coding by Professor Al Fichera http://profal2.com

  37. Mixing Ordering Lists • You can mix the bullet types in the same list by using the Type and Value attributes in the individual <li> </li> line item tags. • Note the example on the next slide. • The indents come from not closing the <ol> tags until needed. Basic HTML Coding by Professor Al Fichera http://profal2.com

  38. Nested <OL> Tags Image from 1998 Netscape, how could you toss this out? Basic HTML Coding by Professor Al Fichera http://profal2.com

  39. Definition Lists <dl> • Definition lists consists of a tag for the term, <dl> Definition List • A tag for the Title, <dt> Definition Title • A tag for the definition, <dd> Definition Description. • Note: You may place images here instead of text if you wish. Basic HTML Coding by Professor Al Fichera http://profal2.com

  40. Definition Lists <dl> • Type the following code to get the results shown below: • <dl> • <dt>Lynx </dt> • <dd>A browsing program used to access the World Wide Web. </dd> • </dl> Lynx A browsing program used to access the World Wide Web. Basic HTML Coding by Professor Al Fichera http://profal2.com

  41. Using Graphics in <dl> tags • Place an Image tag after the <dt> tag. <dt><imgsrc="widget4.gif" /></dt> Basic HTML Coding by Professor Al Fichera http://profal2.com

  42. BLOCKQUOTE • Indent both margins with this two-sided tag. • Begin by typing <blockquote> [enter] then key-in the first line of type. Finish with the closing </blockquote>. • You can use a <p align="justify"> in-between the blockquotes too. Basic HTML Coding by Professor Al Fichera http://profal2.com

  43. Using Formatting Extensions • Instead of using the deprecated <center> tag try using the newer HTML 4.0 attribute instead. <div align="center"> </div> Basic HTML Coding by Professor Al Fichera http://profal2.com

  44. Using a Non-Breaking Space • There will be times when you wish to control Horizontal spacing, this is a good tag to know. • It must be created in lower-case letters only! • &nbsp; it adds about one half letter space, but it also keeps text together. • The letters stand for non-breaking space Basic HTML Coding by Professor Al Fichera http://profal2.com

  45. Horizontal Rules • If you want to add a horizontal line to your page, use the following: • <hr /> • Places a horizontal line across the full width of the browser’s page • <hr width="n%" /> • Determines the actual length of the line, e.g., 75% = a line only 3/4ths centered on the page. • <hr width="50%" size="20" /> • Determines the actual length and width of the line in points. Basic HTML Coding by Professor Al Fichera http://profal2.com

  46. Screen Shot <HR> tags • Example Horizontal Rules from last slide. Basic HTML Coding by Professor Al Fichera http://profal2.com

  47. Adding Dimension to a Rule • If the line is less than full width of the screen you can apply more rules! • For example: <hr width="33%" align="left" /> • To turn off fancy shading, place the following in the tag: <hr size="5" noshade /> for a filled look. Or, any larger size you wish perhaps 15. Basic HTML Coding by Professor Al Fichera http://profal2.com

  48. Adding Color to a Rule • For the benefit of MSIE users only! • For example: <hr size="10" noshade style="color: red" /> Basic HTML Coding by Professor Al Fichera http://profal2.com

  49. Original 1998 Bibliography • Lemay, Laura, Teach Yourself Web Publishing with HTML 4, Sams Publishing, Indianapolis, IN, 1999 (1231 pages). • Williams, andTollett, The Non-Designer’s Web Book, Peachpit Press, Berkeley, CA, 1998 (288 pages). • Teague, Jason Cranford, DHTML for the World Wide Web, Peachpit Press, Berkeley, CA, 1998 (248 pages). • Vodnik, Sasha, Dynamic HTML, Course Technology, Cambridge, Mass., 1998 (7 tutorials). • Lin, Forest, Short Course in HTML, Scott/Jones Inc., Publishers, El Granada, CA, 1999 (236 pages). • Rouyer, Jeff, Dynamic HTML Web Magic, New Riders, Macmillan Computer Publishing, Indianapolis, IN, 1998 (296 pages, includes CD). • Ibañez, Ardith, and Natalie Zee, HTML Web Magic, Hayden Books, Indianapolis, IN, 1997 (230 pages, includes CD). • Sinclair, andCallister, JAVA Web Magic, Hayden Books, Indianapolis, IN, 1997 (224 pages, includes CD). Basic HTML Coding by Professor Al Fichera http://profal2.com

More Related