• michaeltlwong

Web Technology: Design a page from scratch

Today, Mr. Diamond teaches you how to "tell" a parable in HTML in the WEB lecture hall.

First of all, define what kind of web page to make, a simple page, there is a paragraph of text, the page needs a title, after the design, there is a clear idea.


1) Edit the necessary material, a fable story, the content is as follows:


Starving mantis

In the jungle of Prince Edward Island, a praying mantis wields a machete all day long, making little insects run for their lives in terror. It loves to eat cicadas on the trees very much. Cicadas are very nervous every day. One day it heard someone tell a story under the tree, the name of the story is called "mantis catching cicada" : there is a mantis in catching cicada, there is a clever yellow sparrow with the page after the mantis..., When the mantis heard this story, he was frightened out of a cold sweat, thinking that he might become a good meal in the mouth of the yellow sparrow. So it did not dare to catch the cicada. The mantis went to the grass to look for worms. One day mantis found an earthworm, in preparation to eat earthworms, but came to a big cock also want to eat earthworms. Fortunately, it reacted quickly and fluttered its wings to escape, so that it did not die under the cock's beak. After this narrow escape, it no longer dared to eat earthworms. Mantis came to the barren hills. On the barren hills there were caves of all sizes, and it went into a cave and sighed. Then he found some soft-shelled eggs in the cave, and thought it must be a wonderful meal. But it was about to bite open a soft egg, but saw two green eyes appear in the hole. The mantis quickly hid itself in a hidden corner and peered there, holding its breath. It was a poisonous snake that came in, with its long tongue sticking out, looking very ferocious. When the snake finally left the hole, the praying mantis was paralyzed with fear. After a long rest, he crawled out of the hole in a panic and scurried all over the place. Mantis dared not go anywhere, looking for food to satisfy his hunger, and starved to death in a few days at the edge of a ditch.

2)Give the page a title, according to the fable, the title is "Mantis starved to death."


3) Write HTML code.


The title of the page is:


<title>Starving mantis</title>


Then, the main content of the web page is this fable, which should be included in <body>Tags.


<body>In the jungle of Prince Edward Island, a praying mantis wields a machete all day long, making little insects run for their lives in terror. It loves to eat cicadas on the trees very much. Cicadas are very nervous every day. <br>

...

Mantis dared not go anywhere, looking for food to satisfy his hunger, and starved to death in a few days at the edge of a ditch.

</body>


The <br> tag appears in the text and is used to wrap the text.


4) Complete HTML code, the need to add sample code, must be structured tags.The complete code combined is as follows:

​<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Starving mantis</title>

</head>


<body>In the jungle of Prince Edward Island, a praying mantis wields a machete all day long, making little insects run for their lives in terror. It loves to eat cicadas on the trees very much. Cicadas are very nervous every day. <br>


One day it heard someone tell a story under the tree, the name of the story is called "mantis catching cicada" : there is a mantis in catching cicada, there is a clever yellow sparrow with the page after the mantis..., When the mantis heard this story, he was frightened out of a cold sweat, thinking that he might become a good meal in the mouth of the yellow sparrow. So it did not dare to catch the cicada.<br>


The mantis went to the grass to look for worms. One day mantis found an earthworm, in preparation to eat earthworms, but came to a big cock also want to eat earthworms. Fortunately, it reacted quickly and fluttered its wings to escape, so that it did not die under the cock's beak. After this narrow escape, it no longer dared to eat earthworms.<br>


Mantis came to the barren hills. On the barren hills there were caves of all sizes, and it went into a cave and sighed. Then he found some soft-shelled eggs in the cave, and thought it must be a wonderful meal. But it was about to bite open a soft egg, but saw two green eyes appear in the hole. The mantis quickly hid itself in a hidden corner and peered there, holding its breath. It was a poisonous snake that came in, with its long tongue sticking out, looking very ferocious. When the snake finally left the hole, the praying mantis was paralyzed with fear. After a long rest, he crawled out of the hole in a panic and scurried all over the place.<br>


Mantis dared not go anywhere, looking for food to satisfy his hunger, and starved to death in a few days at the edge of a ditch.


</body>

</html>


[Run program] The entire page



Mr. Diamond describes simple page design and how to go from zero to one page. The idea of design is based on mastering the art of page making. Breaking down the entire Web page is simple and easy to follow, but if you want to be flexible, you still need to practice.


Wondeful continue…