Read more button HTML | Practically shown with Images


              More on HTML

The hypertext mark-up language HTML language used to create documents for the world wide web. As the name implies it is a mark-up language- the original text is edited and new codes are added to indicate how and where the text should appear. 

HTML is also used for Reading document on the internet from different computer using different HTTP Protocol. It allows user to remotely access documents stored at a specific address on the network, called a URL.

 The www (world wide web) is the worldwide Network formed by all the documents called web page which are connected to one another by hyperlinks.

Webpages are usually organised Around a main page, which acts a hub for Browsing other pages with hyperlinks.

 this of the web pages joint by hyperlinks and centred around a main page is called a website.

 HTML formatting tags

 HTML text are the hidden keywords within webpage that define how your web page must format and display the content.

 most tags must have two parts, an opening and closing part. for example, <html> is the opening tag and </html> the closing tag. the closing tag has the same text used as the opening tag, but has an additional forward-slash (/) Character.

 It tends to interpret this is the ‘end’ or ‘close’ character.

<HTML> tag:      Main tag
<HEAD> tag:      Heading tag that contains the heading
<TITLE> tag:      title tag contains the title of the web page displayed on the title bar.
<BODY> tag:      Body tag contains the content of the web page
<BR> tag:      BR tag create a new line
<P> tag:      It starts a new paragraph
<B>:       Bold 
<I>:      Italic
<U>:      Underline
<Font>:       Changes the appearance of text
FACE:       Change font
SIZE:       Change text size
COLOUR:       Changes text colour
<OL>:      Creates an ordered list
<UL>:      Create an unordered list
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>, Create heading levels 

 HTML Image

 HTML command to place and image is constant. we will use the same format every time to insert image in our web page. in HTML, images are defined with the <imp> tag. The <imp>Tag is empty, which means that it contains attributes only and has no closing tag. To display an image on web page, you need to use the ‘SRC’ attribute. SRC stand for “source”. The value of the ‘SRC’ attribute is complete name of the image we want to display.

 Follow these steps to insert an image:

 Step 1:  please the insertion points Where we want image to be displayed.

 Step 2:   Type <IMG SRC=picture name”
                In place of picture name, we have to type the name of the picture.
                The image will be displayed in the web page.

 Alternative Text

 the ALT attribute specifies an alternate text for an image if the image cannot be displayed. The value of alt is the user-defined text.

 Follow these steps to add alternative text:

 Step 1:       Please the insertion points where we want to display the alternative text.
 Step 2:       Type <IMG> SRC=” computer.jpg” ALT=” Image of a computer”>.

Height and Width of an Image

 The height and width attributes are used to specify the height and width of an image.
 Type <IMG> SRC= “Computer.jpg” HEIGHT= “100” WIDTH= “100”>

 Now, the picture will be displayed with the height and width as defined.

Centre and Image

 You can place an image in the centre of a web page.

 Follow these steps to Centre an image:

 Step 1:       Type <CENTER> before the IMG tag.
 Step 2:       Type </CENTER> after the IMG tag.
                       The image appears in the centre of the webpage.

 Adding Border to the Image

Border is added to the image to make it look more attractive. We can choose the thickness of the border, also.

 Follow the given steps to add border to the image:

 Type <IMG> SRC=” computer.jpg” BORDER=5> to add border to the image.

The border is added to the image.

Wrapping Text Around the Image

 Adding text and images to website is easy. Text is added with standard HTML tags life paragraphs, heading and lists, while Images are placed on a page with the <imp> element. once we have added and image to the webpage, however, we might want to have the text flow next to the image, rather than align below it, we can use simple codes as taught below.

Follow the given steps to wrap text around the image:

 Type <IMG> SRC= “computer.jpg” ALIGN = Left> to Wrap text to the left side of the image.

Adding Space Around the Image

To make the webpage look neat, we can add some space around the image. We can change the horizontal space as well as vertical space.

Follow the given steps to add some around the image:

 To increase the space on the left and right side of the image type<IMG> SRC= “computer.jpg” ALIGN=Left HSPACE=40>

HTML Attributes

HTML attributes provide an additional information about HTML elements. Attributes are always specified in the start tag.


 HTML Hyperlinks

 Hyperlink is a word, group of words, or image that you can Click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a web page, the arrow will turn into a little hand. Links are specified in html using the <a> tag. The <a> tag is used in two ways:
    Ø  To create a link to another document, by using the “href” attribute.
    Ø  To create a bookmark inside a document, by using the “name” attribute.

 Creating a Bookmark

  Follow these steps to create a bookmark:

 Step 1:       Place the insertion point where we want to add a bookmark.
 Step 2:       Type <a href= “#C4> chapter 4 </a> at the place Where the        bookmark link should move.

 we can click on the bookmark link to move the Desire bookmark place.

 Creating a Link

 Follow these steps to create a link:

 Step 1:       Place the insertion point where we want to add the hyperlink.
 Step 2:       To type <a herf= “URL”> Link text </a>.

We have to type a URL of any web page in the place of “URL”. For Example:  <a herf= “http://www.google.co.in/ig”> Go to google homepage </a>.


As click on the hyperlink, we will be directed to the Google homepage.


Post a Comment

0 Comments