HTML

2,336

43

9

Introduction: HTML

About: I like coding.

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.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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.

Teach It! Contest Sponsored by Dremel

Participated in the
Teach It! Contest Sponsored by Dremel

DIY University Contest

Participated in the
DIY University Contest

Tech Contest

Participated in the
Tech Contest

Be the First to Share

    Recommendations

    • Tiny Speed Challenge

      Tiny Speed Challenge
    • Clocks Contest

      Clocks Contest
    • PCB Design Challenge

      PCB Design Challenge

    9 Discussions

    0
    NomiM1
    NomiM1

    4 years ago

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

    0
    manojrawat77
    manojrawat77

    4 years ago

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

    0
    gogoguy
    gogoguy

    5 years ago on Introduction

    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.

    0
    TOX1K DEFTON3

    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?

    0
    rajeebul
    rajeebul

    5 years ago on Introduction

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

    0
    gogoguy
    gogoguy

    Reply 5 years ago on Introduction

    Open notepad, then save it as whatever.html.