How to Make a Webpage
- 1). Go to "Start" on the Windows taskbar and type "Notepad" in to the search bar. Press "Enter" to load Notepad. Alternatively, you can download a code editor, but you should look for one that is not "WYSIWYG" (What You See Is What You Get). It is better to code by hand so you can learn HTML and CSS.
- 2). Copy and paste the following code into a blank file in Notepad or your code editor:
<!DOCTYPE html>
<html>
<head>
<title>Name of Your Page</title>
</head>
<body>
</body>
</html>
This is the basic structure of an HTML Web page. Begin with the doctype, which for HTML 5 (it works for other HTML versions, too) looks as it does in the above code. Start all HTML code with the "<html>" tag pair and give your page both a head and body. Place the name of your page between the "<title>" tags. - 3). Add all content for your Web page between the "<body>" tags of the HTML document. Start by typing your text as you wish for it to appear on the page. Use HTML tags to structure the text into headings, paragraphs and bold or italic text:
<p>This is a paragraph</p>
<h1>This is a big heading</h1>
<h2>This is a smaller heading, but it is still pretty big</h2>
<em>This is italic text</em>
<strong>This is bold text</strong> - 4). Add images to your Web page using the "<img>" tag. Keep your images in the same folder as the Web pages that use them, although you can create sub-folders for better organization. This example loads an image from a sub-folder named "images":
<img src="images/mypic.jpg" alt="My Pic" />
Use the "alt" attribute to give your image alternate text whenever the image fails to load in the browser. Screen readers for the blind also read this text, so it is an important usability concern. Set the width and height as desired, but note that larger images still retain their larger file sizes and will take just as long to load. - 5). Add a pair of "<style>" tags between the "<head>" tags in your HTML document if you want to add Cascading Style Sheet (CSS) code to style your Web page. Here is the code:
<style type="text/css">
</style>
Write your CSS between the "<style>" tags. To write CSS, select an HTML element -- what a pair of HTML tags creates in the browser screen -- using its tag name and then place property-value pairs between curly braces like so:
body {background: black; color: white;}
h1 {font-size: 24px;}
img {border: 3px solid blue;} - 6). Go to "File" in the toolbar at the top of Notepad or your code editor. Select "Save As" and select "All File Types" from the "Save As Type" field. Type "mywebpage.html" with quotation marks around the file name, but change "mywebpage" to the name you want to use for the file. Save the file.
- 7). Purchase a domain name through a Web hosting company such as HostGator, JustHost or Site5 to get both a Web address and server space for your website. You need both of these things to make your site "live" on the Internet. Use a file upload or management tool within the control panel for your Web hosting account to upload simple websites with few files. Download and use an FTP (File Transfer Protocol) client to upload large amounts of website files if necessary.
