14_WebDesignTools - CSI1306F ComputingConceptsforBusiness...

Info iconThis preview shows pages 1–10. Sign up to view the full content.

View Full Document Right Arrow Icon
CSI 1306 F “Computing Concepts for Business” LECTURE 14: “WEB DESIGN TOOLS”
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Static Web Page Design Historically, web pages were designed as static documents. Recall, from Lecture 3 that web pages are created using  HTML. An HTML document on its own is a static document.
Background image of page 2
HTML An HTML element takes the following form: <tag> content </tag> For example,  <p class=“c” id=“sample_id”>   some content  </p> <p class=“c” id=“sample_id”>  – start tag for a paragraph element class, id  – attributes “c”, “sample_id”  – values some content  – content to be displayed by the web browser </p>  – end tag Multiple elements may share the same class value, but  only one element may have a given ID (i.e. elements  have unique IDs).
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
HTML Most HTML elements require both a start tag and an  end tag, one exception to this rule is line breaks  simply have a start tag <br >. Other common tags include: <body></body> - body of the document <h1><h2>…<h6></h1></h2>…</h6> - headers <p></p> - paragraph <div></div> - division <table></table> - table <ol></ol>, <ul></ul>, <li></li> - ordered list, unordered  list, list elements <a></a> - anchor tag, used for placing hyperlinks
Background image of page 4
HTML - Example The following is a “Hello World” example in HTML: <!doctype html> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html>
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
HTML – Best Practices Do Not Use Frames –  frames allow a developer to  place multiple HTML files in one web page Not supported in HTML 5 (upcoming version of the standard) Can cause the Back and Forward buttons to act unexpectedly Implementation of frames not standard across all browsers May not bookmark the correct web page
Background image of page 6
HTML – Best Practices Do Not Use Tags or Attributes for Formatting Tables should only be used for displaying data in a table Some style tags or attributes are obsolete and may not work as  expected Instead use Cascading Style Sheets (CSS) – more on these later
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
HTML – Best Practices Hyperlink Text Should Make Sense, Even When  Read Out of Context Users likely will not read every word on your web page.   If you want them to click on your links, it should be clear what  the links are for/where they will take your users.
Background image of page 8
HTML – Best Practices Content Should be Accessible Any images or videos should have a text alternative for the  visually impaired, so that reader software can provide users  with a description of the image or video.
Background image of page 9

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 10
This is the end of the preview. Sign up to access the rest of the document.

Page1 / 61

14_WebDesignTools - CSI1306F ComputingConceptsforBusiness...

This preview shows document pages 1 - 10. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online