Cheat Sheet

HTML, CSS, and JavaScript Mobile Development For Dummies Cheat Sheet

From HTML, CSS, and JavaScript Mobile Development For Dummies

By William Harrel

Using Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) along with JavaScript allows you to create sites adapted for the emerging mobile-technology market. These technologies have advanced quickly over the past decade and are now able to support nearly every web feature supported by desktop computers, but designing or adapting existing sites to fit the parameters of the latest smartphones, handheld computers, and tablets can be tricky business. This Cheat Sheet provides tips on integrating CSS with HTML, a list of handy HTML tags, and many helpful online resources.

Setting Up CSS in HTML

CSS is a style sheet language used to define the appearance and formatting of a document written in a markup language — often HTML. A style in this sense is a set of text-formatting instructions, such as font, color, size, and so on. Because CSS instructions exist separately from HTML code, you can apply the same set of instructions to every page in your website, or to more than one website. Here’s a list of common HTML instructions used in conjunction with CSS:

  • To link within HTML to an external style sheet, use the following structure:

    <head>
          <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>
  • To embed styles within an HTML page:

    <style type="text/css">
          styles ...
    </style>
  • Using a body style to design the overall page:

    body {
          margin:0;
          padding:8px 4px 12px 4px;
          color:#ffbf11;
          background:#000000 url(images/space.gif);
    }
  • To use a class selector in HTML:

    <p class="caption">This is a caption paragraph</p>
  • To use an ID selector in HTML:

    <div id="sidemenu"> ...menu links... </div>
  • Common type selectors:

    body {...}
    p {...}
    td {...}
    ul {...}
  • Common class selectors:

    .caption {...}
    .banner {...}
    .main {...}
  • Common ID selectors:

    #mainParagraph {...}
    #sidemenu {...}
    #footer {...}

Common HTML Tags

The following table lists some of the most common HTML tags that you’ll use to build your website. After you’ve worked in HTML for a little while, these tags will become second nature to you.

Tag Name Code Example
<a> anchor <a href=http://www.yourdomain.com/>Click Here</a>
<b> bold <b>Bold Type</b>
<body> body of document <body>All of the contents of your Web page.</body>
<br> line break Soft line break<br />Soft line
break
<center> center <center>Center your content</center>
<font> font <font face=Times New Roman>Example</font>
<form> form <form action=mailto:you@yourdomain.com>
Name: <input name=Name value= size=10 />
</form>
<h1> heading 1 <h1>Heading 1 Example</h1>
<h2> heading 2 <h2>Heading 2 Example</h2>
<h3> heading 3 <h3>Heading 3 Example</h3>
<head> heading of document <head>Contains elements describing the document</head>
<html> hypertext markup language <html><head><meta><title>Title of your
webpage</title></head><body>Webpage
contents</body>
</html>
<i> italic <i>Italic
Type
</i>
<li> list item <ol type=i>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<meta> meta <meta name=Description content=Description of your site />
<meta name=keywords content=keywords describing your site />
<ol> ordered list <ol>
<li>List item
1</li>

<li>List item
2</li>

<li>List item
3</li>

<li>List item
4</li>

</ol>
<p> paragraph <p> This creates a line break and a space between lines.</p>
<title> document title <title>Title of your webpage</title>
<ul> unordered list <ul>
<li>List item
1</li>

<li>List item
2</li>

</ul>

HTML References and Resources

You can’t go on the Internet without seeing HTML in action, but the Internet is a great place for finding out about HTML, too. The following table lists some valuable online resources for more information about HTML.

Name Description
HTML Tutorial This W3Schools site provides a complete tutorial and references
on how to use all HTML tags.
W3C Markup Validation
Service
Use this site to check the validity of your HTML. The validator
also checks tags against doctype.
Index
of Elements
Index of all HTML elements with links describing how to use
them.
HTML 4.0
Guidelines for Mobile Access
W3C guidelines for creating HTML4 websites.
HTML5 Overview of HTML5 guidelines.
HTML5 Demos and
Examples
Several good examples of how to use HTML5 for specific
applications, complete with browser compatibility.
HTML5 Tag
Reference
A complete reference of HTML5 tags and how to use them.
The Great
WebKit Comparison Table
A chart of WebKit HTML tags and which devices support
them.

CSS References and Resources

Cascading Style Sheets (CSS) give you more flexibility in your website’s formatting and layout, as well as letting you make global changes to all the pages on your site. The following table lists some valuable online resources for more information about CSS.

Name Description
CSS
Tutorial
This W3Schools site provides a complete tutorial and references
on how to use all CSS elements.
Cascading Style Sheets
Home Page
W3C’s CSS home page with links to gobs of information on CSS
and how to use it.
Cascading Style
Sheets
The Web Design Group to portal information on using CSS.
Dynamic Drive CSS
Library
A collection of CSS examples for creating menus, gradients and
several other objects.
Learn to
work with CSS
Adobe’s guide to using CSS with Dreamweaver.
CSS
Reference
A complete reference of CSS elements and how to use them.
CSS
Examples
This W3Schools site offers multiple examples of creating
objects with CSS.
CSS
Cheat Sheet (V2)
A quick reference guide for CSS, listing selector syntax,
properties, units, and other useful bits of information.

JavaScript References and Resources

JavaScript lets you to functionality to a web page that simple HTML just cannot do. The following table lists some valuable online resources for more information about using JavaScript on your website.

Name Description
JavaScript
Tutorial
This W3Schools site provides a complete tutorial and references
on how to use all JavaScript.
The Definitive JavaScript
Reference
This site contains links to just about everything you ever
wanted to know about JavaScript.
JavaScript Kit Here’s another site with tons of information about
JavaScript.
JavaScript a
tutorial “for the TOTAL non-programmer”
An intro to JavaScript for non-programmers.
JavaScript
Reference
A quick reference to JavaScript commands.
JavaScript
and HTML DOM Reference
A W3Schools reference to using JavaScript at the DOM
level.

JavaScript Cheat Sheet
A quick reference guide for JavaScript, listing methods and
functions, and including a guide to regular expressions and the
XMLHttpRequest object.
JavaScript
Introduction
A W3School’s introduction to JavaScript—how to get
started.