HTML

-

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
  • Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.
  • As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

Basic HTML Document

In its simplest form, following is an example of an HTML document 
<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
 
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>
 
</html>

HTML Tags

As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.
Above example of HTML document uses the following tags −
Sr.NoTag & Description
1<!DOCTYPE...>
This tag defines the document type and HTML version.
2<html>
This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.
3<head>
This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.
4<title>
The <title> tag is used inside the <head> tag to mention the document title.
5<body>
This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.
6<h1>
This tag represents the heading.
7<p>
This tag represents a paragraph.
To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage.
World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.

HTML Document Structure

A typical HTML document will have the following structure −
<html>
   
   <head>
      Document header related tags
   </head>
   
   <body>
      Document body related tags
   </body>
   
</html>

Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages.

Image

You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.

Example

To try following example, let's keep our HTML file test.htm and image file test.png in the same directory 
<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
 
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
 
</html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.

Set Image Location

Usually we keep all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image test.png.

Example

Assuming our image location is "image/test.png", try the following example 
<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
 
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
 
</html>

Set Image Width/Height

You can set image width and height based on your requirement using widthand height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
 
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
 
</html>

Set Image Border

By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
 
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
 
</html>

Set Image Alignment

By default, image will align at the left side of the page, but you can use alignattribute to set it in the center or right.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
 
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
 
</html>

BACKGROUND

By default, your webpage background is white in color. You may not like it, but no worries. HTML provides you following two good ways to decorate your webpage background.
  • HTML Background with Colors
  • HTML Background with Images
Now let's see both the approaches one by one using appropriate examples.

Html Background with Colors

The bgcolor attribute is used to control the background of an HTML element, specifically page body and table backgrounds.
Note − The bgcolor attribute deprecated in HTML5. Do not use this attribute.
Following is the syntax to use bgcolor attribute with any HTML tag.
<tagname bgcolor = "color_value"...>
This color_value can be given in any of the following formats −
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Example

Here are the examples to set background of an HTML tag 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
 
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>
This will produce the following result −

Html Background with Images

The background attribute can also be used to control the background of an HTML element, specifically page body and table backgrounds. You can specify an image to set background of your HTML page or table.
Note − The background attribute deprecated in HTML5. Do not use this attribute.
Following is the syntax to use background attribute with any HTML tag.
Note − The background attribute is deprecated and it is recommended to use Style Sheet for background setting.
<tagname background = "Image URL"...>
The most frequently used image formats are JPEG, GIF and PNG images.

Example

Here are the examples to set background images of a table.
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
 
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

Patterned & Transparent Backgrounds

You might have seen many pattern or transparent backgrounds on various websites. This simply can be achieved by using patterned image or transparent image in the background.
It is suggested that while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible even as small as 1x1 to avoid slow loading.

Example

Here are the examples to set background pattern of a table 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
 
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>


FONT

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.
Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>
This will produce the following result −

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size = "+n"> or <font size = "−n">

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>
This will produce the following result −

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user's computer.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>
This will produce the following result −

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.
Note − Check a complete list of HTML Standard Fonts.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.
Note − You can check a complete list of HTML Color Name with Codes.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
 
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
 
</html>
This will produce the following result −

The <basefont> Element

The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
 
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
 
</html>


Comments

Post a Comment

Popular posts from this blog

MICROSOFT WORD

-
Image
Cover Pages Following are the simple steps to add a cover page in a Word document. Step 1  − Click the  Insert tab , and click the  Cover Page  button available in the Pages group. This will display a list of  Built-in Cover Pages  as shown below. Step 2  − Choose a cover page from the options available in the gallery. The selected cover page will be added as the first page of your document which can later be modified according to the requirements. If you want to place the cover page elsewhere except the first page, right-click the cover page in the gallery and select the location you want from the menu that appears. Header and Footer The following steps will help you understand how to add header and footer in a Word document. Step 1  − Click the  Insert tab , and click either the  Header button  or the  Footer button  that which needs to be added first. Assume you are going to add Header; when you click the  Header button  it will display a list of built-
Read more

SUKEM

-
Image
KARNIVAL SUKAN ANTARA KOLEJ ATAU LEBIH DIKENALI DENGAN SUKEM INI DAPAT MENONJOLKAN BAKAT PELAJAR YANG TEPENDAM. AKTIVITI SEMAKIN HANGAT APABILA PENYOKONG SETIAP KOLEJ MEMBERI SEMANGAT KEPADA PEMAIN KOLEJ SENDIRI KETIKA PERTANDINGAN BERLANGSUNG. PENUTUPAN SUKEM BERLANGSUNG DENGAN PENUH GILANG GEMILANG DI STADIUM UKM. APABILA KOLEJ AMINUDDI BAKI DINOBATKAN SEBAGAI JUARA KESELURUHAN, KAMI BERSORAK KEGEMBIRAAN TIDAK TERKATA
Read more

MICROSOFT ACCES

-
Image
Microsoft Access is a Database Management System (DBMS) from Microsoft that combines the relational Microsoft Jet Database Engine with a graphical user interface and softwaredevelopment tools. It is a member of the Microsoft Office suite of applications, included in the professional and higher editions. Microsoft Access is just one part of Microsoft’s overall data management product strategy. It stores data in its own format based on the Access Jet Database Engine. Like relational databases, Microsoft Access also allows you to link related information easily. For example, customer and order data. However, Access 2013 also complements other database products because it has several powerful connectivity features. It can also import or link directly to data stored in other applications and databases. As its name implies, Access can work directly with data from other sources, including many popular PC database programs, with many SQL (Structured Query Language) databases o
Read more