Computer course
Computer course learning
www.freecomputercource.in
Online shopping link
| HTML Tags | ||||||||||||||||||||||||
| Block Tags | ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| <acronym>..text..</acronym>Tag | ||||||||||||||||||||||||
| The tag defines the start of an acronym, like "WWW" and"C.B.I.". By marking up acronyms you can give useful information to browsers, spell checkers, translation systems and search-engine indexers. | ||||||||||||||||||||||||
| The title attribute can be used to show the full version of the expression when you are holding the mouse over theacronym(text). | ||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||
| <acronym title="text_to_display_when_mouse_over_the_text">..text..</acronym> | ||||||||||||||||||||||||
| <abbr>..text..</abbr> | ||||||||||||||||||||||||
| Indicates an abbreviated form, like "Inc.", "etc.". By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers. | ||||||||||||||||||||||||
| In some browsers the title attribute can be used to show the full version of the expression when you are holding the mouse over the abbreviation. | ||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||
| <abbr title="text_to_display_when_mouse_over_the_text">..text..</abbr> | ||||||||||||||||||||||||
| <address> ..address..</address> | ||||||||||||||||||||||||
| The <address> tag defines the start of an address. You should use it to define addresses, signatures, orauthorships of documents. The address usually renders in italic. Most browsers will add a line break before and after the address element, but line breaks inside the text you have to insert yourself. | ||||||||||||||||||||||||
| Format with Example: | ||||||||||||||||||||||||
| <address> Donald Duck<br /> Box 555<br /> Disneyland </address> Output: Donald Duck Box 555 Disneyland | ||||||||||||||||||||||||
| <blockquote>.........Text........</blockquote> | ||||||||||||||||||||||||
| The <blockquote> tag defines the start of a longquotation. | ||||||||||||||||||||||||
| <blockquote> <p>here is a long quotation</p> </blockquote> | ||||||||||||||||||||||||
| <center>....</center> | ||||||||||||||||||||||||
| This tag Centers its enclosed text horizontally. | ||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||
| <center>... text .......</center> | ||||||||||||||||||||||||
| <q> small text</q> | ||||||||||||||||||||||||
| The <q> tag defines the start of a short quotation. | ||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||
| <q> small text</q> | ||||||||||||||||||||||||
| <cite> | ||||||||||||||||||||||||
| This tag defines the citation. | ||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||
| <cite> text </cite> | ||||||||||||||||||||||||
| <ins> | ||||||||||||||||||||||||
| This tag provide the facility of inserting the text inbetween the text. | ||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||
| <ins> text </ins> | ||||||||||||||||||||||||
| <del> | ||||||||||||||||||||||||
| Defines text that has been deleted in a document. | ||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||
| <del>..text..</del> | ||||||||||||||||||||||||
| <s>or<strike> | ||||||||||||||||||||||||
| The <s> and <strike> tags defines strikethrough text. | ||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||
| <s> text </s> or <strike> text</strike> | ||||||||||||||||||||||||
| Examples of Block tags | ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| Now you have learned the Output Tags, so now lets do some practical. | ||||||||||||||||||||||||
| Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks. | ||||||||||||||||||||||||
| Example: | ||||||||||||||||||||||||
| <html> <head> <title>Block Tags</title> </head> <body> <br><b> center tag </b> <center>Center this text</center> <b> acronym tag </b> <acronym title="World Wide Web">WWW</acronym><br> <b> abbr tag </b> <abbr title="hypertext markup language"> HTML</abbr><br> <b> blockquote tag </b> <blockquote>here is a long quotation here is a long quotation</blockquote> <b> del tag </b> a dozen is <del>20</del> pieces!<br> <b> ins tag </b> a dozen is <ins>12</ins> pieces!<br> <b> s tag </b> A new version is <s>not yet available.</s> now available! <b> strike tag </b><br> A new version is <strike>not yet available.</strike> now available! </body> </html> |
| HTML Tags | ||||||||||||||||||
| Output Tags | ||||||||||||||||||
| These tags are often used to displaycomputer/programming code. You might be surprised for "how to display the text containing the spaces, line breaks, programming codes, sample text, define variable". Do not worry, because in this chapter we are going to show you how easily you can do easily. | ||||||||||||||||||
| So lets start with these tags: | ||||||||||||||||||
| ||||||||||||||||||
| <pre>.........</pre>Tag | ||||||||||||||||||
| This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code. | ||||||||||||||||||
| Format: | ||||||||||||||||||
| <pre> .....text.....</pre> | ||||||||||||||||||
| Example: | ||||||||||||||||||
| <pre> for i = 1 to 10 print i next i </pre> | ||||||||||||||||||
| Output: | ||||||||||||||||||
| for i = 1 to 10 print i next i | ||||||||||||||||||
| <code> .....text ......</code> Tag | ||||||||||||||||||
| This tag is also used to display the computer code. But better you use <pre> tag. | ||||||||||||||||||
| Format: | ||||||||||||||||||
| <code> .....text.....</code> | ||||||||||||||||||
| <kbd>.....Keyboard Input......</kbd> Tag | ||||||||||||||||||
| This tag displays the Keyboard Input. | ||||||||||||||||||
| Format: | ||||||||||||||||||
| <kbd> ........ Keyboard Input......</kbd> | ||||||||||||||||||
| <tt>......text....</tt> Tag | ||||||||||||||||||
| This tag displays the typewriter text. | ||||||||||||||||||
| Format: | ||||||||||||||||||
| <tt> .....text.....</tt> | ||||||||||||||||||
| <samp>....sample text...</samp> Tag | ||||||||||||||||||
| This tag displays the sample text. | ||||||||||||||||||
| Format: | ||||||||||||||||||
| <samp> .....sample text.....</samp> | ||||||||||||||||||
| <var> computer variable </var> | ||||||||||||||||||
| This tag defines the computer variable. | ||||||||||||||||||
| Format: | ||||||||||||||||||
| <var> computer variable </var> | ||||||||||||||||||
| <dfn> definition term </dfn> | ||||||||||||||||||
| this tag is used for definition term. | ||||||||||||||||||
| Examples of output tags | ||||||||||||||||||
| ||||||||||||||||||
| Now you have learned the Output Tags so lets do some practical. Below there is a file type the same code on notepad (any text editor) and save it. now open this file in the internet browser. | ||||||||||||||||||
| Example: | ||||||||||||||||||
| <html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <tt>Teletype text</tt> <br> <samp>Sample text</samp> <br> <var>Computer variable</var> <br> <p> <b>Note:</b> These tags are often used to display computer/programming code. </p> </body> </html> | ||||||||||||||||||
| Page in browser will Look Like: | ||||||||||||||||||
| HTML Tags | ||||||||||||||||||||||||||
| Character Format Tags | ||||||||||||||||||||||||||
| These tags are used for the formatting of the text such asunderline, bold, italic, font, size, color of the text. | ||||||||||||||||||||||||||
| All these character formatting Tags are defined in the table shown below: | ||||||||||||||||||||||||||
| ||||||||||||||||||||||||||
| <b> Tag | ||||||||||||||||||||||||||
| The <b> tag is used to make the text bold. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <b> ................text.........</b> | ||||||||||||||||||||||||||
| <i> Tag | ||||||||||||||||||||||||||
| The <i> tag displays the italic text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <i> ................text.........</i>; | ||||||||||||||||||||||||||
| <tt> Tag | ||||||||||||||||||||||||||
| The <tt> tag displays the typewriter text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <tt> ................text.........</tt> | ||||||||||||||||||||||||||
| <u> Tag | ||||||||||||||||||||||||||
| The <u> tag displays the underlined text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <u> ................text.........</u> | ||||||||||||||||||||||||||
| <em> Tag | ||||||||||||||||||||||||||
| The <em> tag displays the emphasized text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <em> ................text.........</em> | ||||||||||||||||||||||||||
| <big> Tag | ||||||||||||||||||||||||||
| The <big> tag displays the big text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <big> ................text.........</big> | ||||||||||||||||||||||||||
| <small> Tag | ||||||||||||||||||||||||||
| The <small> tag displays the small text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <small> ................text.........</small> | ||||||||||||||||||||||||||
| <strong> Tag | ||||||||||||||||||||||||||
| The <strong> tag displays strong text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <strong> ................text.........</strong> | ||||||||||||||||||||||||||
| <sub> Tag | ||||||||||||||||||||||||||
| The <sub> tag displays text in subscripted format. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <sub> ................text.........</sub> | ||||||||||||||||||||||||||
| <sup> Tag | ||||||||||||||||||||||||||
| The <sup> tag displays superscripted text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <sup> ................text.........</sup> | ||||||||||||||||||||||||||
| <bdo> Tag | ||||||||||||||||||||||||||
| The <bdo> tag defines the direction of the text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <bdo> ................text.........</bdo> | ||||||||||||||||||||||||||
| <font> Tag | ||||||||||||||||||||||||||
| The <font> tag defines the font, color, size of the text. | ||||||||||||||||||||||||||
| Format: | ||||||||||||||||||||||||||
| <font face="font_name" color="color_name" size="number">........text.........</font> | ||||||||||||||||||||||||||
| Examples of the Text Formatting tags | ||||||||||||||||||||||||||
| ||||||||||||||||||||||||||
| You have read all the basic tags, So now lets do some practical. | ||||||||||||||||||||||||||
| Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks. | ||||||||||||||||||||||||||
| Example: | ||||||||||||||||||||||||||
| <html> <body> <b>This text is bold</b> <br> <strong> This text is strong </strong> <br> <big> This text is big </big> <br> <em> This text is emphasized </em> <br> <i> This text is italic </i> <br> <small> This text is small </small> <br> <u> this is underlined text </u> <br> This text contains <sub> subscript </sub> <br> This text contains <sup> superscript </sup> <br> The use of font tag <font face="arial" size="3" color="green"> this is use of font tag</font> </body> </html> |
| HTML Tags | ||||||||||||||||||||
| Basic HTML Tags | ||||||||||||||||||||
| The most important tags in HTML are tags that define headings, paragraphs, body and line breaks. The basic HTML Tags are described here in the form of table so that you can remind them easily. | ||||||||||||||||||||
| Basic HTML Tags | ||||||||||||||||||||
| ||||||||||||||||||||
| Description Of The Above Tags | ||||||||||||||||||||
| <html>tag | ||||||||||||||||||||
| This element tells a browser that this is an HTML document. This tag is defined at the top of theHTML file and at the end of file. | ||||||||||||||||||||
| Format: | ||||||||||||||||||||
| <html> <body>..............body of HTML.............</body></html> | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| <html> <body> this is my first page </body></html> | ||||||||||||||||||||
| <head> tag | ||||||||||||||||||||
| The head tag defines information about the document. The browser does not display the"head information" to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. The head tag is used between <html> and <body> tags. | ||||||||||||||||||||
| Format: | ||||||||||||||||||||
| <html> <head>.....head sections....</head><body>......body of HTML........</body></html> | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| <html> <head><title>Basic tag</title></head>>body> this is my first page </body></html> | ||||||||||||||||||||
| <title> tag | ||||||||||||||||||||
| Title tag defines the title of the document which appears in the Title bar of the explorer window.Title tag is used in between <head> and </head> tag because it is title tag is section of <head> tag. | ||||||||||||||||||||
| Format: | ||||||||||||||||||||
| <html> <head><title>Title of the Page</title></head><body>.....body of HTML......</body></html> | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| <html> <head><title>Basic tag</title></head><body> this is my first page </body></html> | ||||||||||||||||||||
| <body> tag | ||||||||||||||||||||
| The body element defines the document's body. It contains all the contents of the document (like text, images, colors, graphics etc). | ||||||||||||||||||||
| Format: | ||||||||||||||||||||
| <body bgcolor ="color_name" background="file_name" links="color_name" text="color_name"> | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| <body bgcolor ="red" background="c:\img\sky.jpg" links="blue" text="black"> | ||||||||||||||||||||
| Attributes | ||||||||||||||||||||
| ||||||||||||||||||||
| <hn>...</hn> Heading Tags | ||||||||||||||||||||
| These tags are used to display headings in anHTML document. through these tags you can increase the size of the text. In these tags <h1>tag defines the largest header & <h6> definessmallest. | ||||||||||||||||||||
| These tags are <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> | ||||||||||||||||||||
| Format: | ||||||||||||||||||||
| <hn>.............. text..............</hn> | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| <h1> this is my first page </h1> or <h1 align="right">text</h1> Attribute of the <hn> Tag. | ||||||||||||||||||||
| Attribute of the <hn> Tag | ||||||||||||||||||||
| It has only one attribute i.e. Align="value" values may be right, left, center and justified. you can use this align attribute in many tags to align the textor elements. | ||||||||||||||||||||
| align value (right, center, left, justified) | ||||||||||||||||||||
| <p>.....</p> Paragraph Tag | ||||||||||||||||||||
| This tag is used for creating the paragraph in theweb page. It is used inside the body of file. | ||||||||||||||||||||
| Format: | ||||||||||||||||||||
| <p>......longtext..........</p> | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| <p> This is the test of paragraph tag........</p> | ||||||||||||||||||||
| In this tag align attribute can be used. | ||||||||||||||||||||
| <br> tag | ||||||||||||||||||||
| The <br> tag inserts a single line break. Use the<br> tag to enter blank lines, not to separate paragraphs. This tag has no end tag. | ||||||||||||||||||||
| Format | ||||||||||||||||||||
| text........<br> .....text | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| This is a break <br> in the line. | ||||||||||||||||||||
| <hr> tag | ||||||||||||||||||||
| The <hr> tag inserts a horizontal rule. The <hr>tag has no end tag. | ||||||||||||||||||||
| Format: | ||||||||||||||||||||
| text......<hr> ......text or text......<hr align=" " size=" " width=" ">.... text | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| This is the test of the tag <hr> | ||||||||||||||||||||
| Attribute | ||||||||||||||||||||
| ||||||||||||||||||||
| <!--...--> Comment Tag | ||||||||||||||||||||
| The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explainyour code, which can help you when you edit the source code at a later date. | ||||||||||||||||||||
| You can also store program-specific informationinside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside the script and style elements to prevent older browsers, that do not supportscripting or styles, from showing it as plain text. | ||||||||||||||||||||
| Format: | ||||||||||||||||||||
| <!-- add here your comments these will not be displayed --> | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| <!-- add here your comments these will not be displayed --> | ||||||||||||||||||||
| You might have became bored of reading so lets do some practical. | ||||||||||||||||||||
| Follow these Steps: | ||||||||||||||||||||
| copy this code in the new file of any text editor. Save it with htm or html extension. Open the Internet Browser. Open the saved file in it. | ||||||||||||||||||||
| Example: | ||||||||||||||||||||
| <html> <head> <title>In body tag</title> </head> <body bgcolor="lightyellow" text="red"> In body tag, background color is defined as black and textcolor is defined as the white. <hr> <h1> this is the h1 header </h1> <h2> this is the h2header </h2> <h3> this is the h3 header </h3> <h4> this is the h4 header </h4> <h5> this is the h5 header </h5> <hr>This is the use of "Break" tag<br> and you will see use of more tags<br> <hr> look at the use of comment tag it is<!-- It is a comment line --> good <hr><p> This is the use of paragraph tag and you will see use of more tags </p> The effect of "hr" tag <br> <hr> </body> </html> | ||||||||||||||||||||
| Explanation of the page: | ||||||||||||||||||||
| The title of the page is at the top in blue strip. All the text appears in white color and background in the black color. Because in the <body> tag thebgcolor and text color is defined. The horizontalline appears because of the <hr> tag and the <br>tag breaks the text in between and displays it on new line. The comment statement is not displayed. |
| HTML Tags |
| Introduction |
| Tags are the reserve keywords used in theHTML file. With the help of tags we can set the format of the text and elements used in the file. |
| Example: Setting the font, size, color, bold, italic, Underline to the text. |
| In HTML language all of the files are written using tags. Even starting of the html file is done by the <html> tag and ended with the</html> end tag. Tags are the reserved keywords used in the HTML. They are the predefined words called tags. |
| · HTML tags are used to mark-up HTML elements. |
| · HTML tags are surrounded by the two characters <and> |
| · The surrounding characters are calledangle brackets. |
| · HTML tags normally come in pairs like <b>and </b> |
| · The first tag in a pair is the start tag, the second tag is the end tag. |
| · The text between the start and end tags is the element content. |
| · HTML tags are not case sensitive, <b>means the same as <B> |
| Introduction of HTML |
| Basics of HTML |
| What is an HTML File? |
| 1. HTML stands for Hyper Text Markup Language. |
| 2. An HTML file is a text file containing small markup tags. |
| 3. The markup tags tell the Web browser how to display the page. |
| 4. An HTML file must have an htm or html file extension. |
| An HTML file can be created using any simple text editor like "Notepad" of the Microsoft Windows. |
| First of all let me explain the above web page and how it is created, how easily it can be created. |
| It is very easy to insert the element in the HTML pages simply by writing their tags and provide their attribute. |
| Basic Description of HTML File |
| The HTML file can be divided into the three parts: |
| HTML Header |
| HTML Body |
| HTML Footer |
| So let us see the Body of the HTML File: |
| HTML Header is the top most part of the HTML file in this section of the file we define the header of file and also Title of the file can be provided. |
| HTML Body is the middle part of file, in this section we define all text andelements which is to displayed on web page. |
| HTML Footer is the end section of the file. |
| How To Write a HTML File |
| To write a HTML file you need an text editor, open the text editor and start writing file as given below: |
| Steps to write a file & view the web page: |
| 1. Open the text editor (e.g. notepad). |
| 2. Write the above file in it OR copy the above file and paste it on the notepad. |
| 3. Save this file as .htm or .html file extension (e.g. <filename>.htm , |
| 4. Now open the Internet Browser and open the saved file. |
| 5. Now you can see your web page. |
| The file starts from an <html> tag and ends with the </html>. <html> tagidentifies that it is an HTML file. <html> is also called as open tag and it also need its closed tag which is </html>. Between these tags we will define theHeader of the file, so add the <head> tag and below it write to close <head>tag. |
| More to display the Title to the Web Browser use the special tag <title> write here title </title>. Text written between the <title> & </title> tag will be displayed as the header of the your web page. The important tag is <body>tag. Whatever you want to display on the web page you must write it in between <body> & </body>. |