About webpage creation

Transcription

1 About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that is syntac?cally dis?nguishable from that tags. HTML language mainly consists of tags. We will get more into that as we proceed. Let us begin with the very basic. In order to code in HTML, we do not require any fancy sogware. >ll we need ish notepad(windows) or TextEdit (Mac OS) or something equivalent in Linux OS. HTML TAG - BRIEF DESCRIPTION HTML includes a series of tags that describe how a web page is formamed. Nach tag appears inside <> brackets. The brackets are used to define a format change or hypertext link. In most cases, the tags appear in pairs. Opening tag (<>) Closing tag (</>) There are some excep?onal cases where you are required to use only opening tag, e.g. Tew Line tag ( ). 40

2 About webpage creation Creating a webpage In this example, we will create the sample webpage shown below. NOTE Before we begin, please note that the text in RED are just comments to help you understand the html tags. 41

3 Step 1: BASIC HTML TAGS!!!! <-- html opening tag!!!! <-- header opening tag! <-- title tag!!!! <-- header closing tag!!!! <-- html closing tag 42

4 STEP 2: SAVE YOUR WORK To save your work, you need to save the file in the form as.html as shown below. The file you have saved will be represented as your default browser icon in your folder. Double click that icon to view your work. 43

5 Step 3: INSERTING BACKGROUND COLOR <background bgcolor= #FFD39B > <-- Setting background color for your page 44

6 Step 4: INSERTING TEXT <background bgcolor= #FFD39B > <-- choosing font style,!!!!!!!! color and size. Hello, this is a sample webpage. 45

7 Step 5: INSERTING MAILTO LINK <background bgcolor= #FFD39B > Hello, this is a sample webpage. let us create an link. For more information, please <a href= mailto:abc@xyz.com >send me an </a>. 46

8 Step 6: INSERTING LINK <background bgcolor= #FFD39B > Hello, this is a sample webpage. let us create an link. For more information, please <a href= mailto:abc@xyz.com >send me an </a>. Now let s create a link to Google Canada s website. <a href= >Click here to go to Google Canada</a>. 47

9 Step 7: INSERTING NEW LINE BREAK AND PARAGRAPH <background bgcolor= #FFD39B > Hello, this is a sample webpage. let us create an link. For more information, please <a href= mailto:abc@xyz.com >send me an </a>. Now let s create a link to Google Canada s website. <a href= >Click here to go to Google Canada</a>. Now let us see the difference between a paragraph tag and a new line tag. Here we are using a new line tag. Here we are using a paragraph tag. * The text in red represents the line break, i.e. a new line. And the text in blue represents new paragraph. 48

10 Step 8: INSERTING TABLE <background bgcolor= #FFD39B > Hello, this is a sample webpage. let us create an link. For more information, please <a href= mailto:abc@xyz.com >send me an </a>. Now let s create a link to Google Canada s website. <a href= >Click here to go to Google Canada</a>. Now let us see the difference between a paragraph tag and a new line tag. Here we are using a new line tag. Here we are using a paragraph tag. Now let us create a table <table border="1">! <-- creating table with border thickness 1 <tr>!!! <-- creating first row <td>row 1, cell 1</td> <-- table cell representing first cell of row 1 <td>row 1, cell 2</td> <-- table cell representing second cell of row 1 </tr>!!! <-- closing first row <tr>!! <-- creating second row <td>row 2, cell 1</td> <-- table cell representing first cell of row 2 <td>row 2, cell 2</td> <-- table cell representing second cell of row 2 </tr> <-- closing second row </table> <-- close table tag 49

11 Step 9: INSERTING IMAGE <background bgcolor= #FFD39B > Hello, this is a sample webpage. let us create an link. For more information, please <a href= mailto:abc@xyz.com >send me an </a>. Now let s create a link to Google Canada s website. <a href= >Click here to go to Google Canada</a>. Now let us see the difference between a paragraph tag and a new line tag. Here we are using a new line tag. Here we are using a paragraph tag. Now let us create a table <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Now let us insert an image <img src= image.jpg > <-- inserting image. Make sure the image is! stored in the same folder as your webpage. 50

12 Final Output 51

13 Glossary A: HTML COLOR CODES Courtesy of html- color- codes.com 52