Textbook Notes (368,780)
Canada (162,164)
Dr.Hurst (18)

Computer Science - HTML Notes.docx

9 Pages
Unlock Document

Computer Science

HTML – TUTORIAL ONE Defining Blended HTML, XHTML and CSS  HTML: o Language used to create Web pages o Create code to describe structure of a Web page  XHTM: o Variation of HTML o More strictly defines how HTML code should be written/structured  CSS: o Language used for describing presentation of Web pages o Ex. Colours and fonts on the Web page  Separating structure and presentation makes easier to modify and share code to for many Web pages  Web page designer: person who designs Web pages  Web page developer: writes programming code to add function to Web page Learning About the Internet and the World Wide Web  Internet:: global network of computers linked by high-speed data lines and wireless systems  World Wide Web (WWW) is provided by Internet  Web browser: o Software used to view/browse Web pages o Lets you navigate from one topic, page, site to another  Contemporary browsers: Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome (Opera popular in Europe) Exploring Hypertext and Markup  Text and graphics must be formatted in HTML to be seen in a Web browser  Hypertext: way to organize info so can click links and view content in non sequential order  Markup: symbols in HTML code that indicate how content should appear in browser  Syntax: specific rules for way code should be written (not a language)  World Wide Web Consortium (W3C): organization that develops standards for languages used on Web Introducing XHTML  XHTML (Extensible Hypertext Markup Language): specifies that code to display content on Web pages must follow certain rules  Okay to type in uppercase in HTML but only type in lowercase in XHTML  Cross-browser incompatibility: companies create own HTML code that only work on their browsers Understanding What XHTML is Not  Focus of XHTML: uniformly and consistently deliver Web page content  Not in XHTML: o Complex text formatting o Composing images o Manipulating data o Footnotes, headers, footers o Automatic column and table layout Creating a Web Page with Basic XHTML Tags  Mock-up: hand-drawn/typed plan for a page (create before starting XHTML)  Element: o Creates structure on a Web page o Conveys formatting instructions to browser o Conveys information about Web page to browser/search engine  Tag: representation of an element in XHTML code (tags are paired)  Empty element: o Does not have content o Have only a start tag and no end tag o Ex. Break element: used to create a new line:  Can test tags to apply more complex formatting  Must be in correct order: Nyce Paints Managing Your Files  Store all files in same storage location (folder)  Browser automatically looks for image files in same location  Have to specify if image is in a different folder Typing the Basic XHTML Tags  Document Type Declaration: instruction that associates particular Web page with Document Type Definition (all should begin with this)  Document Type Definition (DTD): o Instruction to browser that determines extent to which Web page must follow XHTML standard o Strict: renders only code that exactly conforms to XHTML syntax o Transitional: renders all elements including deprecated code  Deprecated code: code that W3C has determined should no longer be used  Quirks mode: different browsers show Web page differently  Standards mode: Web page is the same in all browsers  : root element with URL to Web site  ,: after html, contains code not shown in browser (keywords, author, description of content, character set)  Character set: ways to represent characters for communication and storage (ex. ISO-889-1)  : content appears in title bar at top of browser window  : container for all of page content (code, text, images, etc.)  Eye line: vertical area of code starting on left edge of screen where can easily see the start tags  File servers: computers that store files seen on the Web (ex. UNIX) Entering Comments  Comments : used to explain how code was written to oneself or to other Web developers  Template file can be used as starting point for creating new Web pages Formatting Text on a Web Page Creating Headings  Heading elements: o Used to bring attention to important topics on page o Change text size and make text appear in bold o Have default margin so white space created before and after heading o are largest, are smallest  Difference between XHTML and Microsoft Word: Microsoft Word has many text sizes but XHTML only has six Displaying a Web Page in a Browser  Save each change made in text editor and refresh page to know it worked  Should test in more than one browser  Do not need to be connected to Internet to view page Creating Body Text  Paragraph element : create a blank line between paragraphs (like pressing the Enter key twice)  Will only put one space after punctuation even if you type two  Block-level elements: browser automatically creates blank line above and below content, border, external margin (ex. Headings, paragraphs) Making Text Bold or Italic  element: makes text appear in bold  element: makes text appear in italics  Inline element: contained within block-level element Identifying Deprecated Elements  Element W3C has determined should no longer be used: o Center element (used to center text) o Font element (changed appearance, size, colour of text) o Underline element (could be confused with a link)  Address element used to be used to italicize e-mail addresses  element: o Used to cite long quotation o Block-level element o Indents text on left and right by one inch  Not-supported elements: should not be used, like deprecated elements (ex. Frameset, frame, big, acronym) Inserting Special Characters (list p. 23)  Special character: one that cannot be entered from the keyboard  Referred to as “character entities” in XHTML  Named character reference: o Combination of symbols including suggestion of special character’s name o Start with ampersand, end with semicolon o Ex. © is code for copyright symbol  Numeric character reference: o Referring to special character’s position in ISO character set o Preceded by ampersand and pound symbols o Followed by semicolon o Ex. ® is code for trademark symbol  All special characters have numeric reference but not all have named  Named references are case sensitive  Web developers overuse &nbsp to enter space into Web page  Should not use to create areas of white space or to indent Creating Superscripts and Subscripts  element: creates superscript (raises character by one-half line of type)  element: creates subscript (lowers character by one-half a line of type)  Good for footnotes, endnotes, scientific notations Tips for Typing XHTML Code in a Text Editor  How to keep XHTML code error-free o Type in all lowercase o Create an eye line (line up tags on left edge of screen) o Use white space (leave blank lines between tags, paragraphs, etc. to make code easier to read) o Insert break () tag at the beginning of a line of code, not at the end o Don’t use deprecated tags o Don’t use tags that are purely presentational ( or ) o Format terminal punctuation properly (one space rather than two) o Beware of quotation marks from pasted text (must use straight quotes not curly quotes) Using Images on a Web Page Understanding Image Files and File Types  Graphics Interchanging File: filename extension .gif (used for clip art)  Gif files are compressed so download faster  Joint Photographic Experts Group: file extension .jpg (most used)  Portable Network Graphics: PNG file (chosen by W3C cause have better compression than .gif files) Acquiring Images  Only use image if it will enhance appearance or show useful information  Too many image is amateurish and takes long to download Using the Image Element  Image element: o Used to insert image on a Web page
More Less

Related notes for COMPSCI 1BA3

Log In


Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.