FYBSC IT Web Programming Unit II Html Page Layout & Navigation

HTML5 Page Layout and Navigation UNIT II

HTML5 Page layout and navigation  Creating navigational aids: planning site organization,  creating text based navigation bar,  creating graphics based navigation bar,  creating graphical navigation bar,  creating image map,  redirecting to another URL,  creating division based layouts:  HTML5 semantic tags,  creating divisions,  creating HTML5 semantic layout,  positioning and formatting divisions.

Creating navigational aids: planning site organization  Determine the purpose of website  Website structure: cohesive & logical  Establish a consistent look and feel  User should feel comfortable moving through and traversing through the pages & not feel lost on the website  Consistent user interface: inconsistent user interface will lead to the confusion.  Web designer should design the web site by keeping in mind need of the audience.

Website organization  Define a clear information structure  Tree structure where user can navigate level by level  Pure Linear structure where webpages are organized using linear progression like ppts.

Website organization  Define a clear information structure  Tree structure where user can navigate level by level

Website organization  Start with critical content  Once you have a clear structure for your content,  you need to go into more detail and decide on where to display that content on your site.  Important is that you start with the most critical content.  What are the core questions people have when visiting your site?  Try to answer these  or at least offer a clear starting point right on the landing page. Avoid confusion and offer straightforward answers to your visitors’ core questions

Website organization  Group related content  relevant is not what you consider relevant, but what your visitors think belongs together.  Depending on their goal and the way they approach solving it, their idea of related content might be quite different than yours.  While you try to organize content in a logical and objective way, actual users will be more subjective and goal oriented. Prospective users are subjective and goal oriented in their judgment

Website organization  Show only what’s relevant  a bit too obvious, but it seems that a lot of websites have not yet internalized the idea of keeping it simple.  What does “keeping it simple” mean anyways?  Basically, it means that you should only include content that is relevant at the time that your visitors are one a specific page of your website. This is a bad example of “keeping it simple”. It’s not relevant! Cute, but not

Website organization  Show everything that’s relevant  While it is important to focus on what’s relevant and to leave out redundant, or distracting content,  it is just as essential to really include anything relevant.  Again, it all comes down to knowing what your visitors do and what kind of content they are interested in at different stages during their visit to your site.

Website organization  Consider different audiences  your website visitors are not very likely to all be the same.  You might even have different target groups with entirely different levels of expertise, foreknowledge, and goals.  Also, people prefer different ways of content presentation, such as visual, auditory, or interactive. Make sure you know who your users are, and how they use your website.

Website organization  Offer different entry points  You can also make an even more extreme differentiation between different users and offer different entry points to your website.  For example, you can make a clear distinction between business and individual clients, or for first-time and recurring clients, or experts and novices to your field.  Especially if you can distinguish very specific groups with clearly different expectations towards your website, you might want to think about separate entry points for every group. Separate your users by their expectations towards your website.

Website organization  Offer customization  You can also decide for a less predefined and more flexible content organization.  Let your users get involved and decide for themselves what is important and what isn’t.  Especially for services or sites that are very personal, or include regular usage, a customizable approach might be perfect.  For example, programs like the Adobe Creative Suite allow you to open and hide windows according to personal preferences and their relevance for your current project.

Website organization  Test before implementation  The most important thing to consider for your content organization is that you don’t only rely on your own logic, but ask your users what makes sense to them.  They will be the people to visit your website, looking for information, or other content.  No matter what you think, your content structure should meet their expectations.

Creating text based navigation bar Home | Services | Memberships | Publications | Experience | Contact me  A text-based navigation bar is the simplest and easiest, and it is also very user-friendly.  On simple Web pages, text-based navigation bars are usually placed at the top of the page, in a single horizontal line.  Some Web designers also place a copy at the bottom of each page too, so the visitor does not have to scroll back up to the top of a page to access the links.  Each tab is underlined to reflect that it’s a link to that page or multipage area of the site.

Creating text based navigation bar Home | Services | Memberships | Publications | Experience | Contact me  Follow these instructions to create a text navigation bar:  Open a new, empty page in Windows Notepad, name the file and save it with .htm as the extension. For example, you might call it navbar.htm..  Type the elements of your site, with a word or two for each page or area.  Use the vertical bar to separate the tabs.  Center the navigation bar on the page by using the center attribute of the paragraph tag, like so: <p center>Home | Services | Memberships | Publications | Experience | Contact me</p>  To link the Home tab to the home page of your site, surround the word Home with the <a> and </a> tags. Add the href attribute like so: <a href=“home.htm”>.  Repeat for the remaining phrases and link them to the relevant page on your site.  Copy the menu to each Web page of your site.

Creating text based navigation bar Home | Services | Memberships | Publications | Experience | Contact me <html> <head> <title>HTML NAV Bar</title> </head> <body> <p> <a href="about.html">Home</a> <a href="about.html">About Us</a> <a href="clients.html">Our Clients</a> <a href="products.html">Our Products</a> <a href="services.html">Our Services</a> <a href="contact.html">Contact Us</a> </p> </body> </html>

Creating graphics based navigation bar  Text hyperlinks are clear and unambiguous, but not all that attractive.  You might prefer to create a navigation bar that uses buttons or other graphics instead of text links.  You can create the graphics yourself in a graphics-editing program.  Follow these guidelines:  Keep the size of each button small (150 pixels wide at the most).  Make each button the same size and shape. They should vary only in the text on them.  Save each button as a separate file in GIF or JPG format.

Creating graphics based navigation bar- Using IMAGE MAPS <html> <head> <title>HTML NAV Bar</title> </head> <body> <img src="planets.jpg" width="500" height="300" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="10,180,60,60" href="sun.html" alt="Sun"> <area shape="circle" coords="200,150,30" href="earth.html" alt="Mercury"> <area shape="circle" coords="300,150,25" href="venus.html" alt="Venus"> </map> </body> </html>

Attributes of <IMG> & <map> Attribute Value Description align top bottom middle left right Not supported in HTML5. Specifies the alignment of an image according to surrounding elements alt text Specifies an alternate text for an image height pixels Specifies the height of an image ismap ismap Specifies an image as a server-side image-map src URL Specifies the URL of an image usemap #mapname Specifies an image as a client-side image-map width pixels Specifies the width of an image Name text Gives the map information a unique name so that it can be refered by the USEMAP attribute of <img>

Attributes of <AREA> Attribute Value Description alt text Specifies an alternate text for the area. Required if the href attribute is present coords coordinates Specifies the coordinates of the area download filename Specifies that the target will be downloaded when a user clicks on the hyperlink href URL Specifies the hyperlink target for the area media media query Specifies what media/device the target URL is optimized for nohref value Not supported in HTML5. Specifies that an area has no associated link rel Alternate, author, bookmark, help, license, search, tag Specifies the relationship between the current document and the target URL shape default rect circle poly Specifies the shape of the area target _blank _parent _self _top framename Specifies where to open the target URL type media_type Specifies the media type of the target URL

Redirecting to another URL  A redirect happens when a web page is visited at a certain URL, but it changes to different URL.  For ex. If a person want to visit mu.ac.in in his browser and person is redirected to digitalmu.ac.in instead.  Code Ex: <meta HTP-EQUIV=“REFRESH” content=“2”; url=“http://www.myPersonalSite.com/index.html> Content=2 is no. of seconds the browser should wait before redirecting.

Creating Division Based Layouts  HTML5 offers new semantic elements that define different parts of a web page.  Used to define the presentation layout of the webpage  By using such tags we can specify the particular region of the web page so that it can be presented as well as customized with CSS for separate design.  Way of better delivery of the content to the viewer or reader.

HTML5 Semantic Elements/ Tags  What are Semantic Elements?  A semantic element clearly describes its meaning to both the browser and the developer.  Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.  Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.  HTML5 offers new semantic elements to define different parts of a web page:  <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>

Semantic Elements Tag Description <article> Defines an article <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <figcaption> Defines a caption for a <figure> element <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <footer> Defines a footer for a document or section <header> Specifies a header for a document or section <main> Specifies the main content of a document <mark> Defines marked/highlighted text <nav> Defines navigation links <section> Defines a section in a document <summary> Defines a visible heading for a <details> element <time> Defines a date/time

Creating Division Based Layouts  HTML5 offers new semantic elements that define the different parts of a web page:  <header> - Defines a header for a document or a section  <nav> - Defines a container for navigation links  <section> - Defines a section in a document  <article> - Defines an independent self-contained article  <aside> - Defines content aside from the content (like a sidebar)  <footer> - Defines a footer for a document or a section  <details> - Defines additional details  <summary> - Defines a heading for the <details> element

<DIV> tag Code Example: <html> <head> <title>DIV tag Demo</title> </head> <body text=“blue”> <p>This is the program to demonstrate DIV tag</p> <div id="div1" style="color:red" align="center"> <h1>Definition and Usage</h1> <p>The &lt div &gt tag defines a division or a section in an HTML document.<p> <p>The <div> tag is used to group block-elements to format them with CSS.</p> </div> <div id="div2" style="color:green" align="left"> <p>Tip: The &lt div &gt element is very often used together with CSS, to layout a web page.</p> <p>Note: By default, browsers always place a line break before and after the &lt div &gt element. However, this can be changed with CSS.</p> </div> </body> </html>

HTML5 <section> Element  The <section> element defines a section in a document.  According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."  A home page could normally be split into sections for introduction, content, and contact information.  Example <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>

HTML5 <article> Element  The <article> element specifies independent, self-contained content.  An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.  Examples of where an <article> element can be used:  Forum post  Blog post  Newspaper article  Example <article> <h1>What Does WWF Do?</h1> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>

HTML5 <header> Element  The <header> element specifies a header for a document or section.  The <header> element should be used as a container for introductory content.  You can have several <header> elements in one document.  The following example defines a header for an article:  Example <article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>

HTML5 <footer> Element  The <footer> element specifies a footer for a document or section.  A <footer> element should contain information about its containing element.  A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.  You may have several <footer> elements in one document.  Example <footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer>

HTML5 <nav> Element  The <nav> element defines a set of navigation links.  Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.  Example <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>

HTML5 <aside> Element  The <aside> element defines some content aside from the content it is placed in (like a sidebar).  The aside content should be related to the surrounding content.  Example <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>

HTML5 <figure> and <figcaption> Elements  The purpose of a figure caption is to add a visual explanation to an image.  In HTML5, an image and a caption can be grouped together in a <figure> element:  Example <figure> <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption> </figure>

NON-SEMANTIC & SEMANTIC TAGS EXAMPLE COMPARISON <html> <head> <title>Example</title> </head> <body> <header> Here goes logo, navigation, etc. </header> <main> A place for website's main content </main> <footer> Footer information, links, etc. </footer> </body> </html> <html> <head> <title>Example</title> </head> <body> <div id="header"> Here goes logo, navigation, etc. </div> <div id="main-content"> A place for website's main content </div> <div id="footer"> Footer information, links, etc. </div> </body> </html> Read more at

FYBSC IT Web Programming Unit II Html Page Layout & Navigation

More Related Content

What's hot

Similar to FYBSC IT Web Programming Unit II Html Page Layout & Navigation

More from Arti Parab Academics

Recently uploaded

FYBSC IT Web Programming Unit II Html Page Layout & Navigation