Scribd Logo
Hochladen

Willkommen bei Scribd!

  • HTML Tutorial

    Hochgeladen von

    NischalGautam
    41 Ansichten9 Seiten
    HTML (Hypertext markup language) is a language used to develop web pages. Hypertext means a special text that works as a link and markup means way of writing layout information within document. The extension of HTML is '.htm' or '.html'. It is created using a simple text editor.

    Originalbeschreibung:

    Originaltitel

    HTML tutorial

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    DOC, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    HTML (Hypertext markup language) is a language used to develop web pages. Hypertext means a special text that works as a link and markup means way of writing layout information within document. The extension of HTML is '.htm' or '.html'. It is created using a simple text editor.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOC, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    41 Ansichten9 Seiten

    HTML Tutorial

    Hochgeladen von

    NischalGautam
    HTML (Hypertext markup language) is a language used to develop web pages. Hypertext means a special text that works as a link and markup means way of writing layout information within document. The extension of HTML is '.htm' or '.html'. It is created using a simple text editor.

    Copyright:

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

    HTML (Hypertext Markup Language)

    HTML (Hypertext Markup language) is a language used to develop web pages. Hypertext means a special text that works as a link and markup means way of writing layout information within document. The extension of HTML is .htm or .html. It is created using a simple text editor. HTML tags are not case sensitive. Web Page A web page is a file containing web information. Web Site A web site is a collection of web pages. Web Browser A web browser is a special type of program through which we can view our web pages. There are several programs in this category available on the market. The two most popular are Netscape Navigator and Microsoft Internet Explorer. Web Server A web server is a computer where web pages are stored. The World Wide Web used following technologies: HTML (Hypertext Markup Language) Write web page HTTP (Hyper Text Transfer Protocol) Transmit those pages FTP (File Transfer Protocol) Transferring web pages.

    HTML Tags
    Tags are identified by the <> or </> signs. The commands themselves are specified between the <> signs. In the case of tags which need to enclose text, the ending tag should include the slash (/) to indicate the end of the tag. There are two types to tag: Empty tag no need to close tag <P>, <BR> Non-empty tag has to be closed <HTML></HTML>

    Heading Tags:
    HTML provides six types of heading tags: Tag <H1> through tag <H6>. <HTML> <HEAD><TITLE>Heading Tags</TITLE></HEAD> <BODY> <H1>WELCOME TO THE INTERNET WORLD </H1> <H2>WELCOME TO THE INTERNET WORLD </H2> <H3>WELCOME TO THE INTERNET WORLD </H3> <H4>WELCOME TO THE INTERNET WORLD </H4> <H5>WELCOME TO THE INTERNET WORLD </H5> <H6>WELCOME TO THE INTERNET WORLD </H6> </BODY> </HTML>

    Break tag:
    Break tag is used for inserting line break. The text that follows the <BR> will be displayed in the next line.

    Example:<HTML> <HEAD> <TITLE> Using Break tag</TITLE> </HEAD> <BODY> WELCOME TO THE INTERNET WORLD <BR> One a web site, the contents is aimed at the public, <BR> while an internet aims at the needs of an organizations own employees. </BODY> </HTML>

    The most popular text formatting tags:


    Command Bold Italic Underline Strong Strikethrough Big text Small Paragraph Superscript Subscript Syntax <b>text </b> <i>text</i> <u>text</u> <strong>text</strong> <strike>text</strike> <big>text</big> <small>text</small> <p>text </p> <sup>text </sup> <sub>text</sub> Function applies the bold style applies the italic style underlines text similar to bold Strikes through text increases the font and applies Bold reduces the font Generate a paragraph apply superscript apply subscript

    Preformatted Tag:
    Preformatted text tag is used to display the text in the browser as it was typed in the HTML document. <HTML> <HEAD> <TITLE>Preformatted text tag</TITLE></HEAD> <BODY> The following table is an example for preformatted text <PRE> S.No. Name Address 1. Ram Kathmandu 2. Hari Pokhara 3. Shyam Lalitpur </PRE> </BODY> </HTML>

    Attributes:Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. Attributes are always added to the start tag of an HTML element. Attributes of Body: Bgcolor = background color of the body Background = background image of the body Bgproperties = fixed (for no scrolling the background) Text = text color of the body Example <body bgcolor=color name background= path of imagename with extension bgproperties =fixed text=color name>

    Font set and Alignment: Font


    <font size=1 color=Black Face=Arial> text </font>

    Alignment:
    Left <P Align=left> Right <P Align=right> Center <P Align=center> Justify <P Align=Justify>

    (color Name) Some color in Hexadecimal value:


    Red #FF0000 Dark Blue #000080 Gray #808080 Blue #0000FF Magenta #FF00FF Dark Green #008000 Black #000000 Green #00FF00 Yellow # FFFF0 Dark Red #800000 White #FFFFFF Cyan #00FFFF

    Image tag:
    It is used to insert image in your web page. Attributes of image tag src =to define the source file with full path of static picture like jpg file Dynsrc =to define the source file with full path of motion picture like movie file Width= width of the picture Height= height of the picture Alt= Display alternate message if source file is not found for some cause Border=(Default 0) Border of the picture Lowsrc =low quality picture Align =left, right, center

    Example:-

    <IMG SRC=aptech.GIF ALT=MY PICTURE HEIGHT=100 WIDTH=50> <img align="right" src=Source.jpg" height=200 width=200 alt="Picture" VSPACE=150 HSPACE=150 >

    Horizontal Ruler tag:


    It draws the horizontal line on the web page. Attributes Color Size Width Align=left, right, center <HR> <HR WIDTH=7% SIZE=5 ALIGN=LEFT>

    Marquee:
    The marquee text has to be specified between <MARQUEE>and </MARQUEE>. BGCOLOR: The Background color for the marquee text WIDTH: The width of the marquee text can be specified either in terms of percentage of window width or in terms of pixels. HEIGHT: This specified the height of the marquee text area with respect to the screen. BEHAVIOR: This is the way the marquee text will behave. It takes one of the following values: SLIDE -- is the default value which gives a sliding effect. ALTERNATE makes the text move alternately between the left and right boundaries of the window SCROLL provides scrolling effect DIRECTION: Specifies which direction the text should scroll. <Marquee direction =right/left/up/down>text </Marquee> SCROLLAMOUNT: Specifies the number of pixels the text scrolls between each subsequent means the speed of marquee. LOOP: specifies how many times the marquee should loop.

    Hyperlink:
    A hyperlink is an area that opens page or web site. The object is used to create hyperlink can be either text or picture. There are two types of hyperlinks i.e. Internal Hyperlink and External Hyperlink. If you want to create link with in same page at that time you can use internal hyperlink. To create internal hyperlink page must have at least one book-mark on the page. The <A>is the tag used to create hyperlinks as well as bookmark. It has pre defined different attributes to change the properties of hyperlink which includes HREF, Name, and Target...e.t.c. Note: - By using <A> tag we can also create link with email address, web site e.t.c.

    <a href= URL of web page/file/email target=_blank/self/framename>Object </a>

    Bulleting:
    The <OL>Command: The command that generates the order list is the<OL> command. Each item of the list should be specified with the list item command <LI>. <ol> type are A or a or i or I and 1. Syntax: <OL> <li>text <li>text <li>text </OL> <OL type=A start=5> <li>Text <li>Text <li>Text </OL> Example: <HTML> <HEAD> <TITLE> NUMBERING</TITLE> </HEAD> <BODY> Ordered list and list heading <p><OL> <LH> SOME ASIAN COUNTRIES: <BR> <LI> INDIA <LI> BANGLADESH <LI> SINGAPORE </OL> </BODY> </HTML> The <UL> Command: The command that generates the un-order list is the<UL> command. Each item of the list should be specified with the list item command <LI>. The types of un-order list are circle, Disc and Square. Syntax: <UL> <li>text <li>text <li>text

    </UL>

    Table
    The <table> tag defines an HTML table. A simple 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.

    TR TH TD CELLPADING CELLSPACING COLSPAN ROWSPAN HEIGHT WIDTH

    : : : : : : : : :

    Specifies a table row. Specifies a table cell containing a heading (Filed) Specifies a table cell containing data. FOR ADJUSTING SPACE WITH CELLS FOR ADJUSTING SPACE BETWEEN CELLS COLUMN SPANNING (NO. OF COLUMN WANT TO COVER) ROW SPANNING (NO. OF ROW WANT TO COVER) ADJESTING THE TABLE HEIGHT ADJESTING THE TABLE WIDTH

    Example:table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

    Example:<table border="1" width="26%"> <tr> <td>Name</td> <td colspan="2">Marks</td> </tr> <tr> <td>navin</td> <td>98</td> <td>98</td>

    </tr> </table>

    FORMS:

    Form is a feature of HTML that allows the user to input data through HTML documents. To create a form, the <FORM> tag is used. It is a non-empty tag and has three attributes associated with it. Name: Identifies name of the form

    Method: Can be specified GET (default) or POST (preferred) GET attaches the input to the ACTION URL POST sends the input in a data base separately Action : Specifies the path of the CGI script used to process the form.
    Elements of Form: INPUT TAG: The <INPUT> tag is used to specify which input fields are available in the form. <INPUT> tag is an empty tag with three attributes. TYPE: This is set to TEXT, indication a single test input fields. There are other types like RADIO for radio button, CHECKBOX for checkbox, BUTTON for button etc. NAME: This is a variable name for the text field that the author must specify. SIZE: This is the width or the TEXT field. The various TYPE value available for the <INPUT> tag: TEXT : Specifies a text field. PASSWORD : Specifies the password field CHECKBOX : Specifies the element checked RADIO : Specifies a single toggle ON or OFF FILE : Specifies the field for Browse SUBMIT : Uploads the form to the server RESET : Resets form fields to defaults SELECT TAG: The <SELECT> tag used for creating lists and formatting the text fields. There are four attributes associated with the <SELECT> tag. MULTIPLE : Indicates the number of elements in a list that can be displayed. SIZE : Determines the number if items to be displayed in a list OPTION : Defines each value within <SELECT> tag NAME : Indicates the name of the field. TEXTAREA TAG: The <TEXTAREA> tag is used as a text entry field with multiple rows. There are three attributes associated with the <TEXTAREA> tag. ROWS : Specifies the height of the text field in characters. COLS : Specifies the width of the text field in characters. NAME : Specifies the name of the field.

    Registration Form
    <html> <head> <title>registration form</title>

    </head> <body bgcolor="skyblue"> <h1 align="center"><u><font color="green">Registration Form</h1></font></u> <form name=myform> <table border=0 align=center> <tr> <th>First Name</th> <td><input type="text" name="fname"></td> </tr> <tr> <th>Last Name</th> <td><input type="text" name="lname"></td> </tr> <tr> <th>Address</th> <td><input type="text" name="add"></td> </tr> <tr> <th>Phone</th> <td><input type="text" name="phone"></td> </tr> <tr> <th>Age</th> <td><input type="text" name="age"></td> </tr> <tr> <th>E-mail</th> <td><input type="text" name="email"></td> </tr> <tr> <th>Password</th> <td><input type="password" name="lname"></td> </tr> <tr> <th>Gender</th> <td><input type="radio" name="gender">Male <input type="radio" name="gender">Female</td> </tr> <tr> <th>Hobbies</th> <td><input type="checkbox" name=hobby>Music <input type="checkbox" name=hobby>Reading<input type="checkbox" name=hobby>cooking </td> <tr> <th>Country</th> <td><select size=1 name=cmbcountry> <option value=Nepal>Nepal</option> <option value=Inida>India</option> <option value=japan>Japan</option> <option value=china>China</option> </td> </tr> <tr> <th>Comments</th> <td><textarea cols=20 rows=4 name=txtcomment> </textarea> </td>

    </tr> <tr> <th>Photo</th> <td><input type="file" name=txtphoto> </table> <center> <input type="submit" value="I agree"> <input type="reset" value="Reset"></center> </form></body></html> Example:-2
    <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text" size="30" /><br /> Email: <input type="text" size="30" /><br /> Date of birth: <input type="text" size="10" /> </fieldset> </form>

    Frameset:
    <FRAMESET ...> creates a "table of documents" in which each rectangle (called a "frame") in the table holds a separate document. In its simplest use, <FRAMESET ...> states how many columns and/or rows will be in the "table". You must use either the COLS or the ROWS attributes or both.

    Attributes:
    Border bordercolor frameborder noresize target src

    this code
    <HTML> <HEAD> <TITLE>A Basic Example of Frames</TITLE> </HEAD> <FRAMESET ROWS="75%, *" COLS="*, 40%"> <FRAME SRC="framea.html"> <FRAME SRC="frameb.html"> <FRAME SRC="framec.html"> <FRAME SRC="framed.html"> </FRAMESET> </HTML>

    produces this this page

    Das könnte Ihnen auch gefallen