Thursday 27 June 2013

tutorial # 2- WEB Development- know some more tags



AOA
Hello Everyone. CalM MinD here with 2nd Tutorial of WEB Development.
In previous session I told you about
HTML Document
Head (TITLE)
Body

And we made or 1st webpage using a very simple tag of <H1> so now we are going to try something similar to this.
I will now tell you how to enhance your first webpage, and convert that into beautiful and awesome page.

We have six types of heading tags.

<h1>this is Heading 1</h1>    ---- Bigger Size
<h2>this is Heading 2</h2>    ---- Smaller Size
<h3>this is Heading 3</h3>    ---- smaller size
<h4>this is Heading 4</h4>    ---- more smaller
<h5>this is Heading 5</h5>    ---- more smaller
<h6>this is Heading 6</h6>    ---- more smaller

Try it yourself one time, Proceed next if have tried.

A new tag is called paragraph, if you are going to write a 1, 2, 3 …100 line of description you should use this tag.
<p>write here as many lines as you want</p>
 --------------------------------------------------------------

Let’s See some formatting of text
You know about ITALIC, BOLD, UNDERLINE?? Of-course you know.

We use some following Basic tags to format our text.
<b>
Defines bold text
<i>
Defines italic text
<small>
Defines small text
<sub>
Defines subscripted text This is subscript
<sup>
Defines superscripted text This is  superscript

Try following code in our body area.
<b>THIS IS BOLD TEXT</b>
<i>THIS IS ITALIC TEXT</i>

I will tell you how to colour your webpage in CSS session for now I will tell you backbone basics of HTML only.
If you are done then proceed to next topic that is very important.
 ---------------------------------------------------------------------

Hyper Links
Hyperlinks are very important part of our webpage. Hyperlinks helps user to navigate from one part of your site to another part.

<a> is called anchor tag,
We use href attribute to tell hyper link where to take user.
How its code looks like?

<a href="url">Link text</a>

How it show on webpage

Link text

lets make one for previous post
<a href="http://uolstudyhelpers.blogspot.com/2013/06/first-tutorial-of-web-development-your.html">Click Here to go to previous post</a>

copy above code and paste in between <body></body>
part and open in your browser. you will see a link click on that.

in next session We will start a proper webpage and take that to the peak of designing.

So good bye till next Tutorial of Web Development. Soon.


Your Helper CALM MIND – Remember me in your prayers. A.H



Posted by at No comments:
Labels:

Wednesday 26 June 2013

tutorial # 1- WEB Development- your first web page


A.O.A 
Hello Every one CalM MinD here from UOL Study Helpers.

In this first tutorial of Web Development I will tell you how to make your first web page.

What Tools you need??
What you need is just a text editor and a web browser (that surely you have). Text editor I’ll prefer Notepad++ at this time the best choice. You can download it from the link bellow.



If you have downloaded and installed then proceed.


Open up your Notepad++ and it will looks like this

First tutorial of WEB Development- your first web page



We'll use some TAGS in our CODE these are some 

<html></html>   -Specifies an HTML document.
<head></head>  -Specifies an HTML document’s header.
<title></title>     -Specifies an HTML document’s title.
<body></body>  -Specifies an HTML document’s body.

take a look on following image to understand what is HTML Document, Head, and Body




Get Ready With your Keyboard and opened mind.
clear the text from notepad++ if it contains any..

type 
<HTML>
</HTML>

 <HTML> this is a opening TAG of  HyperTextMarkUp Laguage 
</HTML> is a closing tag contains "/" 

some tags must need to be closed to work perfectly.

our next step is type
<HEAD></HEAD> after <HTML> tag

you Code will look like following
<HTML>       
<HEAD></HEAD>
</HTML>

Next step write <TITLE></TITLE> tag between 
<HEAD></HEAD> Tags

you Code will look like this.
<HTML>     
  <HEAD>
               <TITLE></TITLE>
      </HEAD>
</HTML>

next Step is to Write Title of your Webpage
write title of your choice between <TITLE></TITLE> tagyou Code will look like this.

<HTML>       
      <HEAD>
               <TITLE>my title</TITLE>
      </HEAD>
</HTML>

save this file as mywebpage.html on your desktop

.html important to write at end of file name

go to your desktop and open file with you browser and look at top it will look like this

here we go...

now lets proceed to next step
write <body></body> tags after </head> closing tag.
you Code will look like this.

<HTML>       
      <HEAD>
               <TITLE>my title</TITLE>
      </HEAD>
      <body>
      </body>
</HTML>
now
<h1><h1> tag is used for heading
heading is large bold.

use this tag between you <body></body> tag 

you Code will look like this.

<HTML>       
      <HEAD>
               <TITLE>my title</TITLE>
      </HEAD>
      <body>
               <h1>This is my first Webpage</h1>
      </body>
</HTML>

 Save this file and refresh the browser

this will look like this


That's it this is your 1st webpage , quite simple but its just a beginning we'll make more beautiful pages later.


So good bye till next Tutorial of Web Development. Soon.


Your Helper CALM MIND – Remember me in your prayers. A.H

Click here for next tutorial
Posted by at No comments:
Labels:

Web Development introduction - CalM MinD

Welcome Everyone..
CalM MinD here..

If you are interested in WEB DEVELOPMENT and you know nothing about it. Do not worry at all, I am here for you. 
UOL Study Helpers is a great platform for CS students who want to learn something.

I will not tell you benefits of web development or etc. I will tell you how it works, how can you build beautiful interactive webpages using 
  • HTML (5)
  • CSS (3) 
  • JAVASCRIPT.


  • Designing webpages using HTML, CSS, and JS is called client Side programming.
  • Building Webpages using PHP, ASP .net to interact database is called server side programming.


At first we’ll Design Web Pages using only HTML, then we’ll give it sweet touch of CSS to make it more beautiful, then we’ll use JS to apply some constraints to our webpages, :D
  • you don’t know what the constraint actually is, don’t worry About it we’ll discuss it later.


So good bye till next and very First Tutorial of Web Development. Soon.


Your Helper CALM MIND – Remember me in your prayers. A.H


Click Here For Next Tutorial
Posted by at No comments:
Labels:

Courses offering CS department in fall 2013

Calm Mind

Posted by at No comments:
Subscribe to: Posts (Atom)

Counter

web stats tracker