1. © Ms. Masihi 1

2.  A web page is created using a language called, Hypertext Markup Language, better known as HTML Code.  HTML is a user friendly language and is easy to learn.  You can › write your own coding within a plain text editor, such as Note Pad › use an HTML editor which will write the code for you (such as a web page application program like Dreamweaver and have the Dreamweaver generate the HTML Code as you design and create the Web Page). © Ms. Masihi 2

3.  In order to effectively create CSS Style Sheets, it is important to know a little bit about HTML Tags.  HTML Tags are inserted into Dreamweaver web pages to instruct the Web Browser how to display the current page. © Ms. Masihi

4.  HTML codes, also referred to as HTML Tags, are enclosed by the lesser than ( ) brackets and are written in lower case letters.  The opening bracket is followed by an element (tag name) and ends with the closing bracket.  Web page elements between the tags are displayed using the instructions generated by the surrounding tags. © Ms. Masihi 4

5.  An element may also be followed by attributes, which are words describing the properties of the element.  Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space after the tag.  There are no spaces between the attribute the equal ( = ) sign and the value. © Ms. Masihi 5

6.  Most HTML tags fall into one of two groups: they’re either block-level elements or inline elements.  Block-level elements are used to format whole blocks of text — they span the available screen- width.  Block-level elements can contain other block- level elements and inline elements © Ms. Masihi 6

7.  A block-level tag affects a block of text. A line break is inserted automatically before and after a block- level tag.  Block level tags include body, head, html, img, div, heading tags, horizontal rule, paragraph, list tags, and table tags. © Ms. Masihi

8.  The rest of the tags are inline elements.  Inline elements do not insert a line space before or after the element.  Inline elements can be introduced along the normal flow of text without causing any major disturbance, and can be used to affect single characters and include such elements as,,.  Inline elements cannot contain block-level elements. © Ms. Masihi 8

9.  Block Level elements generally are written out vertically (such as elements).  Inline Elements are written out horizontally (such as a and tag). © Ms. Masihi

10.  The Comment Tag is used to insert a comment in the HTML source code.  A comment will be ignored by the browser and appears in gray type in Dreamweaver’s Code View.  Use comments to explain your code, which can help you when you edit the source code at a later date. © Ms. Masihi

11.  The Comment Tag is also used to surround internal style sheets in the head of an HTML document for Browsers that do not support CSS. © Ms. Masihi

12.   Note that you need an exclamation point after the opening bracket, but not before the closing bracket. © Ms. Masihi

13.  XHTML stands for EXtensible HyperText Markup Language  XHTML is replacing HTML as the web page coding language.  XHTML is almost identical to HTML 4.01 but is a stricter and cleaner version of HTML. © Ms. Masihi

14.  The formatting tags in XHTML are similar in nature to HTML, but in XHTML (and Dreamweaver CS4 and higher), extensive formatting is done only through style sheets.  Some of the tags that were previously used in HTML have been deprecated (no longer supported) in XHTML. © Ms. Masihi

15.  XHTML is the "new" HTML.  The most important thing you can do is to start writing valid HTML 4.01 as the transition is made to XHTML 1.0.  Two most important steps in moving to XHTML: › Write all tags in lower case. › Always close tag elements. © Ms. Masihi

16.  An XHTML document consists of three main parts:  the DOCTYPE  the Head  the Body © Ms. Masihi

17.  The DOCTYPE declaration should be the first line in an XHTML document (for static web pages).  This is automatically added to all web page documents by Dreamweaver. © Ms. Masihi

18.  The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element and it should not have a closing tag.  Use DOCTYPE - Transitional when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets. © Ms. Masihi

19.  There are a few fundamental differences between HTML and XHTML. While HTML is a loose and forgiving language, XHTML is stricter in syntax. › All attributes, events, and tags must be written in lower case. › The value assigned to an attribute must be enclosed in quotes. › All elements must be closed. › All elements must be properly nested. › XHTML documents must be well-formed. › There must be a DOCTYPE declaration. © Ms. Masihi 19

20.  The XHTML specification defines that the Tag Names need to be Lower Case.  This is wrong: This is a paragraph  This is correct: This is a paragraph © Ms. Masihi

21.  Attribute Names Must Be In Lower Case  This is wrong:  This is correct: © Ms. Masihi

22.  Attribute Values Must Be Quoted  This is wrong:  This is correct: © Ms. Masihi

23.  XHTML Elements Must Always Be Closed.  This is wrong: This is a paragraph This is another paragraph  This is correct: This is a paragraph This is another paragraph © Ms. Masihi

24.  Empty Elements must either have an end tag or the start tag must end with />. There must be a space before the ending /.  This is wrong: A break: A horizontal rule: An image:  This is correct: A line break: A horizontal rule: An image: © Ms. Masihi

25.  In HTML, some elements can be improperly nested within each other. This text is bold and italic  In XHTML, all elements must be properly nested within each other. This text is bold and italic © Ms. Masihi

26.  When you write HTML or XHTML text, you can never be sure how the text is displayed in different browsers.  The text will be reformatted every time the user resizes his window.  Never try to format the text in your editor by adding empty lines and spaces to the text. © Ms. Masihi

27.  HTML and XHTML will truncate the spaces in your text. Any number of spaces count as one. A new line counts as one space.  Using empty paragraphs to insert blank lines is a bad habit.  Use the tag instead. © Ms. Masihi

28.  HTML 4.01 defines a Name Attribute for the elements a, applet, frame, iframe, img, and map.  In XHTML the name attribute is deprecated.  Use id instead.  This is why you will see both name= and id= as attribute syntax in Transitional documents. © Ms. Masihi

29.  This is wrong:  This is correct:  To enable code to work with older browsers, you should use both name and id, with identical attribute values, like this:  To make your XHTML compatible with today's browsers, be sure to add an extra space before the ending “ / " symbol. © Ms. Masihi

30.  The HTML div tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.  The tag defines sections of a Web page to make it easier to manage, style, and manipulate.  The tag is a block-level element © Ms. Masihi 30

31.  The tag can contain nearly any other tag  The tag cannot be inside tags  The tag is not a replacement tag.  The tag is for paragraphs only, while the tag defines more general divisions within a document. Don't replace tags with tags. © Ms. Masihi 31

32.  The Tag is used to give structure to elements in a web page.  Styles then can be applied to all elements with tags. © Ms. Masihi

33.  Place the tags in the document. © Ms. Masihi

34.  Then add the div styles in the Internal Style Sheet. © Ms. Masihi

35.  The Tag in an Inline Element used to add structure to a web page.  Styles can be added using a Tag. © Ms. Masihi

36.  Add the Tag to the document. © Ms. Masihi

37.  Add the Styles for the Tag to the Embedded Style Sheet. © Ms. Masihi

38.  Web Development software generates XHTML code automatically for you, but it is helpful to know a little about XHTML for element adjustments and for use in Cascading Style Sheets. © Ms. Masihi

39.  Dreamweaver automatically generates XHTML code to display things you create in Design View.  To view the XHTML Code, click to select Code View. © Ms. Masihi

40.  One way to help learn about XHTML is to split the Dreamweaver screen, add an element to the Design Screen and see the corresponding XHTML code generated by Dreamweaver. © Ms. Masihi

41.  Adding a table will add table tags.  Changing the background color for one row will add tr bgcolor tag inside the table. © Ms. Masihi

42.  Code may be modified by adding elements in the Design View window.  Type in CS 550 in Design View window. Note the paragraph tags and CS 550 added to the XHTML Code in the Code View window. © Ms. Masihi

43.  You can type in text in Code View window.  The new text will be updated as you type in the text. This is new to CS5.  In previous versions of Dreamweaver you had to wait until you click in the Design View window to see the update. © Ms. Masihi

44.  Text may be bolded or italicized in Design View.  Highlight the text and click Bold or Italic in the Properties Inspector.  Bold adds a tag in the XHTML Code. © Ms. Masihi

45.  Text may be italicized by adding an tag in Code View.  Type in before and after the text.  Now the text is bold and italic.  Be sure to match up tags - outside to inside, do not overlap tag pairs. © Ms. Masihi

46.  In Code View, clicking the View Options Button will allow you to modify code view characteristics. © Ms. Masihi

47.  In Code View, there is a Code View Toolbar to the left of the window.  Each Icon has specific application for use with XHTML Code. © Ms. Masihi

48.  HTML tags were originally designed to define the content of a document - "This is a header", "This is a paragraph", "This is a table", by using tags like,,, and so on.  The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. © Ms. Masihi

49.  As Netscape and Internet Explorer continued to add new HTML tags and attributes (like the tag and the color attribute) to the original HTML specification, it became more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.  To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0. © Ms. Masihi

50.  As you add attributes to your web page elements, Dreamweaver can automatically create Styles.  When you add formatting in Page Properties, be sure to select Appearance (CSS) to create CSS Rules. If you use Appearance (HTML) you create inline tags that are difficult to maintain and update for changes. © Ms. Masihi

51.  Let’s compare HTML Tags and CSS Style for 4 lines of text.  Using HTML Tags for font family and font color for 4 lines of text shows EACH LINE has its own font tag and font color tag. © Ms. Masihi

52.  Using CSS for font family and font color for 4 lines of text shows a style created in the document head directing all fonts to be Georgia with the color #003399.  Much more efficient than rewriting the same tags 4 times. © Ms. Masihi

53.  A Style is a group of formatting attributes which tells the browser how to display an element.  The Style information in this example is in a comment so any Browser that does not support CSS can ignore this section. © Ms. Masihi

54.  JavaScript can make your web site more dynamic.  A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction.  JavaScript is the most popular scripting language on the internet and it works with all major browsers. © Ms. Masihi

55.  JavaScript is an easy-to-use scripting language was developed by Netscape and is commonly used on Web pages.  JavaScript can enhance the dynamics and interactive features of your site with small amounts of code. document.writeln(' Hello there! '); © Ms. Masihi

56.  Although it shares many of the features and structures of the programming language Java, JavaScript was developed independently.  JavaScript can interact with HTML source code, enabling Web authors to add dynamic content to their websites.  JavaScript is an open language that anyone can use without purchasing a license. var your_name = prompt('Please enter your name', 'Your Name'); © Ms. Masihi

57.  JavaScript is a client side language that runs on the client browser.  JavaScript can be used on all most known browsers. It can be easily used to interact with HTML elements.  You can validate text fields, disable buttons, validate forms, or change the background color of your page.  Like each programming language, it contains variables, arrays, functions, operators, objects and much more // Set Variables var first_number = 15; var second_number = 5; var third_number = 10; var fourth_number = 25; © Ms. Masihi