How to Design & Program a Web Page
Websites are comprised of web pages, which are individual files saved on a server that can be accessed online. Nowadays, with the availability of web design technology and ease of access to a computer, it is easy to design and program a web page. For those who want to design and program their web page with basic to intermediate computer skills, you can use several easy-to-use web page editors such as Dreamweaver. Creating your web page gives you presence online.
Other People Are Reading
Things You'll Need
- computer with keyboard
- list of information to include in the web page
- website editing software
- HTML and CSS books
- web hosting plan and domain
Instructions
-
-
1
Make a list of the things you want to include in the web page. Gather the information so it is easily accessible as you create your web page. In order to know how you will be designing your web page, you need to know what the purpose of the web page is and what information you will be publishing. Visualize the page you want to create and consider what elements you want to include. Text can be supplemented by pictures to make your web page more interesting and visually appealing.
-
2
Launch a website editing software. Website editing software allows you to design a website visually and code it. Certain editors, such as "What You See Is What You Get" editors (WYSIWYG), allows you to alternate between a design view of your web page and an HTML view where you can program your web page. These types of software are useful for those who have limited HTML skills since you can use the design view to supplement the programming side.
-
-
3
Create a new page by using a template. You can do this by selecting from the software's template gallery. Many web editing software offer templates that you can initially use to structure your web page. This gives you a basic layout that you can tweak and add to. Template formats include 2- or 3-column web pages as well as pages with tables. Make sure you save this new page using "index.html" as the file name. This name is needed for the page to show when you access it online.
-
4
Learn HTML and CSS. HTML stands for Hyper Text Markup Language and CSS stands for Cascading Style Sheet. To design a basic web page, these programming languages are important to know. HTML allows you to code the content of your website, while CSS allows you to make formatting changes. Knowing these web design languages lets you tweak your web page with a lot more control than creating your web page only through the design view.
-
5
Create the content for the web page. First, program the title either by typing it directly on the page in the design view of a WYSIWYG editor. You can also program the title through HTML by switching to HTML view and typing the title inside the HTML title tags, such as: <HEAD> <TITLE>My Home Page</TITLE> </HEAD>. Next, type the content directly on the page in design view, or program the page in HTML view and typing the content between the body tags, <BODY> and </BODY>.
-
6
Format your web page. Add some style to your page by formatting the background color and fonts. You can easily do this in the design view since you have toolbars to change the background and font. Through the HTML view, you need to add this string and change the values according to your design needs:
<style type="text/css">
body {
color: white;
background-color: #000000;
font-family: arial;
font-size: 12pt; }
</style> -
7
Buy a web hosting plan and a domain name. If you buy these through the same vendor, most of the time they are automatically matched with each other, so that when you type the domain name, it shows your web page. If they are not automatically matched, forward your domain name to the server address so when readers type your domain name, they go to your web page.
-
8
Obtain the FTP information after you've bought a web hosting plan,. Use an FTP software such as CuteFTP and connect to the FTP server using the FTP information provided by your web host. Upload the files, such as the web page and images into the public_html folder. For the web page to show properly, it must have the file name "index.html."
-
1
References
Resources
- Photo Credit website layout image by 6922Designer from Fotolia.com
