Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    ahmad
    19 views7 pages

    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

    Copyright:

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

    HTML

    Uploaded by

    ahmad

    Copyright:

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

    ‫)‪HTML : (Hyper Text Markup Language‬‬

    ‫لغة االرتباط النصي التشعبي‬


    ‫مقدمة على لغة ال ‪: HTML‬‬

    ‫٘‪ ٟ‬ػثاسج ػٓ ِدّ‪ٛ‬ػح ذؼٍ‪ّ١‬اخ ذىرة تٍّف ٔظ‪٠ ٟ‬سرخذِ‪ٙ‬ا ِسرؼشع االٔرشٔد‬
    ‫ٌؼشع طفحح اٌ‪٠ٛ‬ة‬
    ‫ذىرة اٌرؼٍ‪ّ١‬اخ ػّٓ أل‪ٛ‬اط > < ذسّ‪Tags ٝ‬‬

    ‫٘زٖ اٌٍغح غ‪١‬ش حساسح ٌحاٌح األحشف‬


    ‫اٌفشاغاخ اٌّرؼذدج خاسج اٌرؼٍ‪ّ١‬اخ ذؼرثش فشاؽ ‪ٚ‬احذ‬
    ‫اٌرؼٍ‪ّ١‬ح ‪ :‬ذخثش اٌّرظفح ػٓ اٌؼًّ اٌز‪٠ ٞ‬دة اٌم‪١‬اَ تٗ‬
    ‫اٌخاط‪١‬ح ‪ :‬ذحذد اٌى‪١‬ف‪١‬ح اٌر‪ ٟ‬س‪١‬رُ ت‪ٙ‬ا أداء ٘زا اٌؼًّ ‪ّ٠ ,‬ىٓ اسٕاد أوثش ِٓ خاط‪١‬ح‬
    ‫تذاخً اٌرؼٍ‪ّ١‬ح ‪ٌٚ‬ىً خاط‪١‬ح ٌ‪ٙ‬ا ل‪ ُ١‬ذىرة ػّٓ اشاساخ ذٕظ‪١‬ض ‪quotation‬‬
    ‫ِثاي >"‪ٔ <Body text="blue" bgcolor="ffff00‬سرخذَ اٌخاط‪١‬ح ‪ٌ text‬دؼً‬
    ‫ٌ‪ ْٛ‬اٌخط ف‪ ٟ‬واًِ اٌظفحح ِثال تاٌٍ‪ ْٛ‬األصسق ‪ٔٚ ,‬سرخذَ اٌخاط‪١‬ح ‪bgcolor‬‬
    ‫ٌدؼً ٌ‪ ْٛ‬خٍف‪١‬ح واًِ اٌظفحح ِثال تاٌٍ‪ ْٛ‬األطفش‪.‬‬
    ‫أ‪ٚ‬ال ‪٠‬دة اْ ٔخثش اٌّرظفح تإٔٔا ٔسرخذَ ٌغح اي ‪ٌ HTML‬رظّ‪ ُ١‬طفحح اٌ‪٠ٛ‬ة‬
    ‫‪ٚ‬رٌه تاسرخذاَ اٌرؼٍ‪ّ١‬ح >‪ ٟٕٙٔٚ <HTML‬اٌظفحح تاسرخذاَ اٌرؼٍ‪ّ١‬ح >‪</HTML‬‬

    ‫وً ذؼٍ‪ّ١‬ح ٌ‪ٙ‬ا تذا‪٠‬ح > < ‪ٌٙٚ‬ا ٔ‪ٙ‬ا‪٠‬ح > ‪</‬‬

    ‫تذاخً طفحح اي ‪ٛ٠ HTML‬خذ لسّاْ ‪٠‬ؤٌفاْ طفحح اٌ‪٠ٛ‬ة ّ٘ا ‪ :‬اٌرش‪٠ٚ‬سح سأط‬
    ‫اٌظفحح >‪ٌ , <Head‬ىً طفحح ػٕ‪ٛ‬اْ ‪٠‬ىرة تذاخً ذش‪٠ٚ‬سح اٌظفحح‬
    ‫>‪<Title‬ػٕ‪ٛ‬اْ اٌظفحح >‪ ٟٕٙٔٚ </Title‬ذش‪٠ٚ‬سح اٌظفحح >‪ٚ </Head‬اٌدسُ‬
    ‫>‪ٔ <Body‬ىرة إٌظ‪ٛ‬ص ‪ٚ‬اٌش‪ٚ‬اتط >‪ِ ,</Body‬ثاي تس‪١‬ط إلٔشاء طفحح ‪٠ٚ‬ة ‪:‬‬

    ‫وراتح ٔض تاٌخط اٌغاِك ػثش اٌرؼٍ‪ّ١‬ح >‪ٚ <b‬تاٌخط اٌّائً ػثش اٌرؼٍ‪ّ١‬ح >‪<i‬‬
    ‫‪ٚ‬تاٌخط اٌّسطش ػثش اٌرؼٍ‪ّ١‬ح >‪ ٟٕٙٔٚ <u‬أ‪ٚ‬ال آخش ذؼٍ‪ّ١‬ح ِفر‪ٛ‬حح >‪ </u‬ثُ ٔغٍك‬
    ‫>‪ </i‬ثُ ٔغٍك >‪ٌٍٕ , </b‬ض‪ٚ‬ي اٌ‪ ٝ‬اٌسطش اٌراٌ‪ٔ ٟ‬سرخذَ اٌرؼٍ‪ّ١‬ح >‪ <br‬ف‪ ٟٙ‬ذؼًّ‬
    ‫ػًّ ‪ٚ , Enter‬ال ذحراج اٌ‪ٙٔ ٝ‬ا‪٠‬ح ِثً >‪</br‬‬
    ‫ٌىراتح ط‪١‬غح حّغ اٌىثش‪٠‬د ت‪ٙ‬زا اٌشىً ‪ٔ H2so4‬ىرة األسلاَ تذاخً اٌرؼٍ‪ّ١‬ح‬
    ‫>‪ <sub‬اٌر‪ ٟ‬ذدؼً األسلاَ تّسر‪ِٕ ٜٛ‬خفغ ػٓ اٌحش‪ٚ‬ف ‪ ٟٕٙٔٚ‬اٌرؼٍ‪ّ١‬ح >‪</sub‬‬

    ‫ٌشفغ ِسر‪ ٜٛ‬اٌشلُ ػٓ اٌحش‪ٚ‬ف ٔىرة اٌشلُ تذاخً اٌرؼٍ‪ّ١‬ح >‪ ٟٕٙٔٚ <sup‬اٌرؼٍ‪ّ١‬ح‬
    ‫>‪</sup‬‬

    ‫ٔىرة تذاخً ِحشس إٌظ‪ٛ‬ص اٌّفىشج اٌى‪ٛ‬د اٌراٌ‪ٔٚ ٟ‬حفظٗ تاسُ ِثال ‪ٚ file‬اٌالحمح‬
    ‫‪١ٌ .html‬رُ فرح اٌٍّف وظفحح ‪٠ٚ‬ة ف‪١‬ظثح االسُ واِال‪ٚ file.html :‬اٌرشِ‪١‬ض‬
    ‫ٔخراسٖ ‪١ٌ UTF-8‬رؼشف ػٍ‪ِ ٝ‬ؼظُ ِحاسف ٌغاخ اٌؼاٌُ‬

    ‫>‪<Html‬‬

    ‫>‪<Head‬‬

    ‫>‪<Title> My website </Title‬‬

    ‫>‪</Head‬‬

    ‫>‪<Body‬‬

    ‫>‪<b><i><u>Bold Italic and underline text</u></i></b><br‬‬

    ‫>‪H<sub>2</sub>SO<sub>4</sub><br‬‬

    ‫>‪CM<sup>2</sup‬‬

    ‫>‪</Body‬‬

    ‫>‪</Html‬‬

    ‫التعامل مع الخط ‪:‬‬


    ‫ٌرؼذ‪ ً٠‬حدُ اٌخط أ‪ٛٔ ٚ‬ػٗ أ‪ٔ ٌٗٔٛ ٚ‬سرخذَ ذؼٍ‪ّ١‬ح اٌخط >‪ٌٙ <Font‬ا ػذج‬
    ‫خظائض ( ‪ٛٔ face‬ع اٌخط – ‪ size‬حدُ اٌخط – ‪ ٌْٛ color‬اٌخط )‬
    ‫‪ٛ٠ٚ‬خذ طش‪٠‬مر‪ٌ ٓ١‬ىراتح اٌٍ‪ ْٛ‬اِا ترسّ‪١‬رٗ ِثً "‪ color="green‬أ‪ ٚ‬ت‪ٛ‬ػغ ل‪ّ١‬ح‬
    ‫ٌٍ‪ ْٛ‬تإٌظاَ اٌسد ػشش‪ِ ٞ‬ثً "‪ , color="#00ff00‬اٌ‪ٛ‬اْ اٌشاشح ٔاذدح ػٓ دِح‬
    ‫االٌ‪ٛ‬اْ ‪ٚ RGB‬وً ٌ‪٠ ْٛ‬ماط تاٌثا‪٠‬د ‪٠ Byte=8bits‬ثذأ إٌظاَ اٌسد ػشش‪: ِٓ ٞ‬‬
    ‫‪ِ , FF‬ثاي ‪ :‬اٌٍ‪٠ #ffff00 ْٛ‬ؼط‪ ٟ‬أطفش ‪ ,‬اٌٍ‪ #000000 ْٛ‬أس‪ٛ‬د‬ ‫‪00‬‬
    ‫اٌٍ‪ #0000ff ْٛ‬أصسق ‪ ,‬اٌٍ‪ #ff0000 ْٛ‬أحّش ‪ ,‬اٌٍ‪ #FFFFFF ْٛ‬أت‪١‬غ ‪,‬‬
    ‫إرا وأد ل‪ّ١‬ح اٌٍ‪ ْٛ‬األحّش ذسا‪ ٞٚ‬ل‪ّ١‬ح اٌٍ‪ ْٛ‬األخؼش ذسا‪ ٞٚ‬ل‪ّ١‬ح اٌٍ‪ ْٛ‬األصسق‬
    ‫‪٠‬ؼط‪ ٟ‬دسخح ِٓ دسخاخ اٌٍ‪ ْٛ‬اٌشِاد‪ِ ٞ‬ثً ‪. #d0d0d0‬‬

    ‫ٌٍرحىُ تحدُ اٌخط(‪ ٌٗ :)size‬سثغ ِماساخ ذأخز اٌم‪ ِٓ ُ١‬اي ‪ 1‬إٌ‪ِ 7 ٝ‬ثً ‪size= 5‬‬

    ‫حدُ اٌخط االفرشاػ‪ّ٠, 3 ٛ٘ ٟ‬ىٓ وراتح حدُ اٌخط تاٌطش‪٠‬مح إٌسث‪١‬ح ( ص‪٠‬ادج أ‪ٚ‬‬
    ‫ٔمظاْ ػٓ اٌحدُ االفرشاػ‪ِ )ٟ‬ثً ‪ size = +2‬أ‪ ٞ‬ذضا‪٠‬ذ تّمذاس ‪ 2‬ػٓ االفرشاػ‪ٟ‬‬
    ‫‪ 3‬ف‪١‬ظثح حدُ اٌخط ٘‪5 ٛ‬‬
    ‫ِثاي ‪ :‬اخؼً وٍّح ‪ text‬تاٌٍ‪ ْٛ‬األصسق ‪ٚ‬حدُ خط (‪ٛٔٚ )5‬ع اٌخط اٌّسرخذَ‬
    ‫‪ٔ , Tahoma‬ىرة تذاخً خسُ اٌظفحح ‪: Body‬‬

    ‫>‪<font face="tahoma" size="5" color="#0000ff"> Text </font‬‬

    ‫اٌفمشاخ أ‪ ٚ‬اٌّماطغ ( ‪ : ) Paragraph‬ذٕفظً وً فمشج ػٓ فمشج أخش‪ ٜ‬تاسرخذاَ‬


    ‫اٌرؼٍ‪ّ١‬ح >‪٘ </p> Paragraph <p‬زٖ اٌرؼٍ‪ّ١‬ح ذرشن لثٍ‪ٙ‬ا سطش ‪ٚ‬تؼذ٘ا سطش‬
    ‫ذٍمائ‪١‬ا ‪ ,‬ال ذحراج اٌ‪ ٝ‬اسرخذاَ >‪ٛ٠ , <br‬خذ خاط‪١‬ح ف‪ ٟ‬اٌفمشج ٘‪ ٟ‬اٌّحاراج ‪:align‬‬
    ‫( ذؼٕ‪ٚ ٟ‬ػؼ‪١‬ح اٌفمشج ف‪ ٟ‬اٌظفحح ) ‪ ,‬ذأخز اٌم‪) Right – center – right ( ُ١‬‬

    ‫ِثاي ‪:‬‬
    ‫>‪<p align="right"> paragraph text </p‬‬

    ‫تمييز العناوين ‪:‬‬


    ‫‪ٛ٠‬خذ ‪ 6‬دسخاخ ٌؼٕا‪ ٓ٠ٚ‬إٌظ‪ٛ‬ص (‪ )Heading‬ف‪ ٟ‬طفحح اٌ‪٠ٛ‬ة ٘‪: ٟ‬‬

    ‫أوثش ِسر‪ٌٍ ٜٛ‬خط ‪٠‬ماتً "‪size="6‬‬ ‫>‪<h1> Title 1 </h1‬‬

    ‫‪٠‬ماتً ِسر‪ ٜٛ‬اٌخط "‪size="5‬‬ ‫>‪<h2> Title 2 </h2‬‬

    ‫‪٠‬ماتً ِسر‪ ٜٛ‬اٌخط "‪size="4‬‬ ‫>‪<h3> Title 3 </h3‬‬


    size="3" ‫ اٌخط‬ٜٛ‫ماتً ِسر‬٠ <h4> Title 4 </h4>

    size="2" ‫ اٌخط‬ٜٛ‫ماتً ِسر‬٠ <h5> Title 5 </h5>

    size="1" ً‫مات‬٠ ‫ ٌٍخط‬ٜٛ‫أطغش ِسر‬ <h6> Title 6 </h6>

    ‫ا‬١‫ٓ تشىً غاِك ذٍمائ‬٠ٚ‫ْ اٌؼٕا‬ٛ‫ذى‬ٚ , ‫تؼذ٘ا سطش‬ٚ ‫ا سطش‬ٍٙ‫ّح ذرشن لث‬١ٍ‫٘زٖ اٌرؼ‬
    ُ١‫ اٌظفحح ) ذأخز اٌم‬ٟ‫ٓ ف‬٠ٚ‫ح اٌؼٕا‬١‫ػؼ‬ٚ( ‫ اٌّحاراج‬align ‫ح‬١‫ّىٓ اسرخذاَ اٌخاط‬٠
    ) Right – center – right (

    <b> <font size="6"> title1 </font> </b><br> ْ‫ا‬ٕٛ‫فثذي ِٓ أْ ٔىرة اٌؼ‬


    <h1> Title 1 </h1> ‫ّح‬١ٍ‫اْ اٌساتك تاٌرؼ‬ٕٛ‫ّىٓ اخرظاس اٌؼ‬٠

    : ‫ص‬ٛ‫ٓ إٌظ‬٠ٚ‫ ػٕا‬ٍٝ‫ ػ‬: ‫تطبيق‬


    : ٍٟ٠ ‫ز ِا‬١‫دح ذٕف‬١‫ِا ٔر‬
    <html>

    <head><title>My site </title></head>

    <body>

    <h1 align="center"> lesson 1 </h1>

    <h2 align="center"> lesson 1 </h2>

    <h3 align="right"> lesson 1 </h3>

    <h4 align="right"> lesson 1 </h4>

    <h5 align="left"> lesson 1 </h5>

    <h6 align="left"> lesson 1 </h6>

    </body>

    </html>
    ‫ٌذ‪ٕ٠‬ا ٔ‪ٛ‬ػ‪ ِٓ ٓ١‬اٌم‪ٛ‬ائُ ‪:‬‬ ‫الفقرات والقوائم ‪:‬‬
    ‫‪ - 1‬ل‪ٛ‬ائُ ِشذثح ( سلّ‪١‬ح ) ‪ٌٙ Ordered list‬ا خظائض ‪ٌ Type‬رحذ‪٠‬ذ ٔ‪ٛ‬ع ذشل‪ُ١‬‬
    ‫اٌرؼذاد } ‪{ i , A , 1 , a‬‬

    ‫‪ - 2‬ل‪ٛ‬ائُ غ‪١‬ش ِشذثح ( ٔمط‪١‬ح ) ‪ٌٙ unordered list‬ا خظائض ‪ٌ Type‬رحذ‪٠‬ذ ٔ‪ٛ‬ع‬
    ‫اٌرؼذاد إٌمط‪ disc } ٟ‬دائشج س‪ٛ‬داء ‪ circle ,‬دائشج فاسغح ‪ِ square ,‬شتغ فاسؽ {‬

    ‫‪ٌٍٚ‬رؼذاد اٌشلّ‪ٚ ٟ‬إٌمط‪ ٟ‬خاط‪١‬ح اػاف‪١‬ح ‪ ٟ٘ٚ‬اذداٖ اٌرؼذاد ‪ dir‬ذأخز اٌم‪ِٓ } ُ١‬‬
    ‫اٌ‪ ٓ١ّ١‬اٌ‪ ٝ‬اٌ‪١‬ساس ‪ ِٓ , RTL‬اٌ‪١‬ساس اٌ‪ ٝ‬اٌ‪{ LTR ٓ١ّ١‬‬

    ‫ٌؼًّ لائّح ِشذثح ف‪ ٟ‬طفحح اٌ‪٠ٛ‬ة ٔسرخذَ اٌرؼٍ‪ّ١‬ح >‪ٔ <ol‬ؼغ تذاخٍ‪ٙ‬ا اٌؼٕاطش‬
    ‫اٌّطٍ‪ٛ‬ب ذؼذاد٘ا ٔؼغ وً ػٕظش ػّٓ ذؼٍ‪ّ١‬ح <‪ ٟ٘ >li‬اخرظاس ‪List Item‬‬
    ‫‪ ٟٕٙٔٚ‬اٌرؼٍ‪ّ١‬ح >‪ ٟٕٙٔٚ </li‬اٌرؼٍ‪ّ١‬ح >‪</ol‬‬
    ‫‪ٌٚ‬ؼًّ لائّح غ‪١‬ش ِشذثح ٔسرخذَ اٌرؼٍ‪ّ١‬ح >‪ٔ <ul‬ؼغ تذاخٍ‪ٙ‬ا اٌؼٕاطش اٌّطٍ‪ٛ‬ب‬
    ‫ذؼذاد٘ا ٔؼغ وً ػٕظش ػّٓ ذؼٍ‪ّ١‬ح <‪ ٟٕٙٔٚ >li‬اٌرؼٍ‪ّ١‬ح >‪ ٟٕٙٔٚ </li‬اٌرؼٍ‪ّ١‬ح‬
    ‫>‪</ul‬‬

    ‫ِثاي ػٍ‪ ٝ‬اٌرؼذاد اٌشلّ‪ٚ ٟ‬إٌمط‪ِ : ٟ‬ا ٔر‪١‬دح ذٕف‪١‬ز ِا ‪: ٍٟ٠‬‬


    ‫>‪<html‬‬

    ‫>‪<head><title>My site </title></head‬‬

    ‫>‪<body‬‬

    ‫‪Season of year is :‬‬

    ‫>"‪<ul type="circle‬‬

    ‫‪<li>Spring‬‬

    ‫>‪<ol‬‬

    ‫>‪<li>March </li‬‬

    ‫>‪<li> April </li‬‬

    ‫>‪<li> may </li‬‬


    </ol>

    </li>

    <li>summer

    <ol start="4">

    <li>June</li>

    <li>July</li>

    <li>August </li>

    </ol>

    </li>

    <li>Autumn

    <ol start="7">

    <li>September</li>

    <li>October</li>

    <li>November </li>

    </ol>

    </li>

    <li>Winter

    <ol start="10">

    <li>December</li>

    <li>January</li>

    <li>February </li>
    </ol>

    </li>

    </ul>

    </body>

    </html>

    You might also like