Scribd Logo
Upload

Welcome to Scribd!

  • File of HTML

    Uploaded by

    seepi345
    21 views23 pages
    html tags

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html tags

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    21 views23 pages

    File of HTML

    Uploaded by

    seepi345
    html tags

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 23

    What is HTML?

    HTML is a language for describing web pages. Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.

    HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages

    CREATING AN HTML PAGE A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can write your own coding within a plain text editor, such as Note Pad.

    HTML Tags
    HTML markup tags are usually called HTML tags

    HTML tags are keywords (tag names) surrounded by angle brackets like <html> 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 end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags

    Web Browsers
    The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user.

    1. HEAD TAG:
    The <head> element is a container for all the head elements. The <head> element must include a title for the document, and can include scripts, styles, meta information, and more. The following elements can go inside the <head> element:

    <title> (this element is required in the head section) <style> <base> <link> <meta> <script> <noscript>

    <H1> - <H6> TAG


    The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.

    TITLE TAG
    The <title> tag is required in all HTML documents and it defines the title of the document. The <title> element:

    defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results

    The title are given to the webpage by using title tag as following as: <HTML> <HEAD> <TITLE>grewalwebpage</TITLE> </HEAD> </HTML>

    Result:

    FOR HEADING
    <Html> <head> <title>grewalwebpage</title> <h1> introduction<h1> </head> <body> <p> you can easily change the formatting of selected text in the document text by choosing a look for the selected text from the quick styles gallery on the home tab. You can also format text directly by using the other controls on the home tab.you specify directly</p> </body> </html>

    Result:

    2. BODY TAG
    The <body> tag defines the document's body.The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

    Paragraph Tag
    The <p>i.e paragraph tags are used to define a block of text as a paragraph. When a block of text is surrounded by the paragraph tags, the browser automatically adds white space before and after the paragraph. To define a paragraph, user use the opening and closing paragraph set of tags. The <p> are used as following as: <Html> <head> <title>grewalwebpage</title> </head> <body> <p> you can easily change the formatting of selected text in the document text by choosing a look for the selected text from the quick styles gallery on the home tab. You can also format text directly by using the other controls on the home tab.you specify directly</p> </body> </html> Result:

    BOLD,ITALIC AND UNDERLINE HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags.<u> tag is used to underline the text. Often <strong> renders as <b>, and <em> renders as <i>.

    <b>TAG: The <br> tag inserts a single line break. The <br> tag is an empty tag which means
    that it has no end tag.

    These tags are shown as:


    <Html> <head> <title>grewalwebpage</title> </head> <body> <p> <b>on the insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks.</b></br> <i> you can also format text directly by using the other controls on the home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.</i></br> <u>to change the overall look of your document, choose new theme elements on the page layout tab. To change the looks available in the quick style gallery<u> </p> </body> </html>

    Result:

    For background color


    The bgcolor attribute specifies the background color of a document. This tag can be shown as following as: <Html> <head> <title>grewalwebpage</title> <h1> introduction<h1> </head> <body> <body bgcolor=yellow> <p> you can easily change the formatting of selected text in the document text by choosing a look for the selected text from the quick styles gallery on the home tab. You can also format text directly by using the other controls on the home tab.you specify directly</p> </body> </html>

    Results:

    For background image


    The background attribute specifies a background image for a document.This can be shown as following as: <Html> <head> <title>grewalwebpage</title> <h1> introduction<h1> </head> <body> <body background="c:\users\public\pictures\sample pictures\tulips.jpg"> <p> you can easily change the formatting of selected text in the document text by choosing a look for the selected text from the quick styles gallery on the home tab. You can also format text directly by using the other controls on the home tab.you specify directly</p> </body> </html>

    Result:

    SUP AND SUB TAGS


    The sub tag is used for subscript text and sup tag is used for superscript text. Superscript text appears half a character above the baseline. Subscript text can be used for footnotes This can be following as For example: H2O and MC3 <HTML> <HEAD> <TITLE>grewalwebpage</TITLE> </HEAD> <body> <p> H<sub>2</sub>O MC<sup>3</sup> </body> </html>

    Results:

    FOR CREATING LISTS Unordered list-The HTML <ul> tag is used for creating an unordered list. The <ul> tag
    defines an unordered (bulleted) list.Use the <ul> tag together with the <li> tag to create unordered lists.

    Ordered list- The HTML <ol> tag is used for creating an ordered list. The <ol> tag defines an
    ordered list. An ordered list can be numerical or alphabetical. Use the <li> tag to define list items.

    This can be shown as:


    <Html> <head> <title>grewalwebpage</title> </head> <body> <h1>unordered list</h1> <ul> <li>sanu</li> <li>mini</li> <li>raman</li> <li>grewal</li> </ul> <h2> ordered list</h2> <ol> <li>sanu</li> <li>mini</li> <li>raman</li>

    </ol> </body> </html>

    9. FOR DESCRIPTION LIST


    The HTML <dt> tag is used to define the start of a term in a definition list. The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd> (describes each term/name). It can be shown as: <HTML> <HEAD> <TITLE>grewalwebpage</TITLE> </HEAD> <body> <H1>Unordered list</H1> <ul> <li>discipline</li> <dt>discipline is systematic instruction intended to train a person</dt> <li>image</li> <dt>An image is an artifact that depicts or records visual perception</dt> </ul> <dl> </body> </html>

    Result:

    CREATE AN IMAGE ON WEBPAGE


    <Html> <head> <title>grewalwebpage</title> </head> <body> <p>You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. you specify directly</p> <imgsrc="C:\Users\Public\Pictures\SamplePictures/Lighthouse.jpg"title="image"height="90"/> </body> </html> Results:

    SPAN TAG A <span> element used to color a part of a text <Html> <head> <title>grewalwebpage</title> </head> <body> <p>You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. <span style="color:blue"></br> You can also format text directly by using the other controls on the Home tab.</span> </p> </body> </html> Result:

    TABLE TAG
    The <table> tag defines an HTML table. An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

    <TBODY>TAG
    The <tbody> tag is used to group the body content in an HTML table. The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer) <TD> TAG The <td> tag defines a standard cell in an HTML table. An HTML table has two kinds of cells:

    Header cells - contains header information (created with the <th> element) Standard cells - contains data (created with the <td> element)

    This tag can be shown as: <HTML> <HEAD> <TITLE>grewalwebpage</TITLE> </HEAD> <body> <table border="2"> <thead>

    <th>Name</th> <th>Class</th> <th>College</th> </thead> <tbody> <tr> <td> Sanu</td> <td>MBA</td> <td>CGC</td> </tr> <tr> <td> Mini</td> <td> MBA</td> <td>CGC</td> </tr> <tr> <td> Seepi</td> <td> MBA</td> <td>CBS</td> </tr> </body> </html> Result:

    ROW SPAN and COLUMN SPAN Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN("how many down") indicate how many columns or rows a cell should take up. This can be shown as: <Html> <head> <title>grewalwebpage</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Class</th> <th>College</th> </tr> <tr> <td>Sanu</td> <td>MBA</td> <td rowspan="4">CGC</td> </tr> <tr> <td>Mini</td> <td>MCA</td> </tr> <tr> <td>Raman</td> <td>MBA</td> </tr> <tr> <td>Grewal</td> <td>Hmct</td>

    </table> </body> </html> Result:

    CREATE HYPERLINK
    The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand.The most important attribute of the <a> element is the href attribute, which indicates the links destination.This tag result can be shown as: <html> <head> <title>grewalwebpage</title> </head> <body> <h1>hyperlink</h1> <p>You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly<a href=www yahoo.com>click here</a> </p> </body> </html>

    Result:

    DESIGN A FORM
    The HTML <form> tag is used for creating a form for user input. A form can contain text fields, checkboxes, radio-buttons and more. Forms are used to pass user-data to a specified URL.This tag result can be shown as: <html> <head> <title>grewalwebpage</title> </head> <body> <h1>Feedback Form</h1> <Form name="feedback" methos="post" action="abc.asp" enctype="multipart/form_data"> Name<input type="text" name="fname" size="5"/></br> Designation<input type="text" name="fname" size="5"/></br> Gender<input type="radio" name="gender" value="Male"/>Male <input type="radio" name="gender" value="Female"/>Female</br> Subject<select name="Subject"> <option value="management science">management science</option> <option value="Computer">computer</option> <option value="HRM">HRM</option> <option value="Marketing">Marketing</option> <option value="Maths">Maths</option> </select></br> knowlegde<input type="radio" name="knowledge" value="very good"/>very good <input type="radio" name="knowledge" value="good"/> good <input type="radio" name="knowledge" value="average"/>average</br> Your views</br><textarea name="txt" cols="8" rows="8"></textarea></br> <input type="submit" value="submit"/> <input type="reset" value="reset"/> </form> </body> </html>

    Results:

    CREATE STYLESHEETS
    A Stylesheet is a command or set of commands used to control the appearance and layout of various elements on webpages. Using stylesheets user can set the color and font of text, the size of form textboxes, the margin between various elements on a webpage, and much more.

    INLINE
    An inline stylesheet is placed inside the tag it will affect.This can be shown as: <html> <head> <title>grewal</title> <h2>Introduction</h2> </head> <body> <p style="font size:12px; color:red;textdecoration:bold;word spacing:5px">SEL is operating in various textile sub-segments having facilities right from spinning and knitting,processing of yarns and fabric, to the value added products viz. terry towels and ready-made garments</p> <p>SEL is operating in various textile sub-segments having facilities right from spinning and knitting, processing of yarns and fabric, to the value added products viz. terry towels and ready-made garments</p> </body> </html>

    EMBEDED STYLESHEET An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <html> <body> <p style="font-family:arial;color:green;font-size:20px;"> You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab</p> </body> </html>

    Results:

    EXTERNAL STYLESHEET
    An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> . This can be shown as: Firstle we create css file as p {color:green; font-size:20px; text align:justify } After that we create external stylesheet <head> <link rel="stylesheet" type="text/css" href="external.css"/> </head> <body>2> <h2>Introduction</h <p> You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab </p> </body>

    Results:

    You might also like