Web Designing Tutorials Free : August 2013

Friday 30 August 2013

Adding an advanced media player to your movie website.

Adding a more advanced media player to your movie website.

This is another take on the last episode we made: We are going to implement this into your website:

This is a really nice designed media player using the HTML5 and it is designed by VideoJs. Go to the website and you can even customize your media player design and download it as a new package. But for this tutorial we will be using the default package. It is so simple and can get your movie website / business up and running straight away!

Lets get started. By now you should already know how to make a header footer and body.

So lets place all of this code in a centered body.

But first we need to link the JavaScript you can download these and host them yourself but it is easy for me to explain using the provided urls'.

<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">

<script src="http://vjs.zencdn.net/4.1/video.js"></script>

Now we need to set our  parameters. as seen in the last tutorial we start with the <video> Tag.

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" 
poster ="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>

Now I shall break down the code:

 <video id="example_video_1"

giving the id for the css for further editing


class="video-js vjs-default-skin"

Declaring the skin base

controls preload="auto" width="640" height="264"

Now this is setting the controls to auto and the desired width and height of the player

 
poster ="http://video-js.zencoder.com/oceans-clip.png"

The image that the browser shows before you press play


<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />

Now telling you where should I locate the movie, so you declare the source and type of movie you can tell this

by looking at the extension type which is .mp4

The final code is this:

 <body>
        
        <center><video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" 
         poster ="http://video-js.zencoder.com/oceans-clip.png"
         data-setup='{"example_option":true}'>
         <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
        </video>
         </center>
 
 
    </body>

Hope you enjoy and keep updated for my next post!

Thursday 29 August 2013

How to create an Movie Website.

How to create an Movie Website.

We will be using CSS and Html5 To create a simple Media player.

In future tutorials I will be showing you how to incorporate other players into your website. But for now we will use this:

Firstly you want to create a header, body, Footer. Which can all be found out on how to make by going here:

http://webtechtutz.blogspot.co.uk/2013/08/website-layout-part-1-tutorial-header.html

http://webtechtutz.blogspot.co.uk/2013/08/website-layout-part-2-tutorial-body.html

http://webtechtutz.blogspot.co.uk/2013/08/PageWrappingCss.html

Now once you have this I would firstly start by putting it in its own div.

SO lets make a proper start:

<Div id="MoviePlayer">

</Div>

HTML5 has designed a video tag for ease of use so lets begin we need to use <video> </video>

Inside these tags we can set the width and height of the player. So we so this by simply adding these properties.

<video width="320" height="240" controls> </video>

Now we add the source of the movie/ where it is located by path:

<source src="./Media/movie.mp4" type="video/mp4">

Or you can change the movie type along with the extension. as you see below. In the third line of code.

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

easy stuff. now the browsers that this doesnt work in:

Internet Explorer 9+     YES     NO       NO
Chrome 6+                    YES     YES     YES
Firefox 3.6+                  NO     YES     YES
Safari 5+           YES     NO     NO
Opera 10.6+                  NO     YES     YES

Now adding the code that will play and do all the things you would expect of a basic media player:

<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>

and we need to use javascript to tell if play is paused or playing or not.

<script>
var Video=document.getElementById("video1");

function playPause()
{
if (Video.paused)
Video.play();
else
Video.pause();
}

function Big()
{
Video.width=560;
}

function Small()
{
Video.width=320;
}

function Normal()
{
Video.width=420;
}
</script>

using button onclicks function this is made easy and simply add this directly above your code in the div that you set and it is all ready to go!

Thanks again, I might make a site tutorial like putlocker also if you comment that you like.

Wednesday 28 August 2013

ASP.Net Tutorial 1 Free and Easy

ASP.Net Tutorial 1

The basics:

Using c# code above your HTML to hold variables:

@{

}

<!DOCTYPE html>

Then you can add a object such as date and time:

var currentDateTime = DateTime.Now;

so then it looks like this:

@{

var currentDateTime = DateTime.Now;

}

and then you can implement the variable into your html such as this:

<body> <h1>Helloe</h1> <p>WebTechTuts</p> <p>Right now it's @currentdatetime PM</p> </body>

Now with using the above steps we can make a simple calculator.

var a = 4; var b = 5; var theSum = a + b;

using the basic programming numeracy skills you can then incorporate that code

into a body tag like we learnt above.

IF Statements

if(Whatever){ message = "Welcome"; }

This is bassically showing you if whatever = something then messagebox = welcome

Very basic more coming very soon this is getting harder as we go through so keep studying!

Tuesday 27 August 2013

Make money with Ad Shortener

Hey lets make even more money online!

Also if you are wondering about my promised ASP.NET Tutorials do not worry I am not ignoring them I am just getting my head around the syntax and different web forms used.

Okay lets get started. So obviously you need an account. Sign up here: http://adf.ly/UiFvf

Sign in and it should look like this:

now you want to shorten a link so go to here on the page:

shorten your link and place it on your website. People click and you make money as they are redirected all 100% safe.

Thanks for reading and come back soon!

Make Money With NeoBux! Easy & Short

Go to http://www.neobux.com/ and sign up
Now you have logged in and come to the main page
you want to click view advertisements
and from their you have a page of ads
Simply click and click the red dot and you are done.
See the FAQ or Forum for info on payments!

This is my second money making tutorial. Comment if you want more.

Monday 26 August 2013

Setting up ASP.NET With Pictures

Setting up ASP.NET

Today I am going to start off with a simple installation of ASP.NET. To some this might be complicated or to others it maybe very easy, but still I will show you how to do so. Lets begin!

Download from this website ASP.NET Download Page
Open your downloaded File and come to this Page:

   3. Simply Click Install at the bottom right of the installation wizard
   4. Now click accept at the terms and conditions page
   5. And wait for it to finish downloading, This will take a while aprox: 30-40 mins.
   6. Now click finish and you are done.

Now to start up the software:

You need to click register online for your free key:

Goto the hyperlink and then enter your basic information and receive your free key.

Now you are done well done.

Get ready for another tutorial tomorrow.

Sunday 25 August 2013

Do you want ASP.NET ?

I have decided to learn ASP.NET, I have got told by some good friends that it would be good for some of you guys to learn also as it is very powerful and it is a server-sided web application framework designed to produce dynamic web pages.

These will be step by step tutorials! All from the beginning to end and Ill help anyone who needs help on the way. I am a quick learner so I will be producing a tutorial every day with high quality pictures so you can see exactly what I am doing.

If you would like to see me do this then comment below or comment on where you found my link.

Thanks a lot!

Saturday 24 August 2013

Hello People.

Today I have code the sample of the first part of the bootstrap tutorial series.

I have used and read over the bootstrap documentation and looked at some of its example templates.

It seems very easy and I have just made a menu and some simple pre-formated text.

This is design for beginners and If you want to learn more keep in touch!

Okay so lets get right into this simple tutorial.

1. BootStrap works upon divs. and uses its set containers in its source files.

2. We need to link to our source files. using this simple template. you might have to change your paths a bit.

<!DOCTYPE html>
<html>
<head>

    <title>Bootstrap Tutorial</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body>

<script src="//code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

</body>
</html>

3. Now we can add the navbar container.

<div class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
          <div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrap Tutorial</a>
        </div>

        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#Hello">Hello</a></li>
            <li><a href="#Nye">Nye</a></li>
          </ul>

</div>
        </div>
      </div>

As you can see above it is all pretty easy. its based upon an easy to use table like structure on what you want.

Okay lets move onto the text. #SoSimple!

<div class="starter-template">
    <br></br>
        <h1>BootStrap Tutorial</h1>
        <p class="lead">BootStrap TutorialBootStrap TutorialBootStrap TutorialBootStrap TutorialBootStrap Tutorial</p>
      </div>

    </div>

easy stuff really. I do not think I will make anymore bootstrap tutorials as I think it is to easy and no need for it as there is plenty already out their.

So thank you and Next we shall cover more HTML and making money.

http://pastebin.com/BhmWPxxq

Friday 23 August 2013

BootStrap Tutorial Part 1 { Introduction }

A quick overview and insight at the Css Framework called BootStrap.

Bootstrap is a Css framework design for ease of use and powerful mobile first front-end framewor.

To get started:

http://getbootstrap.com/getting-started/

Look over their documentation as it has some easy to learn templates and such for beginners to practice upon.

Good Websites for templates:

https://wrapbootstrap.com/
http://bootswatch.com/
http://inspiretrends.com/twitter-bootstrap-templates/

In The up and coming tutorials I will be showing you this powerful framework at its best. Stay Tuned!

Thanks again ashley

Thursday 22 August 2013

Short Update: BootStrap

Now that I have completed my 2nd out of 3 beginner tutorial of Layout of a website. I will now be looking over bootstrap which is a css framework. You can check that out HERE.

Now I plan to finish the layout tutorial and then move onto this. But I need new suggestions on what you guys needs help or want me to explain or teach.

Thanks a lot as always!

Website Layout Part 2 Tutorial { Body }

Website Layout Part 2 Tutorial { Body }

Okay this is part 2 of our 5 part tutorial. What I will be going over this lesson is:

Inbedding Text into div containers
Embedding Youtube Videos or other Websites using Iframes
Organizing for ease of coding

First I must suggest that you organize your divs all inside the page wrapper that you have made Like this:

<DIV ID="PageWrapper">
<DIV ID="Header">
<DIV ID ="BODY">

</div> 

</div> 

</div> 

So as you can see above we structure the Css as we go. But we must work on our website from top to bottom. That makes it easier for coding and if you have a problem note it and go back later.

Now that we have our body div to work inside we can start designing. First I am going to contain a left and right container and then add a center container.

<DIV ID ="BODY">

<div id="Hello">

<div id="Center">

</div> 

</div> 

</div> 

Now you see we have a set of divs now we want to either put an Iframe or Information inside them, so to add text simply use the <P id="Test"> Tag. We use the id function so we can edit it using Css at a later stage.

Now if you want to add a YouTube video. use this code and change the link:

<iframe src="http://www.youtube.com/embed/JyAoQnyUUIQ" width="490" height="300" style="float:top" marginwidth="0" marginheight="0" frameborder="no" style="border-width:2px; border-color:black; border-style:solid;"></iframe>

Of course you can adjust the border and such. Now we want to go to the final part THE CSS:

#Hello{
width: 245px;
height: 2961px;
border: 5px solid black;
position: fixed;
top: 245px;
left: 178px;
}
#Center{
position: fixed;
left: 433px;
top: 250px;
}

Now this should position it all center and left. Ill let you complete the right side all by yourself.

This has been the tutorial. Thanks for reading hope you enjoyed and if you have problems post below.

Wednesday 21 August 2013

Make Easy Money Quickly! PayPal or Amazon Gift Card

Make Easy Money Quickly!

Another Making Money technique. So this one is quite easy but requires two things:

Ability to attract traffic to a link

Social Media Accounts

Now lets start:

Go to MyLikes and then sign up as an advertiser.

Now you want to click on the sidebar on the left and click an ad that you want to start earning with.

Goto twitter and post the but.ly link it gave you. Then right click on that link and click copy location.

From their give that twitter link to your traffic source and you will recieve money for each click.

They payout to PayPal every Friday. But if you do not want to get paid via PayPal you can leave your payout email blank and they will generate you a amazon gift card instead.

Tuesday 20 August 2013

What do you want to see me do or teach ?

I have recently opened this blog but I am looking and willing for people to request what they want me to do. So this is very simple if you think you have a good idea then post below and I will take a look over all suggestions at the end of the week and I will choose the best two ideas.

I am willing to do anything related to:

HTML

CSS

JAVASCRIPT

VB.NET

XML

Money Making

So please get commenting and even contact me via google +.

Thanks a lot once again!

Monday 19 August 2013

Website Layout Part 1 Tutorial { Header }

Hello everyone,

In this short tutorial I will show you how to layout a header of a website

Now you all should know how to make a basic HTML document.

If not here is you base:

<HTML>
<BODY>



</BODY>
</HTML>

You want to create a div to hold your header Info also known as a PageWrapper. A less In depth tutorial can be found HERE!

<HTML>
<BODY>

<DIV ID="Header">

</DIV>

</BODY>
</HTML>

Now inside the div you can put all the HTML code you want or make more divs to categories your page into sections or parts to make it simpler to understand.

Moving onto the Css this is simply going to position the header. But you can add more stuff as you progress with HTML.

#Header {
        font: 14px/1.4 'PT Sans Narrow', sans-serif;
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        border: 5px solid black;
        color: white;
        background-image:url('./Images/body.gif');
    }

I went a bit more into depth than I did with that explanation above but you can easily see what you need to implement to make a working header, Now back to the HTML.

Adding an Image / Logo

<center><img src="./Images/Logo.gif" alt="WHATEVER" width="130px" height="109px" id="Logo" /></center>

Slogan:

<p id="blogSlogan">Your Number 1 Gaming Website</p>

Social Media Icons Implement:

Go to www.niftybuttons.com and choose the Icon Set you would like and follow the website instructions.

Implement the code underneath the logo and you are done.

Now back to the last part of Css.

#Logo{
        position: relative;
        left: 9px;
        top: 30px;
        width: 500px;
        height: 50px;
    }
#Header{
position: fixed;
left: 1050px;
top: 13px;
}

How to use Social Media Icons with HTML Tutorial

Hi There once again,

If this is your first time visiting please share this website among your friends as I hope to satisfy all of your coding needs and hope to help anyone with any problems.

In this tutorial I will show you how to use Social Media Icons with HTML.

1st: Download a Icon Set Can be found on Google But it is safer to Download from my Blog.

2nd: Add this code to your HTML code:

3rd: Adjust with Css: I will contribute my code as It will simplify and show you how easy it is.

#SMIcons{
position: fixed;
left: 1108px;
top: 13px;
}
#TSMIcons{
position: fixed;
left: 1050px;
top: 13px;
}

Tinker with this a little and your social media will look perfect!

4th: By now you should know how to use css as it is fairly easy to understand if you dont understand go back to some of my other tutorials.

Finally we are done! Well done!

Social Media Icon Sets Free

Social Media Icons Free

I have been searching through the internet and I have found 4 Very Good Social Media Icons Sets.

Download:

http://www.mediafire.com/?v2hxvyuvff7clv7

Images:

I will be bringing out a tutorial on how to implement these into your HTML or blog code.

Thanks again.

I have obtained these icon sets from a number of different blogs and I do not take ownership of any.

Sunday 18 August 2013

Make Money By PTC Tutorial!

Okay so a little stray away from HTML & Css But I have just come across this nifty site called Clixsense.

Its method of earning is called PTC. Which stands for Pay To Click, First you want to sign up to the link below:

http://goo.gl/bfUvmt

Now you want to verify your the email they sent you. and then go back to the site and click view ads.

Now choose a high payout add that is located in the bottom of each ad box.

There we go! You are earning!

Css Shapes

Square

#square { width: 100px; height: 100px; background: red;}

Rectangle

#rectangle { width: 200px; height: 100px; background: red; }

Circle

#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

Oval

#oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }

Triangle

#triangle{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

Star

#star { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; }

Pentagon

#pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; } #pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red; }

This is a very short list of shapes you can find more over on the site that I learned all of these from and full credit for the code and the pictures as they helped me learn what I brought you.

http://css-tricks.com/examples/ShapesOfCSS/

PageWrapping Tutorial Begginners / HTML CSS

PageWrapping Tutorial Begginners

Hello,

Today I am going to tell you about page wrapping and how they can be used to layout your webpage.

In this tutorial you will need a HTML and Css file.

So first we need to make a div in html:

<HTML>
<BODY>

<DIV ID="PageWrapper">

</DIV>

</BODY>
</HTML>

Very simple I know but this is a very simple way to contain the page wrapper now if you want to place things inside the page wrapper you would put it in the div and work inside of that.

Now we need to edit that Css file:

#pageWrapper {
        font: 14px/1.4
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        border: 5px solid black;
    }

Now this code: It sets the font and the line spacing, then it sets the width, and then sets the margins for the center of the page and then a template border for measuring up different other attributes.

So hope you enjoyed this one again.

Thanks a lot

Saturday 17 August 2013

HTML Css for Beginners

Hello Again I am giving a short tutorial on HTML & Css for Begginers.

It has come to my attention that a few people prefer to use HTML tables and not Css using HTML divs I think that css with divs is much better and is easier to code/ play around with. In this short tutorial I will cover the basics of HTML and Css being used in conjunction with each other.

Okay so lets get started:

Make your HTML Document:
Very simple example:

<HTML>
<BODY>

</BODY>
</HTML>

Now to add a div you must insert it within the <BODY> tag, Like this:

<HTML>
<BODY>

<Div id="Banner">

</Div>

</BODY>
</HTML>

Okay for now this do nothing so we need to add our css into the file. To do this you need to create a .css file and link to it by using this code:

<link rel="StyleSheet" href="./Enter Path Here" />

So now you have done that we can move onto designing the shape we are going to build in our Css File:

#Banner{
width: 1000px;
height: 300px;
background: grey;
}

Lets take you through this. The Number Sign + Banner is identifying which div you want to edit, and then using simple brackets to enclose what you want to use to edit the selected div. width and height are easy to understand and dont forget to use colons and semicolon after the statements.

This has been my short tutorial expect more from me and share this far and wide.

WebTechTutz Introduction

Hello,

My name is Ashley and I have made this blog to show and share my knowledge of the most common web languages, I hope to bring you the coolest and latest developments of mine and others work.

I have many years of knowledge with JavaScript, HTML, Css and XML so I am here to serve any of your problems.

I will be sharing source codes, Methods, Tutorials and much more.

My recent projects has been:

Made a Gaming Website
Developed an advanced CSS menu

If you have any ideas on what I should share please contact me.

Thanks again please check back!