1 / 42

Fundamentals of Interactive Design

Introduction to HTML Web Graphics Testing your pages Common reasons pages don’t work. Fundamentals of Interactive Design. HTML. HTML is an acronym for h yper t ext m arkup l anguage HTML is a mark-up language that is widely used on the Web In Development: HTML 5

portia
Download Presentation

Fundamentals of Interactive Design

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. Introduction to HTML Web Graphics Testing your pages Common reasons pages don’t work Fundamentals of Interactive Design

  2. HTML • HTML is an acronym for hypertext markuplanguage • HTML is a mark-up language that is widely used on the Web • In Development: HTML 5 • All browsers do not currently support it

  3. This is the header This is the actual content of the HTML document “Learning HTML” example <html> <head> <title>Learning HTML!</title> </head> <body> <h1>Learning HTML step by step!</h1> </body> </html>

  4. Problems With HTML • Competing versions of browsers introduced features beyond the standards • Inconsistent implementations of display engines and scripting • Content and presentation mixed together • Layout often done with tables • Each element had many presentation attributes, resulting in laborious maintenance • The “Slop Code Era”

  5. XHTML • XHTML is a version of HTML modified to conform to the XML standard • Designed to separate content from presentation • Content in XHTML • Presentation controlled by Cascading Style Sheets (CSS) • Extensible – Additional elements can be defined • XML Compatible – Other XML based languages can be embedded in XHTML documents • Like a programming language • Specific syntax to use • Validators help you get it right

  6. Extensible HTML  XHTML • Differences in XHTML doc • Inclusion of an XML header • All elements must have begin tags and end tags <p>Hello</p> • Single tags end with />, instead of just > • Attribute values must have quotes: “value” • Tags must be in lowercase

  7. Basic XHTML Page • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Title Displays in Browser’s Top Bar </title> <link type="text/css" href="style.css" rel="stylesheet"/> </head> <body> Page content here </body> </html>

  8. Hierarchical Structure Well formed xhtml forms a hierarchy

  9. Web’s 4 Commandments • Make sure your code validates as XHTML • Use Semantic Markup • Use tags that describe the content, not the content’s appearance • Structure Documents Logically • The HTML code should be in a logical order; Style sheets can reposition items for presentation • Use CSS, not <font> or <table> to layout and decorate your pages.

  10. tags

  11. XHTML Rules <elementname> Content content</elementname> • In XHTML all element names must be lower case. • In HTML tag case didn’t matter. • In XHTML all element must have a closing tag • Most web browsers are forgiving about closing tags, which makes it possible to forget about them • Example <p>Here is paragraph with no ending tag<p>Here is another paragraph</p>

  12. HTML single tags • HTML has a few tags that are standalone, i.e., no closing tag. • Image: <imgsrc=“imagename.jpg”> • Line break: <br> • Link: <link type="text/css”> • Used to link/insert a Cascading Style Sheet

  13. XHTML single tags • To meet XML guidelines HTML single tags must to closed with a /> • Image: <imgsrc=“imagename.jpg” /> • Line break: <br /> • Link: <link type="text/css" /> • Note the space before the />

  14. XHTML Attributes <element attribute=“value”> content </element> XHTML requires that all attribute values be enclosed in quotes. HTML: <imgsrc=tiger.jpg> XHTML: <imgsrc=“tiger.jpg” /> Forgiving browsers don’t care about the quotes (Follow XHTML; quotes matter to us)

  15. Logical Structure Tags • “Tags” mark structure • Head • Title • Body • Headers: <h1> <h2> <h3> <h4> <h5> • Lists: <ol>, <ul> (can be nested) • Paragraphs:<p> • Definitions: <dt><dd> • Tables: <table> <tr> <td> </td> </tr> </table> • Role: <cite>, <address>, <strong>, …

  16. Physical Structure Tags • Font • Typeface: <font face=“Arial”></font> • Size: <font size=“+1”></font> • Color: <font color=“990000”></font> • Bold: <b></b> • Italics: <i></i> • You will use CSS to design the look of your page instead of the font tag

  17. Basic HTML • add headings and paragraphs • Adding emphasis to the text • use various kinds of lists • add links to other pages • add images

  18. Lists • Ordered Lists (ol) • Unordered Lists (ul) <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>

  19. Terms and Definitions • Example • Meaning <dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dt>Milk</dt> <dd>white cold drink</dd> </dl> dl – definition list dt – definition term dd – definition description Used heavily in early HTML documents which were most scientific papers with lost of definitions and terms

  20. Hyperlink • Called the anchor tag <a href=“http://www.espn.com”>ESPN</a> • href stands for hypertext reference • What is the element name? • What is the attribute? • What is the attribute’s value • What is the content?

  21. Hypertext “Anchors” • Internal anchors: somewhere on the same page • <a href=“#students”> Students</a> • Links to: <a name=“students”>Student Information</a> • External anchors: to another page • <a href=“http://www.scils.rutgers.edu”>SCILS</a> • <a href=“http://www.scils.rutgers.edu#students”>SCILS students</a> • URL may be complete, or relative to current page • <a href=“listofstudents.html”>List of students</a> • <a href=“students/listofstudents.html”>List of students</a> • File name part of URL is case sensitive (on Unix servers) • Protocol and domain name are not case sensitive

  22. (Hyper)Links test.html <html> <head> <title>Hello World!</title> </head> <body> <p>Hello world! This is my first webpage!</p> <p>Click <a href=“page.html"> here </a> for another page.</p> </body> </html> page.html <html> <head> <title>Another page</title> </head> <body> <p>This is another page.</p> </body> </html>

  23. More HTML elements Forms <form action=“program.php”> <input type=“text”> <input type=“submit”> </form> Tables <table> <tr><td></td></tr> <tr><td></td></tr> </table> Frames • Deprecated!

  24. Divisions and Spans • Divisions <div> used to break your webpage into logical blocks or boxes • Spans<span> used to create custom in-line tags, i.e., within the flow of a paragraph of text. Example: • This is paragraph with a table reference. <span class=“tableref”>Table 2.4</span> is a lovely table.

  25. Cascading Style Sheets • Used to define attributes of elements in HTML and XML • Common attributes: height, width, font-size, alignment, color, etc. • Documents can have multiple style sheets with overlapping and sometimes conflicting definitions • Cascading refers to the set of rules for resolving conflicts.

  26. CSS Attributes TEXT BOXES(usually <div> elements) Height, width, margins, padding, borders, border color, border styles, background color, background image. • Font family, • size, • alignment, • weight, • style, • variant, • line-height, • indent, spacing, • direction

  27. XHTML/CSS • Best way to learn is by example. • HTML Exercise/Demonstration • All you need is a text editor (eg: Notepad) • Open Notepad

  28. FTP Files

  29. Sending pages via FTP to a web server File Transfer Protocol Username password Publishing pages

  30. Web Graphics

  31. Web Graphics • Why should we use graphics? • Can be used to display information, such as a map, or a statistical graph. • Can also create a certain look and feel to the site, also when used consistently, can create a unified look on your site that your audience can identify with.

  32. Web Graphics • Three main types of Web graphic files • GIF (Graphics Interchange Format) • Great for logos, charts, buttons • JPG (Joint Photographic Experts Group) • Great for photographs • PNG (Portable Network Graphics) • Designed to replace GIF

  33. Web Graphics • Important points about graphics • Keep graphic files size small: Most users are impatient when it comes to pages loading. • Add ALTernative text to identify graphics in non-graphic browsers. • Resize the image in a graphic editor rather than sizing the graphic in HTML

  34. Web Graphics: Images • <imgsrc=“URL” /> or <imgsrc=“path/file” /> • SRC: can be url or path/file • WIDTH and HEIGHT: size of the image • <imgsrc=“URL” width=“50” height=“100” /> • ALT: a text string describing the image • <imgsrc=“URL” width=“50” height=“100” alt=“image” /> • Can use as anchor: • <a href=URL><imgsrc=URL2></a>

  35. Web Graphics: Images • File Size • Image resolution should be set at 72 dpi (dots per inch) • ALT (alternative) text is required for images • <IMG SRC=“image.gif” ALT=“image info” /> For example, the PBS.org homepage has graphic links to “PBS Kids,” there is an ALT equivalent so if you were unable to see the graphic, the ALT text will tell you what it reads. • TITLE attribute is optional, used for image captioning and tooltip • <IMG SRC=“image.gif” TITLE=“image info” />

  36. Web Graphics • Resizing the Image • The Internet uses pixel widths instead of inches. Pixels refers to the monitor resolution. • Think in terms of a page being 650 pixels wide. Images should be around 200 pixels wide. Sometimes more or less depending on situation. • Resizing the image in a graphics program will decrease the file size. Whereas resizing the image in HTML will distort the image appearance and the computer will still have to load the original sized image, then resize it. So it doesn’t cut down on load time.

  37. Web Graphics • Where to find graphics/how to get in digital format • Getty database, free stock photo website, search for images • Right click on image you want, save locally on your machine. • Use a desktop scanner to scan images. • Film developing, select digital format for a CD of your roll of film.

  38. Web Graphics Exercise: Manipulate an image and insert it in a Web page. • Part 1 • Open Photoshop/other program • Open file • Check resolution • Resize image • Save image • Part 2 • Insert image into your Web page • Save file • View Web page in browser

  39. Web Graphics <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Title Displays in Browser’s Top Bar </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="style.css" rel="stylesheet"/> </head> <body> <!-- this is a comment tag --> <p> this is a paragraph </p> <p> <imgsrc="image.png" alt="an image of a cat" title="a cat" /> </p> </body> </html>

  40. Testing Your Pages • It’s always important to test your work. • Check your page in different browsers like Microsoft Explorer and FireFox. • Check your page in older versions of those browsers. People may be using old machines and do not have the latest versions of browsers. • Check for Accessibility. • Check to make sure you have used ALT tags on graphics • Use Bobby site to test for accessibility issues. • http://bobby.watchfire.com/bobby/html/en/index.jsp

  41. Designing Web Pages • Key design issues: • Content: What do you want to publish? • Style: How do you want to present it? • Syntax: How can you achieve that presentation? • Sources of information • Online tutorials (there are lots of these) • Technical materials (e.g., the W3C HTML spec)

  42. HTML Validators • Syntax checking: cross-browser compatibility • http://validator.w3.org • CSS Stylesheetchecking: cross-browser compatibility • http://jigsaw.w3.org/css-validator/ • Section 508 compliance • http://www.cynthiasays.com/

More Related