Compiled by ackoo Introduction to HTML How much you know about web publishing? How a website is created? What kind of tools used for creating a website? Do you own a website?
Compiled by ackoo Introduction to HTML Overview: HTML XHTML Reasons for learning HTML Basic Concept of How HTML works Do it now!
Compiled by ackoo HTML (Hypertext Markup Language) HTML is a lingua franca for web pages and creating hypertext documents. It’s a text based language, a text based tool such as NOTEPAD can be used to create HTML document. HTML has been used to build up web pages since 1990s and it has been using until now and also will be used in the next generation of web page markup language. The last HTML specification, ie HTML 4.01 allowed you to use both uppercase and lowercase tags. The next generation of HTML is XHTML which stands for Extensible Hypertext Markup Language, was recommended as a standard by the W3C in The differences between HTML 4.01 and XHTML are actually very slight. XHTML requires lowercase tags only but HTML can use either uppercase or lowercase.
Compiled by ackoo XHTML (Extensible Hypertext Markup Language) XHTML is to create properly constructed documents. It’s cleaner and stricter version of HTML. It’s almost identical to HTML 4.01 It is intended to work with any device or system, it works in all browser versions but also in previous browser versions. XHTML is recommended by W3C. XHTML is the combination of HTML 4.01 with XML which increase the strength of markup language and useful for now and in the future.
Compiled by ackoo “I am able to use many web authoring tools, do I still need to learn HTML?” YES!
Compiled by ackoo The Reasons… HTML is the basic coding of building up web pages. We must know how it works. To troubleshoot broken links, or able to key in some useful coding to our web page in HTML forms. To copy tricks from other web site. To be more confidence in web design. etc
Compiled by ackoo Some examples of HTML There are so many examples…. browse the Internet, and click View> Source of your browser
Compiled by ackoo Basic Concept of HTML Language Structure HTML is build up from:- Elements (orTags), Attributes, Values. HTML Elements--The HTML element starts with a start tag (eg and end with an end tag (e.g ) e.g: This is my first homepage This text is bold There are two html elements found in this example.
Compiled by ackoo Basic Concept of HTML Language Structure Elements/Tags, Attribute, and Value (1) Container Tag The contents that the tag affects. Hot beaches This is an introduction paragraph. Container Tag with Attribute and Value The contents that the tag affects. Hot beaches Me (2) Standalone Tag (These tags must be closed as according to xhtml convention) attributeValue Opening Tag Closing Tag Opening Tag Closing Tag Attribute Value
Compiled by ackoo Basic Concept of HTML Language Structure example(1) Welcome to Diamond Dog Productions! Welcome! Diamond Dog Productions is the state's premiere source for musicians. Need more info on our artists and their schedules? Call us at Diamond Dog Productions Suite Main Street Minneapolis, MN Diamond Dog Productions is proud to be a member of the Musicians' Union. IDENTIFY: Elements/Tags Attributes Values
Compiled by ackoo Basic Concept of HTML Language example(2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> Sizzle East - Where It's Spring Break All Year! <img src="Images/east1.jpg" width="240" height="180" alt="Sizzle East Resort - hotel and pool" /> Sizzle East is located on the Berry Islands, a chain of 30 cays and islets. Our resort sits on the northeastern edge of the Great Bahama Bank on Great Harbour Cay. Sport fishing is famous in the area, and diving is becoming popular. You can dive along the many reefs in the area. Or you can lie on the beach. Have a few cold ones, watch the scenery, celebrate not being at work -- the choice is yours. Watch our Sizzle slideshow Ready to visit? Book HERE. IDENTIFY: Elements/Tags Attributes Values
Compiled by ackoo About Tag… tag is deprecated (outdated) now! With HTML 4.0 (or newer version) all formatting can be moved out of the HTML document and into a separate style sheet, or we call it as Cascading style sheet (CSS). Inline style attribute for paragraph should be used when a unique style is to be applied to a single HTML element, such as The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: This is a paragraph
Compiled by ackoo Do it now: Create a simple html document which contains your biodata such as your name, mailing address, yahoo messenger id, contact number (or handphone number), etc. You can design your page and text with lines, background image, text colors, bold, italic, text with different size/format. FTP your file to me at FTP host: Login: mcc0013 Password: will be informed in class. Ref: