Jump to content
xisto Community
Sign in to follow this  

Basic Web Design (html) sample index file included

Recommended Posts

Web Design

Web Design is one of the easiest and neatest things that you can learn. Most people often misunderstand it and throw it to the side and then pay lots of money for others to make and maintain a website for you. This shouldnt be the case. The best thing for you to do is to learn how to make a website. In this article, you will learn advanced webpage design in under 20 minutes.

There are literally tons of different computer languages used to create websites. The hardest of them all I would say is PHP and MySQL. These are difficult to understand because of all of their uses and because they are basically complex.

The simplest language is HTML. It stands for Hyper Text Markup Language. The second language that is used, CSS stands for Cascading Style Sheet. HTML is the backbone the website that we will be creating. CSS is how the website looks; this is basically its colours and its font style(s).

CSS is created by using a colour table, which is attached. Each colour has a specific number assigned to it. CSS uses HTML and HTML uses CSS. Remember that they are two different languages. The basic codes you will need to know for your CSS is the colour codes, the font, background, foreground, and etc. codes.

Now, to make a website, you must have something called a Web Host. A Web Host is what makes your website what it is! Online. Now, the most important thing to remember when creating a website is what your needs are. If you want to make a website for showing off pictures to your friends or family you took with your camera from your vacation, youre going to want a lot of space so that you can upload your photos. A really good Web Host to start out with is Bravehost, located at http://www.bravenet.com/hosting.php. This Web Hosts free plan is easy to use and it also offers countless other features for your website.
Although this plan puts ads onto your website, which is something you should avoid, if this isnt going to be a permanent website or if youre not going to use it often, then this host is for you!

Now the first step to making a website is to get an account. Go to the Bravehost website shown above and Register a new account. The registration is very straight forward, just fill in the fields. Once you have an account and it is activated, login to your account by going to the Bravehost website and putting in your Username and Password in the appropriate fields. You will now be logged into your account. You should be at a webpage with a whole bunch of icons, look for the Web Hosting icon and click on it. Choose the free plan and then the File Manager.

Another window should now pop-up on your screen. To the left there should be a folder, click on it. If there isnt a folder, there should be a file called index.html. If the folder is there, click on the folder and try to find and open index.html. If index.html is shown, open it. You should have a blank page or an error page saying that you havent edited anything. Now, click on Edit. Inside a large white box, there should be some lines of code. This is HTML. Now, highlight EVERYTHING in the box and delete it. You should have a large white blank space. At the top of the page, type <HTML>. This is a tag that tells the computer that youre using HTML to design your website. Now, after the HTML tag, write out <CENTER><B><H1>TITLE</CENTER></B></H1> and then start a new line.

When you have made your new line, save the index.html file by clicking on the Save Icon above the white box in the menu bar, you will be asked if you would like to save, select yes. Now open up your web browser and type in your Websites address which you choose during the registration process. You should be shown a page like Figure Two. If it doesnt show up or if there is an error page type in your address again and at the end of it, type /index.html and then try again. You should see TITLE centered and bolded in the middle of the page.

Now its time to upload those pictures! Go to the file manager and create a new folder called images. Do not capitalize the I in images. Once youve created that folder, go inside it. It should be blank. If there are files there, just delete them. If the images folder is already there, do not do the above. Now its time to put your pictures from your computer into this folder so that theyre on the Internet! This is like posting a picture on a bulletin board; its now available to be viewed by others.

Once your pictures on in that folder, click on them so that the picture appears. In the address box, highlight it all, right click and select Copy. Go back to your index.html page and add in these lines of code underneath your Title Code : <br><br><p>These are my pictures! <Br><br> Save your index.html and view it, you should see a sentence underneath of your title which reads These are my pictures!

Go back to your index.html editing screen (for the last time) and add in this line of code directly beside of the last <br> tag:

<img src=paste the address to your picture you copied earlier!>

Save your index.html and view it, there should be the picture you copied earlier. This is the essence of making a website. If there is anything that is unclear or something you dont understand; go to https://www.google.ca/?gws_rd=ssl and search for HTML HELP and literally thousands of websites will be found.

Š Taylor Warden. All rights reserved.

Notice from BuffaloHELP:
Poor choice in topic title-editing. Please use your name conjunction with the forum handle to avoide confusion. Plagiarism is not tolerated and when we can't connect your real name with your forum handle a warning can be issued. Moving to Web Designing.

Edited by BuffaloHELP (see edit history)

Share this post

Link to post
Share on other sites

This is great. I think you should post more tutorials on this, adding new commands article by article. This'll make it easy to learn (by repetition) as well as not overload new students of these 2 languages. Hope u also teach a bit of css. I've heard great things of this language, but i dont know it myself...

Share this post

Link to post
Share on other sites

cool man. it seems like a very good tutorial. Web design was something i really wanted to try out. But i didnt no anything at all about it espcially the html codes and stuff. But thanks for making a good tutorial about it. I am probally goinna try it out. I hope it works out. And thanks again for postin this good tutorial.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.