CHAPTER 1 INTRODUCTION TO HTML “No one is going to hand me success. I must go out & get it myself. That’s why I’m here. To dominate. To conquer. Both the world, and myself.” - unknown
INTRODUCTION TO HTML HTML stands for Hyper Text Markup Language. With HTML you can create your own Web site. HTML is derived from a language SGML (Standard Graphics Markup Language).
INTRODUCTION TO HTML HTML is not a programming language, it is a MARKUP LANGUAGE. A markup language is a set of markup tags. HTML uses markup tags to describe web pages. HTML is NOT case sensitive language. HTML documents contain HTML tags and plain text. Example : HTML tags (<href , href) Plain text (colour, blue)
TEXT AUTHORING TOOLS Any text editor can be used to create HTML documents. The most commonly used text editors are: Notepad (Windows) WordPad (Windows) Simpletext (Macintosh)
WYSIWYG AUTHORING TOOLS What You See is What You Get (WYSIWYG) authoring tools provide graphical user interfaces to simplify the creation of HTML documents. Examples of WYSIWYG authoring tools are: FrontPage by Microsoft Dreamweaver by Macromedia PageMill by Adobe Netscape Composer
STRUCTURE OF AN HTML DOCUMENT An HTML document is divided into two main sections: Heading - The HEADing contains information describing the document, such as its title. The heading section is indicated by the <HEAD> and </HEAD> tags. Body - The BODY section is where the Web document text, graphics, and other elements are placed. The body section is indicated by the <BODY> and </BODY> tags.
EXAMPLE OF AN HTML DOCUMENT <HEAD> <TITLE> Career Education </TITLE> </HEAD> <BODY> This is part of the Web page! </BODY> </HTML> Open Open Close Close
EXERCISE : FIRST HTML DOCUMENT Save the notepad as test.html <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text that will appear on the web page </p> </body> </html> Save the notepad as test.html
TAGS : FIRST HTML DOCUMENT <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text that will appear on web page </p> </body> </html> An HTML element consists of an opening tag, a closing tag and the content inside Opening tag Closing tag
HEADER : FIRST HTML DOCUMENT <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text that will appear on web page </p> </body> </html> HTML Header
BODY : FIRST HTML DOCUMENT <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is text that will appear on web page </p> </body> </html> HTML Body
<img src="logo.gif" alt="logo" /> SIMPLE TAGS Hyperlink Tags Image Tags Text formatting tags <a href="http://ikom.unimap.edu.my/" title="IKOM">Link to IKOM Official Web site</a> <img src="logo.gif" alt="logo" /> This text is <em>emphasized.</em> <br />new line<br /> This one is <strong>more emphasized.</strong>
Save the notepad as simple.html EXERCISE : SIMPLE TAGS <!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href="http://ikom.unimap.edu.my/" title="IKOM">Link to IKOM Official Web site</a> <br /> <img src="logo.gif" alt="logo" /> <strong>Bold</strong> and <em>italic</em> text. </body> </html> Save the notepad as simple.html
Creating a Sitemap
WHAT IS A SITEMAP? A sitemap is a list or diagram which represents the hierarchical structure of the html pages in a website.
PURPOSE OF A SITEMAP Map out the site architecture Structure A sitemap is a website design planning tool. It is used to: Map out the site architecture Structure Navigation Page hierarchy Categorise the site content into logical groups, which will have meaning for the user. Organise the order of the pages of the site, to create logical paths (so that targeted users achieve the purpose of their visit).
PURPOSE OF A SITEMAP A sitemap is used to: Plan the logical presentation of website content to users. Visualise and structure user paths. Organise the presentation of content to assist the business to achieve its business goals. Plan user-centric functionality, to enhance the user experience. Plan a navigation structure that orientates and directs users, and enables (and entices) users to engage with the site.
TYPE OF SITEMAP Two of the ways to represent the page hierarchy of a website, include: Sitemap Outline Sitemap diagram
SITEMAP OUTLINE List View also known as the Outline View (a simple way to represent the page hierarchy)
Draw the IKOM’s Official Website Sitemap. SITEMAP OUTLINE EXERCISE Draw the IKOM’s Official Website Sitemap.
SITEMAP DIAGRAM Horizontal tree diagram (organization chart style sitemap representation)
SITEMAP DIAGRAM Vertical tree diagram (useful for planning out linear stories or narrow hierarchies on multi-level sites)
Draw the IKOM’s Official Website Sitemap. SITEMAP DIAGRAM EXERCISE Draw the IKOM’s Official Website Sitemap.
WHAT YOU NEED TO CREATE YOUR SITEMAP: Tools to help you determine the sitemap include: Creative brief Clear business goals Website objectives (what the site must do – features and functionality – to help achieve the business goals as well as the user tasks) User profiles Primary & secondary User purpose (the task achieved during the visit) Content delivery plan
SITEMAP FUNDAMENTAL Keep in mind: User Purpose: Why has the user come to the site? Eg: To read info, download, play, make request.. Which is the most logical path to achieve that purpose? Eg: Home > Services > Request Form Business Goal(s): Does the navigation assist the business to achieve its goal? Page & Content Relationship: How do the pages relate/link to each other? Is there a logical relationship/flow?
CREATING A SITEMAP Plan your sitemap: By Hand: Sketch by hand Sticky notes Use Software Tools: Microsoft Word Microsoft Visio OmniGraffle Gliffy Dreamweaver Fireworks …Others
CREATING A SITEMAP Boxes and Arrows:^ Nick Finck stencils:~ Or… use your own method!
SITEMAP: A PLANNING & COLLABORATION TOOL: Distinguish future or proposed pages from the pages within the project scope
ANNOTATIONS: CALLOUTS Use callouts to clarify proposed pages and/or features
ANNOTATION When showing the client the sitemap: Omit or minimize highly technical annotations (intended for designers and coders) Unless there is a specific purpose for raising the technical issue with the client. (eg. There may be a feasibility issue) Allow the sitemap to do its job eg: demonstrate the logical presentation of content on the site
GET STARTED ON YOUR SITEMAP Create your sitemap in the following representations: Outline (ie. List View) AND Diagram (either horizontal or vertical) Make sure you can answer the three critical questions on the next slide for both your primary and secondary site users (and tertiary users if applicable!)
GET STARTED ON YOUR SITEMAP Primary User: Who is the primary user of the site? What is the user’s purpose for visiting the site? What is the user’s Key User Path? Secondary User: Who is the secondary user of the site? The aim is to understand: How does the content on one html page relate (or logically connect) to the content on the linked page along the key user path?
“To be successful, the first thing to do is to fall in love with your work”
SOURCE *Doss, G (12/2004) Information Architecture Design, on Glen Doss’s website available at http://www.gdoss.com/web_info/information_architecture_design.php [accessed 25/7/09] See also great examples of sitemaps at: http://www.gdoss.com/web_info/CAPTUS_site_ias.pdf www.gdoss.com ^Withrow., J (published 30/08/2004) Site Diagrams: Mapping an Information Space on the Boxes and Arrows website, available at: http://www.boxesandarrows.com/view/site_diagrams_mapping_an_information_space [accessed 24/3/09] www.boxesandarrows.com ~ Finck, N (2006) Visio Stencils for Information Architecture on Nick Finck’s blog. Available at: http://www.nickfinck.com/blog/entry/visio_stencils_for_information_architects/. [last accessed 24/3/09] www.nickfinck.com Goto., K & Cotler., E (2005) Web Redesign 2.0 Workflow that Works, Peach Pit, CA USA www.gotomedia.com Melinz, J (2009) Creating a Sitemap for your Major Web Design Project, Client Requirements PowerPoint Presentation on the TAFE NSW, Sydney Institute, IT Faculty Moodle site, available at http://sielearning2.tafensw.edu.au/ DET login required [last accessed 24/7/09]
Any questions? You can find me at: nurazila@unimap.edu.my 016 415 6936 Thanks! Any questions? You can find me at: nurazila@unimap.edu.my 016 415 6936