Syntax for HTML, CSS, JavaScript!

First of all, for the beginners! If you know the basics about them you can skip it. But you might want to read this just to refresh the memory!

You will require a text editor, lets say Notepad, that’s perfect! Write the HTML code, save the file but remember to save it as “*.html” or “*.htm”, what I mean is instead of “*.txt” change that to HTML, so that the OS would know that the browser would open this file. Then open it, and Default browser would run loading the file you just created. You can still edit it by opening it in a notepad!

Lets begin!

HTML

HTML stands for Hypertext Markup Language, which I am sure we don’t need to argue about, but if you want to learn more about it like when it was born, who created it which organisation played a vital role then go to WikiPedia.

Its basic syntax is simple and easy to understand!

<!DOCTYPE html>
<html>

</html>

It starts with an angel bracket and ends on it. This is basic one. You can comments too, for commenting the HTML codes out! Like this:

<!-- this is a comment -->

Comments can be multiline. You can have more elements inside this HTML doc too. Such as paragraphs, headings and other elements too such as images. Here is a list for them!

<h1>This is a heading</h1>
<h2>This is heading too, but smaller than h1</h2>
<!-- you remember this one, its a comment, I am using this comment to tell you
    that below will be a paragraph -->
<p>This is a paragraph, you can extend it to a number of text depending on the paragraph size.
You can use multilines too, but keep in mind! This won't be read, as HTML won'r read multiple white spaces and will render them as only single white-space. 
For a line break, you need to use another type of element which is <br />
Whoops, its a new line! Good :)</p>
<!-- below I am going to add an image, look carefully -->
<img src="https://www.google.com/images/srpr/logo11w.png" alt="photo" />

You would have noticed, why didn’t image tag have the same </img> tag. But that is something more complicated, which is known as Self-Closing of the tags. Difference between XHTML (XML + HTML) and HTML. You can learn more about them by Googling them out, or simply go to Stackoverflow question.

You can use heading tags from h1 to h6, h6 will be the smallest and h1 will be the largest of them all.

You can use ID or classes to distinguish or group different elements.

<p id="someid" class="someclass" >This is the text in it!</p>

But keep in mind, ID should not be repeated throughout the page, its illegal in HTML, for example:

<p id="paragraph">First Paragraph</p>
<p id="paragraph">Ummm I thought both of them are similar, so I provided them with the same ID!</p>

NO! You’re wrong. You cannot have similar IDs even for similar elements. If you have similar elements or elements which you want to look alike you can use containers. Which are

<div id="div">
<p>Paragraph one!</p>
<p>Similar to the above!</p>
</div>

<p>This is <span id="span">some</span> text</p>

This way, you will wrap them up, which will use the same ID and won’t be illegal either.

So I hope you might have come to know about the basics of the HTML elements, their syntax for they are used accross browsers and platforms.

CSS

CSS stands for Cascading Style Sheets, which is used to edit the visual representation of the HTML elements in a browser. Its syntax is simple too. It uses the element’s name or either its id or class. This way,

selector {
   property: value;
}

This way, you will use a simple selector to select the element and then style it using the CSS properties and their value. For example lets say, you want to style the paragraph and change its text color to blue. Here is what you need

p {
  color: blue; // double slash is a comment in css :) 
}

/* to use multiline comment you need a double slash like // add asterisks in them
 * like /**/ then write between the asterisks, :) all the text in them will
 * be ignored as a comment. */
// You can use more then one property for each element as

p {
  color: blue; // changes its color..
  font-family: tahoma; // changes the font's family
  font-size: 20px; change the font-size, default is 16px
  background-color: #999; /* change the background-color
                           * for the paragraph not the text only */
}

If you need to select an element by its class or ID, then use these

// to use a class use '.'
.someclass {
  property: value;
}

// using ID is same, just replace '.' with '#' as
#someid {
  property: value;
}

That was all! 🙂 Good, you have learnt the basics of the coding in HTML and you have learn how to style them. Bravo!

JavaScript

JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.

To be simple, it can change the objects present in an HTML DOM on the go. You cannot edit the HTML just in the browser. You need JavaScript to change the content of the document or even change how it is styled! Look good right? Lets have a look at it.

To select an element, you need to reference to the document and then get the element by some selectors. Here is the example:

document.getElementById("someid");

This way, you will get the element which has the ID that you have specified in the parathesis. There are some other selectors too such as getElementByClassName, getElementByTagName and so on, you can learn more of them with a simple Google!

This will provide you with something as object Object. Which offcourse you don’t want, so you will go for a more detailed thing. Its value.

Let’s say you are having an input field and want its value then write this

<input type="text" name="somename" id="someid" /> <!-- note the self closing -->

<script>
// you need a script tag to write the js code
var inputval = document.getElementById("someid").value;
// not to mention, but if you want to write this then use..
// I will assume you are having a paragraph tag so
document.getElementById("idofparagraph").innerHTML = inputval;
</script>

And there, you will have the value of its! innerHTML will write the value from the input field in a paragraph, but that needs to wrapped inside a function, which we will learn in a later topic. Till now, I am sure this is enough! 🙂

If you need any more guidance, feel free to comment below. Good luck.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s