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 |
| <b> | bold | <b> |
| <body> | body of document | <body> |
| <br> | line break | Soft line break break |
| <center> | center | <center> |
| <font> | font | <font |
| <form> | form | <form Name: <input name= </form> |
| <h1> | heading 1 | <h1> |
| <h2> | heading 2 | <h2> |
| <h3> | heading 3 | <h3> |
| <head> | heading of document | <head> |
| <html> | hypertext markup language | <html> webpage</title></head><body>Webpage contents</body> |
| <i | italic | < Type</ |
| <li> | list item | <ol type= <li> <li> <li> <li> </ol> |
| <meta> | meta | <meta <meta |
| <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> |
| <title> | document title | <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. |
| Overview of HTML5 guidelines. | |
| HTML5 Demos and Examples | Several good examples of how to use HTML5 for specific applications, complete with browser compatibility. |
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. |
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. |
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. |
>
>
dummies
Source:http://www.dummies.com/how-to/content/html-css-and-javascript-mobile-development-for-dum.html
No comments:
Post a Comment