Web design and programming HTML Basics & Linking

Web design and programmingHTML Basics&Linking

Pre-design Work Start by looking at the big picture, then work down to the specifics. • 1) define the problem/goal for the site • 2) analyze the requirements • 3) design a prototype; implement and test the site • 4) show to clients; get feedback • 5) develop new prototype • 6) release and maintain the site

Site plan • Goal statement • Audience assessment • Content requirements • Technical requirements • Visual requirements • Delivery requirements • Site structure diagram • Staffing requirements • Timeline for project • Budget estimate

Analyzing the Web Page Lets introduced two new elements to our simple page: a heading element, and a couple of paragraph elements, denoted by the <h1> tag and <p> tags, respectively. Comparing the source markup with the view presented in the browser.

Taking a Break If you just want to signify the start of a new line, rather than anew paragraph, the element you need is br, Note that br is an empty element, just like meta and img, so in HTML it’s written as <br/>. Commenting Your HTML HTML, like most programming languages, allows you to use comments. Comments are perfect for making notes on work you’ve done and, although they’re included within your code, they won’t affect the onscreen display. Here’s an example of a comment: <body> <p>I really, <em>really</em> like this HTML stuff.</p>  </body> Comments must start with  part.

Symbols Occasionally, you may need to include the greater-than (>) or less-than (<) symbols in the text of your web pages. This is a problem because these symbols are also used to denote tags in HTML. So, you can use code-like entities in your text instead of these symbols. The entity for the greater-than symbol is >—which substitutes for the greater-than symbol in text, HTML Is Sensitive to a Single Whitespace Character: Any white space between characters displays as a single space. This includes all tabs, line breaks, and carriage returns. However, it is possible to force the whitespace issue. If more spaces are required, it is possible to use the nonbreaking space entity, or Yet using markup such as &nbsp. Many different entities are available for a wide range of symbols, most of which don’t appear on your keyboard. They all start with an ampersand (&) and end with a semicolon. Some of the most common are shown in Table below:

Inserting Horizontal Lines To add a horizontal line, simply add the following one-sided tag where you want the line to appear: <hr> By default, the line runs the entire width of the browser window, is two pixels in height. but you can also add styling directly to the <hr> tag by simply including the style=”attributes” attribute. The attributes you can set are color, background-color, width, and height. For example, to create a green line that is 3 pixels thick and spans 50% of the window’s width, you would write: <hr style="color: green; background-color: green; height: 3; width: 50%"> • Some browsers use color to assign a color to the line, others use background-color; therefore, you should include both tags and • assign the same color for both.

Linking Between Our New Pages To enable site visitors to move around, you need to add navigation. Navigation relies on anchors, more commonly referred to as links. The HTML for an anchor, or link, is as follows: <a href="filename.html">Link text here</a> It starts with the <a> tag (Anchor), and then uses an href (hyper reference) attribute which provides the URL or the path to the destination. For example, an opening tag might look like this: Visit <a href="http://www.microsoft.com">Microsoft.com</a> for the latest information. ■ The a element contains the link text that will be clicked (by default, it appears on the screen as blue underlined text). ■ The href attribute refers to the page that you’re linking to (be that a file stored locally on your computer, or a page on a live website).

Using Partial Paths and Filenames If you want to link to a specific page, you must specify the complete file name. For example, if you wanted to provide a direct link to the page where users can download Windows Media Player, you would use this tag: <a href=“http://www.somesite.com/files/file.doc”> Down </a> Downloading a file, and save file dialog Appears. Using Relative Paths When you are linking to files in the same Web site as the link itself, you do not need to include the complete path to the file; you can simply provide its name. When the file is in the same folder, you need only supply the file name. For example, if the index.htm and foliage.htm pages of The Garden Company Web site were in the same folder, in the index.htm file, you could refer to foliage.htm like this: <a href="foliage.htm">Diagnosing Foliage Problems</a>

Setting a Target Window By default, a hyperlink opens the referenced page in the same browser window. That means the new page replaces the previous page in your browser. Usually this is fine, but in some cases you might want the hyperlink to open in a new window. For example, perhaps you want to recommend that visitors check out a page on another site, but you don’t want them to leave your site. To direct the hyperlink to open a page in a new window, add the attribute target=″_blank″ to the <a> tag. For example, to open the foliage.htm file in a new window, the tag would be structured like this: <a href="foliage.htm" target="_blank">Diagnosing Foliage Problems</a> target=“_self” Display on the same page target=“_blank” Display on another page target=“_name of frame” Display on the frame

Hyperlinking to an E-Mail Address Hyperlinks can point to anything, not just to Web pages. You can create e-mail hyperlinks, for example, that starts the user’s default e-mail program, create a new message, and enter the recipient’s address. E-mail hyperlinks are useful when you want to direct someone to send a message to a particular person. To create a hyperlink to an e-mail address, use the same href= attribute as you did previously, but instead of a Web address, type mailto:followed by the e-mail address, like this: <a href="mailto:support@adatum.com">Contact Us</a> Contact <a href="mailto:support@adatum.com">support@adatum.com</a> Example: <a href="spray.doc">Microsoft Word version</a> - <a href="http://www.microsoft.com/downloads/en/default.aspx "> (Download free Word viewer) </a> The output: Microsoft Word version - (Download free Word viewer)

Creating and Hyperlinking to Anchors An anchor is a marker within an HTML document, roughly analogous to a bookmark in a Word document. Define a specific location in the document with an anchor name, and then hyperlink directly to that anchor. Anchors are most valuable in long documents with multiple sections. They provide a means for users to jump directly to whatever section they want rather than having to read or scroll through the entire document. Can do this internally by creating a list of hyperlinks at the top of the document, or can do this externally by including an anchor name in a hyperlink to another document. There are two parts to the process: mark the anchor location, and then create a hyperlink that refers to it. To define an anchor, create an <a> tag around the destination text and include a name= attribute. For example, suppose have a heading that reads Conclusion, and want to create an anchor point with that same name: <a name="conclusion">Conclusion</a> To refer to the anchor point, include its name in the href= attribute. Precede the anchor name with a pound sign (#). If the anchor point is in the same document as the hyperlink, use a relative reference like this: <a href="#conclusion">View the Conclusion</a>

Otherwise, must include the name of the file in which the anchor is located. For example, if the anchor were in a file called report.htm, it would look like this: • <a href="report.htm#conclusion">View the Conclusion</a> • The same rules apply to the file name as they do with regular hyperlinks. If the document is not in the same folder, must refer to the folder either absolutely or relatively. Example: • <a href="#equipment"><li>Equipment</li></a> • <a href="#mixing"><li>Mixing</li></a> • <a href="#spraying"><li>Spraying</li></a> • <a href="#cleanup"><li>Cleanup</li></a> • ... • <a name="equipment"><h2>Equipment</h2></a> • ... • <a name="mixing"><h2>Mixing</h2></a> • ... • <a name="spraying"><h2>Spraying</h2></a> • ... • <a name="cleanup"><h2>Cleanup</h2></a>

Hyperlinking to Other Content A hyperlink can reference any file, not just a Web document. You can take advantage of this to link to other content such as Microsoft Office documents, compressed archive files such as .zip files, and even executable program files such as setup utilities for programs that you want to provide to your visitors. The procedure for linking to other content is the same as for linking to a Web page; the only difference is the file name you enter in the hyperlink. Before create a link to non-HTML content, remember that not everyone has the same software. At first, it might seem like a great idea to provide a set of reports as Word documents, for example, but what about people who don’t have Word installed? Some browsers have a feature that automatically tries to download an appropriate viewer, player, or plug-in (an extension to the browser for handling a certain type of file) for anything it can’t display as native content. That’s a great feature when it works, but it’s not reliable because not all your Web visitors will have a browser with this capability.

If you don’t provide an HTML alternative for a proprietary-format file, you should at least provide a hyperlink to a free viewer that can display that file type. This is especially important with audio and video clips, Here are some of the popular viewers and the addresses where they can be downloaded: ●● Adobe Reader: get.adobe.com/reader ●● Microsoft Download Center, offering Microsoft Office viewers (PowerPoint, Excel, Word) and trial versions of Microsoft Office http://www.microsoft.com/downloads/en/default.aspx <li><a href="spray.doc">Microsoft Word version</a></li> <li><a href="spray.doc">Microsoft Word version</a> - <a href="http://www.microsoft.com/downloads/en/default.aspx "> (Download free Word viewer)</a></li>

Web design and programming HTML Basics & Linking