© Ms. Masihi

HTML/XHTML Tag StructureBasic Tags

Block Tags and Inline ElementsXHTML, Styles and JavaScript

1

HTML / XHTML Overview

© Ms. Masihi

HTML 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).

2

© Ms. Masihi

HTML Tags

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 Tag Structure

HTML codes, also referred to as HTML Tags, are enclosed by the lesser than (<) and greater 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.

<p> </p><font> </font>

Web page elements between the tags are displayed using the instructions generated by the surrounding tags.

4

© Ms. Masihi

An element may also be followed by attributes, which are words describing the properties of the element.

< font size=2 >

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.

5

© Ms. Masihi

Block Level Tags

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

6

© Ms. Masihi

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

Inline Elements 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 <b>, <hr>, <strong> <em>.

Inline elements cannot contain block-level elements.

8

© Ms. Masihi

Block Level elements generally are written out vertically (such as <p> elements).

Inline Elements are written out horizontally (such as a <em> and <b> tag).

© Ms. Masihi

Comments 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

<!-- This is a comment -->

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

© Ms. Masihi

What is XHTML ?

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

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.

19

© Ms. Masihi

The XHTML specification defines that the Tag Names need to be Lower Case.

This is wrong:<BODY> <P> This is a paragraph </P>

</BODY>

This is correct:<body> <p> This is a paragraph </p>

</body>

© Ms. Masihi

Attribute Names Must Be In Lower Case

This is wrong:< table WIDTH=“100%“ >

This is correct:< table width=“100%“ >

© Ms. Masihi

Attribute Values Must Be Quoted

This is wrong:< table width=100% >

This is correct:< table width=“100%“ >

© Ms. Masihi

XHTML Elements Must Always Be Closed.

This is wrong:<p> This is a paragraph<p> This is another paragraph

This is correct:<p> This is a paragraph </p> <p> This is another paragraph </p>

© 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: <br> A horizontal rule: <hr> An image: < img src=“happy.gif” alt=“Happy

face” >

This is correct:A line break: <br /> A horizontal rule: <hr /> An image: < img src="happy.gif"

alt="Happy face" />

© Ms. Masihi

In HTML, some elements can be improperly nested within each other.

<b> <i> This text is bold and italic </b> </i>

In XHTML, all elements must be properly nested within each other.

<b> <i> This text is bold and italic </i> </b>

© 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

<p> to insert blank lines is a bad habit.

Use the <br /> tag instead.

© Ms. Masihi

id Attribute Replaces name Attribute

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:<img src="picture.gif" name="picture1" />

This is correct:<img src="picture.gif" id="picture1" />

To enable code to work with older browsers, you should use both name and id, with identical attribute values, like this:

<img src="picture.gif" id="picture1" name="picture1" />

To make your XHTML compatible with today's browsers, be sure to add an extra space before the ending “ / " symbol.

© Ms. Masihi

Div Tag

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 <div> tag defines sections of a Web page to make it easier to manage, style, and manipulate.

The <div> tag is a block-level element

30

© Ms. Masihi

The <div> tag can contain nearly any other tag

The <div> tag cannot be inside <p> tags

The <div> tag is not a replacement <p> tag.

The <p> tag is for paragraphs only, while the <div> tag defines more general divisions within a document. Don't replace <p> tags with <div> tags.

31

© Ms. Masihi

The <div> Tag is used to give structure to elements in a web page.

Styles then can be applied to all elements with <div> tags.

© Ms. Masihi

Place the <div> tags in the document.

© Ms. Masihi

Then add the div styles in the Internal Style Sheet.

© Ms. Masihi

SPAN Tag The <span> Tag in an Inline Element

used to add structure to a web page. Styles can be added using a <span>

Tag.

© Ms. Masihi

Add the <span> Tag to the document.

© Ms. Masihi

Add the Styles for the <span> 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

Code View

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 <strong> tag in the XHTML Code.

© Ms. Masihi

Text may be italicized by adding an <em> tag in Code View.

Type in <em> before and </em> 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

Code View Menu

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

© Ms. Masihi

Code View Toolbar

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

STYLES 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 <h1>, <p>, <table>, 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 <font> 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

JavaScript 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('<font face="Arial" size="5" color="red">Hello there!</font>');

© 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 Variablesvar first_number = 15;var second_number = 5;var third_number = 10;var fourth_number = 25;