#markuplanguage

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/

  For the past few weeks, we have been exploring the ins and outs of HTML and CSS in our Production Tools Class. Both of these tools allow web developers to create websites to the specifications that they require. These are two different languages, however, and it is worth taking a moment to explore the differences between them.

  HTML is a markup language that is essentially used to create the structure of a website. Using HTML, a developer can determine the content that is present within their webpage, as well as how it is laid out. Does the website have links, images or buttons? Where are these pieces laid out on the page? These are the types of things that an HTML developer would be stressing over.

  CSS, on the other hand, is a style language that dictates the way things will look on your HTML webpage.While the HTML markup will determine what pieces are where, CSS is used to determine how those pieces look. Fonts, font colours, size of text, the width of borders and many more things can all be adjusted using CSS.  

 Why have two separate languages for the same document? The first reason that HTML and CSS are kept separate is to assist with aesthetic consistency. By centralizing all the style details within a separate style sheet, a developer can be assured that all like elements within an HTML document will look the same. If the style preferences were to be made within the HTML markup, then whenever someone wanted to change the way a certain repeating element looked, the developer would need to go through the entire document and make each change individually. With CSS, you would only need to change the properties of the selector and the changes would be applied to each element specified by the selector. Another reason that HTML and CSS are separate documents is that it prevents clutter on the HTML document. As an HTML document becomes more complex, having the style elements on a different page removes a significant amount of text from the HTML document, which makes the document much easier to analyze and edit.