Review of
Basic HTML Concepts
- Web Page Basics- Part I (htmltags.htm)
- Web Page Basics- Part II (htmltag2.htm)
- Hypertext links
- Web Design
- Resources (htmltopi.htm)
Notes
- Web Page Basics - Part II
- Internet, WWW
- HTML, hypertext, link
- ASCII/Text editor, HTML editor (GUI, WYSIWYG)
- HTML tags
- Web Page Basics - Part I
- HTML Reference Library
- html, head, title, body, hr, p, i, b, a, img, etc...
- Lists: ul, ol, dl, li
- Images: <img src="graphic.jpg" align="right" width="123" height="234" title="this is a graphic">
- Adding Hypertext Links to a Web Page
- target = anchor target = link target = jump link = a hyperlink to a specific point in an HTML file.
- <a href="#xyz">Look at abcdef.gif</a> (target anchor in same file)
- <a href="qwerty.htm" >Qwerty</a> (relative local file)
- <a href="qwerty.htm#zzzzzz">Qwertyzzzzzz</a> (target anchor in another file)
- <a href="http://www.intel.com/intel/product/index.htm" >Intel Products</a> (remote file)
- Named Anchor
- <a name="xyz"><img src="abcdef.gif"></a>
- The "Named Anchor" has been depricated in HTML5. It has been replaced by the ID property.
- <a id="xyz"><img src="abcdef.gif"></a>
- Links: <a href="url">click here</a>
- http, ftp, mailto, gopher, telnet, news (All the standard protocols)
- Images:
- <body background=...>
- <img src=... title=... height=... width=... align=... align=...>
- Tables
- <table>
- <caption>Title for the table</caption>
- <tr> <!-- This starts a row -->
- <td>This is a cell</td>
- <td>This is a cell</td>
- </tr>
- </table>
- Tables are very useful as a page layout tool.
- Forms
- <form enctype="text/plain" action="mailto:9999999@dc1.dawsoncollege.qc.ca" method="post">
- <input type="text" name=...>
- <input type="radio" name=...>
- <input type="checkbox" name=...>
- <textarea>This can be a larger input area</textarea>
- <input type="submit" value="Send">
- </form>
- Testing/debugging:
- Browser types/versions, Screen size, Screen resolution/color depth, Operating system, Browser settings
- offline = not on the Internet; on a local drive or a network drive (e.g. on A: or C: or D: or H: etc.)
- online = a site on the Internet, on a remote site
- Pathnames:
- local vs. remote
- absolute = starts with a slash (/) or a drive letter or a complete URL
- relative = does not start with a slash (/) or a drive letter or a complete URL. Starts with the filename (all by itself) or a dot slash (./) or a dot-dot slash (../) or a directory (folder) name.
- target anchors: <a name="targetAnchorName"></a>
- See "Named Anchor" (above)
- <a href="#targetAnchorName">Go elsewhere on this same page</a>
-
- Web Design Guidelines
- Sample HTML Pages (good & bad)
- Suggestions & Hints & Comments and How to Avoid Problems/Errors
- Never use <blink>
- Never use a dark background with invisible (dark) text.
- Never use "under construction" comments or graphics.
- Have pity on those who rely on the limited bandwidth of old 56k modems. Keep your graphics small. Don't use graphics unless they really add to the meaning and content of your page.
- Always test your page online after you upload it.
- The layout and design of your page should reflect the purpose and content of your page.
- KISS
- Suggestions & Hints
It is very strongly recommended that you read the page htmleval.htm very carefully. If you don't, you will make the same mistakes that have cost other students many marks.