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: <br /> Can test tags to apply more complex formatting Must be in correct order: <strong><em>nyce Paints</strong></em> 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 <html>: root element with URL to Web site <head>,<meta>: 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) <title>: content appears in title bar at top of browser window <body>: 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 <!-- comment -->: 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 <h1> are largest, <h6> 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 <p>: 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 <strong> element: makes text appear in bold <em> 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 <blockquote> 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   to enter space into Web page Should not use to create areas of white space or to indent Creating Superscripts and Subscripts <sup> element: creates superscript (raises character by one-half line of type) <sub> 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 (<br />) 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 (<b> or <i>) 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 o Empty element (has no content) o Ends with <img /> (space and slash) o Inline element so must be inside block-level element Attribute: o Change to an element o Takes a value that describes how element will be changed o Values must be enclosed in quotation marks o Type element, equals sign, value o Ex. <p><img src= nycelogo.gif /></p> Web page accessibility: extent to which Web page is accessible by as many people as possible despite visual/motor skill impairment Screen reader: software that reads aloud text in browser (use alt attribute to include descriptive value for a picture) Placeholder icon: substitutes alert icon for an image (showing image should appear there) Using the Width and Height Attributes Use width and height to specify dimensions of an image (in pixels) Browser will reserve correct space for image Aspect ratio: relationship between width and height of the image Scale: change height or width of an image Ex. <p><img src width= 750 height= 200 /></p> Creating Lists Unordered list: bulleted list <ul> Ordered list: list with numbers or letters <ol> Definition list: list with hanging indent format <dl> Creating an Definition List Used to create: o Chronology (list of events in time order) o Glossary (alphabetic list of terms and definitions) o Works Cited page (lists author names in order) o Question and answer lists
Begins with <dl> tag Defined term <dt> is next (along left margin) Definition data <dd> is after (indented from dt text) Block-level element Using the Abbreviation Element Acronym: group of letters that stands for several words <acronym> Abbreviation: shortened form of a noun <abbr> <abbr> element: o Replaced deprecated acronym element o Displays abbreviation with doted underline in Firefox browser Ex. <abbr titile= As Soon As Possible >ASAP</abbr> Using the Break Element Used to go to the next line (like pressing Enter) Does not have any content <br /> Inline element so must be inside block-level element tags Can put at beginning or end but should put at beginning of line Entering Code for Metadata Keywords: words that best identify content of a site Meta element: used to contain metadata One of <meta> tags is to help search engine find site based on keywords Can use common misspellings as well so more people can find site Ex. <meta name= keywords content= /> Validating the Completed File Validate: process of checking file for syntax errors Only checks to see if code complies with XHTML standard Does not check spelling or grammar errors W3C site for validating: http://validator.w3.org HTML TUTORIAL THREE Introducing Cascading Style Sheets Cascading Style Sheets (CSS): o Used for the presentation, formatting of Web pages o Way to easily and efficiently format lots of pages to have same appearance Advantages of CSS over XHTML: o Greater consistency in your Web site (can apply styles created in one document to some or all of pages in Web site)
o Easily modified code (when modify code to change style of one page, all pages can change) o More flexible formatting (can format/position text in ways that XHTML cannot) o Greater functionality (tab indents, line spacing, margins available in CSS but not XHTML) Cross-browser support: CSS feature appears in all browsers the same way No browser supports all features of CSS Understanding How Styles Are Written CSS can change style of text (colour, type size) CSS style: collection of one or more rules Style sheet: collection of styles Rule: combination of a selector, a property and a value Selector: identifies element to which style is being applied Most common selectors: o Element selectors: used to format XHTML elements o Class selectors: used to select specific XHTML element/format one or more elements on a Web page o Id selectors: used to uniquely format single element on a Web page Property: describes how selector will be modified Value: indicates extent to which property will be modified Ex. h1 { color: white; } Declaration: each property and value pair (can be more than one) Paragraph format: places all CSS code on one or more lines as wrapping text Working with Colour Colour property: used to change foreground (text) colour of an element Background-colour property: change background colour of an element Colours entered in CSS code by name, RGB triplet or by hexadecimal value Hexadecimal system: o Based on number 16 o Uses numbers 0-15 o Precede each value with # symbol (indicates numbers after should be treated as code not as number) o Enter three pairs of numbers or letters representing intensity of red, green and blue (00 is lowest and FF is highest) Creating an Embedded Style Sheet Embedded style sheet: one where CSS code is written in <head> section of XHTML document Advantage is XHTML code and CSS code are on same page Style element: special element that serves as container for all style code Type attribute: always entered within the start <style> tag (has a value of text/css)
Ex. <style type= text/css > Display property: determines how an element will be displayed (most common are block and inline) Grouping Element Selectors Grouped selectors: selectors with same declarations grouped into a commaseparated list Ex. p, li { color: navy; } will make text in list and paragraphs navy Using Descendant Selectors Can nest tags to apply multiple formatting features to same text Descendant selector: selector nested within another selector Ex. strong em { color: maroon; } makes things bold and italics in maroon Will only apply when em is nested in strong element not when by themselves Using the Font Properties (list p. 112) Changing the Font Style and Font Weight Font-style property: can be italic, oblique or normal Font-weight property: uses one of four keywords to change thickness of text (lighter, bold, bolder, normal) Can also specify font-weight with numbers from 100-900 Entered the same way color property is Making Text Appear in Small Capital Letters Font-variant property: makes text appear in small caps Small caps: o Has slightly smaller point size than regular text and is in all caps o Capital letters are usually 2 point sizes larger than lowercase letters Changing the Font Size Font-size property: used to change font size Can specify any font size in CSS (unlike XHTML) Usually expressed in em units, as percent or as keyword Em unit: equals width of an uppercase M Do not put a space between the number and the type of measurement Relative value: value that increases/decreases in relation to parent element Absolute value: fixed value that will not increase/decrease relative to parent element Changing the Font Family Font-family property: used to change typeface of text Font family: set of fonts that have similar characteristics Generic font: o Attempts to duplicate as many features of specific font as possible
o Will be used if none of specified fonts are available o Five cross-platform fonts: serif, sans-serif, monospace, cursive, fantasy Good to list several fonts as value for font-family incase computer does not have one Must enclose font-family in quotations if it has more than one word (ex. fontfamily: Times New Roman, serif;) Using the Font Shorthand Property Shorthand property: used to set a related group of properties in one declaration Set some or all of font properties in one declaration (ex. font: italic normal 1.2em Arial, Helvetica, sans-serif;) Must specify values for font-size and font-family Must list values for font properties in specific order 1. Font-style 2. Font-weight 3. Font-variant 4. Font-size 5. Font-family Validating the CSS Code for the Completed File Can validate document to check correctness of CSS code Does not check for spelling or grammar errors Checks to see if code complies with CSS standard W3C validator site: http://jigsaw.w3.org/css-validator