session 2: basic html html coding spring 2009 the lis web team presents
DESCRIPTION
Effortless ways to work with code Hyper Text Markup Language HTML file = text file containing markup tags *.htm or *.html What is HTMLTRANSCRIPT
![Page 1: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/1.jpg)
Session 2: Basic HTML
HTML CodingSpring 2009
The LIS Web Team Presents
![Page 2: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/2.jpg)
Effortless ways to work with code
Course contents
• Basic HTML & Review
• HTML Elements
• Tags and their Properties
• Exercise: Add various content
![Page 3: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/3.jpg)
Effortless ways to work with code
• Hyper Text Markup Language
•HTML file = text file containing markup tags
• *.htm or *.html
What is HTML
![Page 4: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/4.jpg)
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
![Page 5: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/5.jpg)
Effortless ways to work with code
XHTML
• Extensible Hypertext Markup Language
• Uppercase vs Lowercase
• Closing tags
• Why?
![Page 6: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/6.jpg)
Effortless ways to work with code
Your HTML Document
<html> <head> <title> … document title … </title> </head> <body> … your page content … </body></html>
![Page 7: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/7.jpg)
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>
![Page 8: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/8.jpg)
Effortless ways to work with code
Basic Tags
• Headings – <h1>…</h1>
through – <h6> … </h6>
• Paragraph – <p> … </p>
![Page 9: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/9.jpg)
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
![Page 10: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/10.jpg)
Lesson 1
Use Split view and Code view
![Page 11: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/11.jpg)
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.
![Page 12: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/12.jpg)
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.
![Page 13: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/13.jpg)
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.
![Page 14: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/14.jpg)
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.
![Page 15: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/15.jpg)
Lesson 2
Make code easier to work with
![Page 16: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/16.jpg)
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.
![Page 17: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/17.jpg)
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.
![Page 18: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/18.jpg)
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.
![Page 19: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/19.jpg)
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.
![Page 20: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/20.jpg)
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.
![Page 21: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/21.jpg)
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.
![Page 22: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/22.jpg)
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)
![Page 23: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/23.jpg)
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.
![Page 24: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/24.jpg)
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.
![Page 25: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/25.jpg)
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.
![Page 26: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/26.jpg)
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.
![Page 27: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/27.jpg)
Lesson 3
Work with code in Design view
![Page 28: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/28.jpg)
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.
![Page 29: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/29.jpg)
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
![Page 30: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/30.jpg)
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.
![Page 31: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/31.jpg)
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.
![Page 32: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/32.jpg)
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.
![Page 33: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/33.jpg)
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)
![Page 34: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/34.jpg)
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.
![Page 35: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/35.jpg)
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.
![Page 36: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/36.jpg)
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.
![Page 37: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/37.jpg)
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.
![Page 38: Session 2: Basic HTML HTML Coding Spring 2009 The LIS Web Team Presents](https://reader035.vdocument.in/reader035/viewer/2022062412/5a4d1af37f8b9ab05997fafc/html5/thumbnails/38.jpg)
Effortless ways to work with code
Quick Reference Card
For a summary of the tasks covered in this course, view the Quick Reference Card.