Browse DevX
Sign up for e-mail newsletters from DevX


My First Web Page : Page 2

Just learning HTML? Check this out.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

How Do I Build My First Page?

  1. To begin, open a new file. This can easily be done by selecting the New command under File.
  2. Save this file with as a .html file. For example, my file is called hawaii.html. This indicates that the file is an HTML file that will be used on the Web.
  3. Begin the page with the <html> tag.
  4. The following tag is <head>.
  5. To add the title on the top bar of the browser, the <title> tag is necessary. The title you use should be related to the information your webpage provides. The complete tag looks like this:<title>Planning A Trip To Hawaii</title>.
  6. Close the head tag with </head>.
  7. Use the body tag <body> to start the body of your page. You can use attributes such as bgcolor, link, and vlink. The tag I used was <body bgcolor=f0ffff link=8b008b vlink=c71585>. This sets the background color, the color of the links, and the color of the visited links.
  8. Next, I had to link my hawaii page to this page so I inserted a paragraph tag <p> and a link. The tag I used for the link looked like this: <a href="tutorial.html">How To Create This Web Page</a>.
  9. The title tag only puts a title in the title bar, so you may want to add a title to your page. Remember to add tags to edit the look of your title. I wanted my title to be a Heading 1, aligned in the center of the page, and a certain shade of purple. To find the numerical code for this color, I went to the color chart in the developer zone. My tag looked like this: <h1 align=center><font color=8a2be2>Planning A Trip to Hawaii</h1></font>.
  10. An image adds life to a Web page. To insert an image use the image tag. I surrounded the image tag with paragraph tags so there would be space between the text and the image. I also used the align attribute to center the image. The tag looked like this: <p align=center><img src="hawaii.jpg"></p>
  11. The introduction to your page should be readable. Pay attention to the color and size you use. The tag I used to set the face, color, and size of my text was: <font face="arial, geneva" color=green size=+1>. After this tag, add the text you want. Lastly, don't forget to put the </font> tag.
  12. A trick to indent text is to use the <ul> tag. This begins an unordered list. I used this trick to indent the word 'Attractions'. I also wanted it to be bold, blue, and arial/geneva font. I did not use the size attribute so the browser uses the default size. My tags looked like this: <p><font face="arial, geneva" color=blue><ul><b>Attractions</b>. I did not end the font tag becuase I wanted to continue using this font in the following text.
  13. Next, I began another list within the first list. This time, however, I had list items. The <ul> tag started my list and to add bullets I used the <li> tag. This list item tag does not need to be closed. Since I wanted the first word of each list item to be italicized, I surrounded the word with <i> and </i> tags. After this list was completed, I ended it with </ul> and added a break tag <br> to insert a space.
  14. Since the inside list ended, the outside list is still alive. Thus when I write anything it will automatically be indented. I wanted the word 'Activities' to look just like 'Attractions' so I surrounded it with the bold tag like this: <b>Attractions</b>.
  15. Next I started another unordered list. Refer to Step 13 for details.
  16. End the font tag from Step 12 like this: </font>.
  17. End the outside list like this: </ul>.
  18. End the paragraph from Step 12 like this: </p>.
  19. After this I started a new paragraph and a new font tag. It looked like this: <p><font face="arial, geneva" color=green size=+1>. Then I inserted the text I wanted. Within the text I put a an email link. This is done like this: <a href="mailto:contact@projectcool.com">email me</a>. End by closing the paragraph and font like this: </p></font>.
  20. You can add a source or two at the bottom of your page to give credit to the site that provided you with your information. I centered this final paragraph like this: <p align=center>. The link was added using the link tag. It looked like this: <a href="http://www.lonelyplanet.com/dest/nam/haw.htm">http://www.lonelyplanet.com/dest/nam/haw.htm</a>.
  21. End the body like this: </body>.
  22. Lastly, end the html tag like this: </html>. Don't forget to save your file.
  23. CONGRATULATIONS!! You have just learned how to create a basic Web page.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date