Sue Jenkins

Article / Updated 05-31-2022

For each web coding issue identified by a validator, you need to determine what course of action to take. Although some culprits that repeatedly crop up are easy to fix, such as missing alt text and </span> tags, you’re bound to find coding issues that completely baffle and stump you. For instance, if you get an error message that reads <span class="code">XML Parsing Error: Opening and ending tag mismatch: br line 52 and body</span>, it might be difficult to figure out what that means, let alone why it was caused and how you should fix it. As a strategy then, try to fix the issues within the code from the top down, as they’re listed in the validation results, because sometimes fixing one issue resolves another. With the XML parsing error, that issue might disappear when you correct for an omitted closing element on a <span class="code"><br /></span> tag listed earlier in the error results. The best way to find out how to code better and make fewer mistakes before validation testing is to make lots of honest mistakes and figure out how to correct them on your own. Most often, you can fix noncompliant code by hand or with the help of a good HTML editor. To help you identify some of the more common coding mistakes, here several code issues along with suggestions about how to fix them. <table> <tbody> <tr> <th>Problem</th> <th>Solution</th> </tr> <tr> <td> <pre class="code">alt</pre> text attribute missing from <pre class="code">&lt;img&gt;</pre> tag</td> <td>Add the alternative text attribute, either with or without a description, as in <pre class="code">&lt;img src="images/logo.gif" width="150" height="150" alt="Pete’s Pizza"&gt; &lt;img src="images/flourish.gif" width="200" height="150" alt=""&gt;</pre> .</td> </tr> <tr> <td> <pre class="code">&lt;noscript&gt;</pre> tags missing from code</td> <td>Add <pre class="code">&lt;noscript&gt;</pre> tags below each instance when JavaScript is present in in-line JavaScript or at the end of the content before the closing body tag. Between the <pre class="code">&lt;noscript&gt;</pre> tags, insert HTML content (text, graphics, media files, and so on) that describes the function of the JavaScript and, when appropriate, how visitors can access the information revealed by it, as shown here: <pre class="code">&lt;script language="JavaScript" src="bookmark.js" type="text/javascript"&gt;&lt;/script&gt;&lt;noscript&gt;The JavaScript used on this page provides a quick link that allows visitors to automatically bookmark this page. As an alternative, please use your browser’s Bookmark This Page feature.&lt;/noscript&gt;</pre> </td> </tr> <tr> <td>Flashing or flickering element(s) detected, such as animated GIFs, Java applets, and other multimedia plug-ins</td> <td>Adjust the speed of any animations to avoid causing the screen to flicker with a frequency between 2 Hz and 55 Hz. Animations that exceed these two measures may cause seizures in visitors with photosensitive epilepsy.</td> </tr> <tr> <td>No <pre class="code">DOCTYPE</pre> specified</td> <td>Add a valid <pre class="code">DOCTYPE</pre> above the opening <pre class="code">&lt;head&gt;</pre> tag.</td> </tr> <tr> <td>No HTTP charset parameter specified</td> <td>This special meta tag specifies the character set used in the HTML code. Some HTML editors include it automatically when generating new blank web pages. If validation finds that this tag is missing from your HTML or XHTML code, insert the following code by hand: <pre class="code">&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;</pre> . For HTML5, insert <pre class="code">&lt;meta charset="utf-8"&gt;</pre> .</td> </tr> <tr> <td>No <pre class="code">&lt;title&gt;</pre> tag specified</td> <td>Add a unique title between <pre class="code">&lt;title&gt;</pre> tags in the head area on each page.</td> </tr> <tr> <td>No <pre class="code">&lt;meta&gt;</pre> tags specified</td> <td>Add meta keywords and meta description tags to the head of each page. These can be identical on every page on the site. If desired, you may also add additional meta tags as needed.</td> </tr> <tr> <td>No Robots tags specified</td> <td>Add the <pre class="code">Robots</pre> <pre class="code">&lt;meta&gt;</pre> tag in the head of the page to instruct web spiders and robots whether to index the page and follow any hyperlinks, such as <pre class="code">&lt;meta name="Robots" content="All"&gt;</pre> .</td> </tr> <tr> <td>Deprecated <pre class="code">&lt;font&gt;</pre> tags detected</td> <td>Move all the presentation markup of the HTML (page, fonts, tables, links, and so on) to an external CSS file and remove all <pre class="code">&lt;font&gt;</pre> tags and HTML and inline formatting attributes.</td> </tr> <tr> <td>Deprecated table height attribute detected</td> <td>Control table cell heights, when necessary, with CSS styles.</td> </tr> <tr> <td>Style attributes detected in the opening <pre class="code">&lt;body&gt;</pre> tag</td> <td>Move <span class="code">body</span> attributes, like margin attributes and background page color, to a BODY tag redefine style in an external CSS file.</td> </tr> <tr> <td> <pre class="code">type</pre> attribute not specified for JavaScript or CSS</td> <td>Add the <pre class="code">type="text/css"</pre> attribute for <pre class="code">&lt;style&gt;</pre> tags and the <pre class="code">type="text/javascript"</pre> attribute for <pre class="code">&lt;script&gt;</pre> tags: <pre class="code">&lt;style type="text/css" &gt;&lt;script type="text/javascript"&gt;</pre> .</td> </tr> <tr> <td>Entity name used instead of entity number</td> <td>Change the entity name to an entity number, such as using <pre class="code">$#169;</pre> instead of <pre class="code">&copy;</pre> to create the copyright symbol (c).</td> </tr> <tr> <td>No background color attribute was specified for a CSS style that specifies text color</td> <td>Provide each style that contains a text <pre class="code">color</pre> attribute with an attending background <pre class="code">color</pre> attribute. The background color should match, or closely match, the background color upon which the text will display on.</td> </tr> </tbody> </table> When you’re finished identifying and adjusting all the noncompliant code identified by the validation tools, and have fixed everything that needed fixing, move on to the retesting and acceptable failure phase of the testing process.

Cheat Sheet / Updated 03-27-2016

Whether you're looking to design your own website or are a new web designer who plans to make a career of this exciting profession, you might be feeling overwhelmed. This handy guide to HTML/HTML5 and Cascading Style Sheets (CSS) gets you started on the right path.

Step by Step / Updated 03-27-2016

If you’re a Dreamweaver user, you almost don’t have to think about the document type definition (DTD) when creating a web page because the program automatically inserts the selected DOCTYPE and DTD into the code each time you create a new document through the New Document dialog box. Of course, you have other ways to create a new file in Dreamweaver, and in those cases, the program’s default DTD, as specified in the program’s preferences, will be automatically inserted. No matter which DTD you select, Dreamweaver automatically writes the appropriate DTD-specific code. For example, if you choose to build pages using the XHTML 1.0 transitional DTD, Dreamweaver’s code editor automatically writes XHTML-compliant code. Likewise, when you choose HTML5, Dreamweaver writes HTML5-compliant code. To select the appropriate DTD for your new documents in Dreamweaver, follow these steps:

Step by Step / Updated 03-27-2016

Most web code editors have a command that automatically cleans up the common errors in your code. For instance, the Clean Up Word HTML/XHTML command in Dreamweaver is a must for any webpage that includes content that was copied from Word or any other Microsoft documents. This is important because Microsoft files often embed extra markup when pasted into a web page to make the file’s content retain its formatting. Unfortunately, on the web, all this extra Microsoft HTML code is unnecessary. Therefore, you must use a tool like this to strip that extra markup out of your pages to ensure that your code — not Microsoft’s — dictates the look of the site within the browser. To access the Clean Up Word feature in any open document in Dreamweaver, follow these steps:

Step by Step / Updated 03-27-2016

If you chose to use Dreamweaver to create your website, you have a number of ways to transfer files to your webpage through the Files panel. The smartest way to transfer files is to use the expanded Files panel so that you can view both the local and remote files at the same time, much like a standalone FTP client. To transfer files to the remote server with Dreamweaver’s expanded Files panel, follow these steps:

Article / Updated 03-26-2016

Most CSS styles fall into nine basic style and positioning categories. This list can help you keep track of all the cool things you can do with CSS: TYPE: Font family, size, style, weight, color, decoration BACKGROUND: Background color, image position, and repeat BLOCK: Word and letter spacing, text alignment, block display BOX: Width, height, padding, and margin of an element, float, clear BORDER: Border style, width, color for up to four sides of an element LIST: List styles, custom bullets, bullet position POSITIONING: Position, size, visibility, z-index, placement, and clip of elements EXTENSIONS: Special cursor and filter effects, page break options TRANSITION: Animate objects using properties, duration, delay, and timing

Article / Updated 03-26-2016

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics — the style and positioning — of elements within a web document written in a simple markup language. CSS syntax is made up of two parts: the selector and the declaration block inside curly brackets. Inside the declaration block you can have multiple declarations. Each declaration is made of two parts — the property and the value: p {font-face: Georgia, Tahoma; color: #ffcc00; } In this example: p is the selector. {font-face: Georgia, Tahoma; color: #ffcc00; } is the declaration block. font-face: Georgia, Tahoma; and color: #ffcc00; are separate declarations. font-face is a property and Georgia, Tahoma is its value. color is a second property and #ffcc00; is its value.

Article / Updated 03-26-2016

If you're designing websites, you're probably going to want to use standards-compliant HTML5 markup — after all, you need to use some type of markup language so that your websites can communicate, right? The table here gives you a rundown of the most popular HTML5 tags and tells you what each does. Tag Description Defines a comment in the HTML code Defines the document type Defines an anchor Defines an article Defines content that sides next to other content Defines a sound Defines a long quotation Defines the body element Inserts a single line break Defines an area where graphics can be drawn with JavaScript Defines a table caption Defines a citation Defines computer code text Defines a details section that can be shown or hidden Defines a section in a document Defines emphasized (italic) text Defines a space to insert media files like plug-ins or applications Defines content like photos, illustrations, and diagrams, etc. Defines the caption for a figure Defines a footer for a section or the entire document Defines a form to Defines header 1 to header 6 Defines information about the document Defines a header for a section or the entire document Defines a horizontal rule Defines an HTML document </span></td> <td>Defines an inline subwindow (frame)</td> </tr> <tr> <td><span class="code"><img></span></td> <td>Defines an image</td> </tr> <tr> <td><span class="code"><input></span></td> <td>Defines an input field</td> </tr> <tr> <td><span class="code"><label></span></td> <td>Defines a label for a form control</td> </tr> <tr> <td><span class="code"><li></span></td> <td>Defines a list item</td> </tr> <tr> <td><span class="code"><link></span></td> <td>Defines a resource reference</td> </tr> <tr> <td><span class="code"><map></span></td> <td>Defines an image map</td> </tr> <tr> <td><span class="code"><meta></span></td> <td>Defines meta information</td> </tr> <tr> <td><span class="code"><nav></span></td> <td>Defines a set of navigation links</td> </tr> <tr> <td><span class="code"><noscript></span></td> <td>Defines a noscript section</td> </tr> <tr> <td><span class="code"><ol></span></td> <td>Defines an ordered list</td> </tr> <tr> <td><span class="code"><p></span></td> <td>Defines a paragraph</td> </tr> <tr> <td><span class="code"><pre></span></td> <td>Defines preformatted text</td> </tr> <tr> <td><span class="code"><script></span></td> <td>Defines a script</td> </tr> <tr> <td><span class="code"><section></span></td> <td>Defines a section within a document</td> </tr> <tr> <td><span class="code"><select></span></td> <td>Defines a selectable list</td> </tr> <tr> <td><span class="code"><source></span></td> <td>Defines a media resource for audio or video</td> </tr> <tr> <td><span class="code"><span></span></td> <td>Defines a section in a document</td> </tr> <tr> <td><span class="code"><strong></span></td> <td>Defines strong (bold) text</td> </tr> <tr> <td><span class="code"><style></span></td> <td>Defines a style definition</td> </tr> <tr> <td><span class="code"><sub></span></td> <td>Defines subscripted text</td> </tr> <tr> <td><span class="code"><summary></span></td> <td>Defines a heading for a <details> element</td> </tr> <tr> <td><span class="code"><sup></span></td> <td>Defines superscripted text</td> </tr> <tr> <td><span class="code"><table></span></td> <td>Defines a table</td> </tr> <tr> <td><span class="code"><td></span></td> <td>Defines a table cell</td> </tr> <tr> <td><span class="code"><textarea></span></td> <td>Defines a text area</td> </tr> <tr> <td><span class="code"><th></span></td> <td>Defines a table header</td> </tr> <tr> <td><span class="code"><time></span></td> <td>Defines the date or time</td> </tr> <tr> <td><span class="code"><title></span></td> <td>Defines the document title</td> </tr> <tr> <td><span class="code"><tr></span></td> <td>Defines a table row</td> </tr> <tr> <td><span class="code"><track></span></td> <td>Defines the text tracks for audio or video</td> </tr> <tr> <td><span class="code"><ul></span></td> <td>Defines an unordered list</td> </tr> <tr> <td><span class="code"><video></span></td> <td>Defines a movie file or video</td> </tr> </tbody> </table>

Article / Updated 03-26-2016

Cascading Style Sheets (CSS) fall into four different types (or styles). When you understand how these four different types work, you'll be styling your web pages more efficiently. To keep your CSS organized, use CSS comment tags to identify the different sections of CSS within your style sheet. For instance, you may have a section for the header styles, for the sidebar styles, for the navigation styles and for the footer styles. CSS comments use the /* … */ syntax: /* This is a comment */ Class style (aka custom style) Class styles can be selectively applied to any HTML element using the class="customname" syntax. For example, you could create a class style called highlight that has a bright yellow background color: .highlight { background-color: #FFFF33; } To apply this style to any content, you'd simply use the class attribute: <p <b>class=</b><b>"</b><b>highlight</b><b>"</b><b>></b>This is really important</p> ID ID styles are automatically applied to one HTML element on the page with the same ID. For example, if you want to add a tag to hold your sidebar content, you'd give that container a semantic ID such as sidebar: #sidebar { background-color:#66CCFF; } Your code might then look something like this: <div <b>id=</b><b>"</b><b>sidebar</b><b>"</b>> <h1>Custom Web Design Services</h1> <p> … </p> </div> Tag Tag styles let you automatically redefine the style and positioning of any existing HTML tag, such as body, p, h1, or li. For instance, you could set the font styles for all your tags throughout your entire site or within a particular section: h1 { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: bold; color: #8c9292; text-transform: uppercase; } Compound Compound styles are also automatically applied to an element based on its location within the page, such as all tags inside the with the ID of sidebar, which sits inside a parent container with the ID of wrapper: #wrapper #sidebar h1 { color: # CC3300; font-family: "Times New Roman",Georgia,Serif; }

Article / Updated 03-26-2016

You can use Cascading Style Sheets (CSS) in your web pages in three ways: external, internal, and inline. Which you use is dependent on how you want your design to work. External CSS External is the preferred way of using CSS. Ideally, you place all your CSS styles into an external CSS file, and then add a link to it in all of your site’s pages. This is the most efficient way to work, as all the pages will rely upon a single CSS file, which makes your job easier when it comes to editing your styles across an entire website. A link to an external CSS file is added to the code on each page before the closing tag: <head> <strong><link rel="stylesheet" type="text/css" href="stylesheet.css" media="all"></strong> </head> To import an external style sheet instead of linking to one, insert style and comment tags before the closing tag: <head> <style type="text/css" media="all"> <!-- <strong>@import url("stylesheet.css");</strong> --> </style> </head> Internal CSS Internal is good for single-page use and during development, but not for finished websites. Sometimes designers include internal CSS on a single page to override any links to external CSS files. To add CSS internally to a single page, place your CSS styles between a pair of </span> tags before the closing <span class="code"></head></span> tag on your page:</p> <pre class="code">&lt;strong&gt;&lt;style type="text/css"&gt;&lt;/strong&gt; body { background-image: url("images/pattern.gif"); } p { font-family: verdana, arial, sans-serif; } &lt;strong&gt;&lt;/style&gt;&lt;/strong&gt;</pre> <h2 id="tab3" >Inline CSS</h2> <p>Occasionally, you may need to override both external and internal CSS styles using inline CSS. Inline is not advised unless it is the best or only way to apply a style to an object or element in the HTML. To add CSS inline with your code, add the style definition to your opening HTML tag:</p> <pre class="code">&lt;p &lt;strong&gt;style="color: #3399CC; font-size: 18px;"&lt;/strong&gt;&gt;The Solar System&lt;/p&gt;</pre>