Tazza Tazza: HTML


	What is a tag? In HTML, a tag tells the browser what to do. When you write an HTML page, you enter tags for many reasons - to change the appearance of text, to show a graphic, or to make a link to another page.
	What is the simplest HTML page? HTML Code: <HTML> <HEAD> <TITLE>This is my page title! </TITLE> </HEAD> <BODY> This is my message to the world! </BODY> </HTML> Browser Display: This is my message to the world!
	How do I create frames? What is a frameset? Frames allow an author to divide a browser window into multiple (rectangular) regions. Multiple documents can be displayed in a single window, each within its own frame. Graphical browsers allow these frames to be scrolled independently of each other, and links can update the document displayed in one frame without affecting the others. You can't just "add frames" to an existing document. Rather, you must create a frameset document that defines a particular combination of frames, and then display your content documents inside those frames. The frameset document should also include alternative non-framed content in a NOFRAMES element. The HTML frames model has significant design flaws that cause usability problems for web users. Frames should be used only with great care.
	How can I include comments in HTML? Technically, since HTML is an SGML application, HTML uses SGML comment syntax. However, the full syntax is complex, and browsers don't support it in its entirety anyway. Therefore, use the following simplified rule to create HTML comments that both have valid syntax and work in browsers: An HTML comment begins with "<!--", ends with "-->", and does not contain "--" or ">" anywhere in the comment. The following are examples of HTML comments: * <!-- This is a comment. -->z Do not put comments inside tags (i.e., between "<" and ">") in HTML markup.
	What is a Hypertext link? A hypertext link is a special tag that links one page to another page or resource. If you click the link, the browser jumps to the link's destination.
	What is a DOCTYPE? Which one do I use? According to HTML standards, each HTML document begins with a DOCTYPE declaration that specifies which version of HTML the document uses. Originally, the DOCTYPE declaration was used only by SGML-based tools like HTML validators, which needed to determine which version of HTML a document used (or claimed to use). Today, many browsers use the document's DOCTYPE declaration to determine whether to use a stricter, more standards-oriented layout mode, or to use a "quirks" layout mode that attempts to emulate older, buggy browsers.
	Can I nest tables within tables? Yes, a table can be embedded inside a cell in another table. Here's a simple example: <table> <tr> <td> this is the first cell of the outer table </td> <td> this is the second cell of the outer table, with the inner table embedded in it <table> <tr> <td> this is the first cell of the inner table </td> <td> this is the second cell of the inner table </td> </tr> </table> </td> </tr> </table> The main caveat about nested tables is that older versions of Netscape Navigator have problems with them if you don't explicitly close your TR, TD, and TH elements. To avoid problems, include every </tr> , </td>, and </th> tag, even though the HTML specifications don't require them. Also, older versions of Netscape Navigator have problems with tables that are nested extremely deeply (e.g., tables nested ten deep). To avoid problems, avoid nesting tables more than a few deep. You may be able to use the ROWSPAN and COLSPAN attributes to minimize table nesting. Finally, be especially sure to validate your markup whenever you use nested tables.
	How do I align a table to the right (or left)? You can use <table align="right"> to float a table to the right. (Use ALIGN="left" to float it to the left.) Any content that follows the closing </table> tag will flow around the table. Use <br clear="right"> or <br clear="all"> to mark the end of the text that is to flow around the table, as shown in this example: The table in this example will float to the right. <table align="right"> ...</table> This text will wrap to fill the available space to the left of (and if the text is long enough, below) the table. <br clear="right"> This text will appear below the table, even if there is additional room to its left.
	How can I use tables to structure forms? Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn't help position the form-related elements relative to each other. To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example:- <FORM ACTION="[URL]"> <TABLE BORDER="0"> <TR> <TH>Account:</TH> <TD><INPUT TYPE="text" NAME="account"></TD> </TR> <TR> <TH>Password:</TH> <TD><INPUT TYPE="password" NAME="password"></TD> </TR> <TR> <TD> </TD> <TD><INPUT TYPE="submit" NAME="Log On"></TD> </TR> </TABLE> </FORM>
	How do I center a table? In your HTML, use <div class="center"> <table>...</table> </div> In your CSS, use div.center { text-align: center; } div.center table { margin-left: auto; margin-right: auto; text-align: left; }
	How do I use forms? The basic syntax for a form is: <form action="[URL]"></form> When the form is submitted, the form data is sent to the URL specified in the ACTION attribute. This URL should refer to a server-side (e.g., CGI) program that will process the form data. The form itself should contain * at least one submit button (i.e., an <input type="submit" ...> element), * form data elements (e.g., <input>, <textarea>, and<SELECT>) as needed, and * additional markup (e.g., identifying data elements, presenting instructions) as needed.
	How do I make a form so it can be submitted by hitting ENTER? The short answer is that the form should just have one <input type="TEXT"> and no TEXTAREA, though it can have other form elements like checkboxes and radio buttons.
	How do I set the focus to the first form field? You cannot do this with HTML. However, you can include a script after the form that sets the focus to the appropriate field, like this: <form id="myform" name="myform" action='myform'> <input type="text" id="myinput" name="myinput"> </form> <script type="text/javascript"> document.myform.myinput.focus(); </script> A similar approach uses <body onload=> to set the focus, but some browsers seem to process the ONLOAD event before the entire document (i.e., the part with the form) has been loaded.
	How can I eliminate the extra space after a </form> tag? HTML has no mechanism to control this. However, with CSS, you can set the margin-bottom of the form to 0. For example: <form style="margin-bottom:0;"> You can also use a CSS style sheet to affect all the forms on a page: form { margin-bottom: 0 ; }
	Can I have two or more actions in the same form? No. A form must have exactly one action. However, the server-side (e.g., CGI) program that processes your form submissions can perform any number of tasks (e.g., updating a database, sending email, logging a transaction) in response to a single form submission.
	Can I use percentage values for <td width="..."> ? The HTML 3.2 and HTML 4.0 specifications allow only integer values (representing a number of pixels) for the WIDTH attribute of the TD element. However, the HTML 4.0 DTD allows percentage (and other non-integer) values, so an HTML validator will not complain about <TD WIDTH="xx%">. It should be noted that Netscape and Microsoft's browsers interpret percentage values for <TD WIDTH=...> differently. However, their interpretations (and those of other table-aware browsers) happen to match when combined with <TABLE WIDTH="100%">. In such situations, percentage values can be used relatively safely, even though they are prohibited by the public specifications.
	Why doesn't <TABLE WIDTH="100%"> use the full browser width? Graphical browsers leave a narrow margin between the edge of the display area and the content. Also note that Navigator always leaves room for a scrollbar on the right, but draws the scrollbar only when the document is long enough to require scrolling. If the document does not require scrolling, then this leaves a right "margin" that cannot be removed.
	Why is there extra space before or after my table? This is often caused by invalid HTML syntax. Specifically, it is often caused by loose content within the table (i.e., content that is not inside a TD or TH element). There is no standard way to handle loose content within a table. Some browsers display all loose content before or after the table. When the loose content contains only multiple line breaks or empty paragraphs, then these browsers will display all this empty space before or after the table itself. The solution is to fix the HTML syntax errors. All content within a table must be within a TD or TH element.
	How do I create a link that sends me email? Use a mailto link, for example
	How can I have two sets of links with different colors? You can suggest this presentation in a style sheet. First, specify colors for normal links, like this: a:link {color: blue; background: white} a:visited {color: purple; background: white} a:active {color: red; background: white} Next, identify the links that you want to have different colors. You can use the CLASS attribute in your HTML, like this: <a class="example1" href="[URL]">[link text]</a> Then, in your style sheet, use a selector for links with this CLASS attribute, like this: a.example1:link {color: yellow; background: black} a.example1:visited {color: white; background: black} a.example1:active {color: red; background: black} Alternatively, you can identify an element that contains the links that you want to have different colors, like this: <div class="example2">... <a href="[URL]">[link text]</a>... <a href="[URL]">[link text]</a>... <a href="[URL]">[link text]</a>... </div> Then, in your style sheet, use a selector for links in this containing element, like this: .example2 a:link {color: yellow; background: black} .example2 a:visited {color: white; background: black} .example2 a:active {color: red; background: black}
	How can I show HTML examples without them being interpreted as part of my document? Within the HTML example, first replace the "&" character with "&" everywhere it occurs. Then replace the "<" character with "<" and the ">" character with ">" in the same way. Note that it may be appropriate to use the CODE and/or PRE elements when displaying HTML examples.
	HTML for Lists 1. Bulleted Lists: <ul> begins a bulleted, indented list. Each item in the list is then prefaced with the <li> tag. It is not necessary to insert a break at the end of each line -- the <li> tag automatically creates a new line. with <li type=disc> with <li type=square> with <li type=circle> 2. Numbered Lists: <ol> begins a numbered, indented list. Each item in the list is then prefaced with the <li> tag. You need to close the list with the </ol> tag. Note: You can expand the <ol> to specify the TYPE of numbering: <ol> 1 (decimal numbers: 1, 2, 3, 4, 5, ...) <ol type="a"> a (lowercase alphabetic: a, b, c, d, e, ...) <ol type="A"> A (uppercase alphabetic: A, B, C, D, E, ...) <ol type="i"> i (lowercase Roman numerals: i, ii, iii, iv, v, ...) <ol type="I"> I (uppercase Roman numerals: I, II, III, IV, V, ...)
	Are there any problems with using tables for layout? On current browsers, the entire table must be downloaded and the dimensions of everything in the table must to be known before the table can be rendered. That can delay the rendering of your content, especially if your table contains images without HEIGHT or WIDTH attributes. If any of your table's content is too wide for the available display area, then the table stretches to accomodate the oversized content. The rest of the content then adjusts to fit the oversized table rather than fitting the available display area. This can force your readers to scroll horizontally to read your content, or can cause printed versions to be cropped. For readers whose displays are narrower than the author anticipated, fixed-width tables cause the same problems as other oversized tables. For readers whose displays are wider than the author anticipated, fixed-width tables cause extremely wide margins, wasting much of the display area. For readers who need larger fonts, fixed-width tables can cause the content to be displayed in short choppy lines of only a few words each. Many browsers are especially sensitive to invalid syntax when tables are involved. Correct syntax is especially critical. Even with correct syntax, nested tables may not display correctly in older versions of Netscape Navigator. Some browsers ignore tables, or can be configured to ignore tables. These browsers will ignore any layout you've created with tables. Also, search engines ignore tables. Some search engines use the text at the beginning of a document to summarize it when it appears in search results, and some index only the first n bytes of a document. When tables are used for layout, the beginning of a document often contains many navigation links that appear before than actual content. Many versions of Navigator have problems linking to named anchors when they are inside a table that uses the ALIGN attribute. These browsers seem to associate the named anchor with the top of the table, rather than with the content of the anchor. You can avoid this problem by not using the ALIGN attribute on your tables. If you use tables for layout, you can still minimize the related problems with careful markup. Avoid placing wide images, PRE elements with long lines, long URLs, or other wide content inside tables. Rather than a single full-page layout table, use several independent tables. For example, you could use a table to lay out a navigation bar at the top/bottom of the page, and leave the main content completely outside any layout tables
	How do I eliminate the blue border around linked images? In your HTML, you can specify the BORDER attribute for the image: <a href=...><img src=... alt=... border="0"></a> However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.
	How can I specify colors? If you want others to view your web page with specific colors, the most appropriate way is to suggest the colors with a style sheet. Cascading Style Sheets use the color and background-color properties to specify text and background colors. To avoid conflicts between the reader's default colors and those suggested by the author, these two properties should always be used together. With HTML, you can suggest colors with the TEXT, LINK, VLINK (visited link), ALINK (active link), and BGCOLOR (background color) attributes of the BODY element. Note that these attributes are deprecated by HTML 4. Also, if one of these attributes is used, then all of them should be used to ensure that the reader's default colors do not interfere with those suggested by the author. Here is an example: <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080"> Authors should not rely on the specified colors since browsers allow their users to override document-specified colors.

		How do I change the title of a framed document? The title displayed is the title of the frameset document rather than the titles of any of the pages within frames. To change the title displayed, link to a new frameset document using TARGET="_top" (replacing the entire frameset).
		How do I link an image to something? Just use the image as the link content, like this: <a href=...><img src=... alt=...></a>
		Should I end my URLs with a slash? The URL structure defines a hierarchy similar to a filesystem's hierarchy of subdirectories or folders. The segments of a URL are separated by slash characters ("/"). When navigating the URL hierarchy, the final segment of the URL (i.e., everything after the final slash) is similar to a file in a filesystem. The other segments of the URL are similar to the subdirectories and folders in a filesystem. When resolving relative URLs (see the answer to the previous question), the browser's first step is to strip everything after the last slash in the URL of the current document. If the current document's URL ends with a slash, then the final segment (the "file") of the URL is null. If you remove the final slash, then the final segment of the URL is no longer null; it is whatever follows the final remaining slash in the URL. Removing the slash changes the URL; the modified URL refers to a different document and relative URLs will resolve differently. For example, the final segment of the URL http://www.mysite.com/faq/html/ is empty; there is nothing after the final slash. In this document, the relative URL all.html resolves to http://www.mysite.com/faq/html/all.html (an existing document). If the final slash is omitted, then the final segment of the modified URL http://www.mysite.com/faq/html is "html". In this (nonexistent) document, the relative URL all.html would resolve to http://www.mysite.com/faq/all.html (another nonexistent document). When they receive a request that is missing its final slash, web servers cannot ignore the missing slash and just send the document anyway. Doing so would break any relative URLs in the document. Normally, servers are configured to send a redirection message when they receive such a request. In response to the redirection message, the browser requests the correct URL, and then the server sends the requested document. (By the way, the browser does not and cannot correct the URL on its own; only the server can determine whether the URL is missing its final slash.) This error-correction process means that URLs without their final slash will still work. However, this process wastes time and network resources. If you include the final slash when it is appropriate, then browsers won't need to send a second request to the server. The exception is when you refer to a URL with just a hostname (e.g., http://www.mysite.com). In this case, the browser will assume that you want the main index ("/") from the server, and you do not have to include the final slash. However, many regard it as good style to include it anyway.
		How do I create a link that opens a new window? <a target="_blank" href=...> opens a new, unnamed window. <a target="example" href=...> opens a new window named "example", provided that a window or frame by that name does not already exist. Note that the TARGET attribute is not part of HTML 4 Strict. In HTML 4 Strict, new windows can be created only with JavaScript. links that open new windows can be annoying to your readers if there is not a good reason for them.
		How do I let people download a file from my page? Once the file is uploaded to the server, you need only use an anchor reference tag to link to it. An example would be: <a href="../files/foo.zip">Download Foo Now! (100kb ZIP)</a>

Tazza Tazza

Tuesday 3 January 2012

HTML

No comments:

Post a Comment