Scribd Logo
Upload

Welcome to Scribd!

  • Learn HTML - From Beginner To A - Mahi Singh Rawat

    Uploaded by

    arifshaikh99
    95 views24 pages
    How to write HTML for Beginners

    Original Title

    Learn HTML - From Beginner to a - Mahi Singh Rawat

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    How to write HTML for Beginners

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    95 views24 pages

    Learn HTML - From Beginner To A - Mahi Singh Rawat

    Uploaded by

    arifshaikh99
    How to write HTML for Beginners

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 24

    WHAT

    IS HTML?
    HTML stands for Hypertext Mark Up Language.
    HOW TO SAVE A HTML DOCUMENT?
    Step 1. After writing your HTML command in
    notepad click on File in Menu Bar.
    Step 2. Then click on Save As option.
    Step 3. Write the name of the HTML page and add
    .html to its end (without quotes) and the drop down
    list below saying Save as type select All Files and
    click on Save button.
    HOW TO OPEN HTML DOCUMENT?
    HTML Document cab be opened by double-clicking
    on it and the default browser windows will open and
    you will be able to see your HTML page.
    HTML BASIC STRUCTURE:
    <HTML>
    <HEAD>
    <TITLE>
    MY HTML PAGE
    </TITLE>
    </HEAD>
    <BODY>
    THE BODY OF THE PAGE
    </BODY>
    </HTML>

    <BODY> tag attributes
    1. BGCOLOR
    BGCOLOR is used to set the background colour of the HTML page.







    2. TEXT
    TEXT
    attribute is
    used to
    specify the
    text colour
    of the
    HTML
    page.







    Attributes for setting the text links, visited links and active links colour in
    3.
    the html page.
    Link Attribute is used to set the colour of the link in the HTML page.
    <BODY LINK=GREEN>
    ALink attribute is used to set the active links colour in the HTML page.
    <BODY ALINK=YELLOW>
    VLink attribute is used to set visited links colour in the HTML page.
    <BODY VLINK=BLUE>
    4. Attributes for setting page margins
    Left margin attribute: This attribute is used to set the left margin of the
    HTML page. The value entered is in pixels.
    <BODY LEFTMARGIN=40>
    Right margin attribute: this attribute is used to set the right margin of the
    HTML page. The value entered is in pixels.
    <BODY RIGHTMARGIN=60>
    Top margin attribute: This attribute is used to set the top margin of the
    page. The value entered is in pixels.
    <BODY TOPMARGIN=50>
    5. Attribute for setting background image
    Background attribute is used to set an image as the background for an HTML page.
    <BODY BACGROUND=C:/IMAGE.JPG>
    Or
    If the image is the same folder where the html page is located simply enter the
    following code:
    <BODY=IMAGENAME.PNG>
    See the following example:



    Text

    formatting elements in HTML


    TAG TYPE FUNCTION ATTRIBUTES

    FONT CONTAINER Used to change SIZE, FACE,


    size, colour and COLOR
    style of text

    BASEFONT CONTAINER Used to set a basic SIZE


    size for the font
    which the browser
    will use to display
    the HTML page.

    BR EMPTY Used to insert a NONE


    line breaks

    CENTER CONTAINER Center any text NONE


    that is written
    within it

    H1 to H6 CONTAINER Used as heading ALIGN


    element with
    various sizes 1-6

    P CONTAINER Used to define a ALIGN


    paragraph of text
    on the web page
    HR EMPTY Used segregate SIZE, WIDTH,
    different parts of COLOR, ALIGN,
    the text from one NOSHADE
    another with help
    of a horizontal line

    COMMENT CONTAINER Comments are text NONE


    that are written
    into the HTML
    page, but are
    ignored by the
    browser and hence
    not displayed.

    B CONTAINER Display text in NONE


    bold face

    I CONTAINER Display text in NONE


    italics

    U CONTAINER Underlines the NONE


    enclosed text

    SUP CONTAINER Display text in NONE


    superscript

    SUB CONTAINER Display text in NONE


    subscript







    Using FONT Tag
    Font tag is a very convenient tag used to change the size, colour and style of the text,
    especially when different segments of text require different looks.
    <FONT>This is font tag</FONT>
    Font tag attributes:
    SIZE - <FONT SIZE=20>THE TEXT SIZE IS NOW 20</FONT>
    COLOR - <FONT COLOR=GREEN>THE TEXT COLOR IS NWO GREEN</FONT>
    FACE - <FONT FACE=ARIAL>THE TEXTS FONT IS ARIAL</FONT>
    See the coding below:








    Using

    BASEFONT Tag
    <BASEFONT> tag is used to set the basic size for the font, the browser will use to display
    your HTML page.
    1. A single value ranging from 1 to 7
    e.g. <BASEFONT size=4>
    2. A relative value by placing a plus or minus sign before the value
    <BASEFONT SIZE=+4> The base font size will increase the existing size by 4
    resulting in a total font size of 7.
    <BASEFONT SIZE=-2> The base font size will decrease the existing size by 2
    resulting in a total font size of 5.

    Using BR Tag
    The <BR> tag is used to give break between the lines or words in a HTML document. It
    gives page a neat and organised look and makes it visually appealing.

    Try this code:






















    Using <CENTER> tag
    <CENTER> tag is used to set text or image in centre align. It is a container element so the
    text entered within this tag gets center aligned.















    Using <H1> to <H6> tags
    These tags are known as heading tags. HTML has six level of heading tags from <H1> to
    <H6>.
    They are used to a text as heading in html document.
    For e.g. <H1> This is heading</H1>
    Align attribute is used to set the alignment of the heading existing in heading tags.
    For e.g. <H1 align=right>The heading alignment is right</h1>



    Using <p> tag
    <p> tag is used to specify the paragraph in the document and also to set the alignment of
    the different paragraphs.
    Syntax: <P ALIGN=CENTER>THE PARAGRAPH HERE</P>
    <P ALIGN=LEFT>THE PARAGRAPH HERE</P>
    <P ALIGN=RIGHT>THE PARAGRAPH HERE</P>
    Using <HR> tag
    <HR> tag is used to create a horizontal link in the html document. It is a empty element.
    Attributes:
    1. SIZE SIZE attribute is used to set the size (broadness) of the horizontal line.
    Syntax - <HR size=50>
    2. Width This attribute is used to set the width of the horizontal line.
    Syntax - <HR WIDTH=60%>
    3. Colour This attribute is used to set the colour of the horizontal line.
    Syntax - <HR COLOR=GREEN>
    Using comment tag
    Comment tag is creates a text which is not visible in the browser but can be seen in the
    HTML code.
    There are two ways of creating a comment in HTML:
    1. Using <COMMENT> tag
    Syntax - <COMMENT>THIS IS A COMMENT</COMMENT>
    2. Using <!and tab
    Syntax - <!This is also a comment
    Using <B>, <U>, <I>, <SUP>, <SUB> tags
    1. <B> tag is used to set the text in bold.
    Syntax - <B>THE TEXT HERE IS BOLD.</B>
    2. <U> tag is used to underline the text.
    Syntax - <U>The text is underlined</U>
    3. <I> tag is used to italicize the text.
    Syntax - <I>The text here is italicized</I>
    4. <SUP> tag is used to set the text in superscript.
    Syntax X<SUP>2</SUP>Y
    5. <SUB> tag is used to set the text in subscript.
    Syntax H<SUB>2</SUB>O





















    Creating Lists in HTML


    TAG TYPE TITLE ATTRIBUTES
    UL Container Tag is used to TYPE
    create unordered
    lists. <LI> tag has
    to be used inside
    this.

    OL Container Tag is used to TYPE, START


    create ordered
    lists. <LI> tag has
    to be used inside
    this.

    DL Container Used for terms -


    and their
    definitions.


    Type of lists:
    Unordered lists are bulleted lists like:
    Computer components are:
    Processor
    Motherboard
    Graphics Card
    HDD
    Ordered Lists are numbered lists like:
    Computer components are:
    1. Processor
    2. Motherboard
    3. Graphics Card
    4. HDD
    Definition lists are mostly used for terms and their definitions
    HTTP
    Hypertext Transfer Protocol
    FTP
    File Transfer Protocol





    Creating unordered lists
    <UL> tag is used to start creating unordered lists. <LI> is used to create a new list item.

    Syntax




















    Attributes of <UL> tag:
    TYPE is used to set the
    type of bullets in the lists.
    Their are four types of
    bullets available disc, circle
    & square.
    Syntax
    <UL TYPE=disc>
    <UL TYPE=circle>
    <UL TYPE=square>


















    Creating ordered lists
    <OL> tag is used to start creating ordered lists. <LI> is used to create a new list item.

    Syntax


















    Attributes of <OL> tag:
    1. TYPE is used to set the type of numbered lists.

    Type Values Style of Numbered Lists Sample Output

    I Uppercase Roman I, II, III


    Numerals

    i Lowercase Roman I, ii, iii


    Numerals

    1 Arabic Numerals 1, 2, 3

    A Uppercase Alphabets A, B, C

    a Lowercase Alphabets a, b, c


    Syntax
    <OL TYPE=I>
    <OL TYPE=i>
    <OL TYPE=1>
    <OL TYPE=A>
    <OL TYPE=a>



































    2. START attribute lets the user set the starting numeral or alphabet valuein the
    numbered or alphabet value lists.

    Syntax
    <OL type=A start=5>
    <li>Green
    <li>Yellow
    <li>Blue
    </ol>








    Note- The start attribute has to be always specified numeral value if it is a
    alphabetical ordered list also.


    Nesting of lists:
    Observe the following code you will understand how nesting can be done in ordered as
    well as unordered lists.



























    The above method is same for unordered lists. Try yourself.

    Creating Definition Lists
    Definition lists are mostly used for displaying Definition, Terms and their Definition
    descriptions. They are not list of the items. So, as the name suggests there are three tags
    involved in this combination - <DL> for Definition Lists, <DT> for Definition Terms and
    <DD> for Definition Description.
    Syntax:
    <HTML><HEAD><TITLE>DL</TITLE><BODY>
    <DL>
    <DT>Term1
    <DD>Definiation1
    <DT>Term2
    <DD>Definiation2
    </DL></BODY>
    </HTML>







    Compact attribute of <DL> tag
    If the definitions are short, one can display it on the same line rather than have a line
    break. This is main purpose compact lists.
    Syntax:

    <HTML><HEAD><TITLE>COMPACT</TITLE><BODY>
    <DL COMPACT>
    <DT>HTTP
    <DD>HYPERTEXT TRANSFER PROTOCOL
    <DT>FTP
    <DD>FILE TRANSFER PROTOCOL
    </DL></BODY></HTML>

    Observe the coding.
    GET THE SECOND VOLUME ITS FREE
    TO LEARN HYPERLINKING,
    INSERTING IMAGE & MARQUEE.

    You might also like