View
218
Download
0
Category
Preview:
DESCRIPTION
Effortless ways to work with code Hyper Text Markup Language HTML file = text file containing markup tags *.htm or *.html What is HTML
Citation preview
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
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 <p> and close tag </p>
• 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
<html> <head> <title> … document title … </title> </head> <body> … your page content … </body></html>
Effortless ways to work with code
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>
Effortless ways to work with code
Basic Tags
• Headings – <h1>…</h1>
through – <h6> … </h6>
• Paragraph – <p> … </p>
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 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 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.
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 <table> 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 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.
Recommended