Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents

Session 2: Basic HTML

HTML CodingSpring 2009

The LIS Web Team Presents

Effortless ways to work with code

Course contents

• Basic HTML & Review

• HTML Elements

• Tags and their Properties

• Exercise: Add various content


• Hyper Text Markup Language

•HTML file = text file containing markup tags

• *.htm or *.html

What is HTML


HTML Elements

• Tags

• Use angle brackets <>

• Usually come in pairs Open tag <p> and close tag </p>

• Not case sensitive


XHTML

• Extensible Hypertext Markup Language

• Uppercase vs Lowercase

• Closing tags

• Why?


Your HTML Document

<html> <head> <title> … document title … </title> </head> <body> … your page content … </body></html>


Page Components

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• <!add a note here -->

• <html> </html>

• <head> </head>

• <body> </body>


Basic Tags

• Headings – <h1>…</h1>

through – <h6> … </h6>

• Paragraph – <p> … </p>


Introducing Code view

Now we'll show you another view that lets you work under the hood: Code view.

Code view is just like the Code pane of Split view. But instead of splitting into two panes, it just fills the entire document window with the code.Code view

Lesson 1

Use Split view and Code view


Test 1, question 1

In Split view, if you make a change to the Code pane, what do you have to do to get the Design pane updated with your changes? (Pick one answer.)

1. Click the Split bar that separates the two panes.

2. Use the Reformat HTML command.

3. Save or refresh the page.


Test 1, question 1: Answer

Save or refresh the page.

You can also just click the Design pane to see your changes to the code.


Test 1, question 2

Which one of the following would be a good reason to use Split view? (Pick one answer.)1. You're unsure which tags are being used in

the page.

2. You'd like to split one page into two without creating an entirely new file.

3. You want to write your own code, and you need a lot of room to do so.



You're unsure which tags are being used in the page.

As you click things in the Design pane, the Code pane will scroll and show you the corresponding tags.

Lesson 2

Make code easier to work with


Make code easier to work with

HTML code for a Web page can be hard to work with.• It’s easy to get lost in

numerous lines of code.• It’s easy to misspell a tag or

mistype the syntax for code.


Word Wrap

Problem: FrontPage shows your code on long lines that seem to run off the edge of the page.

Solution: Turn on Word Wrap.1. On the View menu, point to

Toolbars, and then select Code View toolbar.

2. On the toolbar, click Options, and then select Word Wrap.


Line numbers

Line numbers appear to the left of each line of code. They help you locate and move between specific lines of code.

If you know the line number you need to work with, you can quickly jump to it by pressing CTRL+G and then entering the number.


Temporary bookmarks

Add a temporary bookmark to a line of code to make it stand out from the others.

Temporary bookmarks appear to the left of the line you want to work with.

• On the Code View toolbar, click the Toggle Bookmark button. Or,

• Press CTRL+F2.


IntelliSense lists

IntelliSense lists make writing code easy. No need to rack your brain for the right tags or attributes.To see a IntelliSense lists:

• Start typing in the code and they will appear automatically. Or,

• Press CTRL+L.

IntelliSense provides context-sensitive lists that contain code and scripting elements.


Reformat HTML so that it's tidy

Sometimes after you write some code, you notice that it isn't formatted very well.

However, by using the Reformat HTML feature, everything gets indented properly:

• Right-click the code, and then click Reformat HTML.


Suggestions for practice

1. Turn on the Code View toolbar and Word Wrap.2. In Code view, notice the line numbers along the left, and use CTRL+G to

move to a specific line. 3. Insert a temporary bookmark, and press F2 to move to it.4. Type code using IntelliSense lists.5. Use the Reformat HTML feature.

Online practice (requires FrontPage 2003)

http://office.microsoft.com/training/training.aspx?AssetID=RP010909991033


Test 2, question 1

Which of the following is true about temporary bookmarks? (Pick one answer.)

1. When you save the file, the bookmarks will be saved as well.

2. When you close the file and reopen it, the bookmarks will not appear.

3. When you close the file and reopen it, the bookmarks will conveniently appear even if you don't save the file.



When you close the file and reopen it, the bookmarks will not appear.

Temporary bookmarks only hang around while you work in the file. The minute you close it, they will go away.


Test 2, question 2Your code looks like this:

<table><tr><td></td></tr></table>

How can you quickly indent the tags? (Pick one answer.)

1. On the Tools menu, click Page Options, and then click Reset.

2. Right-click the code, and click Optimize HTML.

3. Right-click the code, and click Reformat HTML.



Right-click the code, and then click Reformat HTML.

The Reformat HTML command will automatically indent your tags so that they are easier to work with.

Lesson 3

Work with code in Design view


Work with code in Design view

Design view isn't just for working with the design and layout of the page.

In fact, in Design view you can reveal and discover the tags behind smaller, specific parts of the page.


Identifying things easily

One helpful coding tool you can use in Design view is the Quick Tag Selector. It's the row of buttons at the top of the document window.

When you select or click inside an element, it displays a button for that particular tag.

The Quick Tag Selector


Select things easily in Design view

Of course, the Quick Tag Selector is also good at selecting items in Design view.

To select the item you want to work with:• Simply click its corresponding

button on the Quick Tag Selector.


Edit code easily in Design view

You have a table that needs a new background color, and all you need to do is type bgcolor=yellow in its tag.

You can do that in Design view:1. Click inside the table.2. On the Quick Tag Selector, point

to the <table> button, click the arrow, and then click Edit Tag.


Edit code easily in Design view, cont’d.

Now it’s time to actually edit the tag:1. First you make your changes to

the tag by adding, editing, or removing attributes, values, etc.

2. Then you press the Enter button (the green check mark).

3. Your edits will be added to the HTML code.


Suggestions for practice

1. In Design view, take a look at the Quick Tag Selector.2. Click a tag button in the Quick Tag Selector to select

an item on the page.3. Click the arrow next to a tag button, click Edit, and

then edit the tag.

Online practice (requires FrontPage 2003)

http://office.microsoft.com/training/Training.aspx?AssetID=RP010910061033


Test 3, question 1

If you wanted to edit the code of a single tag, you would: (Pick one answer.)

1. Right-click an item in Design view, and then click the Properties option on the shortcut menu.

2. On the Quick Tag Selector, click the arrow next to the tag button, and then click Tag Properties.

3. On the Quick Tag Selector, click the arrow next to the tag button, and then click Edit Tag.



On the Quick Tag Selector, click the arrow next to the tag button, and then click Edit Tag.

Tip You can also press CTRL+Q.


Test 3, question 2

What happens when you press the Enter button on the Quick Tag Editor? (Pick one answer.)1. FrontPage will check to see if you entered

valid HTML, and the code will be applied to the selected element.

2. FrontPage will add a hard return to the code after it applies the code to the element.

3. FrontPage will check your spelling of any content on the page.



FrontPage will check to see if you entered valid HTML, and the code will be applied to the selected element.


Quick Reference Card

For a summary of the tasks covered in this course, view the Quick Reference Card.

http://office.microsoft.com/training/Training.aspx?AssetID=RP010909811033&CTT=6&Origin=RC010909821033

Documents

Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents