We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byAshlee Berry
Modified over 4 years ago
© 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 #003399. 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
Introduction to HTML & CSS
XHTML Week Two Web Design. 2 What is XHTML? XHTML is the current standard for HTML Newest generation of HTML (post-HTML 4) but has many new features which.
Dr. Alexandra I. Cristea XHTML.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
HTML: HyperText Markup Language Hello World Welcome to the world!
Cascading Style Sheets
3/10/11 Lecture 2. W3C - 2 The World Wide Web consortium was created in October 1994 to lead the World Wide Web to its full potential by developing common.
Basic HTML Tags.
History Leading to XHTML
XHTML1 Building Document Structure. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML) documents.
HTML Computing Concepts HTML - An Introduction 1.
17-Jun-15 XHTML 2 What is XHTML? XHTML stands for Extensible Hypertext Markup Language XHTML is aimed to replace HTML.
Creating a Well-Formed Valid Document. 2 Objectives Introducing XHTML Creating a Well-Formed Document Creating a Valid Document Creating an XHTML Document.
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Web Design is a class created to nurture the minds of high school techies, and introduce those without prior knowledge to the field.
© 2019 SlidePlayer.com Inc. All rights reserved.