Thursday, August 31, 2017

Flash Addition Tags

Flash Addition

One of the most interesting elements of the Flash Animation Web site. Attractive navigation bars, banners, buttons, etc. to add animation of the flashers, such as make the interface of the web site attractive, along with the site become friendly. Animated animation (SWF) file can be easily added like audio and video using the <embed> tag on the page made by HTML.


Preparation
You need to have a folder called flash in the desktop, save a video file named flash.swf.
Practicing Project
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body>
<Center>
<Embed src = "flash.swf" width = "250" height = "240">
</ Embed>
</ Center>
</ Body>
</ Html>

Open a Notepad in the Flash folder by typing the code above and then clicking Save as from the file menu, File name: index.html, Save as type: Save all files, save index.html file with Mozilla Firefox Appears as shown picture.




Project Analysis
<Embed> tag is used to add floss.
<Embed src = "flash.swf" width = "250" height = "240">
</ Embed>

Src = "flash.swf" src = "............" In this, the links to the Flash file are added.

Width = "250" height = "240", the size of the flash animation displayed in the browser is determined.

Instructions:
Instructions: If the Flash Animation is not displayed on the web page, then install the plug-ins as per the Flash Player or browser's instructions.

Video Tags

Video Addition

Video is the most suitable medium for the presentation of the actual event that took place. Currently the video is not only the means of expressing people's entertainment and real events but it has become one of the primary means of education.

A number of educational web sites publish new tutorials on different topics as well as video tutorials on a daily basis. Which is not only creating opportunities for people to learn and learn from any part of the world, but also plays an important role in spreading education through creating open platforms for discussion and discussion. The page made by HTML can be easily embedded and controlled by using <embed> tags.


Preparation
You should take a video named folder in the desktop and keep a video file saved in video.wmv.
Practicing Project
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body>
<P>
<Center>
<Embed src = "video.wmv" width = "344" height = "300"
Autostart = "false" controller = "true" loop = "false">
</ Embed>
<H3 style = "color: # F00"> Click the play button and enjoy video. </ H3>
</ Center>
</ P>
</ Body>
</ Html>

Appears as shown picture.




Project Analysis
The <embed> tag is used to add the video.
<Embed src = "video.wmv" width = "344" height = "300"
Autostart = "false" controller = "true">
</ Embed>

Src = "video.wmv" src = "............" In this, the link to the video file is added.

Height = "344" width = "300" sets the size of the video player displayed in the browser.

The controller = "true" specifies whether to display the video player on the web page. If the controller = "......... .." is written in true then the video player will appear and the video player will not be displayed if false.

Loop = "false", the video file will not play once and it will be directed repeatedly in the form of the loop. Since false is written; So play it once.

By autostart = "false", the video file will play with autoplay as soon as the web page is loaded, or the video player will play it after clicking on the play button. Since false is written; So it will not be autoplay, the video player will play after clicking on the play button.

Instructions:
If the audio player is not displayed on the web page, then install the necessary plugins according to the browser's instructions.

Audio Tags

Audio Addition
In case of presentation, text and images, as well as audio-video, it becomes more vivid. This work can be done as well through web media and it is not possible through any other media. Easily create and control audio files using the <embed> tag on the page created by HTML.



Preparation
The desktop should take an audio name folder and save an audio file saved in the audio.mp3 file.
Practicing Project
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body>
<P>
<Center>
<Embed src = "audio.mp3" height = "35" width = "300"
Controller = "true" loop = "false" autostart = "false">
</ Embed>
<H3 style = "color: # F00"> Click play button and enjoy music. </ H3>
</ Center>
</ P>
</ Body>
</ Html>

Open a notepad in the audio folder created in the desktop by typing the code above and then clicking on Save as from the file menu, save as file name: index.html, Save as type: All files, save index.html file with Mozilla Firefox Appears as shown picture.



Project Analysis
<Embed> tag is used to add audio.
<Embed src = "audio.mp3" height = "35" width = "300"
Controller = "true" loop = "false" autostart = "false">
</ Embed>

Src = "audio.mp3" here src = "............." In this, the link to the audio file was added.

Height = "35" width = "300" sets the size of the audio player displayed in the browser.

The controller = "true" specifies whether the audio player should be displayed on the web page. If the controller = "......... .." is true then the audio player will be displayed and the audio player will not be displayed if false.

Through the loop = "false", the command will be played repeatedly in the form of the loop as the audio file does not play once. Since false is written; So play it once.

By autostart = "false", the audio file will be played as autoplay as soon as the web page is loaded, nor will it be directed to the audio player when the play button is clicked. Since false is written; So it will not be autoplay, audio player will play after clicking on the play button.

Instructions:
If the audio player is not displayed on the web page, then install the QuickTime Player or install the plugin plugins as per the browser's instructions.

Script Tag

Script

HTML is not a programming language. So, on web pages, various scripting languages are used to add programming features, such as JavaScript, Jquery etc. Through this, it is possible to do a variety of interesting and important tasks, including displaying local time on web page, displaying time date, browser identification, time and events, to show users a special message.

To add scripts to JavaScript, Jquery etc., the HTML <script> </ script> tag is used. Such as
                          <Script type = "text / javascript" src = "jquery.js"> </ script>
                          <Script type = "text / javascript" src = "sliding_effect.js"> </ script>

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
<Script type = "text / javascript">
Function show_alert ()
{
Alert ("Welcome to www.tutohost.com");
}
</ Script>
</ Head>
<Body bgcolor = "# 009933">
<Input type = "button" style = "margin-left: 150px; width: 100px; height: 50px; font-size: 18px; color: # F00" onclick = "show_alert ()" value = "Click Me" />
</ Body>
</ Html>

Open a Notepad and by typing the code above and clicking Save as from the file menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox and look like the image shown below.



If click on the Click Me button, you will see the welcome to www.tutohost.com in an alert box.

Meta Keyword

Meta

A web site is popular only when it comes to the needs of the person and anyone can search the site easily by searching engine. The web programmer's work is called search engine optimization because a web page can easily find a search engine. Search engine optimization is an important issue for any web site. This important task is done using the meta tag on the web page.


Http://www.tutohost.com/bangla/html/2.php The page is written in Meta Tags ....

<Meta name = "description" content = "The simple way to write HTML programs and the primary one and the general tags will be discussed." />

<Meta name = "keywords" content = "writing HTML program, html bangla tutorial" />

Google is a popular search engine known to all of us. If http://www.tutohost.com/bangla/html/2.php is searched using Google search engine then it will come like a picture below.



First, the title of the page, then the link and the next "General method of writing the HTML program and the initial one project and the general tags will be discussed."

Which is <meta name = "description" content = "..........................................". /> Has been written in.

<Meta name = "keywords" content = "..........................................." /> Is written in the "HTML program written, html bangla tutorial" and it is called ward.
When we search a search engine by typing a sentence, the search engine breaks the sentence and divides it into multiple keywords. So what is the key to finding a web page in search engine search engine. This is the time to create a page via HTML
<Meta name = "keywords" content = "..........................................." />
Possible keywords are added.

<Meta name = "author" content = "infinite kumar" />
<Meta name = "author" content = "..............." /> is used to submit the author's name to the search engine.

Meta tags are also used to refresh web pages.
<META HTTP-EQUIV = "REFRESH" CONTENT = "15; URL = http: //www.tutohost.com">
Using the above code, http://www.tutohost.com page refreshes once every 15 seconds.

Head Elements

Head Element

Head tag or <head> and head element are an important part of any HTML page. Because <head> .... </ Head> means all important tags are placed in <title> <link> <meta> <style> <script> as the head element. Through these, there are many important information related to pages in the browser, as well as important tasks like search engine optimization.




Title
The <title> </ title> tag is used to display the title of the page in the title bar of the browser.
<Title> Our HTML Tutorials </ title>
The above code shows the "Our HTML Tutorials" in the title bar of the browser.

Link
<Link> </ link> is used to link to CSS style sitelinks.
<Link rel = "stylesheet" type = "text / css" href = "styles.css" />

Meta Elements
Meta Search engine makes important work for optimumization. It will be discussed in detail in this post.

Style
The <style> </ style> tag is used to use the inner style seat. Such as

<Head>
<Style type = "text / css">
Body {background-color: red;}
P {margin-left: 20px;
    Font-weight: bold;
    Color: # 006; }
</ Style>
</ Head>


Script
<Script> </ script> tags are used to add scripts to JavaScript, Jquery etc. Such as

                         <Script type = "text / javascript" src = "jquery.js"> </ script>
                        <Script type = "text / javascript" src = "sliding_effect.js"> </ script>
Example Programs
Download the source file from the following link, Extract it, open the index.html file with Mozilla Firefox and look like the image shown below. And the title of our HTML tutorial will appear in the title bar of the browser.

HTML CSS

CSS

At present, the structure of the web page is created with HTML, the design is created by CSS, and the text is stored in the database. Therefore, CSS's role is very important to make the page attractive as well as to make it more useful. CSS can be added in three ways on the page created by HTML.

1. External Style Sheet
2. Internal Style Sheet
3. Inline Style Sheet

External Style Seat
In this process, HTML files and CSS style seats are placed in two separate seats. And in the following way the link between HTML's <head> </ head> tag is created.
<Head>
<Link rel = "stylesheet" type = "text / css" href = "http://tutohost.com/bangla/style.css">
</ Head>

Internal Style Seat
In this method HTML and CSS styles are placed in the <head> </ head> tag in the same seat. This is why the <style> </ style> tag is used in the following way.
<Head>
<Style type = "text / css">
Body {background-color: red;}
P {margin-left: 20px;
Font-weight: bold;
Color: # 006; }
</ Style>
</ Head>
Inline Style Seat
In this process, CSS style is included in each HTML tag. For this reason, style attributes are used in the following ways.
<P style = "margin-left: 120px; font-weight: bold; color: # 060;">

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
<Link rel = "stylesheet" type = "text / css" href = "http://tutohost.com/bangla/style.css">
<Style>
Body {background: green; Font-family: verdana; Font-size: 15px;}
H3 {font-size: 25px; Font-family: Tahoma; Color: red;}
</ Style>
</ Head>
<Body>
This is a paragraph
<br />
<H3>
Bangladesh is a beautiful country
</ H3>
<P style = "color: # 600">
This is a paragraph This is a paragraph. <br />
This is a paragraph This is a paragraph. <br />
This is a paragraph This is a paragraph. <br />
This is a paragraph This is a paragraph. <br />
This is a paragraph This is a paragraph. <br />
</ P>
</ Body>
</ Html>
Open a Notepad and by typing the code above and clicking Save as from the file menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox and look like the image shown below.

Layouts

Layout

Depending on how good a webpage is, the page layout will depend entirely on the page layout. Previously all web site layouts were made using HTML only. Currently CSS is used with HTML. Rows and columns of <table> are used to create layouts using HTML only.

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<Table width = "400" border = "0">
<Tr>
<Td colspan = "3" style = "background-color: # 93C;">
<H1> Web Page Header </ h1>
</ Td>
</ Tr>
<Tr valign = "top">
<Td style = "background-color: # C99; width: 100px; text-align: top;">
<P> <b> Side bar </ b> <br />
<a href="#"> PHP </a>
<br />
<a href="#"> HTML </a>
<br />
<a href="#"> CSS </a>
<a href="#"> Wordpress </a>
</ P> </ td>
<Td style = "background-color: #EEEEEE; height: 200px; width: 400px; text-align: top;"> <h2 style = "color: # 900"> This is heading. </ H2>
<P style = "color: # 006"> This is a paragraph. This is a paragraph. This is a paragraph. <br />
This is a paragraph. This is a paragraph. This is a paragraph. <br />
This is a paragraph.This is a paragraph.This is a paragraph. <br />
This is a paragraph.This is a paragraph.This is a paragraph. </ P> </ td>
</ Tr>
<Tr>
<Td colspan = "2" style = "background-color: # 999; text-align: center;">
Copyright © 2012tutohost.com </ td>
</ Tr>
</ Table>
</ Body>
</ Html>
Open a Notepad and by typing the code above and clicking Save as from the file menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox and look like the image shown below.

Color & Codes

Colors and codes

The use of colors on web pages is very important. A web page is composed of one or more paragraphs, titles, tables, backgrounds, borders, etc. Each of these elements has to use some colors. To specify the background color for a particular page, after typing body in the <body> tag, bgcolor = "" will be written with a space followed by "black", "silver", "gray", "white", "marrow", "ray", "fur", "fuschia", "green" , OLIVE, YELLOW, NAVY, BLUE, TEAL, and AQUA, any one of these sixteen colors will be visible in the page's background. Since case is not sensitive then there is no problem writing in lower case, as written, <body bgcolor = "green">.
Besides, using the hexadecimal code can also be selected in the background color. For example, the above code can be written as: <body bgcolor = "# 00FF00">
The color piker can be easily collected for different color hexadecimal codes. You can also do the following charts. The hexadecimal code starts with a # symbol at the beginning of the order.


There is another interesting method to give a background color. These three colors are red, green and blue, and all the other colors are composed of these three colors. If you combine these three colors and create new colors, then it is not bad. To accomplish this task, the green background can be written as follows
<Body bgcolor = "rgb (0,255,0)">.
Here rgb stands for red green blue (0, 255,0), meaning that the color of red, green, blue in color respectively, 0%, 100%, 0% because of the pure green color taken here. And any color value can be up to 0-255. Since the value of g or green is 255 so that is 100%. Changing the value of the three colors to 0-255, you can create new colors as desired.

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<H2 style = "color: # ff0000">
This is your website
</ H2>
<P style = "color: # 093">
This is a paragraph. <br />
This is a paragraph <br />
This is a paragraph. <br />
This is a paragraph. <br />
</ P>
</ Body>
</ Html>

Open a Notepad and enter the code above and click on Save as from the File menu, save as file name: index.html, Save as type: All files, save index.html file with Mozilla Firefox, as shown below.

Eye Frames

Eye frames


Eye frames are one of the main ways to display one or more web pages on a web page. It is important to publish a link to different web pages on topics relevant to the presentation, as well as it does not get worse if you can scroll it in the short space.


Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "# f00">
<Center>
<H2 style = "color: # f00"> This is an example of iframe. </ H2> <br />
<Iframe src = "http://www.tutohost.com/bangla/html/" width = "350" height = "170">
<P> This rowser does not support iframes. </ P>
</ Iframe>
</ Center>
</ Body>
</ Html>

Open a Notepad and by typing the code above and clicking Save as from the file menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox and look like the image shown below.


Discuss the program
<Iframe> </ iframe> tags are used to create eye frames.
Width = "350" height = "170" These two attributes indicate the size of the I frame.
If a browser does not support the I frame, then <p> this rowser does not support iframes. </ P> for this rowser does not support iframes. The text will be displayed

Frame Tag Use

HTML frame

The frame was used in the previous day to divide a web page into HTML. Frames used to decrease day by day. At the present time, there is the use of frames, the frames are made using the printed pages together is quite difficult. Apart from it many dislike. Instead, CSS is now used to divide a page into more than one section. However, there is a need to have some idea about frames for enriched HTML knowledge.

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "# 000">
<Frameset rows = "12%, 88%">
<Frame src = "style.html" scrolling = "no">
<Frameset cols = "27%, 74%">
<Frame src = "link.html">
<Frame src = "textfor.html">
</ Frameset>
</ Frameset>
</ Body>
</ Html>

As type: All files, save index.html file with Mozilla Firefox will look like the image shown below.

Discuss the program

<Frameset rows = "12%, 88%"> in the first row along the entire pejatare is divided into two parts.
<Frameset cols = "27%, 74%"> column along the bottom row is divided into two parts.
<Frame src = "style.html" scrolling = "no"> page to display the first frame has been stylehtml.
<Frame src = "link.html"> and <frame src = "textfor.html"> Arrange the link.html and textfor.html pages in the 1st and 2nd frame respectively, respectively.

Forms Tag use

HTML Forms

The HTML form is an important topic to discuss. HTML forms are typically used to collect user information, including dynamic and database-based web site log-in systems, voting systems, contact forms. An HTML form is composed of several components. These are:

1. Text box
2. Text area
3. Radio button
4. Submit button
5. Check box
6. Dropdown list
Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "# 000">
<Center>
<Font face = "SolaimanLipi" color = "# fe0321" size = "6">
Help with your information.
</ Font>
</ Br>
</ Br>
<Form name = "info" method = "post" action = "info.php">
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
Name: & nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp;
</ Font>
<Input type = "text" value = "Enter your name" name = "name"> <br /> <br />
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
Father's Name:
</ Font> & nbsp; & Nbsp;
<Input type = "text" value = "Enter your father's name" name = "name">
<br /> <br />
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
Address:
</ Font> & nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp;
<Textarea rows = "3" cols = "20"> </ textarea>
<br />
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
You male
</ Font>
<Input type = "radio" value = "male" name = "gender">
<br />
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
What you woman
</ Font>
<Input type = "radio" value = "female" name = "gender">
<br />
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
In the city you live in:
</ Font>
<Select name = "district">
<Option> Kustia </ option>
<Option> Dive </ option>
<Option> Khulna </ option>
<Option> Sylhet </ option>
<Option> Bheramara </ option>
<Option> Jessore </ option>
</ Select>
<br />
<br />
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
educational qualification:
</ Font>
<br />
<Input type = "checkbox" value = "checkbox1" name = "checkbox">
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
SSC
</ Font>
<br />
<Input type = "checkbox" value = "checkbox" name = "checkbox">
<Font face = "SolaimanLipi" color = "# fe0321" size = "4">
ISSc.C
</ Font>
<br />
<br />
<Input type = "submit" name = "submit" value = "submit">
<br />
<br />
<Input type = "reset" value = "delete" name = "clear">
</ Form>
</ Center>
</ Body>
</ Html>

Open a Notepad and by typing the code above and clicking Save as from the file menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox and look like the image shown below.

HTML Listing Tag's Use

HTML Listings

A webpage is sorted out and lists one of the best ways to present information. With HTML, two types of lists can be made, one is the order list and the other is an undoard list. Various information is presented randomly in the order list and there are serial numbers at the beginning of every line. On the other hand, there are small circular or square sign in front of each line in the order order list. <Ul> </ ul> tag is used to create an order list through HTML and <ol> </ ol> to create an order list.


Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "# 00CC99" style = "text-align: center">
<H4> Disc Type list </ h4>
<Ul type = "disc">
<Li> Home </ li>
<Li> About Us </ li>
<Li> Contact Us </ li>
</ Ul>
<H4> Circle Type list </ h4>
<Ul type = "circle">
<Li> HTML </ li>
<Li> CSS </ li>
<Li> PHP </ li>
</ Ul> <h4> Square Type list </ h4>
<Ul type = "square">
<Li> Pragaph </ li>
<Li> Table </ li>
<Li> List </ li>
</ Ul>
</ Body>
</ Html>
Open a Notepad and enter the code above and click on Save as from the File menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox, and look like a picture next to it.

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "# 00CC99" style = "text-align: center">
<H3> Alphabet Type list </ h3>
<Ol type = "A">
<Li> Home </ li>
<Li> About Us </ li>
<Li> Contact Us </ li>
</ Ol>
<H3> Number Type list </ h3>
<Ol type = "1">
<Li> HTML </ li>
<Li> CSS </ li>
<Li> PHP </ li>
</ Ol>
<H3> Roman Number Type list </ h3>
<Ol type = "I">
<Li> Pragaph </ li>
<Li> Table </ li>
<Li> List </ li>
</ Ol>
</ Body>
</ Html>
Open a Notepad and enter the code above and click on Save as from the File menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox, and look like a picture next to it.

Table Tag Use

Table additions

Today the internet has become the biggest data repository on the Internet day by day. In the compilation of data databases, images, videos etc., a content can be presented as interesting and complete in a webpage, in other media it is not possible. One of the ways to present data data on the web page is to use tables. Table table <table> is used to create tables.


Example Programs

<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "# 00CC99" style = "text-align: center">
<Table border = "1">
<Tr>
<Th> SL </ th>
<Th> Book </ th>
<Th> Pen </ th>
<Th> Box </ th>
</ Tr>
<Tr>
<Td> 01 </ td>
<Td> 100 </ td>
<Td> 200 </ td>
<Td> 400 </ td>
</ Tr> <tr>
<Td> 02 </ td>
<Td> 300 </ td>
<Td> 600 </ td>
<Td> 300 </ td>
</ Tr> <tr>
<Td> 03 </ td>
<Td> 500 </ td>
<Td> 800 </ td>
<Td> 200 </ td>
</ Tr>
</ Table>
</ Body>
</ Html>


Open a Notepad and enter the code above and click on Save as from the File menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox, and look like a picture next to it.

Discuss the program
<Border border = "1"> Here border bar = "1" has used a single border for the table, as per the need to use 2,3,4 etc. in the 1st place.
<Tr> </ tr> is used to create each row of the table, and <td> </ td> is used to create every cell.
The table headers have been created through <th> </ th>. The book in the <th> book </ th> will look a bit thick.
To keep any cell empty in the table <td> </ td> will not write anything in between. Only use <td> </ td>.

Photo Addition

Photo Addition

One of the important components of a web page is the image. By using appropriate images on the webpage, the page becomes interesting to users and is also used as a friendly one. The use of images in attractive navigation bars, buttons, banners, etc. is essential. The essential tag for adding images or images to the web page is <img>. There are no end tags. There is no work with <img>, always with the src attribute to use. For example, <img src = "pic.png">, then the image of pic.png will be displayed.


Preparation
A webpage named "Desktop" should be placed on the desktop, in it there should be a picture saved in pic.png.

Example Programs
<Html>
<Head>
<Title> www.dolohost.com </ title>
</ Head>
<Body bgcolor = "green" style = "text-align: center">
<H3> This is an example of image. </ H3>
<Img src = "pic.png">
</ Body>
</ Html>



Open a Notepad by typing the code above and clicking Save as from the File menu, index.html or home.html or any other name, with HTML, select All files as Save as type, and then click on the Save button. Then save the saved index.html file in the webpage folder. Now open index.html with Mozilla Firefox and look like the next picture.




If an image is uploaded to the server online, then add the image to its address pic.png. Such as

<Img src = "http://www.dolohost.com/bangla/html/images/pic.png">

Link Tag

Link

Use of links is very important in using a web site. Link's lexical meanings are attached. That means linking another page with a web page is linking. To link HTML, <a> tag or anchor tag is used. Such as <a href="http://www.tutohost.com/"> www. Tutohost.com </a> This means that the link to the page to be created should be written in the address href = "............... .." and the text that will be displayed in the link is <a href=" "> ..................... .. < / A>.

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<a href="http://www.tutohost.com/"> www. Tutohost.com </a> <br />
<a href="mailto:admin@tutohost.com"> admin@tutohost.com </a>
</ Body>
</ Html>


Open a Notepad and enter the code at the top and save the file by clicking on Save as by clicking on File name: index.html, Save as type: All files, save index.html file with Mozilla Firefox, and look like a picture next to it.

Use of Style

Style use

A new attribute of Style, HTML, allows the use of CSS in HTML itself. Various elements of web page are designed by using style or CSS. Although designs can be made through other attributes like align = "center", align = "left", bgcolor = "green", height = "100px", width = "50px, bgcolor =" green "etc., The benefits are available.

Example Program: Using Other Attributes
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<Font size = "2" face = "verdana">
This is a paragraph
</ Font>
<br />
<Font size = "5" face = "Tahoma" color = "red">
Bangladesh is a beautiful country
</ Font>
</ Body>
</ Html>

Example Program: Using Style
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<Font style = "font-family: verdana; font-size: 15px">
This is a paragraph
</ Font>
<br />
<Font style = "font-size: 25px; font-family: Tahoma; color: red;" >
Bangladesh is a beautiful country
</ Font>
</ Body>
</ Html>


Open a Notepad and enter the code at the top and save the file by clicking on Save as by clicking on File name: index.html, Save as type: All files, save index.html file with Mozilla Firefox, and look like a picture next to it.

Font Tag

Font tag

<Font> or font tag plays an important role in rendering a document properly via HTML. <Font size = "5" face = "Tahoma" color = "red"> Bangladesh is a beautiful country. </ Font> Here Size = "5" is an attribute of the font tag, which represents the element that is Bangladesh is a beautiful country. How would the size of the text be? Besides, face = "Tahoma" reveals the text of the text, titled Tahoma and color = "red", and the color of the text will be red.

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<Font size = "2" face = "verdana">
This is a paragraph
</ Font>
<br />
<Font size = "5" face = "Tahoma" color = "red">
Bangladesh is a beautiful country
</ Font>
</ Body>
</ Html>


Open a Notepad and enter the code at the top and save the file by clicking on Save as by clicking on File name: index.html, Save as type: All files, save index.html file with Mozilla Firefox, and look like a picture next to it.

Text Formatting

Text formatting

Microsoft Word is used for text formatting, Bold, Italic, Underline, strikethrough, Subscript, Superscript etc. In the case of HTML, text formatting like Microsoft Word has special significance. To properly present a document, it is necessary to have a sound knowledge about text formatting. For text formatting in HTML, <b>, <i>, <u>, <strike>, <sub>, <sup>, <big>, <small>, <strong>, <samp>, <tt>, <Abbr>, <var>, <code>, <address>, etc. tags are used.

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">

<P>
<B> (Bold) </ b> this is an example of bold. <br />
<I> (Italic) </ i> This is an example of Italic <br />
<U> (Underline) </ u> This is an example of Underline. <br />
<Strike> (Strike) </ strike> This is an example of Strike <br />
(CO <sub> 2 </ sub>) This is an example of Subscript. <br />
(E = MC <sup> 2 </ sup>) This is an example of Superscript. <br />
<Big> (Big text) </ big> This is an example of Big <br />
<Small> (Small text) </ small> <br />
<Strong> (Strong text) </ strong> This is an example of Strong. <br />
<Sample> (Sample text) </ samp> This is an example of Sample. <br />
<Tt> (Teletype) This is an example of Teletype <br />
(<Abbr> U.N.O </ abbr> United Nations Organization.) This is an example of abbreviation. <br />
(<Var> x </ var> is a variable.) This is an example of Variable <br />
(<Code> Computer code text. </ Code>) This is an example of Code. <br /> <address>
(Written by Mamun <br />
Address: www.dolohost.com <br />
E-mail: abdullaalmamunbd8@gmail.com) </ address> This is an example of Address <br />
</ P>

</ Body>
</ Html>

Open a Notepad and by typing the code above and clicking Save as from the file menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox and look like the image shown below.

Paragraph Tags

Paragraph

Any document is written with one or more paragraphs. The <p> or paragraph tag is used to create an HTML paragraph. Such as <p> This is a paragraph. </ P> Each paragraph is displayed through the browser, after each paragraph a line break is created. If the line break is needed in paragraphs then the <br /> tag is used at the end of the line.

Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<P> This is a paragraph. </ P>
<P>
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
</ P>
<P>
This is a paragraph. <br />
This is a paragraph. <br />
This is a paragraph. <br />
This is a paragraph. <br />
</ P>
</ Body>
</ Html>


Open a Notepad and enter the code at the top and save the file by clicking on Save as by clicking on File name: index.html, Save as type: All files, save index.html file with Mozilla Firefox, and look like a picture next to it.

Heading Tags

Heading

Heading tags are used to write a document or paragraph title through HTML. There are six types of heading tags in HTML that are <h1> </ h1>, <h2> </ h2>, <h3> </ h3>, <h4> </ h4>, <h5> </ h5> and <H6> </ h6>. If the title is written in a bigger size letter, then the text of <h1> </ h1> is written in the middle. And if you use others, the size of the writing will be gradually reduced.



Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<H1> This is an example of heading 1 </ h1>
<H2> This is an example of heading 2 </ h2>
<H3> This is an example of heading 3 </ h3>
<H4> This is an example of heading 4 </ h4>
<H5> This is an example of heading 5 </ h5>
<H6> This is an example of heading 6 </ h6>
</ Body>
</ Html>


Open a Notepad and enter the code at the top and save the file by clicking on Save as by clicking on File name: index.html, Save as type: All files, save index.html file with Mozilla Firefox, and look like a picture next to it

Elements & Attributes

HTML Elements

Any start and end tag in HTML and the middle part is called an element. Such as <h1> this is an example of element. </ H1>. Here is the <h1> header 1 start and </ h1> header in the last tag. Written, <h1> This is an example of element. </ H1> An element. Some tags have no elements such as <br />, <img /> etc.

Thread tag
Element content
Last tag
<H1>
This is an element
</ H1>
<P>
This is the paragraph.
</ P>
<br />


<Img />



Generally there are no elements of tags that do not have the last tag. This type of tag includes the / symbol, and before that a space is to be given.



Some HTML Attributes
Tag
Attributes
<Font>
Size = "5" face = "Tahoma" color = "red"
<H1> .... <H6> <p>
Align = "center" align = "left" align = "right" title = "Bangladesh"
<Body>
Bgcolor = "green" background = "../ images / ele.png"
<Div>
Id = "book" class = "pen" align = "center"
<Img> <table>
Height = "100px" width = "50px" border = "5px"
<Input />
Type = "text" name = "TextField"
 
Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<Font size = "5" face = "Tahoma" color = "red">
This is a paragraph
</ Font>
</ Body>
</ Html>


Open a Notepad and enter the code at the top and save the file by clicking on Save as by clicking on File name: index.html, Save as type: All files, save index.html file with Mozilla Firefox, and look like a picture next to it.


HTML Writing Method & Tags Name

Program writing method

To write any program, you need to do coding using an editor. In order to write HTML program primarily, the default editor of the Windows operating system, notepad, can be used as an editor, and it is best to use Dreamweaver and Notepad ++ as an Advanced Editor for additional benefits. The program written in HTML will be seen by any browser such as Internet explorer, Mozilla Firefox, Google chrome and Opera by saving .html extensions such as index.html.

For writing HTML program, <2> </> two sign and some of it are used like keywords like html, head, title, body etc. <> Or </> mark and a keyword written between it is called the tag together. Such as <html> and </ html>. <Body> is the body's start tag and </ body> is the last tag of body.

Simple HTML tags
Tags
Description
<Html> </ html>
The HTML document indicates.
<Head> </ head>
The head portion of the program indicates.
<Title> </ title>
The document titles indicate.
<Body> </ body>
The main content portion of the program indicates.
<a> </a>
Anchor tag
<Abbr> </ abbr>
Abbreviation tags.
<B> </ b>
Bold indicates text.
<I> </ i>
Italic indicates text.
<Big> </ big>
Specifies the text larger than usual.
<Small> </ small>
Indicates text smaller than usual.
<Blockquote> </ blockquote>
Special quotes are used to express.
<br/>
Creates a line break.
<Code> </ code>
The computer code reveals the text.
<Table> </ table>
The table is used to make.
<Col> </ col>
Used to create table columns.
<Td> </ td>
The table is used to make the cell.
<Tr> </ tr>
Table row is used to make.
<Form> </ form>
Form is used to create.
<H1> </ h1>
Header tag is up to 1-6.
<Hr />
Create parallel lines.
<Img />
Used to add pictures.
<Input> </ input>
Form input field is used to create.
<Li> </ li>
Used to create lists.
<Meta> </ meta>
Meta tag
<Ol> </ ol>
Order is used to create a catalog.
<Ul> </ ul>
Unorders are used to create lists.
<P> </ p>
The paragraph indicates
<Pre> </ pre>
Used to create pre-formatted text.
<Tt> </ tt>
Teletype refers to the text.
<Strong> </ strong>
Strong text indicates.
<Sub> </ sub>
The subscripted text indicates.
<Sup> </ sup>
Superscripted text indicates.

HTML & It's History

What is HTML?

HTML is a computer language that has created great opportunities for displaying the world's largest data-store. The main structure of a web page is created by HTML. HTML is not a programming language, it is called Hyper Text Mark Up Language. Mark Up Language One set consists of the Mark Up tag. How different portions of a web page are displayed through the browser are expressed in HTML using the Mark Up tags.


History of HTML

HTML or Hyper Text Mark Up Language Team Bernas-Lee The purpose of the preparation of HTML was to arrange for the exchange of scientific research data on the boom of the world. Developed by NCSA, Mosaic Browser developed by HTML in the 1990s. The first developed HTML3.2 was released by WC3 in January of 1997. At the end of the same year, the new version of WC3 HTML HTML4.2 released in December. In 2010, the latest version of the current HTML is available in HTML5.

Flash Addition Tags

Flash Addition One of the most interesting elements of the Flash Animation Web site. Attractive navigation bars, banners, buttons, etc. t...