Session 2: Basic HTML HTML Coding Spring 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

Effortless ways to work with code Hyper Text Markup Language HTML file = text file containing markup tags *.htm or *.html What is HTML

Effortless ways to work with code HTML Elements Tags Use angle brackets <> Usually come in pairs Open tag and close tag Not case sensitive

Effortless ways to work with code XHTML Extensible Hypertext Markup Language Uppercase vs Lowercase Closing tags Why?

Effortless ways to work with code Your HTML Document … document title … … your page content …

Effortless ways to work with code Page Components

Effortless ways to work with code Basic Tags Headings – … through – … Paragraph – …

Effortless ways to work with code 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

Effortless ways to work with code 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.

Effortless ways to work with code 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.

Effortless ways to work with 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.

Effortless ways to work with code Test 1, question 2: Answer 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

Effortless ways to work with code 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.

Effortless ways to work with 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.

Effortless ways to work with code 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.

Effortless ways to work with code 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.

Effortless ways to work with code 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.

Effortless ways to work with code 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.

Effortless ways to work with code 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 practiceOnline practice (requires FrontPage 2003)

Effortless ways to work with code 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.

Effortless ways to work with code Test 2, question 1: Answer 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.

Effortless ways to work with code Test 2, question 2 Your code looks like this: 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.

Effortless ways to work with code Test 2, question 2: Answer 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

Effortless ways to work with code 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.

Effortless ways to work with code 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

Effortless ways to work with code 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.

Effortless ways to work with code 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 button, click the arrow, and then click Edit Tag.

Effortless ways to work with code 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.

Effortless ways to work with 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 practiceOnline practice (requires FrontPage 2003)

Effortless ways to work with code 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.

Effortless ways to work with code Test 3, question 1: Answer 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.

Effortless ways to work with code 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.

Effortless ways to work with code Test 3, question 2: Answer FrontPage will check to see if you entered valid HTML, and the code will be applied to the selected element.

Effortless ways to work with code Quick Reference Card For a summary of the tasks covered in this course, view the Quick Reference Card. Quick Reference Card

USING THIS TEMPLATE See the notes pane or view the full notes page (View menu) for detailed help on this template.