This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Monday, 22 April 2013

HTML Block elements

01:32  ElearnSite  No comments



HTML Block elements


  • HTML elements can be grouped together with <div> and <span>.
  • Most HTML elements are defined as block level elements or as inline elements.
  • Block level elements normally start (and end) with a new line when displayed in a browser.
  • Examples: <h1>, <p>, <ul>, <table>

1) Inline Elements
Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>

      <div> Element

  • The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.
  •  The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.
  • When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.
  • Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables.
  •  Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data.

<span> Element


  • The HTML <span> element is an inline element that can be used as a container for text.
  • The <span> element has no special meaning.
  • When used together with CSS, the <span> element can be used to set style attributes to parts of the text.


Description


  • A HTML block is a standard block used to add text or images on a site or course page. The title bar can be left blank.
  • The block is flexible and can incorporate a variety of functions and uses in the content area.
  • It has the standard Moodle HTML editor for formatting text, adding images or creating links, switching to code view and allows any valid HTML markup to be used.
  • This enables embedding video, sounds, Flash, and other files which can add unique elements to a course or site page.


Example
<html>
<body>
<div class="menu">
  <span>Main page</span>
  <span>Contents</span>
  <span>Help</span>
</div>
</body>
</html>


Display
Main page Contents Help


Read More

HTML Images

01:27  ElearnSite  No comments



HTML Images


  • This section will show how to add images to your pages.
  • We will start out with a presentation of the two main image types on WebPages: jpg and gif.
  • After that, we will proceed with various ways to insert and customize images, with a special focus on the different alignments you can choose.
  • The image tag is used to place an image on the web page. In its most simple form it looks like this:

        <img src="image1.jpg">
        Supported image format:------>>

1).jpg
2).png
3).svg
4).bmp


  • An image may have an intrinsic dimension, but not necessarily, depending of its type.
  • To link an image to another web page (or a larger version of the image), you simply nest the <img> tag inside an <a> tag.



Description



  • The HTML <img> Element (or HTML Image Element) represents an image of the document.
  • The HTML img tag is used for embedding images into an HTML document.
  • To use this tag, the image you specify in the src attribute needs to be available on a web server. This could be your own web server or another web server.
  • Images are a staple of any web designer, so it is very important that you understand how to use them properly. In order to place an image onto a website, one needs to know where the image file is located within the file tree of the web server -- the URL (Unified Resource Locator).
  • Use the <img /> tag to place an image on your webpage. Like the <br /> tag, <img /> tag does not require a formal ending tag. Instead, all we need to do to close this tag out with a slash (/) placed just inside the ending bracket (/>).
  • Image source URLs can be either local or global, meaning that the picture files you wish to display on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).

  • Global: http://www.tizag.com/pics/htmlT/sunset.gif
  • Local: pics/sunset.gif

  • Local URLs are relative to the file path of the web page itself.  
  • For example, if the picture file is placed inside the same directory as the web page, then the local URL for the image would simply be the name of the image, since it is residing in the same directory as the HTML page.



Use

Usage:-->>

  • Browsers do not always display the image referenced by the element. 
  • This is the case for non-graphical browsers (including those used by people with vision impairments), or if the user chooses not to display images, or if the browser is unable to display the image because it is invalid or an unsupported type.
  • In these cases, the browser may replace the image with the text defined in this element's alt attribute.




Example


<!DOCTYPE html>
<html>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
</body>
</html>


Display
Norwegian Mountain Trip



 




Read More

HTML Links

01:17  ElearnSite  No comments



HTML  Links

Links are the most fundamental part of the world wide web. 
It is the links that tie it all together.

There are three different kinds of links you can have on your website:
  • Links to anchors on the current page (Internal).
  • Links to other pages within the current site (Local)
  • Links to pages outside the current site (Global).


  • It is possible to make texts and images work as links.
  • This page contains various HTML link codes - HTML codes for creating links to another web page.
  • An HTML link is one of the easiest things to do in HTML - you can link to another website within minutes, using one line of code.  
  • Having said that, there are lots of other things you can do with HTML links. For example, you can link images, change the color of your HTML links, open a link in a new window, and much more.


Description

  • The World Wide Web got its spidery name from the plentiful connections (links) that link websites together with the click of a button. 
  • What most people don't know is that HTML links are actually HTML anchors constructed using anchor tags (<a>).
  • A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location.
  •  In other words, this Hypertext Reference is where users will navigate to if they do click on this link.
  • Links are a big part of the user experience for any website. Always try to keep that in mind when working on a site's navigation.
  •  A web page that opens a new web browser window each time a user clicks a link is not the greatest way to entice users to stick around.
  • The tags used to produce links are the <a> and </a>.
  • The <a> tells where the link should start and the </a> indicates where the link ends.

Example

<!DOCTYPE html>
<html>
<body>
<p>
<a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.
</p>
</body>
</html>


Display

HTML  Tutorial This is a link to a page on this website

Read More
Twitter Delicious Facebook Digg Stumbleupon Favorites More