#developmenttools1

My interaction with the coding world began in my early engineering days in India, where I learned programming languages like C, C++ and JavaScript. Markup languages like HTML or XML are not considered as programming languages however programming languages sometimes share the same syntax with markup languages. Inspite of the similarities, learning HTML and CSS in the Development Tools course (IMMT 715) was challenging. Professor Andreas Ua’Siaghail began the course by providing basic knowledge of document structures, tags, browsers, head elements and basic body and document semantics.

 We created our very own webpages with the help of the step-by-step guidance through the basic body elements like headings, paragraphs, links, anchors and images. The webpage was based on our favourite superheroes.

(Image 1: My first webpage showing my favourite three superheroes)

 In this webpage, the navigation options were basically links that were embedded in by using the paragraph (<a>) element. Although we did not have a menu at this point but included an ordered (<ol>) as well as unordered list (<ul>).

Over the next few sessions we created three separate pages for each superhero and linked them to one another with the help of a simple list having links.

(Image 2: Individual superhero page linked to other superhero pages with the help of simple list with links)

In the above image, we can see the simple list on the top of the page that has links to navigate to the other individual superhero pages as well as the main superhero page. This was the point where I learned the importance of using the link and list attributes appropriately.

e.g. 

<ul>

<li><a href="Main Page.html">Main Page</a></li> <li><a href="Spiderman.html">Spiderman</a></li> <li><a href="Hulk.html">Hulk</a></li>

</ul>

While I was getting a hang of the basic attributes there were times when a single typo would change the appearance of the page. Thus, we learned that typos could be tough to notice in the end and would require going through the code several times. I also learned the importance of a logically arranged folder structure.

(Image 3: A logically arranged folder structure for the webpage files)

The image above shows an example of a folder structure which helps avoiding errors when linking images or html files while forming codes. If a background image is not placed in the correct folder and correct hierarchy then it leads to errors while linking the image because the proper path to the image cannot be detected.

We then moved deeper into developing the navigation menu for the webpage and learned to link html and css files.  

(Image 4: Html linked to the css stylesheet with the main batman image having defined dimensions)

(Image 6: The common css stylesheet for all the individual superhero pages defining dimensions for the body, headers and the navigation menus.)

The css stylesheet above defined the font type, font colour, background image and effects for the headers and determined the positioning of the navigation menu.

(Image 5: Html linked to the css stylesheet. An additional <div class = "column1"> element added, footer added and main batman image defined as full width hence taking the full width of the column)

(Image 6: This CSS stylesheet contained additional effects for the navigation menu lists one of which was the hover effect for the menu items)

In the above case I came across the fact that the hover effect should be effective for the entire list item tab and not only the text inside the tab. This factor comes into play when we consider the usability of the website. The inappropriate hover effect is shown in the image below:

(Image 7: Notice the Hulk tab which shows the hover effect with a simple box around the text. In this case, the hover effect is not seen until the user gets the cursor on the text itself)

The final webpage consisted of the navigation menu which had the hover effect on the entire tab and not only the text. The image of the final page is given below:

(Image 8: Final webpage consisting of navigation menu with hover effect and superhero icons)

The menu is one of the most important items on a website because it allows users to navigate from page to page. If the menu is disorganized or hard to find, users will get frustrated and leave.

I came across three types of basic navigation menus viz. Horizontal menus, Vertical menus and Dropdown menus (vertical and horizontal).                     Horizontal menus are very popular. A horizontal menu appears at the top of a web page and allows all the space beneath it to be reserved for the main content. Horizontal menus are good to use when there are few menu items that have to pan across the page.Vertical menus are either used alone, or in conjunction with horizontal menus. They are especially useful in cases where the menu is too long to fit horizontally across the page. If there are a large number of menu items, it's best to use a dropdown menu. This can be used with both horizontal and vertical menus, and simply separates main menu items (that are always visible) from sub menu items (visible only with when mouseover). 

I preferred creating a simple vertical menu. I started off by creating the basic HTML layout for the menu using the  <nav> element and an unordered list. To create a sub-menu, I added a nested unordered list inside of a list item.

<nav id ="main-nav">

         <ul id= "nav-primary">

                <li><a href="#">Menu 1</a>

                      <ul class="subnav">

                             <li><a href="#">Menu Item 1<a/></li>

                             <li><a href="#">Menu Item 2<a/></li>

                             <li><a href="#">Menu Item 3<a/></li>

                             </li>

                      </ul>

                </li>

         </ul>

</nav>

Applying the desired effects in a linked css file will then give the dropdown menu shown in the image above.

Thus it depends completely on the type of website, the layout and the number of menu items while selecting the type of menu for a website.The menus should not pan out covering a large area on the page which does not feel appropriate in most cases.

Below I have added a link to website showing 20 standout navigation menu designs.

http://www.sitepoint.com/20-standout-navigation-menu-designs/