Scribd Logo
Upload

Welcome to Scribd!

  • HTML Guide

    Uploaded by

    Allan James Caño
    19 views14 pages
    CheatSheet

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CheatSheet

    Copyright:

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

    HTML Guide

    Uploaded by

    Allan James Caño
    CheatSheet

    Copyright:

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

    To start Notepad Application

    Start Botton Run Type "Notepad" And OK.

    For Making a First page


    <html> <head> <title>My Fist Page</title> </head> <body> This is my First web page of HTML. </body> </html> Now, for Saving:

    Press "CTRL+S" type "file_name.htm" OK.


    Open Tag Close Tag Description Specifies an HTML document Information about the document Specifies the document Title

    <html> </html> <head> </head> <title> </title>

    Specifies the body <body> </body> elements (The displaying information or item)

    #Attribute of body tag:


    Attribute Tag bgcolor Syntax bgcolor="color?" Descripti on Backgrou Example <body bgcolor="green">

    nd color of the body backgrou nd Backgrou background="imgsrc.exte nd image ntion" of the body <bodybackground="d:/heart.gif">

    bgproperti bgpropertise="fixed" es

    Do not move the <body image of background="d:/heart.gif"bgproperties= the "fixed"> backgroun d image Text color of the <body text="green"> entire body text

    Text

    Text="color?"

    Example: Type or copy the following tags in your Notepad. <html> <head> <title>first page</title> </head> <body text="green" bgcolor="pink"> This is the first test page of the html . </body> </html> Save this code as first.html. It looks something like this when we load it into our browser by using File/Open on the menu. This is the first test page of the html.

    Heading Tags (h1 to h6)


    This heading tags are use for the giving Title of paragraph, for bookmark and anchore (hyperlink)
    Open Tag Close Tag Description

    <h1> <h2> <h3> <h4> <h5> <h6>

    </h1> </h2> </h3> </h4> </h5> </h6>

    Specifies an Heading 1 (font size=6(24pt)) Specifies an heading 2 (font size=5(18pt)) Specifies an heading 3 (font size=4(14pt)) Specifies an heading 4 (font size=3(12pt)) Specifies an heading 5 (font size=2(10pt)) Specifies an heading 6 (font size=1(8pt))

    #Attribute of heading tag:


    Attribute Tag align Syntax Description Example <h2 align="center">

    Alignment of the heading align="where" (i.e. center, right,left, justify)

    Example: Type or copy the following tags in your Notepad. <html> <head> <title>Headings</title> </head> <body text="green" bgcolor="pink"> <h1 align="right">Heading 1</h1> <h2 align="right">Heading 2</h2> <h3 align="right">Heading 3</h3> <h4 align="right">Heading 4</h4> <h5 align="right">Heading 5</h5> <h6 align="right">Heading 6</h6> </body> </html> Save this code as Heading.html. It looks something like this when we load it into our browser by using File/Open on the menu.

    Heading 1

    Heading 2
    Heading 1
    Heading 4
    Heading 5
    Heading 6

    Formatting Tags
    This kind of tags are used for formatimg of displaying items or information, like font, picture and paragraph.
    Open Tag <font> <b> <i> <u> <sup> <sub> Close Tag </font> </b> </i> </u> </sup> </sub> Description Specifies an formatting of font (size, face, and color) Specifies an Bold font Specifies an Italic font Specifies an underlining to a font Specifies a superscript font Specifies a subscript font Specifies a strike through to a font Specifies a strike through to a font Specifies a big font Specifies a Preformatting text Specifies a paragraph Specifies a section in a document

    <strike> </strike> <s> <big> <pre> <p> <div> </s> </big> </pre> </p> </div>

    <small> </small> Specifies a small font

    #Attribute tags of..:


    Font
    Attribute Tag Face Syntax Description Example

    Font face of the <font face="monotype Face="Font_Face_name" text, i.e. arial, times corsiva"> new roman etc.

    Size Color

    size="value" Color="color?"

    Size of the text Color of the text Alignment of the paragraph (i.e. Left, Right, Center and Justify)

    <font size=3> <font color="red"> <p align="center">your paragraph</p> <div align="right">your paragraph</div>

    Paragraph (P) and Division (Div)


    Align align="where"

    Example: Type or copy the following tags in your Notepad. <html> <head> <title>Formatting</title> </head> <body> <p>A tag which has a close tag that kind of tags are pair tag.and in the html, their are so many tags, they are just called Tag.</p> <p align="right"><font face="monotype corsiva" color="red" size=4>This is the test of the font tags. and the font face is monotype corsiva, color is red and size is 4</font></p> <div align="center"><font face="arial">This is <b>Bold</b> and <i>Italic</i> and <u>Underline</u></font></div> <font face="arial" color="blue">This is the <strike>HTML</strike></font> <p>Formula</p> (a+b)<sup>2</sup> = a<sup>2</sup>+2ab+b<sup>2</sup> (a+b)<sup>3</sup> = a<sup>3</sup>+3a<sup>2</sup>b+3ab<sup>2</sup>+b<sup>3</sup> Alkynes-----> CaC<sub>2</sub> + H<sub>2</sub>O --> C<sub>2</sub>H<sub>2</sub> + Ca(OH)<sub>2</sub> <pre> h e ll o T H i s </pre> </body> </html>

    Save this code as format.html. It looks something like this when we load it into our browser by using File/Open on the menu. A tag which has a close tag that kind of tags are pair tag.and in the html, their are so many tags, they are just called Tag.

    This is the test of the font tags. and the font face is monotype corsiva, color is red and size is 4
    This is Bold and Italic and Underline This is the HTML Formula (a+b)2 = a2+2ab+b2 (a+b)3 = a3+3a2b+3ab2+b3 Alkynes-----> CaC2 + H2O --> C2H2 + Ca(OH)2
    h e ll o H i s T

    Marquee Tag
    This tag is used for scrolling text and picture.
    Open Tag Close Tag Description Specifies a text or picture scrolling.

    <marquee> </marquee>

    #Attribute of marquee Tag:


    Attribute Tag Direction Syntax Description Example

    Direction of Direction="scrollDire scrolling (i.e. <marquee behavior="scroll" ction" up, down, align="center" direction="right"> right, left) Behavior of behavior="motionty scrolling (i.e. <marquee behavior="alternate"align="ce pe" alternate, nter" width=80%> scroll, slide)

    Behavior

    Speed <marquee Scrollamo Scrollamount="value amount of behavior="alternate"scrollamount="10 alig unt ?" the scrolling n="right"">

    Bgcolor

    bgcolor="color?"

    Background color of the marquee area.

    <marquee bgcolor="red">

    Height Width

    Height and height="value or %" width of the width="value or %" marquee area

    <marquee width=60 height="40"behavior="alternate" align="center">

    Hspace Vspace

    hspace="pixel" vspace="pixel"

    Horizontal specifies left and right padding and <marquee behavior="slide"hspace="50" Vertical vspace=60 > Specifies top and bottom padding of the Marquee Alignment or position of the marquee (i.e. absbottom, <marquee direction="top" absmiddle, behavior="alternate"align="abdmiddle"> bottom, top, texttop, left, right, middle,basel ine)

    Align

    align="where"

    Example: Type or copy the following tags in your Notepad. <html> <head> <title>Marquee</title> </head> <body> <marquee direction="right" scrollamount="10">Sanju</marquee> <marquee direction="left" behavior="alternate"><img src="heart.gif"></marquee> <marquee direction="up" height="100" behavior="alternate" scrollamount="20"><img src="snow.gif"></marquee> <marquee direction="up" height="40" width=50% scrollamount="7" hspace="20">hello</marquee> <p align="center"><marquee direction="right" behavior="scroll" scrollamount=10 height=40 width=75% hspace=20 vspace50 bgcolor="cc9900"><font face="verdana" color="white" size=2>This is marquee.</font></marquee></p>

    </body> </html> Save this code as marquee.html. It looks something like this when we load it into our browser by using File/Open on the menu.

    Image Tag
    This tag is use for inserting and formatting pictures.
    Open Tag <img> Close Tag </img> Description Specifies to insert a image

    #Attribute of Image Tag:


    Attribute Tag src Syntax src="name.extention" Description Example

    Source of the <img src="sanju heart Image logo.gif"align="right"> Specifies height and Width of the image or resizeing of the image. Specifies thickness of the image border.

    widht Height

    width="% or value" height="% or value"

    <img src="heart.jpg" width=50% height=40% align="middle">

    Border

    border="pixel"

    <img src="heart.jpg" border=3align="baseline" width=50% height=50%>

    Align

    align="where"

    Specifies alignment of the image (i.e. <img src="heart.jpg" width="50" absbottom, height=30 align="absmiddle"> absmiddle, top, texttop, baseline, left, right, bottom,

    middle) Hspace Specifies a margin on the left and right; and Vspace <img src="heart.gif" width=50 specifies a height=90 hspace=20 vspace=40> margin on the top and bottom side of the image rectangule. Text imformation <img src="sanju.jpg" widht=80 or message of height=120 alt="this is sanju"> the image.

    Hspace Vspace

    hscape="pixelcount" vspace="pixelcount"

    Alt

    alt="textMessage"

    Example: Type or copy the following tags in your Notepad. <html> <head> <title>Images</title> </head> <body> <img src="sanju heart logo.gif" width=100 height=114 border=2 alt="sanju's heart"> <img src="snow.gif" align="abdmiddle" hspace="50" vspace=60> <img src="sanju.jpg" width=110 height=151 align="right" hspace="20" vspace=25 alt="sanju"> </body> </html> Save this code as Heading.html. It looks something like this when we load it into our browser by using File/Open on the menu.

    List Tag

    This tags are used for listing in numbering order or bullets ordered.
    Open Tag <ol> <ul> <li> Close Tag </ol> </ul> </li> Description Specifies Numbering ordered list. Specifies Bullets ordered or unnumbering Specifies a list item.

    #Attribute of......
    OL
    Attribute Tag Type Syntax Description Example

    Specifies the sequence number type="leveltype" is displayed in the browser. (i.e. <ol type="A"start="3">...... 1, A, a, i, I) Assigns a custom starting start="number" number fot the sequence of items in the OL element. <ol type="i"start="5">....

    Start

    UL
    Type Specifies how the leading symbol is displayed in the type="leveltype browser (i.e. disc, circle, square). <ul type="disc">.....

    LI
    Type Specifies how the leading symbol or sequence number is type="leveltype" <li type="a">..... displayed in the browser (i.e. 1, A, a, i, I, disc, circle, square)

    Example: A Simplest form of List Tag.. Type or copy the following tags in your Notepad. <html> <head> <title>List</title> </head> <body> <h3>A part of Computer</h3> <ol type="A" start="1"> <li>CPU</li> <li>Motherboard</li> <li>RAM</li>

    <li>Harddisk</li> <li>Keyboard</li> <li>Mouse</li> <li>MOnitor</li> <li>Modem</li> </ol> <h3>Web Designing</h3> <ul type="disc"> <li>HTML</li> <li>DHTMLd</li> <li>FrontPage with Access</li> <li>Javascript</li> <li>.ASP</li> <li>.PHP</li> <li>Access</li> <li>Dreamweaver</li> </ul> </body> </html> Save this code as list.html. It looks something like this when we load it into our browser by using File/Open on the menu.

    A part of Computer
    A. B. C. D. E. F. G. H. CPU Motherboard RAM Harddisk Keyboard Mouse MOnitor Modem

    Web Designing

    HTML DHTMLd FrontPage with Access Javascript .ASP .PHP Access Dreamweaver

    Example: Outline order of List Tag.. Type or copy the following tags in your Notepad. <html> <head> <title>List</title> </head> <body> <h3>A part of Computer</h3> <ol type="1" start="1"> <li>CPU</li> <ol type="a" start="1"> <li>Motherboard</li> <ol type="i" start="1"> <li>Expantion Slot</li> <li>Processor Room</li> <li>BIOS</li> <li>CMOS</li> </ol> <li>Processor</li> <ol type="i" start="1"> <li>Intel</li> <ul type="disc"> <li>Pentinium1</li> <li>Pentinium2</li> <li>Pentinium3</li> <li>Pentinium4</li> </ul> <li>AMD</li> </ol> </ol> <li>RAM</li> <ol type="i"> <lt>SRAM</lt> <lt>DRAM</lt> </ol> <li>Harddisk</li> <li>Keyboard</li> <li>Mouse</li> <li>Monitor</li> <li>Modem</li> </ol> <h3>Web Designing</h3> <ul type="disc"> <li>HTML</li> <li>DHTMLd</li> <li>FrontPage with Access</li>

    <li>Javascript</li> <li>.ASP</li> <li>.PHP</li> <li>Access</li> <li>Dreamweaver</li> </ul> </body> </html> Save this code as list.html. It looks something like this when we load it into our browser by using File/Open on the menu.

    A part of Computer
    1. CPU a. Motherboard i. Expantion Slot ii. Processor Room iii. BIOS iv. CMOS Processor i. Intel AMD

    b.

    Pentinium1 Pentinium2 Pentinium3 Pentinium4

    ii. 2. RAM

    SRAM DRAM 3. 4. 5. 6. 7. Harddisk Keyboard Mouse Monitor Modem

    Web Designing
    HTML DHTMLd FrontPage with Access Javascript .ASP .PHP Access Dreamweaver

    Example: Rambom List Tag.. Type or copy the following tags in your Notepad. <html> <head> <title>List</title> </head> <body> <ol> <li>Saroj</li> <li>Sabina</li> <li type="i">Sarita</li> <li type="i">Munu</li> <li type="i">junu</li> <li type="A" start="9">Manoj</li> <li type="A">Srijana</li> <li type="a" start="2">Naresh</li> <li type="I" start="1">Brikram</li> <ul type="disc"> <li>Aman</li> <li type="square">Prem</li> <li>Jitendra</li> <li type="circle">Anita</li> </ul> </ol> </body> </html>
    1. 2. iii. iv. v. F. G. h. IX. Saroj Sabina Sarita Munu junu Manoj Srijana Naresh Brikram Aman Prem Jitendra o Anita

    Anchore Tag
    This tags is used for Bookmark and Hyperlink to different pages or same pages.

    You might also like