HTML

Please vote for this instructable. I've never won any contests. PLEASE help me out, and comment if you did.

Thanks for opening this instructable. Since you did, i'm assuming that you're interested about coding websites. You'll be surprised how easy it is. All you need is:

1. Interest in coding HTML

2. A computer

3. Simple typing program. Windows notepad is suggested.

4. and a brain

Now let's get started.

Step 1: Tags

Before we start, you have to something super important, called tags. Tags are commands in HTML. Every time you want your website to have something in it, or something done, you use tags. To make a tag, you have to type:

<Name or text for your command>

Then </Same command>

So for example, to make a text hyperlink to 'Google', type:

<a href="https://www.google.com/?gws_rd=ssl">Google</a>

Google

Step 2: Commands

Naming your tab

To title your tab, put the name of it in between two <title> tags. </p><p>Styling your webpage <p> You have to put the style, which usually consists of background picture or background color, text size and color, and text styling for hyperlinks, in between two tags. Here is a similar style that I used for this webpage, that you can copy and paste this code into yours: </p><p> </p><p> header { font-size: 2.5em; font-weight: normal; color: rgb(0,0,0); margin-top: 12px; margin-bottom: 1px; } </p><p> a { color: rgb(0, 0, 0); font-size: 4em; font-weight: normal; text-decoration: none; margin-left: 0px; vertical-align: top; } </p><p> a:link, a:visited { color: rgb(192, 192, 192); text-decoration: none; vertical-align: top; } </p><p> h1 { font-size: 3em; font-weight: normal; margin-top: 12px; margin-bottom: 1px; color: rgb(0, 0, 0) } </p><p> h4 { font-size: 1.1em; font-weight: normal; margin-top: 12px; margin-bottom: 50px; color: rgb(0, 0, 0) } </p><p> body { font-family: "Segoe UI", "verdana", "calibri"; background-color: rgb(255,255,200); margin-top: 60px; margin-left: 20px; color: #575757; }</p><p> </p><p>Text sizes <p> For different the biggest size, you use <h1> tags. If you want something a bit smaller, use <h2> tags. So the bigger the number after the 'h', the smaller the text size. </p><p>Text hyperlinks <p> To link text to a webpage or file, you have to type: </p><p> <a href="You type the url of the website or directory of the file that you're linking here. Quotations are included. Also, if you're linking a file, be sure to have file type at the end."</a> </p><p>Pictures <p> To insert a picture, type (With quotations): </p><p> <img width="Width in pixels" height="Height in pixels" src="Url or directory of picture including file type at the end"></a> </p><p>Centering <p> If you want to put anything anything in the center of the line it's on, surround it with <center> tags. </p><p>Going to the next line <p> When you want to go to the next line, you just put one tag - </p>

Step 3: Making and Designing Buttons

First you need to style a 'Div':

a {
text-decoration: none;

font-family: Calibri;

font-size: 30px;

border: 10px; border-color: grey; }

div {

height: 50px;

width: 140px;

background-color: blue;

border-radius: 50px;

text-align: center;

}

https://www.google.com/?gws_rd=ssl">Google>Google

I hope you liked this instructable! Please vote.