Scribd Logo
Hochladen

Willkommen bei Scribd!

  • BODY Tag: - : HTML Common Tags

    Hochgeladen von

    mramusworld
    22 Ansichten15 Seiten
    The document describes various HTML tags for formatting text and creating web pages. It explains common text formatting tags like <p>, <h1>-<h6> for headings, <pre> for preformatted text, and <font> for changing text properties. It also covers lists (<ol>, <ul>), links (<a>), images (<img>), tables (<table>, <tr>, <td>, <th>), and forms (<form>, <input>). Each tag is accompanied by an example to illustrate its usage.

    Originalbeschreibung:

    Originaltitel

    Unit 1

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    DOCX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    The document describes various HTML tags for formatting text and creating web pages. It explains common text formatting tags like <p>, <h1>-<h6> for headings, <pre> for preformatted text, and <font> for changing text properties. It also covers lists (<ol>, <ul>), links (<a>), images (<img>), tables (<table>, <tr>, <td>, <th>), and forms (<form>, <input>). Each tag is accompanied by an example to illustrate its usage.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    22 Ansichten15 Seiten

    BODY Tag: - : HTML Common Tags

    Hochgeladen von

    mramusworld
    The document describes various HTML tags for formatting text and creating web pages. It explains common text formatting tags like <p>, <h1>-<h6> for headings, <pre> for preformatted text, and <font> for changing text properties. It also covers lists (<ol>, <ul>), links (<a>), images (<img>), tables (<table>, <tr>, <td>, <th>), and forms (<form>, <input>). Each tag is accompanied by an example to illustrate its usage.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 15

    Unit 1

    Html common tags:--1)BODY

    Tag:---

    <BODY attribute name="attribute value"> Deprecated attributes (but still used) BACKGROUND=Sunset.jpg (can be tiled) BGCOLOR=color TEXT=color LINK=color (unvisited links) VLINK=color (visited links) ALINK=color (when selected)

    2)

    Headings

    <H1 ...> text </H1> -- largest of the six <H2 ...> text </H2> <H3 ...> text </H3> <H4 ...> text </H4> <H5 ...> text </H5> <H6 ...> text </H6> -- smallest of the six

    Sample program for headings tag


    <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD>

    <BODY> Samples of the six heading types: <H1>Level-1 (H1)</H1> <H2 ALIGN="center">Level-2 (H2)</H2> <H3><U>Level-3 (H3)</U></H3> <H4 ALIGN="right">Level-4 (H4)</H4> <H5>Level-5 (H5)</H5> <H6>Level-6 (H6)</H6> </BODY> </HTML>

    3)

    <P> Paragraph
    <P> defines a paragraph Add ALIGN="position" (left, center, right) Multiple <P>'s do not create blank lines Use <BR> for blank line Fully-specified text uses <P> and </P> But </P> is optional

    Sample program for <P>


    <BODY> <P>Here is some text </P> <P ALIGN="center"> Centered text </P> <P><P><P> <P ALIGN="right"> Right-justified text <! Note: no closing /P tag is not a problem>

    </BODY>

    4)

    <PRE> Preformatted Text

    <PRE> if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; } </PRE>

    5)

    Fonts

    <FONT COLOR="red" SIZE="2" FACE="Times Roman"> This is the text of line one </FONT> <FONT COLOR="green" SIZE="4" FACE="Arial"> Line two contains this text </FONT> <FONT COLOR="blue" SIZE="6" FACE="Courier" The third line has this additional text </FONT>

    6)

    Ordered (Numbered) Lists

    <OL TYPE="1"> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE="I" > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE="i"> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL> </OL>

    7)

    Unordered (Bulleted) Lists

    <UL TYPE="disc"> <LI> One </LI> <LI> Two </LI> <UL TYPE="circle"> <LI> Three </LI> <LI> Four </LI> <UL TYPE="square"> <LI> Five </LI> <LI> Six </LI> </UL>

    </UL> </UL

    8)

    Physical Character Styles

    H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR>

    9) Logical Character Styles <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR>

    <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR

    10)

    <A> Anchors (Hyperlinks)

    Link to an absolute URL: If you get spam, contact <A HREF="htttp:www.microsoft.com"> Microsoft </A> to report the problem.

    Link to a relative URL:


    See these <A HREF="#references"> references </A> concerning our fine products. 11)Images <img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin jump!">

    12)

    Tables
    table tag

    <TABLE>

    <CAPTION> optional table title <TR> <TH> <TD> table row table column header table data element

    13)

    Frames

    Frames help control navigation and display <FRAME> attributes include FRAMEBORDER yes or 1 for borders FRAMESPACING width of border BORDERCOLOR color SRC location of HTML to display in frame NAME destination for TARGET attribute

    XHTML Tables and Formatting

    HTML Tables
    Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

    Table Example:--<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    HTML Table Headers


    Header information in a table are defined with the <th> tag. All major browsers will display the text in the <th> element as bold and centered. table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td>

    </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    html table tags

    tag
    <table> <th> <tr> <td> <caption> <Colgroup> <thead> <tbody>
    content in a table

    description
    Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines a group of columns in a table, for formatting Groups the header content in a table Groups the body content in a table Groups the header

    <tfoot>

    Groups the footer content in a table

    HTML Forms
    HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, and radio-buttons, submit buttons and more. A form can also contain select lists, text area, field set, legend, and label elements. The <form> tag is used to create an HTML form: <form> . input elements . </form>

    Text Fields
    <input type="text" /> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" />

    </form>

    Top of Form

    First name: Last name:

    Note: The form itself is not visible. Also note that the default width of a text field is 20 characters

    Password Field
    <input type="password" /> defines a password field: <form> Password: <input type="password" name="pwd" /> </form>

    How the HTML code above looks in a browser:


    Top of Form

    Password:
    Bottom of Form

    Note: The characters in a password field are masked (shown as asterisks or circles).

    Radio Buttons
    <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices: <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form> How the HTML code above looks in a browser:
    Top of Form

    Male Female
    Bottom of Form

    Checkboxes

    <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> How the HTML code above looks in a browser:
    Top of Form

    I have a bike I have a car


    Bottom of Form

    Submit Button
    <input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> How the HTML code above looks in a browser:
    Top of Form

    Submit

    Username:
    Bottom of Form

    If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input

    HTML Forms and Input


    Previous Next Chapter

    HTML Forms are used to select different kinds of user input.

    HTML Forms
    HTML forms are used to pass data to a server.

    A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: <form> . input elements . </form>

    HTML Forms - The Input Element


    The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.

    Text Fields
    <input type="text" /> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> How the HTML code above looks in a browser:
    Top of Form

    First name:

    Last name:
    Bottom of Form

    Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

    Password Field
    <input type="password" /> defines a password field:

    <form> Password: <input type="password" name="pwd" /> </form> How the HTML code above looks in a browser:
    Top of Form

    Password:
    Bottom of Form

    Note: The characters in a password field are masked (shown as asterisks or circles).

    Radio Buttons
    <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices: <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form> How the HTML code above looks in a browser:
    Top of Form

    Male

    Female
    Bottom of Form

    Checkboxes
    <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> How the HTML code above looks in a browser:
    Top of Form

    I have a bike

    I have a car
    Bottom of Form

    Submit Button
    <input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> How the HTML code above looks in a browser:
    Top of Form

    Submit

    Username:
    Bottom of Form

    If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

    More Input Examples


    Radio buttons How to create radio buttons. Checkboxes How to create checkboxes. A user can select or unselect a checkbox. Simple drop-down list How to create a simple drop-down list. Drop-down list with a pre-selected value How to create a drop-down list with a pre-selected value. Textarea How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters. Create a button How to create a button.

    Form Examples
    Fieldset around form-data How to create a border around elements in a form. Form with text fields and a submit button How to create a form with two text fields and a submit button. Form with checkboxes How to create a form with two checkboxes and a submit button. Form with radio buttons How to create a form with two radio buttons, and a submit button. Send e-mail from a form How to send e-mail from a form.

    HTML Form Tags


    Tag <form> <input /> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> Description Defines an HTML form for user input Defines an input control Defines a multi-line text input control Defines a label for an input element Defines a border around elements in a form Defines a caption for a fieldset element Defines a select list (drop-down list) Defines a group of related options in a select list Defines an option in a select list Defines a push button

    Bottom of Form

    Das könnte Ihnen auch gefallen