Articles From Ed Tittel
Filter Results
Article / Updated 08-11-2022
Lists are powerful tools for grouping similar elements, and lists give visitors to your site an easy way to zoom in on groups of information. Just about anything fits in a list, from sets of instructions to collections of links. Definition lists group terms and definitions into a single list and require three elements to complete the list: : Holds the list definitions (dl = definition list) : Defines a term in the list (dt = definition term) : Defines a definition for a term (dd = definition list definition) You can have as many terms (defined by ) in a list () as you need. Each term can have one or more definitions (defined by ). Creating a definition list with two items requires tags and content in the following order: First term name Content for the definition of the first item Second term name Content for the definition of the second item The following definition list includes three terms, one of which has two definitions: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Definition Lists</title> </head> <body> <h1>Markup Language Definitions</h1> <dl> <dt>SGML</dt> <dd>The Standard Generalized Markup Language</dd> <dt>HTML</dt> <dd>The Hypertext Markup Language</dd> <dd>The markup language you use to create web pages.</dd> <dt>XML</dt> <dd>The Extensible Markup Language</dd> </dl> </body> </html> The figure shows how a browser displays this HTML. If you think items in a list are too close together, you can use CSS styles to carefully control all aspects of list appearance. Note that definition lists often display differently inside different browsers, and they aren’t always handled the same by search engines or text-to-speech translators. About.com has a nice discussion of definition lists on their Web Design / HTML page. Alas, this means that definition lists may not be the best choice of formatting for lists you create (even lists of definitions). For a more detailed discussion, see the excellent coverage of this topic on Max Design.
View ArticleArticle / Updated 08-02-2022
Two big categories of strategies have been employed over the years to support web design for mobile devices: graceful degradation and progressive enhancement. Much of the web is currently nearly unusable on mobile devices because it was designed for desktop browsers and doesn't adapt well to small screens. Mobile web users are often forced to zoom, scroll, pinch, squint, and make their fingers as small as possible to use the majority of websites designed more than a couple years ago. Graceful degradation web design strategy for mobile devices The idea behind graceful degradation is to design your website primarily for desktop users, but to also design it in such a way that features of the desktop site that won't work or fit on mobile devices will still be usable — if not pretty or as functional — on mobile devices. Graceful degradation was a good design philosophy in the days before smartphones with full-featured browsers existed. However, graceful degradation does have major problems. Most importantly, graceful degradation forces the user to download your whole website, only to be shown a degraded version of it. On mobile devices, which often have limited bandwidth, this is not a good thing. Progressive enhancement web design strategy for mobile devices As a result of graceful degradation's limitations, a new strategy called progressive enhancement has become popular. Progressive enhancement starts with the very most basic website and adds on features depending on what the user's browser supports. Progressive enhancement enables websites to be usable even when using a very basic mobile phone. The mobile browser doesn't need to download a lot of CSS and JavaScript code (for example) that it doesn't know what to do with. One way to visualize progressive enhancement is as a system that adds layers onto a website depending on the size of the browser or the features the browser supports. Here's a simple example of how two style sheet links can be used to enhance a mobile webpage for larger browsers: <link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /> <link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 800px)" /> The first link includes style.css for any screen or handheld device. In this case, style.css contains styles that are optimized for a mobile device. The second link is for a style sheet called enhanced.css. If you look at the media attribute for this link, you'll notice that it has a min-width condition. The enhanced.css file will only be included if the device is larger than 800px. Inside enhanced.css, the web designer can override properties from the style.css style sheet to make the browser scale up for larger browser widths. Mobile first design solves the browser size issue Mobile first is a design philosophy that employs the ideas of progressive enhancement to build mobile websites first and then enhance them for desktop. The great thing about mobile first design is that when you build the mobile site first, as opposed to the other way around, you get a functional desktop site for free! Think about all the websites you've seen that don't fit in mobile browsers. Now, imagine visiting a mobile website with a desktop computer. A website that is optimized for a small screen will always work on a desktop browser — even if it does end up not filling the entire browser window.
View ArticleCheat Sheet / Updated 03-18-2022
Hypertext Markup Language (HTML) and the Cascading Style Sheet (CSS) language are the lifeblood of web pages. Even experienced web designers and authors need help sometimes. This Cheat Sheet provides a quick color code guide, a table of HTML5 elements, and a table of CSS properties.
View Cheat SheetStep by Step / Updated 02-09-2017
All web developers have essential sites they refer to over and over. Some resources are so good and so important that they make pretty much everyone's list, no matter what your skill level or how many years (or days?) of experience you may have. The following sites are some of the best of the best resources for any budding or experienced HTML5 developer.
View Step by StepArticle / Updated 03-26-2016
Appearing in alphabetical order is a list of all the HTML5 elements contained in the current HTML5 specification. A brief description is included as a quick reference when looking for the perfect element. Element Description A Use to create hyperlinks Abbr Use for abbreviations address Contact information Area Hyperlink in an image-map article* Provides section formatting for short expository items like articles, blogs, etc. aside* Slightly related piece of content for host page audio * Used to add audio for playback associated with web page b Bold text base Base URL bdi* Isolate text that might be formatted in a different direction from text around it bdo Use to specify the direction of text blockquote Block quotation body Document body br Line break button Creates a button. canvas* Use to define a page region in which drawing can occur caption Table title cite Cited title of a work code Code fragment col Column in a table colgroup Group of table columns command* Use to define user GUI elements datalist* Use to create a list of input elements for pull-down menus dd Description del Deleted text details* Provides additional information or controls to users on demand dfn Defining instance div Generic container dl Description list dt Term or name em Emphasis embed * Links to external application or interactive content fieldset Related form controls figcaption* Provide a caption for a figure element figure* Standalone flow content element; may be static or dynamic footer* Concluding information for a document section form Defines a user-submittable form h1 - h6 Headings head Container for metadata about the document, scripts, and styles header* Header for the document hgroup* Heading group hr Horizontal rule / thematic break html Root element i Italic text iframe Nested browsing content img Image input Input control ins Inserted text kbd User input keygen* User-accessible control to generate key pairs for security or encryption label Caption for a form control legend Explanatory caption li List item link Metadata for linking external documents map Define an image-map mark* Mark or highlight a run of text in one document, for reference in another document menu List of commands meta Metadata meter* Define a visual indicator for some type of measurement nav* Use to define a navigation bar or area in a web page noscript Define content to display in case the script can’t be run object External content ol Ordered list optgroup Define a group of options output* Some kind of output from script calculation or API call p Paragraph param Use to provide parameters to plugins pre Preformatted text progress* A visual meter for task completion (progress bar) q Quoted text rp* Use for putting parentheses around ruby annotations rt* Use to mark the text of a ruby annotation ruby* Use to annotate ideographic languages like Chinese or Japanese s Mark text as removed, with strike through formatting. samp Sample output script Embedded script section* Generic document or application section select Option selection form control small Small text source* Use to specify multiple sources for audio and video span A generic text wrapper strong Important text. Is usually formatted as bold style Presentation information, typically CSS sub Subscript text summary* Summary, legend, or caption for input details information sup Superscript text table Table tbody Group of table rows td Table cell textarea Text input area tfoot Table footer row group th Table header cell thead Table heading row group time* Value for representing date and/or time title Document title tr Table row track* Specify a supplementary media track u Underline ul Unordered list var Use to specify a mathematical or programming variable, or a placeholder video * Use to playback video content in web page wbr * Use to denote possible line break point for text flow * New in HTML5
View ArticleArticle / Updated 03-26-2016
The following table shows CSS properties that are supported by most browsers today, along with their allowed values. Some of these properties are part of CSS3 specifications and are still experimental, so be sure to check with the Can I Use site for the latest information on browser support. (For help reading the Values column of this chart, see the article “A Quick Guide to the CSS Value Definition Syntax” at www.dummies.com/extras/beginninghtml5css3.) Name Values animation || || || || || || animation-delay animation-direction normal | alternate | reverse | alternate reverse animation-duration animation-fill-mode none | forwards | backwards | both animation-iteration-count infinite | animation-name none | animation-play-state running | paused animation-timing-function backface-visibility visible | hidden background-attachment scroll | fixed | inherit background-clip border-box | padding-box | content-box | inherit background-color | inherit background-image | none | inherit background-origin border-box | padding-box | content-box | inherit background-position [ [ | | left | center | right ] [ | | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit background-size | | auto | cover | contain background [‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit border-collapse collapse | separate | inherit border-color [ ]{1,4} | inherit border-image none | border-image-outset ['sides' || 'horizontal' || 'vertical' || 'top' || 'bottom' || 'right' || 'left'] | inherit border-image-repeat ['type' || 'horizontal' || 'vertical' || 'stretch' || 'repeat' || 'round'] | inherit border-image-source none | border-image-slice [ | ]{1,4} && fill? border-image-width [ | | | auto ]{1,4} border-radius [ | ]{1,4} [ / [ | ]{1,4} ]? border-spacing ? | inherit border-style {1,4} | inherit border-top border-right border-bottom border-left [ || ||border-top-color ] | inherit border-top-color border-right-color border-bottom-color border-left-color | inherit border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius [ | ]{1,2} border-top-style border-right-style border-bottom-style border-left-style | inherit border-top-width border-right-width border-bottom-width border-left-width | inherit border-width {1,4} | inherit border [ || ||border-top-color ] | inherit bottom | | auto | inherit box-shadow none | [inset? && [ ? ? ? ] ]# break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-column break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-column caption-side top | bottom | inherit clear none | left | right | both | inherit clip | auto | inherit color | inherit columns <'column-width'> || <'column-count'> column-count | auto column-fill auto | balance column-gap | normal column-rule <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'> column-rule-color column-rule-style [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit column-rule-width | [thin | medium | thick] column-span none | all | inherit column-width | auto content normal | none | [ | | | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit counter-increment [ ? ]+ | none | inherit counter-reset [ ? ]+ | none | inherit cursor [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit direction ltr | rtl | inherit display inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit empty-cells show | hide | inherit float left | right | none | inherit font-family [ [ | ] [,| ]* ] | inherit font-size | | | | inherit font-style normal | italic | oblique | inherit font-variant normal | small-caps | inherit font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit font [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]?‘ font-size’ [ / ‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit height | | auto | inherit @keyframes [ [ from | to | ] [, from | to | ]* block ]* left | | auto | inherit letter-spacing normal | | inherit line-height normal | | | | inherit list-style-image | none | inherit list-style-position inside | outside | inherit list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit list-style [ ‘list-style-type’ || ‘list-style-position’ ||list-style-image ] | inherit margin-right margin-left | inherit margin-top margin-bottom | inherit margin {1,4} | inherit max-height | | none | inherit max-width | | none | inherit min-height | | inherit min-width | | inherit opacity | inherit orphans | inherit outline-color | invert | inherit outline-style | inherit outline-width | inherit outline [ ‘outline-color’ || ‘outline-style’ || outline-width] | inherit overflow visible | hidden | scroll | auto | inherit overflow-wrap normal | break-word | inherit overflow-x visible | hidden | scroll | auto | inherit overflow-y visible | hidden | scroll | auto | inherit padding-top padding-right padding-bottom padding-left | inherit padding {1,4} | inherit page-break-after auto | always | avoid | left | right | inherit page-break-before auto | always | avoid | left | right | inherit page-break-inside avoid | auto | inherit perspective none | perspective-origin [ | | left | center | right | top | bottom] | [ [ | | left | center | right ] && [ | | top | center | bottom ] ] position static | relative | absolute | fixed | inherit quotes [ ]+ | none | inherit right | | auto | inherit table-layout auto | fixed | inherit text-align left | right | center | justify | inherit text-decoration none | [ underline || overline || line-through || blink ] | inherit text-indent | | inherit text-transform capitalize | uppercase | lowercase | none |inherit top | | auto | inherit transform none | + transform-origin [ | | left | center | right | top | bottom] | [ [ | | left | center | right ] && [ | | top | center | bottom ] ] ? transform-style flat | preserve-3d transition [ none | ] || || || transition-delay transition-duration transition-timing-function transition-property none | # [ ‘,’ # ]* unicode-bidi normal | embed | bidi-override | inherit vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit visibility visible | hidden | collapse | inherit white-space normal | pre | nowrap | pre-wrap | pre-line |inherit widows | inherit width | | auto | inherit word-spacing normal | | inherit z-index auto | | inherit
View ArticleArticle / Updated 03-26-2016
The following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website. The colors are shown with their corresponding RGB hexcode values along with a representative color swatch. Name Hexcode Aqua #00FFFF Black #000000 Blue #0000FF Fuchsia #FF00FF Gray #808080 Green #008000 Lime #00FF00 Maroon #800000 Navy #000080 Olive #808000 Purple #800080 Red #FF0000 Silver #C0C0C0 Teal #008080 White #FFFFFF Yellow #FFFF00
View ArticleArticle / Updated 03-26-2016
The CSS specifications, created by the World Wide Web Consortium (W3C), define the syntax and possible values of all CSS properties. To make definitions as precise as possible, the W3C uses a formal system called CSS value definition syntax. Although the definition syntax defines possible values very precisely, reading the syntax that CSS value definitions are written in can be difficult without a key. In reality, however, reading such syntax is quite simple. For example, here's the syntax for the value of the margin shortcut property: [ <length> | <percentage> | auto ]{1,4} And here are valid uses of the margin property: margin: 0px; margin: 1px 10%; margin: 1px 0px auto; margin: 1px 0px 1px 0px; Even if you didn't know what the margin property or each of these examples does, you could figure out how to read the syntax definition just by looking at the definition and then examining the examples. Here’s a quick guide to reading CSS value definition syntax: When a keyword appears without quotes, it indicates that the word should be used as it is, such as in the case of the auto keyword in the above example. Basic CSS data types appear between < and >. For example, , , and are basic types that are defined elsewhere. When you see one of these types, you know that any valid value in that data type may be used. When you see two ampersands together (&&), it means that the values separated by this symbol are both mandatory, but, they may appear in any order. Brackets ([]) group values together into one. Values separated by || are optional. However, one of them must appear, and they may appear in any order. The | character means that the options are exclusive — exactly one of them must appear. The asterisk (*) indicates that a value may appear zero, once, or several times. The plus symbol (+) means that a value may appear once or several times. The question mark (?) indicates that a value is optional. If it appears, it may only appear once. When you see , it means that a fixed length value such as 10px is allowed. When you see , it means that a percentage value such as 10 percent is allowed. When you see numbers in brackets such as {1,4}, it indicates that the property must appear the number of times specified by the first number. However, it can appear as many times as indicated by the second number. In the case of {1, 4}, the property must appear once but may appear as many as four times. The # symbol indicates that a value may be repeated once or several times. Each value must be separated by a comma.
View ArticleArticle / Updated 03-26-2016
HTML meta elements provide information about an HTML document. A web page may have many meta elements, or very few (and sometimes none at all). When present, they must always appear in the document head. This article explains some of the uses of the meta element. meta format and attributes Here's a sample meta element: <meta name="description" content="This is a document about the meta element."> Notice that the meta element is empty, and has no closing tag. In HTML5, there's no need to close meta. This is one way in which the HTML5 meta tag is simpler than the XHTML meta tag. The four attributes defined for meta are name. When present, the name attribute gives a name for the metadata. http-equiv. Used for binding values to the HTTP header of a document when it is served from a web server. content. Contains the value associated with the http-equiv or name attribute. charset. Defines the set of characters used in the document. meta names defined by HTML5 The HTML5 specification mentions several possible values for the name attribute. These are application-name. Specifies the name for the web application that the document represents. For example, if you created a web application called "Taco-matic," you could use the application-name attribute on pages within that application like this: <meta name="application-name" content="Taco-matic"> author. Gives the name of one of the authors of the document. If the document has multiple authors, the document can have multiple author meta elements. description. Describes the content of the document. You can put anything you like in the description meta element, but there can only be one such element per document. generator. If the document is created using some sort of HTML page-creation software (such as Dreamweaver or Aptana Studio), the generator meta element identifies which one was used. keywords. Contains a comma-separated list of terms relevant to the current page. In addition to these name values, it's also possible for anyone who has a need to propose and register their own name values. The charset meta element Perhaps the most common meta element attribute is charset. Introduced with HTML5, charset provides a quick and easy way to specify to the browser what character encoding was used to author a page. You should always include a charset meta tag in every HTML5 document you write. Here's what it looks like: <meta charset="utf-8"> Character encodings define the mappings between characters that are displayed on the screen and bits that are stored on the computer. Different character encodings exist for different alphabets and languages (Chinese, Japanese, Russian, and English for example) and other character encodings are more universal. The most common character encoding is known as UTF-8, which can encode over 1 million different characters. Using http-equiv meta elements You can use the http-equiv meta element to send information to the server about how a web page should be served. In HTML versions that preceded HTML5, the most common use for http-equiv was to specify the character encoding for a document. Because this has been replaced with the charset attribute, http-equiv is less commonly used (and encountered) in HTML5. Nevertheless, there are a couple things that you can do with http-equiv. Most common is the refresh value, which tells the browser to reload the page after a specified number of seconds. <meta http-equiv="refresh" content="30"> You can also use http-equiv="refresh" to redirect a user to another URL after a specified number of seconds has elapsed. For example, the following tag causes the browser to wait 30 seconds after the page containing it loads and then to load http://www.example.com: <meta http-equiv="refresh" content ="30;url=http://www.example.com"> For more information on the meta element in HTML5, go to w3schools.com.
View ArticleArticle / Updated 03-26-2016
One of the exciting new parts of HTML5 is the canvas element. Using canvas, you can draw bitmap graphics inside the browser window. What's even more impressive and useful is that you can write a program that will draw graphics on the fly inside the browser window. How does canvas work? The canvas element creates a container, or canvas, upon which you can draw graphics. A simple example of a canvas element that creates a 300-pixel square drawing area looks like this: <canvas id="myDrawingArea" width="300" height="300"></canvas> Once you have the canvas, you must write a script, using JavaScript, to put things inside the drawing area. Images drawn inside a canvas element are very different from the static images that are traditionally used in web pages, where you must create and upload the graphics to the server before the browser loads them into web pages using the img tag. Images loaded with the img tag can't be changed after they're displayed in the browser. Web developers have some ability to move or resize the images, but if it's a picture of your cat, for example, there's no way to transform it into a picture of your bike. With graphics, the situation is very different. Because the script is doing the drawing after the web page loads, the graphic can be anything at all, and it can be drawn very fast. canvas works extremely well for drawing charts and graphs, but it can also be used to manipulate photographs in real-time, or even to create animation or work with video files. Here's a simple example of a JavaScript function that will draw a solid rectangle when used from inside an HTML document: function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); } } What is canvas good for? Because of its ability to manipulate graphics very quickly using programs that can be controlled with user input, canvas graphics are ideal for gaming. Some of the most popular games created with canvas include Sinuous is a simple, but addictive, game where you control a pointer that you move around to avoid red dots and hit good dots. Canvas Rider is a beautiful 2D scrolling game where you control a stick figure on a bike, riding over hundreds of user-contributed tracks. ZTYPE is a game where you must type words as they are falling towards you. As you type the letters in each word, they are shot out of the sky. canvas is also good for creating graphs and charts that are updated in real-time using live data, or for enabling your users to manipulate graphics over the web. The potential uses for HTML5 canvas are limited only by your imagination—and by your programming skills, of course. As of August 2013, the canvas element is supported by most modern browsers, including IE9 (and higher versions), Firefox, Chrome, Opera, and Safari. Please be aware, however, that users running older or less common web browsers will probably be unable to see or interact with canvas-based graphics.
View Article