Without JavaScript you can do a lot. Using Hypertext Markup Language (HTML) and Cascading Style Sheets(CSS). HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
Using CSS you can present that content in great ways, it helps you to keep the information content of a document separate from the details of how to display it. The details of how to display the document are known as its style. You keep the style separate from the content so that you can:
Using CSS you can present that content in great ways, it helps you to keep the information content of a document separate from the details of how to display it. The details of how to display the document are known as its style. You keep the style separate from the content so that you can:
- Avoid duplication,
- Make maintenance easier
- Use the same content with different styles for different purposes
No matter how you dress it up, though, HTML and CSS can only achieve the static beauty of the Webpage. With JavaScript, you can be used in a huge variety of applications. Unlike PHP or SSI scripts, JavaScript can be inserted into any web page regardless of the file extension. JavaScript can also be used inside scripts written in other languages such as Perl and PHP.
Three Layers
Keeping different kinds of code as separate as possible is a good idea in any kind of programming. It makes it easier to reuse portions of that code in future projects, it reduces the amount of duplicate code you end up writing, and it makes it easier to find and fix problems months and years later.
When it comes to the Web, there’s one more reason to keep your code separate: it lets you cater for the many different ways in which people access web pages. Depending on your audience, the majority of your visitors may use well-appointed desktop browsers with cutting-edge CSS and JavaScript support, but many might be subject to corporate IT policies that force them to use older browsers, or to browse with certain features (like JavaScript) disabled.
The key to accommodating the broadest possible range of visitors to your site is to think of the Web in terms of three layers, which conveniently correspond to the three kinds of code I mentioned earlier. These layers are illustrated in Figure:
When building a Website, we work through these layers from the bottom up:
- We start by producing the content in HTML format. This is the base layer, which any visitor using any kind of browser should be able to view.
- With that done, we can focus on making the site look better, by adding a layer of presentation information using CSS. The site will now look good to users able to display CSS styles.
- Lastly, we can use JavaScript to introduce an added layer of interactivity and dynamic behavior, which will make the site easier to use in browsers equipped with JavaScript.
If we keep the HTML, CSS, and JavaScript code separate, we’ll find it much easier to make sure that the content layer remains readable in browsing environments where the presentation and/or behavior layers are unable to operate. This “start at the bottom” approach to web design is known in the trade as progressive enhancement. Let’s look at each of these layers in isolation to see how we can best maintain this separation of code.
HTML for Content
HTML is simple and logical. The browser reads HTML like you read English: from the top down and from left to right. Thus, an simple HTML document begins with what should come first and ends with what should come last.
The first thing you need to do is to tell the browser that you will “talk” to it in the language HTML. This is done with the tag
<html> (no surprises there). So before you do anything else type “<html>” in the first line of your document in Notepad. <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don’t forget the HTML close tag now type “</html>” a couple of lines down and write the rest of the document between <html> and</html>.
The next thing your document needs is a “head”, which provides information about your document, and a “body”, which is the content of the document. Since HTML is nothing if not logical, the head (
<head> and </head>) is on top of the body (<body> and </body>).
First your document should look like this:
<html>
<head>
</head>
<body>
</body>
</html>
Add content to the Website:
your HTML document has two parts: a head and a body. In the head section you write information about the page, while the body contains the information that constitutes the page.
For example, if you want to give the page a title which will appear in the top bar of the browser, it should be done in the “head” section. The element used for a title is
title. I.e. write the title of the page between the opening tag <title> and the closing tag </title>: <title>My first website</title>
Note that this title will not appear on the page itself. Anything you want to appear on the page is content and must therefore be added between the “body” tags.
As promised, we want the page to say “Hurrah! This is my first website.” This is the text that we want to communicate and it therefore belongs in the body section. So in the body section, type the following:
<p>Hello...! This is my first website.</p>
The p in
<p> is short for “paragraph” which is exactly what it is – a text paragraph.
Your HTML document should now look like this:
<html>
<head>
<title>My first website </title>
</head>
<body>
<p>Hello! This is my website.</p>
</body>
</html>
Save the document as PageName.htm or PageName.html and open in any WebBrowser ,
The Website will look like this:
CSS for Presentation
Obviously, if the content of a page should be entirely contained within its HTML code, its style—or presentation—should be fully described in the CSS code that’s applied to the page. With all the work you’ve done to keep your HTML free of presentational code and rich with semantics, it would be a shame to mess up that file by filling it with snippets of CSS. As you probably know, CSS styles can be applied to your pages in three ways:
1. inline styles
<a href="MyPage.html" style="color: red;">
Inline styles are tempting for the reasons I explained earlier: you can apply styles to your content as you create it, without having to switch gears and edit a separate style sheet. But as we saw in the previous section, you’ll want to avoid inline styles like the plague if you want to keep your HTML code meaningful to those who cannot see the styles.
2. embedded styles
<style type="text/css">
.warning{
color:red;
}
</style>
.
.
.
<a href="MyPage.html" class="warning">
Embedded styles keep your markup clean, but tie your styles to a single document. In most cases, you’ll want to share your styles across multiple pages on your site, so it’s best to steer clear of this approach as well. The Three Layers of the Web 9
3. external styles
<link rel="stylesheet" href="styles.css" />
.
.
.
<a href="MyPage.html" class="warning">
styles.css
.warning{
color:red;
}
External styles are really the way to go, because they let you share your styles between multiple documents, they reduce the amount of code browsers need to download, and they also let you modify the look of your site without having to get your hands dirty editing HTML. But you knew all that, right? This is a JavaScript book, after all, so let’s talk about the JavaScript that goes into your pages
JavaScript for Behavior
As with CSS, you can add JavaScript to your web pages in a number of ways:
- You can embed JavaScript code directly in your HTML content:
<a href="MyPage.html" onclick="JavaScript code here">
- You can include JavaScript code at the top of your HTML document in a <script> tag:
<script type="text/javascript"><!--//--><
No comments:
Post a Comment