PreReading Material For WebDesigning

Introduction to
Web Designing
Sanchit Mittal, IIT Bombay
Index
Introduction to Web Designing Index Introduction to this document History of the Web HTML: the Language of the Web Tag Diagram Where/How to write this HTML code? Still in Confusion about basics on HTML ? Complete your HTML learning quest from:: CSS (Cascading Style Sheets) Complete your CSS learning quest from:: The Power of CSS JavaScript (Make your page, dynamic :) ) Are Java and JavaScript the same? Put a JavaScript into an HTML page Scripts in <head> Example Complete your JavaScript learning quest from:: Get a Feel of Javascripts from these examples: A Free Book on Javascript: Frequently Asked Questions Resources Making a Real Website Sample Problems (do atleast one problem, if you cant manage time for both) Your Project Problem Quizes
Introduction to this document

I assume that you know nothing about the inner workings of the Internet; maybe you're not even sure how people actually get to web sites, where the web sites are actually sitting, what the web is in the first place.... I won't go into painful micro-details that would put all but true nerds to sleep, again there is just enough so that you have a basic understanding of what's going on. Don't expect that you will understand everything here completely in one go, just keep reading. Note: I will just be discussing about how to make a website. Wont be telling how to purchase a www.website.com and uploading the site and making it work the way you want. For that you can ping me anytime.
History of the Web

The web was initially conceived and created by Tim Berners-Lee, a computer specialist from the European Particle Physics Laboratory (CERN) in 1989. Since then it has grown into the web we know today under the guidance of the World Wide Web Consortium (W3C) that is a volunteer organization based at the Massachusetts Institute of Technology (MIT) with the responsibility for developing and maintaining common standards. Perhaps the single most important technological development in the history of the web, besides the creation of the web itself, was the development of graphical browsers in the early 90s. Beginning with NCSA's Mosaic and its evolution into Netscape's Navigator and Microsoft's Internet Explorer, these programs allowed users to browse the resources on the web in an extremely user friendly environment. This made the web a "fun" place and marked the beginning of the true web revolution.
HTML: the Language of the Web

* So what does a web browser do with a file it receives from a website? Does it just display it to the human user as is? * The answer is yes and no. Actually, in some cases, the web browser will display a document exactly the way it receives it from the web server. For example, if the document requested is an image, the web browser will display it directly. Similarly, plain text files will be displayed just as they are sent. * However, if the document is an HTML document, the web browser will "interpret" the HTML and display it according to the instructions contained within the HTML code. * Well, what is HTML code and why must it be interpreted? * HTML (Hyper Text Markup Language) is a very simple language used to "describe" the logical structure of a document. Is HTML a Programming Language? Actually, though HTML is often called a programming language it is really not. Programming languages are 'computable'. That is, programming languages can be used to compute something such as the square root of pi or some other such task. Typically programming languages use conditional branches and loops and operate on data contained in abstract data structures. HTML is much easier than all of that :) . HTML is simply a 'markup language' used to define a logical structure rather than compute anything. * For example, it can describe which text the browser should bold, which text should be a heading, and all those formatting you have seen in MS word alikes, and even beyond that :D. * The beauty of HTML of course is that it is generic enough that it can be read and interpreted by a web browser running on any machine or operating system.
* The language itself is fairly simple and follows a few important standards. * Firstly, document description is defined by "HTML tags" that are instructions embedded within a less-than (<) and a greater-than (>) sign. To begin formatting, you specify a format type within the < and the >. Most tags in HTML are ended with a similar tag with a slash in it to specify an end to the formatting. For example, to bold some text, you would use the following HTML code: this text is not bold <b>this text is bold</b> this text is not bold * It is important to note that the formatting codes within an HTML tag are case-insensitive. Thus, the following two versions of the bold tag would both be understood by a web browser: <b>this text is bold</b> this text is not <B>this text is bold</B> * You can also compound formatting styles together in HTML. However, you should be very careful to "nest" your code correctly. For example, the following HTML code shows correct and incorrect nesting: <CENTER><b>this text is bolded and centered correctly</b></CENTER> <b><CENTER>this text is bolded and centered incorrectly</b></CENTER> * In the incorrect version, notice that the bold tag was closed before the center tag, even though the bold tag was opened first. The general rule is that tags on the inside should be closed before tags on the outside. * Finally, HTML tags can not only define a formatting option, they can also define attributes to those options as well. To do so, you specify an attribute and an attribute value within the HTML tag. For example, the following tag creates a heading style aligned to the left: <H2 ALIGN = "LEFT">this text has a heading level two style and is aligned to the left </H2> * H2 is a html tag used to create Heading text as you will see later. * Finally, you should know that web browsers do not care about white space that you use in your HTML document. For example, the following two bits of HTML will be displayed the exact same way: This is some text that is displayed as you would expect
This
is some
text
that is displayed in a way you would not expect: exactly the same as the above
Tag Diagram
You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag name>) and a closing tag (</tag name>). The only difference between the opening and closing tags is that the closing tag contains an extra forward slash.
Some EXAMPLE HTML tags that might make things clearer: <b> Makes text bold </b> <i> Makes text italic </i> <h1> Tells the browser that this text is very important -the browser usually makes this text really big </h1> <table> Creates an HTML table - think of a spreadsheet </table> I hope you can see the pattern in the list above. HTML tags are not just for placing and formatting text, HTML tags can be used to include other things like: animation, video, Flash, audio, and even multimedia programs.
Where/How to write this HTML code?

What you will need, however, is the following: 1 A basic text editor ( NOTEPAD in windows or GEDIT in Linux would do) 2 A web browser. ( Mozilla, Chrome, Internet Explorer) 3 Some basic typing skills (This isn't a necessity in order to make a web page but will certainly help a lot.) STEPS: Here's a ridiculously quick way on how to make a web page using just Windows Notepad (or any other text editor for that matter). 1 Open Windows Notepad. 2 Type in the the words "Hello World!" 3 Save the text file with an .htm extension (e.g., mypage.htm). 4 Locate where you saved your .htm file and double-click on it. Isnt is simple? Now try this !!
in your mypage.htm file, write ony this: <Html> <Head> <Title> My First Page </Title> </Head> <Body> <h1> Harry Potter - 7</h1> <h2> About the Book </h2> <p>The novels revolve around <b>Harry Potter</b>.</p> <p> This wizard born is sent to wizarding school to learn the magical skills. </p> <h2> About the Movie </h2> Rowling <u>sold the <i>film rights</i></u> of the first four Harry Potter books to Warner Bros. for a reported 1 million . </Body> </Html> That means you type in the HTML code yourself in notepad or similars. This is the approach we are going to use here, because it's the quickest way to learn how to build web pages, and it is arguably the best way because you have the most control over what you're doing. What we are not dealing with this time is 1). Using a pre-made template. (ie all html codes will be there, you need to fill your text) 2). Using a Html Editor like Frontpage or Dreamweaver. (such softwares helps us make webpages easily, as a piece of cake, like formatting a word document.) Ok, now that we know the advantages of hand-coding web pages, let's start a systematic way of learning HTML language.
Still in Confusion about basics on HTML ?

Read these two pages: http://tizag.com/htmlT/elements.php http://tizag.com/htmlT/tags.php
Complete your HTML learning quest from::

http://www.w3schools.com/html/html_intro.asp
CSS (Cascading Style Sheets)

Style Sheets allow you to control the rendering, e.g. fonts, colors, leading, margins, typefaces, and other aspects of style, of a Web document without compromising its structure. CSS is a simple style sheet
mechanism that allows authors and readers to attach style to HTML documents. It uses common desktop publishing terminology which should make it easy for professional as well as untrained designers to make use of its features. Visual design issues, such as page layout, can thus be addressed separately from the web page logical structure. Advantages:: CSS saves time When most of us first learn HTML, we get taught to set the font face, size, colour, style etc every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs. Pages load faster Less code means faster download times. Easy maintenance To change the style of an element, you only have to make an edit in one place. Superior styles to HTML CSS has a much wider array of attributes than HTML. // The syntax is something like this.. body { background-color:yellow; } h2 { color:blue; } What this code will do is 1). To Body Tag :: will make its background color to be yellow. 2). To all H2 Tags in the Html code :: will make headings color blue. Let me go very brief and just give you a working example (How to implement CSS): 1). Copy the following Html Code in notepad. Save it as yourname.htm <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> 2). Copy the following CSS Code in notepad. Save it as style.css
body { background-color:yellow; } h1 { font-size:36pt; } h2 { color:blue; } p { margin-left:50px; } 3). open your yourname.htm in Web Browser, by just double cliking it.
Complete your CSS learning quest from:: http://www.w3schools.com/css/css_intro.asp (Official Tutorial, a must read) http://tizag.com/cssT/ (Yet Another Fine tutorial) The Power of CSS
If you have any doubts over how powerful CSS really is, then you need to visit CSS Zen Garden. CSS Zen Garden is a display of the power and beauty of CSS. The concept is simple: see how many ways designers can take the exact same HTML code and produce completely different looking pages. As you browse through the various designs, you will find that the only thing changing the way each page looks is the CSS file. The HTML is exactly the same. CSS Zen Garden is a great showcase of creativity and technical expertise. It is also important to point out that CSS Zen Garden does not use any tables for their layout. Everything is done in pure, simple HTML and CSS.
Go Visit them here: http://www.csszengarden.com
JavaScript (Make your page, dynamic :) )

JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages
Are Java and JavaScript the same?

NO! Java and JavaScript are two completely different languages in both concept and design! JavaScript gives HTML designers a programming tool HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can react to events A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
Put a JavaScript into an HTML page

<html> <head> <title> Javascript :)</title> </head> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>"); </script> </body> </html> So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:
Scripts in <head>
Scripts to be executed when they are called, or when an event is triggered, are placed in functions. Put your functions in the head section, this way they are all in one place, and they do not interfere with page content.
Example
<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>
Complete your JavaScript learning quest from:: http://www.w3schools.com/js/js_intro.asp
Get a Feel of Javascript from these examples:

http://www.w3schools.com/js/js_examples.asp
A Free Book on Javascript:

JavaScript is so vast language, that i don't expect you to learn it in a week or so, also when you have other languages and stuff to learn. So what can we do is: learn what javascript is. Get the idea of its syntax and small examples. Try out some scripts from: http://www.w3schools.com/js/js_examples.asp, play with these examples by changing its code a little... Use ready-made scripts (also available in resources i have mentioned) in your webpages, but do make sure you know how code is working, whats written there and what each line means. Later on, or anytime you need systematic approach to learn Javascript: Follow http://www.w3schools.com/js/js_intro.asp (as already told) http://eloquentjavascript.net/ (A book on Javascript, download from here)
Frequently Asked Questions

Please Follow: http://webdesign.about.com/od/webdesignhtmlatoz/a/bl_htmlfaq.htm http://www.hwg.org/resources/faqs/cssFAQ.html http://www.intranetjournal.com/faq/js-faq.shtml
Resources
As making websites is nothing but mainly codes, if you copy-paste code from one site to your own site, it will smoothly run as per requirements (provided you have added it correctly). But due to copyright issues and similar you cannot copy codes or matter without permission, so I am providing some resources/websites which lets you legally use some already existing codes. Please don't use them excessively, don't let it cover your ultra innovative mind. 1 For Javascript: http://jsmadeeasy.com
For CSS: http://www.webdesignerdepot.com/2009/08/250-resources-to-help-you-become-a-css-expert/
Making a Real Website

Want to try out your code as a working and public website, for everyone to see ? You will be pleased to know that, with a LDAP login, you actually got a 500mb of server space, which you can use for serving your websites. (A web server is a computer or super computer you can say, which have your webpages and websites stored on it. And anywhere in world can fetch those pages by just typing www.something.com ) Lets see how to do that: Please follow this Link: http://stab-iitb.org/wiki/Using_Bighome <Please Make sure you have understood enough from above text and references before continuing further. >
Sample Problems (do atleast one problem, if you cant manage time for
both)
1). Basic (Html only):

Quest: Try to make a page, as described below. No need to be exact, but try to be as similar as possible. Description: It should include two pictures, three headings, one list, one or more tables (can also be used to give proper structure to the page). Some styling like bold, italics should be there. The page should hold some theme, ie. some topic or issue. Bonus credits if the page looks good (to me) and doesn't have any arbit content but related to your theme.
2). Advanced (Html + CSS):

Quest: Make a single webpage, that looks similar to "www.google.com"... It doesn't need to be exactly same, it should just make me say "hey! it looks like google.com". Any amount of creativity is acceptable. But please make sure you use maximum CSS for styling rather than html. Bonus credit if you upload the page at home.iitb.ac.in/~yourLDAPid. Read "http://stab-iitb.org/wiki/Using_Bighome " for information on how to upload your pages, and mail me any queries you have. Hint: My website is also one of the possible answers. www.sanchitmittal.co.cc
Please do the sample problems and discuss/show to me before the presentation. This discussion will be through emails, my id is sanchitml@gmail.com
Your Project Problem

You must have noti <Please read below.>
>>www.jokesandpuns.co.cc (Little, but surely deviates from standard menu) < The Project Problem will be revealed in the presentation on 23rd Jan, as there some things i want to discuss with you before giving the problem statement. I assure you, it will be great fun, and exposure opportunity for you. >
Quizes
If you have some time, you can see these questions in HTML, CSS and Javascript. There are about 20 questions in each language. Quite easy ones, seems fun to attempt. HTML: http://www.w3schools.com/html/html_quiz.asp CSS: http://www.w3schools.com/css/css_quiz.asp JavaScript: http://www.w3schools.com/js/js_quiz.asp

PreReading Material For WebDesigning

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PreReading Material For WebDesigning

Uploaded by

Copyright:

Available Formats

Introduction to

Introduction to this document

History of the Web

HTML: the Language of the Web

Where/How to write this HTML code?

Still in Confusion about basics on HTML ?

Complete your HTML learning quest from::

CSS (Cascading Style Sheets)

Go Visit them here: http://www.csszengarden.com

JavaScript (Make your page, dynamic :) )

Are Java and JavaScript the same?

Put a JavaScript into an HTML page

Complete your JavaScript learning quest from:: http://www.w3schools.com/js/js_intro.asp

Get a Feel of Javascript from these examples:

A Free Book on Javascript:

Frequently Asked Questions

For CSS: http://www.webdesignerdepot.com/2009/08/250-resources-to-help-you-become-a-css-expert/

Making a Real Website

1). Basic (Html only):

2). Advanced (Html + CSS):

Your Project Problem

You might also like