HTML Learning center for beginners and intermedite programmers: tutorial drop down menus html

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