First Tutorial

First tutorial class about Web Designing
Html--What we did gorgeously before

Before we really get down to our subject, let's have some general ideas of websites. First I'd like to ask you a question: what do you think a good website should consist of? Yes, text, images, and sometimes music are considered necessary elements to build a website. And some of you have already known that when visiting a website, we are actually visiting different webpages. So what do you think that a webpage may consist of? All the data represented in the browser? Well, no. Webpage, rather than a data container, plays a role which is more like a data organizer. That is, we don't naturally include detailed data of images and music in the webpage. We just give an index to those resources, than the browser will go according the guidane and represent those introduced resources. All webpages in fact contain only text.

Since webpages only consist of text, what we do in a browser is actually read the guidance included in the text, and represent resources correctly. To make this method sound, a special kind of language(or to say, standard) is publish. This is HTML, hypertext markup language. We do things in HTML this way:

Firstly, in HTML, we divide the webpage into different elements. We may have paragraphs of text in the page, and of course images, forms, tables, etc. To make the relation clear, we device different tags to distinguish different elements, like (p)(/p) for paragraph and (img) for image. Different contents are included in different parts of the webpage, and "wrapped up" by tags. By doing this, we make the webpage clear with different respective entity, with no interfering with others. Since we have so many elements in the page, many tags were created to suffice the need to name each of them. The creation, theoretically, covers all needed definition in the entity division.

However, the invention of tags does not suffice all the need. We still need ways to distinguish entity from entity. So in HTML, we have another concept involved, the attributes. For instance, we may like to have a paragraph of text linking to another webpage. So we may add an tag <a></a> outside the tag <p><p>, and add an attribute to the tag <a></a>, like <a href="http://www.world.com/"><p>helloworld!</p></a>. The word "href" denotes an attribute of the included material. The string after "=" denotes the address of the link. Generally speaking, we may find out all needed attributes of all defined tags(i.e. elements), and include them in the language. That is actually what we have done. Size of table, color of the fonts, and tips shown when mouse halt on an image are all defined this way.

After a cover-all definition mentioned above, HTML is able to represent all supported resources in any supported way you like. And by the development of HTML, tons of development tools as well as websites were generated. At that time, we programed gorgeous websites in this way.

Ps: All parentheses "()" mentioned in tags are actually "<" and ">". The replacement is due to that the use of "<"">" will generate a syntax error. Please replace them back when you read.

Ps: I've made some correction into the code. So now the replacement mentioned above is not necessary.