Scribd Logo
Importer

Bienvenue sur Scribd !

  • Studyleague: Where To Code?

    Transféré par

    shubham
    41 vues12 pages
    HTML

    Titre original

    HTML

    Copyright

    © © All Rights Reserved

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    HTML

    Droits d'auteur :

    © All Rights Reserved
    Signaler comme contenu inapproprié
    41 vues12 pages

    Studyleague: Where To Code?

    Transféré par

    shubham
    HTML

    Droits d'auteur :

    © All Rights Reserved
    Signaler comme contenu inapproprié
    sur 12

    HTML

    HTML,HyperTextMarkupLanguage,isusedtocreatewebpages.HTMLdocumentsare
    describedbyHTMLtags.

    GenerallyHTMLtagscomeinpair.
    Eg.<html></html>,<body></body>,<p></p>

    U
    D
    YL

    EA

    StructureOfHTMLDocument

    Note:Closingtagconsistofaslash(/)beforekeyword.

    Herehtml,body,parekeywords.Theyconsistofaopeningtagandaclosingtag.

    ST

    Wheretocode?

    InthebeginningNotepadwilldothejob.Butasyouprogressyoumayuseeditorslike
    Notepad++,Sublimetext,etc.
    Writeyourcodeinanytexteditor,saveitwiththeextension.htmlandthenrun(open)itin
    anywebbrowser.
    Tryoutthecodegivenbelowfirst.Thenyoumayeditthecontentsofeachtagtoknowhow
    exactlyeachofthemworks.

    <!DOCTYPEhtml>
    <html>

    <head>

    <title>
    HelloIamTitle!
    </title>

    </head>

    <body>

    <h1>
    Headinghere!
    </h1>

    <p>
    Iamjustaparagraph...
    </p>

    </body>

    </html>

    EA

    Sonowletstalkaboutwhatthesetagsreallydo!

    1. <!DOCTYPE..>
    definesthedocumenttype.DeclarationforHTML5is
    <!DOCTYPE
    html>

    U
    D
    YL

    2. <html>
    tagenclosesthecompletehtmlcode.Allothertagsarewritteninside
    thistag.

    3. <head>
    tagrepresentsdocumentheader.

    4. <title>
    tagisusedtomentiontitle.Thecontentyouenterinside
    <title></title>
    displaysthenameofthepage.

    5. <body>
    tagrepresentsdocumentsbody.Tagslike
    <p>
    ,
    <h1>
    ,
    <div>
    arewritten
    insidethistag.

    ST

    6. <h1>
    tagisusedtodisplayaheading.

    7. <p>
    tagisusedtodisplayaparagraph.

    SothiswasjustanintroductionofHTML5.NowletsstartwithdifferenttypesofHTMLtags,
    theirfunctionandtheirattributes.

    HTMLDocument

    <!DOCTYPEhtml>

    ThistagtellsthebrowserthatthedocumenttypeisHTML5.

    HTMLtag
    <html></html>

    Thehtmlcodestartsandendswiththistag.

    Bodytag
    <body></body>

    Bodytagisinside<html>tag.Thecontenttobedisplayedonthewebpageiswritteninthistag.

    BasicHTMLTags

    U
    D
    YL

    HTMLHeadings

    EA

    <h1></h1>,...,<h6></h6>

    TheHeadingtagisusedfordisplayingheadings.Thefontsizeofheadingdecreasesaswego
    from<h1>to<h6>.
    Eg.

    <!DOCTYPEhtml>

    ST

    <html>

    <body>

    <h1>
    heading1
    </h1>

    <h2>
    heading2
    </h2>

    <h3>
    heading3
    </h3>

    <h4>
    heading4
    </h4>

    <h5>
    heading5
    </h5>

    <h6>
    heading6
    </h6>

    </body>
    </html>

    Paragraphtag
    <p></p>

    Paragraphsaredefinedby<p>taginHTML.
    Linebreaktag

    <br>tagisusedtodisplaytextonthenextline.
    Eg.

    <p>
    Helloi'mParagraph1
    </p>

    <br>
    <p>
    ThisisParagraph2
    </p>

    <!I'macomment>

    EA

    Commenttag

    Commentsarenotdisplayedbythebrowser,buttheyhelpyoutoorganiseyourcode.

    U
    D
    YL

    Commentscanbeplacedanywhereasanotificationorhintofwhatthatparticularcodedoes.

    FormattingElements

    Boldtext

    <p>
    Thistextisnormal.
    </p>

    ST

    <p><b>
    Thistextisbold
    </b>
    .
    </p>

    Importanttext

    <p>
    Thistextisnormal.
    </p>

    <p><strong>
    Thistextisstrong
    </strong>
    .
    </p>

    Italictext

    <p>
    Thistextisnormal.
    </p>

    <p><i>
    Thistextisitalic
    </i>
    .
    </p>

    Emphasizedtext

    <p>
    Thistextisnormal.
    </p>
    <p><em>
    Thistextisemphasized
    </em>
    .
    </p>

    Note:Browsersdisplay<strong>as<b>,and<em>as<i>.
    Markedtext

    Smalltext

    Deletedtext

    EA

    <h2>
    HTML
    <small>
    Small
    </small>
    Formatting
    </h2>

    <h2>
    HTML
    <mark>
    Marked
    </mark>
    Formatting
    </h2>

    U
    D
    YL

    <p>
    Myfavoritecoloris
    <del>
    blue
    </del>
    red.
    </p>

    Insertedtext

    <p>
    Myfavorite
    <ins>
    color
    </ins>
    isred.
    </p>

    Subscripts

    <p>
    Thisis
    <sub>
    subscripted
    </sub>
    text.
    </p>

    Superscript

    ST

    <p>
    Thisis
    <sup>
    superscripted
    </sup>
    text.
    </p>

    LinksinHTML

    <a>tagisusedfordefininglinksinHTML
    Thedestinationlinkiswritteninsidehrefattributeof<a>tag

    Eg.
    <a

    href
    =
    "
    http://www.studyleague.com
    "
    >
    Checkthisout!
    </a>

    ImagesinHTML
    <img>tagisusedtodisplayimagesonawebpage.
    Attributesof<img>tag:

    1. src:Thefilelocationisspecifiedherewithitsname.Iftheimagefileispresentinthe
    samefolderwheretheHTMLfileispresent,thenyoujustneedtowritethefilename

    here.

    displayedonthewebpage.

    EA

    3. width:Specifieswidthoftheimage.

    2. alt:Iftheimageisnotfoundorcouldnotbedisplayedthenthetextspecifiedhereis

    4. height:Specifiesheightoftheimage.

    U
    D
    YL

    HTMLwithCSS

    CSSstandsforCascadingStyleSheets

    StylingcanbeaddedtoHTMLelementsin3ways:

    InlineusingastyleattributeinHTMLelements
    Internalusinga<style>elementintheHTML<head>section

    ST

    ExternalusingoneormoreexternalCSSfiles

    InlineCSS

    InlinestylingisusedtoapplyauniquestyletoasingleHTMLelement.
    Eg.
    <h3

    style
    ="
    color
    :
    red
    ;

    fontfamily:Arial
    ;"
    >
    Heythere!
    </h3>

    InternalCSS
    Internalstylingisdefinedinthe<head>sectionofanHTMLpage.
    ItisusedtodefineastyleforoneHTMLpage.Here<style>tagisused.
    Eg.
    <!DOCTYPEhtml>
    <html>

    <head>
    <style>

    body{
    background

    color
    :
    lightgreen;

    }
    color
    :
    blue;

    EA

    h2{
    text

    align
    :
    center;
    }
    p{

    U
    D
    YL

    color
    :
    yellow;
    }

    </style>
    </head>
    <body>

    <h2>
    Here'stheheading
    </h2>

    <p>
    AYeLLoWparagraph.
    </p>

    ST

    </body>
    </html>

    ExternalCSS
    Anexternalstylesheetisusedtodefinethestyleformanypages.
    Herewereferencethe.cssfileinthe<link>taginside<head>tag.
    Eg.

    <!DOCTYPEhtml>
    <html>
    <head>
    <link

    rel
    =
    "stylesheet"

    href
    =
    "styling.css">
    </head>
    <body>
    <h2>
    Here'stheheading
    </h2>

    <p>
    AYeLLoWparagraph.
    </p>
    </body>

    </html>

    styling
    .
    css
    body{

    }
    h2{
    color
    :
    blue;

    U
    D
    YL

    text

    align
    :
    center;

    EA

    background

    color
    :
    lightgreen;

    p{

    color
    :
    yellow;
    }

    ST

    HTMLTables

    Tablesaredefinedwiththe<table>tag.

    Tablesaredividedintotablerowswiththe<tr>tag.

    Tablerowsaredividedintotabledatawiththe<td>tag.

    Atablerowcanalsobedividedintotableheadingswiththe<th>tag.

    Eg.

    <table

    style
    =
    "
    width
    :
    100
    %
    ">

    <tr>

    <td>
    Jini
    </td>

    <td>
    Jonny
    </td>

    <td>
    50
    </td>

    </tr>

    <tr>

    <td>
    Steve
    </td>

    <td>
    Jack
    </td>

    <td>
    94
    </td>

    </tr>

    </table>

    Tablewithborders

    EA

    <table

    border
    =
    "1"

    style
    =
    "
    width
    :
    100
    %
    ">

    AnHTMLTablewithCollapsedBorders

    table
    ,
    th
    ,
    td{

    U
    D
    YL

    border
    :

    1px
    solidblack;

    border

    collapse
    :
    collapse;
    }

    Basicsabouttable:

    UsetheHTML<table>elementtodefineatable

    UsetheHTML<tr>elementtodefineatablerow

    ST

    UsetheHTML<td>elementtodefineatabledata

    UsetheHTML<th>elementtodefineatableheading

    UsetheHTML<caption>elementtodefineatablecaption

    UsetheCSSborderpropertytodefineaborder

    UsetheCSSbordercollapsepropertytocollapsecellborders

    UsetheCSSpaddingpropertytoaddpaddingtocells

    UsetheCSStextalignpropertytoaligncelltext

    UsetheCSSborderspacingpropertytosetthespacingbetweencells

    Usethecolspanattributetomakeacellspanmanycolumns

    Usetherowspanattributetomakeacellspanmanyrows

    Usetheidattributetouniquelydefineonetable

    ListinHTML
    Orderedlist<ol>

    Numbermarkings

    Alphabetmarkings

    <ol>

    <ol

    type
    =
    "1"
    >

    <li>
    Coffee
    </li>

    <li>
    Coffee
    </li>

    <li>
    Tea
    </li>

    <li>
    Tea
    </li>

    <li>
    Milk
    </li>

    <li>
    Milk
    </li>

    </ol>

    </ol>

    Numbermarkings

    Herethelistitemsaremarkedwithnumbers(default).

    <ol

    type
    =
    "A"
    >

    <li>
    Coffee
    </li>

    <li>
    Tea
    </li>

    EA

    <li>
    Milk
    </li>

    U
    D
    YL

    Unorderedlist<ul>

    </ol>

    Herethedefaultmarkingisdisc.
    None

    <ul>

    <li>
    Coffee
    </li>

    <li>
    Tea
    </li>

    <li>
    Milk
    </li>

    ST

    </ul>

    Disc

    <ul

    style
    =
    "
    list

    style

    type
    :
    disc
    "
    >

    <li>
    Coffee
    </li>

    <li>
    Tea
    </li>

    <li>
    Milk
    </li>
    </ul>

    Circle

    <ul

    style
    =
    "
    list

    style

    type
    :
    circle
    "
    >

    <li>
    Coffee
    </li>

    <li>
    Tea
    </li>


    <li>
    Milk
    </li>
    </ul>
    <ul

    style
    =
    "
    list

    style

    type
    :
    square
    "
    >

    Square

    <li>
    Coffee
    </li>

    <li>
    Tea
    </li>

    <li>
    Milk
    </li>

    </ul>

    HTMLformsareusedtocollectuserinput.

    The<form>elementdefinesanHTMLform:

    <form>
    formelements

    U
    D
    YL

    </form>

    EA

    HTMLForms

    Formelementsaredifferenttypesofinputelements,checkboxes,radiobuttons,submit
    buttons,andmore.

    The<input>Element

    The<input>elementisthemostimportantformelement.

    The<input>elementhasmanyvariations,dependingonthetypeattribute.

    <input

    type
    =
    "text"
    >
    definesaonelineinputfieldfortextinput.

    ST

    <form>

    Firstname:
    <br>

    <input

    type
    =
    "text"

    name
    =
    "firstname"
    ><br><br>

    Lastname:
    <br>

    <input

    type
    =
    "text"

    name
    =
    "lastname"
    >
    </form>

    Somemoretags:
    The<select>Element(DropDownList)

    The<select>elementdefinesadropdownlist:
    <select

    name
    =
    "cars"
    >

    <option

    value
    =
    "volvo"
    >
    Volvo
    </option>

    <option

    value
    =
    "saab"
    >
    Saab
    </option>

    <option

    value
    =
    "fiat"
    >
    Fiat
    </option>

    <option

    value
    =
    "audi"
    >
    Audi
    </option>

    </select>

    The<textarea>Element

    The<textarea>elementdefinesamultilineinputfield.

    The<button>Element

    ST

    The<button>elementdefinesaclickablebutton.

    U
    D
    YL

    EA

    Vous aimerez peut-être aussi