Scribd Logo
Upload

Welcome to Scribd!

  • Learning HTML

    Uploaded by

    Mrabet Wael
    22 views4 pages
    html learning course

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html learning course

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22 views4 pages

    Learning HTML

    Uploaded by

    Mrabet Wael
    html learning course

    Copyright:

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

    IMPORTANT STUFF ABOUT HTML

    <!DOCTYPE html> (indicates that the type of the file i am writing is html)

    <html></html> (the biggest tag)

    <head></header> (the part where i indicate the general informations about my site doesn't appear!)

    <meta charset="UTF-8"> (the type of characters i am using) -NEED MORE INFO

    <meta name="description" content="(TEXT indicating the description of the site">

    <body></body> (the body of my site and where i put everything that will appear in the site)

    <p></p> (paragraph)

    <link rel="icon" type="image/jpg" href="tn.jpg" /> ( to change the icon in the title bar)

    Changing Some of the POLICE / SIZING TAGS FOR TEXT

    <b></b> (BOLD TEXT)

    <i></i> (ITALIC TEXT)

    <big></big> (BIG TEXT)

    <small></small> (SMALL TEXT)

    <h1></h1> .... <h6></h6> (HEADING OF THE SITE)

    <sub></sub> (H2O)

    <sup></sup> (POWER)

    Adding a HYPERTEXT or Navigating through the site

    <a href="HTTPS//www.expl.com"> TEXT THAT YOU WANNA PRESS </a> <a href="Name of file +
    extention"> TEXT THAT YOU WANNA PRESS </a> (Sending to a file)

    if you want them not to change tabs when pressing the hypertext add (target="_blank") inside <a>

    Adding an image :

    <img src="LINK or LOCATION" alt="the name of the image" ( when the image link doesn't work
    anymore !! )/> ( you can add the width and the height with putting in cosideration the X*Y of the
    image )

    PS: You can create a clickable image by merging the href and the img tags together
    Adding a custom video or a youtube video ( iframe) :

    <video src="NAME + extension" width="999" length="999" > </video>

    PS1:- Bich yitaawed il video baad ma youfa : Add "loop" inside the <video> or if you want it to be
    autoplayed add "autoplay" inside <video>

    PS2:-In case you want the user to control the video ( start / stop and the volume ) add "controls"
    inside <video>

    PS3:- In case you want to change the thumbnail of the video add 'poster="NAME + extension of the
    image" '

    Adding Lists ( Ordered , Unordered) :

    ORDERED LIST

    <ol type="1,A,a,I,i">

    <li> ITEM1 </li>

    <li> ITEM2 </li>

    </ol>

    UNORDERED LIST

    <ul>

    <li> ITEM1 </li>

    <li> ITEM2 </li>

    </ul>

    TEXT STYLING (NEED TO LEARN CSS!!!):

    <font face="POLICE" color="COLOR" size="SIZE">

    EXPL: <p style="color:BLUE;"> </p> ( CHANGE THE COLOR OF TEXT )

    <p style="background-color:BLUE;"> </p> (CHANGE THE BACKGROUND COLOR OF THE TEXT)

    <body style"background-color:BLUE;"> </body> (CHANGE THE BACKGROUND COLOR OF THE


    WHOLE SITE)

    DIVS and SPANS:

    DIV = divided ( not the same line )


    SPAN = inline ( the same line )

    EXPL:

    <div> div1 </div>

    <div> div2 </div>

    EXPL 2:

    <span> span1 </span>

    <span> span2 </span>

    INPUT ( NEEDS JAVA SCRIPT) !!! :

    <form> ( wrapper) and we can add action="/ SITE" if we want the form to take action

    <input type="######" /> (password / text / range / date / file / week / email)

    <input type="######" />

    <input type="######" />

    </form>

    different types of inputs : www.w3schools.com/tagS/att_input_type.asp

    IFRAMES (putting an other page inside my website)

    <iframe src="####" width="###" height="###">TEXT IN CASE HE CAN'T SEE THIS</iframe>

    frameboarder="0" (if we want to remove the iframe boarder)

    PS: NOT ALL SITES ALLOW IFRAMES expl : amazon.com

    META TAGS : ( tags about the general informations of the site )

    <meta charset="UTF-8"> (the type of text inside the site)

    <meta name="author / description / keywords" content="TEXT">

    <meta name="viewport" content="width=devicewidth , initialscale=1.0"> ( if you want the website to


    look good on other devices other than the pc )

    To remove the line under href links : <STYLE>A {text-decoration: none;} </STYLE>

    Alink = active link ( link that works fine)

    Vlink = visited link ( link that has been already visited)

    You might also like