Thursday, August 1, 2013

HTML: Tutorial 10 Making a text area for users to type in

  Hey how you doing? Ready to dive into some code!! Today's tutorial will be about making a text area so users can write comments. Many blogs have an area on the bottom where users can type into a text area to leave a comment. Ok open your text editor and type this code as always

<html>
<body>

</body>
</html>

Ok now to explain text area code, <textarea rows=" " cols=" "> textarea calls the function to make a text area box rows=" " and cols=" " is to tell what the size of the text area is going to be. After that you can put a default comment so that the user will know to type in the text area then you close the statment by putting </textarea> code. Ok now type in the code

<html>
<body>

<textarea rows="10" cols="30">
Type here....
</textarea>

</body>
</html>

Now save the file as textarea.html , then double click your file and it should come out looking like this
Ok now go ahead and type inside the box, cool right.  It's actually very simple to implement and used often when creating blogs or websites where you want to give users the chance to give feedback. Great work till next time!!




Tuesday, July 30, 2013

HTML: Tutorial 9 drop down menu's with clickable option and opening websites from drop down menu's

     Alright how are you feeling today? I am feeling great and I am sure you will be too after this tutorial. In the last tutorial we learned how to create a drop down menu. Now we are going to take another step and create another drop down menu but this time when we select an option , you will be able to direct to user to your website of choice!! If you haven't done the last tutorial I suggest you do it before using this tutorial unless you already know how to make a drop down menu.
   Alright open up your text editor and type in this code

<html>
<body>

</body>
</html>

Ok now lets break down this new code in steps. Since this is more "complex" then other subjects we tackled, we will break it down in another manner.
  
Ok now after reading the explanation carefully go to your test editor and type out this code. 





Now save this file as menulink.html and double click the file to open it. You should be able to click on the menu , select the option you want and then press the go there button to go to the selected website. Your screen should look like this




Now when I first learned this I made mistakes 2-3 times before I got it right.If it didnt work  make sure you typed everything exactly the way you see it. If it got to work Congratulations you have moved up from a beginner to now almost imtermediate. With all that you learned you can make a fun interactive website people will love. Ok there is more to learn comming up!! Your doing such a great job so far!!  Click here to go to Tutorial 10











HTML: Tutorial 8 Drop down menu's

Ok you ready to type , cause this is where it gets a little deep. Don't worry though with me as your guide you will do just fine. Drop down menu's are another cool aspect of websites and blogs. It makes your site more fun and interactive. Drop down menu's save space and make the user have a great experience because they have visual feedback instead of just reading text and filling out forms. Ok lets dive into it !! Set up your basic code 1st...
<html>
<body>

</html>
</html>

Now to make drop down menu's you will be using the <forms> tag and also a new tag called <select name=" "> which means you will be selecting a name from the menu your about to make. Now <option value="android">  means this is one of the drop down menu options and >android<  after that part is what will be displayed on the screen. Ok now type out this code

<html>
<body>



<form action="">
<select name="phones">
<option value="android">android</option>
<option value="iphone">iphone</option>
<option value="windowsphone">windowsphone</option>
<option value="blackberry">blackberry</option>
</select>
</form>

</body>
</html>

Now save it as dropmenu.html and double click on the file, it should look like this after you click on the menu












Alright!! Now with this drop down menu go ahead and really play around with making your own drop down menu. I want you guys to get really comfortable with the code. I know this is alot but its also pretty cool.  Also if you haven't already subscribe so you can get each tutorial as it comes. Alright when your ready head over to the next topic!!  Drop down menu's with links yes I am so excited !!  Click here for tutorial 9


HTML: Tutorial 7 Radio Buttons and Checkboxes

Alright how are you doing there buddy. You have come a long way and learned alot of cool stuff to make your website look awesome and professional. I am proud of you and your accomplishments!! Now we will learn some more cool stuff to add to our websites. Radio buttons and Checkboxes!!
Ok open your text editor and type the basic code
<html>
<body>

</body>
</html>

1st is radio buttons like when you go on a website to sign up and they ask if your male or female. Like lesson 6 we use <form> and <input> but this time the input will look like this  <input type="radio" name="sex" value="male">Male . Now to explain <input type="radio" means we are going to make radio buttons.  Now name="sex" value="male" name=" " is the group the radio button belongs to and value=" " defines what will be submitted to webserver if checked. The name and value will be very important when you have multiple groups of separate radio buttons. At the end of the code see >Male. That means next to the radio box thats the word you will see onscreen.  Ok now type in this code

<html>
<body>

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

</body>
</html>

Ok now save your file as radio.html and double click your file. It should look like this










Now note I press the male button if you didn't press anything both would be blank. With radio buttons you can select only one option in each group. If you select male then try to select female , the male will be unselected. Now on to checkboxes. We will use the same file radio.html for both lesson's. Now instead of <input type="radio" it will be checkbox. You see where it says HTML is easy, thats the part after the > meaning thats what you will see on your screen. Now add in the checkbox code after the radio code.

<html>
<body>

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

 <form action="">
<input type="checkbox" name="program" value="mycode">HTML is easy<br>
<input type="checkbox" name="program" value="mycode">HTML is hard
</form>



</body>
</html>

Ok now save your file, then double click and it should look like this on your webbrowser.




















Alright now your code is looking more like programmers code , confusing to a regular persons eye haha. If your webpage doesn't look similar trust me look over your code carefully and make sure you didnt miss anything. Ok wow you really made it, no longer a beginner after finishing this. Now your coding like a pro and I am proud of you for going through all these lesson's but we got more good stuff comming up for you here .    Click here for the next tutorial

HTML: Tutorial 6 create text fields for users to input names and passwords

       Ok we have gone over alot of great tools to make your website look great. Now we are going to step a little deeper into the elements that make websites more interactive. Today we are going to make text boxes that users can type thier names,emails,and passwords in. Alright you ready? Great lets get it on !!
Go ahead a make a blank text document and name it  Texter.html and place the starting code.
<html>
<body>


</body>
</html>

Good now 1st we are going to make a textbox that a user can input his name or email in.
 The <form action=" "> basically states we are going to input information that will be used in a webserver. The <input="  "> will tell the webpage to make a textbox field which the user can enter his or her information. You let the input command know that your going to let someone write text inside a textbox simply putting the word "text" . Now type this
<html>
<body>

<form action="">
Email:     <input type="text" name="email">
</form>




</body>
</html>

Ok now save your Texter.html file and double click on it. It should look like this





Now go ahead and type in it. Haha that was easy and fun. Now we will make the password portion. Now to make a password you need to change the input code to this <input type="password"  . The reason is so that the website knows to make a circle or asterisk when you put in the code and to use it as a password. Go ahead and add this

<html>
<body>

<form action="">
Email:     <input type="text" name="email"> <br>
Password:  <input type="password" name="password">
</form>




</body>
</html>

Now after typing it in go ahead and double click on your file and it should look like this







Ok now type in the password field and see what happens.  The password field will not display what you typed in but circles or asterisk . If this didnt work look over your code carefully. Also you notice something we didnt talk about <br> . Ok <br> means a break in the line, like when you press return to start in a new line. Alright go ahead and practice this , as we will continue to make more interactive elements to your website. Go to lesson 7    Click here for lesson 7





Monday, July 29, 2013

HTML: Tutorial 5 embed video's in your webpage

  Ok its lesson 5 and its a big one!! We already tackled some of the basic elements that go into making a website, now to make our website even cooler!! Today we are going to learn how to embed video's and set the size we want the video to be. Now this time open up a fresh new page in your text editor and type out the basic's

<html>
<body>


</body>
</html>

Now there are different ways to embed video's. Today we will be using <iframes> to embed video's. Alright the basic code to iframes is this  <iframes src=" put website here" width=" " height= " " </iframes>  . Thats the basic format, now next parts are going to be a little tricky so pay close attention.
Now the youtube link we will be using is this.  http://www.youtube.com/watch?v=9udpuQaaS64
Now will will put this inbetween the src=" youtube link goes here!!  "
Now in order for this to work we need to change the youtube code after we put it in the src=" ".
Now we will change the  watch?  to  embed/    then we will delete the v= . Our youtube link will look like this  http://www.youtube.com/embed/9udpuQaaS64   . Go ahead and type it in your editor and save it as video.html . Look below to make sure your code matches.


<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.youtube.com/embed/9udpuQaaS64" width="480" height="480" </iframes>


</body>
</html>

This is what the final code should look like. Go ahead a click the video.html file and it should look like this on your websrowser.

Please note: It should not take up all the page but display the video with you being able to click on video and watch it play. If this does not work please check your code very carefully.














Alright we learned how to make links,images,and now embed video's. I am proud of you , we have accomplished something major!! Keep going and learning html in our next lesson. Also leave comments or feedback to keep us going.    Click here to go to lesson 6






HTML: Tutorial 4 Make images into links and setting size of images

      Hi there again!! You ready to expand on the knowledge you gained so far. If you have been following along you can open your Learning3.html file in your text editor. If your new copy and paste this code into your text editor.

<html>

<body>

<h1> Learn Links </h1>

<p> How to add links </p>

 <a href="http://www.androidfreegamesapps.forumotion.com">Click here</a>

<p> Now add images <p>

<img src="Mario.png">


</body>
</html>

Now the first lesson will be to set the width and height of your image. Actually this is very easy since you have done most of the code in the previous lesson. In your text editor go to the section where you have your image code. Now after the "Mario.png" go ahead and add width="80" height="80"  your code should look something like this..

<html>

<body>

<h1> Learn Links </h1>

<p> How to add links </p>

 <a href="http://www.androidfreegamesapps.forumotion.com">Click here</a>

<p> Now add images <p>

<img src="Mario.png" width="80" height="80">


</body>
</html>





Now save your file as Learn4.html and double click on your Learn4.html file. After you see the image go back to your Learn4.html file and set the width="20" height="20"  ,ok now  save it again and click on your Learn4.html watch as your image has gotten alot smaller and should look something like this













Ok now as always if it doesn't work comb over your code carefully, common mistakes is to forget the "" after height and width. Now lets turn that image into a link.
1st In the website code delete the >click me<  DELETE ONLY THE WORD CLICK ME NOT THE BRACKETS. 2nd Now type inbetween the brackets that you just deleted click me go ahead and type in the image code <img src"Mario.png" width"40" height"40"> . Your code should now look like this

<html>

<body>

<h1> Learn Links </h1>

<p> How to add links </p>

 <a href="http://www.androidfreegamesapps.forumotion.com"><img src="Mario.png" width="40" height="40"></a>

<p> Now add images <p>

</body>
</html>

Now go ahead and save the file and double click on it. Now go ahead and click on the Mario image and it will take you to another website. If for some reason it didnt work, go over your code slowly to make sure you didn't make any mistakes. Most common mistake people make is >< img scr="  around that area in the code. So now you learned how to make a header,text,set image,set links, and set links in images. Alright you have accomplished alot!! Head over to the next lesson your doing great!! Lesson 5

Click here for lesson 5