©SoftMoore ConsultingSlide 1 Introduction to HTML: Text-Level Elements and Links

Physical Style Tags Bold:... Italics:... Teletype (fix-width font):... Underline:... Subscript:... Superscript:... Bigger font size:... Smaller font size:... Strike through:... ©SoftMoore ConsultingSlide 2

©SoftMoore ConsultingSlide 3 Example: Physical Style Tags bold italic teletype underline strike through subscripts: H 2 0 superscripts: b 2 - 4ac bigger bold italic underline italic bold underline

©SoftMoore ConsultingSlide 4 The Link Tag Example SoftMoore Consulting Go back to Main Menu File to load when link is selected Opening Tag Text that will be highlighted Closing Tag “href” stands for “Hypertext REFerence.”

©SoftMoore ConsultingSlide 5 Relative Pathnames Relative pathnames point to file based on their locations relative to the current file. To specify relative pathnames in links, use UNIX-style pathnames regardless of the system you actually have. –directory or folder names are separated by forward slashes (/) –use two dots (..) for the directory “above” the current directory

©SoftMoore ConsultingSlide 6 Examples: Relative Pathnames href="file.html" href="files/file.html" href= "files/more/file.html" href="../file.html" href="../../files/file.html" located in current directory located in directory called “files” (which is located in the current directory located in directory “more”, which is located in directory “files”, which is located in current directory. located in the directory one level up from current directory (the “parent” directory) located two directory levels up, in the directory “files”

©SoftMoore ConsultingSlide 7 Absolute Pathnames Point to files based on the absolute location on the file system Start at the top of the web application directory hierarchy and work downward through all intervening directories to reach the file Prefix used to differentiate from relative pathnames –slash (“ / ”): when referring to a page in the current web application –“ ”: when referring to a page in a different web

©SoftMoore ConsultingSlide 8 Examples: Absolute Pathnames href="/files/file.html" href=" href=" located in directory “files” under the main application directory (independent of current directory) default file is used for this web application (usually index.html ) located in web application “x” in the directory “f”

©SoftMoore ConsultingSlide 9 Relative versus Absolute Pathnames Most of the time use relative pathnames instead of absolute pathnames within the same web application. Absolute pathnames are not portable when moving web pages to other locations. –same server –different server

©SoftMoore ConsultingSlide 10 Anchors Instead of just linking to the top of another document, you can set up link to a specific place within that document; e.g., to the third paragraph. Anchors are special places inside documents that can be linked to. Links can then jump to those special places inside the page as opposed to jumping just to the top of the page.

©SoftMoore ConsultingSlide 11 Example: Linking to an Anchor In “ u_csci.html ” CSCI 201 Link within the same document. Course description for CSCI 201 Link from a different document (relative link) CSCI 201 Note: Anchor names and links are case sensitive. Make sure that the anchor name used in the name attribute and the anchor name in the link after the # are identical.

©SoftMoore ConsultingSlide 12 Links and Images Typical image formats –GIF: Graphics Interchange Format –JPEG: Joint Photographic Experts Groups –others (PNG, TIFF, EPSF, etc.) The tag is used to inline images. Images can be used as link to documents. Up to Home

Text/Image Alignment Attributes align="top" : aligns the top of the image with the topmost part of the line. align="middle" : aligns the center of the image with the middle of the line align="bottom" : aligns the bottom of the image with the bottom of the line of text. align="left" : aligns an image to the left margin to a paragraph of text. align="right" : align an image to the right margin to a paragraph of text. ©SoftMoore ConsultingSlide 13

©SoftMoore ConsultingSlide 14 Alternative Text for Images <img src="arrowup.gif" align="bottom" alt="[UP]">