© Ms. Masihi 1

 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

 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

 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

 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

 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

 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

 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

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

 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

 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

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

 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

 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

 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

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

 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

 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

 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

 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

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

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

 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

 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

 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

 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

 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

 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

 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

 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

 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

 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

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

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

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

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

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

 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

 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

 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

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

 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

 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

 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

 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

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

 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

 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

 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

 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

 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

 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 #  Much more efficient than rewriting the same tags 4 times. © Ms. Masihi

 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

 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

 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

 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

 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