HTML and JavaScript Tutorial

Menu
Thanks for downloading my HTML and Javascript Tutorial. You can open categories by button Menu.

Home page

Back

HTML Tags

Back

CSS

Back

Color

Back
Color tag - tag which set color of text for selector.

Example:

body {
color:#000000;
}

Background

Back
Background tag - tag which set color or image of background for selector.

Example #1:

body {
background:#000000;
}

Example #2:

body {
background:url("images/background.jpg") #000000;
}

Border

Back
Border tag - tag which set width and color of border of selector.

Example #1:

body {
border:1px solid #000000;
}

Padding

Back
Padding tag - tag which set size of free space into block for selector.

Example #1:

body {
padding:10px;
}

Margin

Back
Margin tag - tag which set size of free space outside block for selector.

Example #1:

body {
margin:10px;
}

HTML Introduction

Back
HTML - is hyper text mapping language for internet pages. Code of pages consists tags to map images, texts, videos, audios and other elements of internet pages.

Tags is consist from < tag name >.
Some tags can have closing tags with / :
< / tag name >
Tags can have attributes: style, width, height, id, class, name and other.

Go back to menu and read more about tags in HTML Tags Category.

Gift :D

Back
Best WEB-Hosting

There is your gift - free web hosting with 2GB of free space and 100GB month limit.

Use this best web-hosting for your web-experiments! ;)

Get free hosting

JavaScript Introduction

Back
JavaScript - is a script language, you shouldn't muff with Java.

JavaScript have a lot of commands. The simplest:

  • document.write("Text to output"); - write HTML code in document
  • alert("Text to output"); - show alert window

    • You can request values, change content and more by DOM elements.

  • getElementByTagName("tag")
  • getElementById("id")
  • getElementByClass("class")

    • JavaScript can do math commands:
    var a=10, b=20, c;
    c=b-a;
    c=c*b;
    document.write(c);

    and many other cool things.

    HTML tag

    Back
    HTML tag - is a main tag of .html documents. It's must be after: <!DOCTYPE HTML>

    Example:
    <!DOCTYPE HTML>
    <HTML>
    </HTML>

    HEAD tag

    Back
    HEAD tag - is a optional tag of .html documents. This tag need if you want to attach icon for page or meta tags. It's must be between: <HTML>

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    </HEAD>
    </HTML>

    HEAD tag

    Back
    META tags - is a optional tag of .html documents. This tag can attach icon, description and keywords or index information. It's must be between: <HEAD>

    The example for description attaching:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta name="description" content="Your Description">
    </HEAD>
    </HTML>

    The example for keywords attaching:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta name="keywords" content="Your Keywords, you can part them by comma">
    </HEAD>
    </HTML>
    The example for icon attaching:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <link rel="shortcut icon" href="mysite.com/logo.png">
    </HEAD>
    </HTML>

    BODY tag

    Back
    BODY tag - is a main tag of .html documents. This tag need to attach text, images and other media. It's must be between: <HTML>

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    Your content
    </BODY>
    </HTML>

    P and BR tags

    Back
    P tag - is a tag of .html documents. This tag need to attach new paragraph with text and images. It's must be between: <BODY>

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <P>
    Text of paragraph <P>
    </BODY>
    </HTML>
    BR tag - is a tag of .html documents. This tag need to newline. It's must be between: <BODY>

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <P>
    Text of paragraph <BR>
    Text on new line. <P>
    </BODY>
    </HTML>

    IMG tag

    Back
    IMG tag - is a tag of .html documents to attaching images. It's must be between: <BODY>

    This tag may have some optional attributes:

  • align
  • style
  • width
  • height
    • and many other attributes.

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <BODY>
    <img src="images/filename.jpg">
    <img src="images/filename2.png">
    </BODY>
    </HTML>

    VIDEO tag

    Back
    VIDEO tag - is a tag of .html documents to attaching videos. It's must be between: <BODY>

    This tag may have some optional attributes:

  • controls
  • autoplay
  • preload
  • style
  • width
  • height
    • and many other attributes.

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <BODY>
    <video>
    <source src="filename.mp4">
    <source src="filename.webm">
    </video>
    </BODY>
    </HTML>

    AUDIO tag

    Back
    AUDIO tag - is a tag of .html documents to attaching audios. It's must be between: <BODY>

    This tag may have some optional attributes:

  • controls
  • autoplay
  • preload
  • style
    • and many other attributes.

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <BODY>
    <AUDIO>
    <source src="filename.mp3">
    <source src="filename.ogg">
    </AUDIO>
    </BODY>
    </HTML>

    SCRIPT tag

    Back
    SCRIPT tag - is a tag of .html documents to attaching scripts. It's must be between: <HEAD> or <BODY>

    This tag may have some optional attributes:

  • src
  • type
    • and many other attributes.

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <BODY>
    <script>
    javascript.code;
    </script>
    <script src="script.js"> </script>
    </BODY>
    </HTML>

    DIV tag

    Back
    DIV tag - is a universal tag of .html documents to make blocks. It's must be between:<BODY>

    This tag may have some optional attributes:

  • style
  • width
  • height
    • and many other attributes.

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <BODY>
    <div>
    Text of this block </div>
    </BODY>
    </HTML>

    TABLE tag

    Back
    TABLE tag - is a tag of .html documents to attaching tables. This tag also may be for site design. It's must be between: <BODY>

    This tag may have some optional attributes:

  • style
  • width
  • height
  • border
    • and many other attributes.

    Between this tag can be other tags <tr> <tbody> <td> for formation tables.

    Example:
    <!DOCTYPE HTML>
    <HTML>
    <BODY>
    <table border=1>
    <tr>
    <td> Item </td>
    <td> Score </td>
    </tr>
    <tr>
    <td> 1 </td>
    <td> 1000 </td>
    </tr>
    <tr>
    <td> 2 </td>
    <td> 860 </td>
    </tr>
    </table>
    </BODY>
    </HTML>
    Item Score
    1 1000
    2 860