Introduction: 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.

Comments

author
NomiM1 (author)2016-01-09

Hello friends ,You all can also read many important Free learn html 5 & css 3 in urdu and hindi

author
manojrawat77 (author)2015-11-27

Hi everybody, You all can also read many important HTML Tutorials to enhnace your HTML coding knowledge.

author
gogoguy (author)2014-10-18

I'm sorry. Something went wrong with the editor and i can't change anything. Also, i don't know why it's showing html code that i didn't put in. Here it is if you don't understand: <title> is the tab name. <P> is go to next line. You can reply specifically about what you don't understand and i'll explain it properly to you.

author
TOX1K DEFTON3 (author)2014-10-15

I'm a little confused on this one... It's a little cluttered in step two. Do you think you could break it down a bit?

author
rajeebul (author)2014-09-08

How I create a HTML page in my computer for coding? Please help

author
gogoguy (author)rajeebul2014-09-08

Open notepad, then save it as whatever.html.

author
rajeebul (author)gogoguy2014-09-08

thanks

author
seamster (author)2014-09-02

Thanks for sharing this!

author
gogoguy (author)seamster2014-09-02

You're welcome! Did you vote?

About This Instructable

2,078views

42favorites

License:

Bio: I like coding.
More by gogoguy:The Bubbles of AwesomenessSweet Child o' Mine - SoloSweet Child of Mine
Add instructable to: