Download presentation
Presentation is loading. Please wait.
Published byAshlee Berry Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.