HTML ኮርስ

መሠረታዊ የHTML እውቀትን ይማሩ እና የድህረገፅ መሰረታዊ እውቀቶን ይገነቡ።.

Down Arrow

የHTML መግቢያ

    እንኳን ደህና መጡ

ስላይድ 1: የድህረገፅ እና HTML መግቢያ

  • HTML ማለት የHyperText Markup Language ማለት ነው። ይህ የድህረገፆችን እና የድር መተግበሪያዎችን ለመፍጠር የተሰራ መደበኛ የምልክት ቋንቋ ነው።
  • "ድር(Web)" የሚሉት ቃል ብዙውን ጊዜ የአለም አቀፍ ድር (World Wide Web - WWW) የተባለውን ስርዓት ይመለከታል። ይህም በአንዳንድ መንገዶች የተገናኘ የሰነዶችና ሌሎች መረጃዎች ስብስብ ሲሆን፣ በድር ማስተላለፊያ(browser) ሊደረስበት ይችላል።
  • ድሩ የበይነመረቡ መሠረታዊ ክፍል ሲሆን፣ ተጠቃሚዎች በድር ማሳያ (browser) ገዙፍ መረጃዎችን ለማየት እና መገናኘት እንዲችሉ ያስችላል።

ስላይድ 2: ርዕሶች

  • የድር ቃላት መግለጫ
  • HTML
  • HTML ምንድን ነው?
  • የHTML ሰነድ ክፍሎች
  • የHTML መለያዎች(tags)
  • ያስፈልጋሉ
  • በተለምዶ

ስላይድ 3: በይነመረብ (Internet) እና የአለም አቀፍ ድር (WWW)

  • ብዙ ሰዎች እነዚህን ሁለት ቃላት በማቀያየር ይጠቀማሉ፣ ነገር ግን በእርግጥ የተለየ ነው።
  • በይነመረብ (Internet) በኮምፒውተሮችና በተያያዘ አካላዊ ግንኙነቶች (መስመሮች፣ መሪ መሳሪያዎች፣ ወዘተ) የተደራጁ ሰፊ ዓለም አቀፍ አውታረመረብ ነው።
  • የአለም አቀፍ ድር (World Wide Web - WWW ወይም በቀላሉ "ድር") በአውታረመረቡ ላይ የሚሰራ የሶፍትዌር ስብስብ ሲሆን፣ ሰነዶችንና መረጃዎችን እርስ በርስ ማገናኘትን ያስችላል።
  • ይህም በይነመረቡ ላይ መረጃን ለመድረስ አንድ መንገድ ይሰጣል።

ስላይድ 4: የድር አገልግሎት ሰጪዎች(servers) እና ተጠቃሚዎች

  • እዚህ ላይ የድር አገልጋይ (Web server) ማለት በኢንተርኔት ከተገናኙ ሌሎች ኮምፒውተሮች ላይ ወደሚገኙ አሳሾች (browsers) ፋይሎችን ለመላክ ፕሮግራም የተደረገ ኮምፒውተር ነው።
  • የድር አሳሽ፣ ምሳሌ፣ Firefox ወይም Internet Explorer፣ የተጠቃሚው የድር ገፅ ለማግኘት ጥያቄ የሚል ተጠቃሚ ነው።
  • የድር አገልግሎት ተሰጪ እንደ ምሳሌ የተጠቃሚውን ጥያቄ መልሶ በማሳያው በተጠቃሚ ማሳያ ላይ የተጠየቀውን ገፅ ላኩታል፣ እንዲያዩት።

ስላይድ 5: HTTP

  • HTTP (HyperText Transfer Protocol) ማለት ምን ማለት ነው: ሃይፐር ቴክስት ትራንስፈር ፕሮቶኮል ማለት ነው።
  • የWWW ኮምፒውተሮች እርስ በእርስ እንዲግባቡ ያስችላል: የዓለም አቀፍ ድር (WWW) ላይ ያሉ ኮምፒውተሮች እርስ በእርስ እንዲግባቡ ያስችላል።
  • ወደ ድር አገልጋዩ የተላከውን "ጥያቄ" እና ከድር አገልጋዩ የሚደርሰውን "ምላሽ" ያስተናግዳል።: ወደ ድር አገልጋዩ የተላከውን "ጥያቄ" እና ከድር አገልጋዩ የሚደርሰውን "ምላሽ" ያስተናግዳል።

ስላይድ 6: URLs(ዩኒፎርም ሪሶርስ ሎኬተር)

  • URLs (Uniform Resource Locator) ማለት ምን ማለት ነው: ዩኒፎርም ሪሶርስ ሎኬተር ማለት ነው።
  • የድረ-ገጹ አድራሻ ተብሎም ይጠራል: እንዲሁም የድረ-ገጹ አድራሻ ተብሎም ይጠራል።
  • የድረ-ገጽን ለማየት በምትፈልጉበት ጊዜ በተለምዶ በድር አሳሽዎ የአድራሻ አሞሌ ላይ ያስገባሉ።: የድረ-ገጽን ለማየት በምትፈልጉበት ጊዜ በተለምዶ በድር አሳሽዎ የአድራሻ አሞሌ ላይ ያስገባሉ።

ስላይድ 7: HTML

  • HTML (HyperText Markup Language) ማለት ምን ማለት ነው: ሃይፐር ቴክስት ማርክአፕ ላንጉዌጅ ማለት ነው።
  • የድረ-ገጽን ለመፍጠር ያገለግላል: የድረ-ገጽን ለመፍጠር ያገለግላል።
  • የሰነዱን አወቃቀር የሚገልጹ መለያዎች (tags) ይዟል (ይህ ክፍል ርዕስ ነው፣ ይህ ክፍል አንቀጽ ነው፣ ወዘተ): የሰነዱን አወቃቀር የሚገልጹ መለያዎች (tags) ይዟል (ይህ ክፍል ርዕስ ነው፣ ይህ ክፍል አንቀጽ ነው፣ ወዘተ)።
  • ሁሉም የHTML ሰነዶች በሰነድ ዓይነት ማስታወቂያ መጀመር አለባቸው፡ ።
  • የኤችቲኤምኤል ሰነዱ ራሱ በ ይጀምራል እና በ ያበቃል።
  • የኤችቲኤምኤል ሰነዱ የሚታየው ክፍል በ እና መካከል ነው።

ስላይድ 8፡ የHTML መለያዎች (ወይም HTML ታጎች)

መለያ (Tag) ማብራሪያ (Description)
<html> ... </html> ድረ-ገጹ በHTML የተጻፈ መሆኑን ያስታውቃል
<head> ... </head> የገጹን ራስ (head) ይገልጻል
<title> ... </title> ርዕሱን ይገልጻል (በገጹ ላይ አይታይም)
<body> ... </body> የገጹን አካል (body) ይገልጻል
<hn> ... </hn> ደረጃ n ርዕስን ይገልጻል
<b> ... </b> ... በደማቅ (boldface) ያደርጋል
<i> ... </i> ... በግድም (italics) ያደርጋል
<center> ... </center> ... በገጹ ላይ በአግድም ያስቀምጣል
<ul> ... </ul> ያልተደረደረ (ነጥቦች ያሉት) ዝርዝር ይገልጻል
<ol> ... </ol> የተደረደረ (ቁጥሮች ያሉት) ዝርዝር ይገልጻል
<li> ... </li> በተደረደረ ወይም ቁጥሮች ባለው ዝርዝር ውስጥ ያለን ንጥል ይገልጻል
<br> እዚህ ላይ የረድፍ መሰበርን ያስገድዳል
<p> አንቀጽ ይጀምራል
<hr> አግድም መስመር ያስገባል
<img src="..."> እዚህ ላይ ምስል ያሳያል
<a href="...">...</a> የማገናኛ (hyperlink) ይገልጻል

ስላይድ 9: ራስን የሚዘጉ መለያዎች (Self-closing Tags)

  • አንዳንድ የHTML መለያዎች ራሳቸውን የሚዘጉ ናቸው። ለምሳሌ፡
  • <br /> <br /> መለያ የረድፍ መዝለልዝለል ያሳያል

ስላይድ 10: አስፈላጊ መለያዎች

  • ሁሉም የHTML ሰነዶች ከDOCTYPE መለያ ጋር <html> <head> እና <body> መለያዎች ሊኖራቸው ይገባል።
  • !DOCTYPE : ገጹ የትኛውን የመመዘኛዎች ስብስብ እንደሚከተል ለአሳሹ ይነግረዋል።
  • <html>…</html> -- የጠቅላላውን ገጽ ይዘት ይከብባል።
  • <head>…</head> -- እንደ ርዕሱ ያሉትን የገጹን መለያ መረጃዎች ይዘረዝራል።
  • <title>…</title> -- በአሳሹ መስኮት አናት ላይ የሚታየውን የገጹን ስም ይሰጣል።
  • <body>…</body> -- በአሳሹ ውስጥ የሚታየውን የገጹን ይዘት ይቀርፃል።

ስላይድ 11፡ መሰረታዊ የHTML አብነት

  • ይህ የመሰረታዊ የHTML አብነት ምሳሌ ነው፡
  • <!DOCTYPE html><br> <html>
    <head>
    <title>የመጀመሪያዬ ገጽ</title><br> </head>
    <body>
    <p>ይህ የመጀመሪያው የድር ገፄ ነው።</p>
    </body>
    </html>

ስላይድ 12: የተለመዱ የኤችቲኤምኤል ምልክቶች እና ትርጉማቸው

  • <p>…</p> -- አንቀጽ ይፈጥራል
  • <br /> -- የመስመር መሰበርን ይጨምራል
  • <hr /> -- ክፍሎችን በአግድም መስመር ይለያል
  • <h1>…</h1> -- ርዕስን ያሳያል (h1-h6)
  • <!--…--> -- አስተያየት ያስገባል
  • <ol>…</ol> -- የተደረደረ ዝርዝር ይፈጥራል
  • <ul>…</ul> -- ያልተደረደረ ዝርዝር ይፈጥራል
  • <img /> -- ምስል ወደ ሰነዱ ያስገባል
  • <a>…</a> -- ማገናኛ ወደ ሰነዱ ያስገባል

ስላይድ 13: የአንቀጽ ምሳሌ

  • <p>የሚቀጥለው ሳምንት ፈተና እውነት/ውሸት፣ ብዙ ምርጫ፣ አጭር መልስ እና የውሸት ኮድ ጥያቄዎችን ያካትታል። ካልኩሌተር መጠቀም አይችሉም።</p>
  • <p>ከፈተናው በኋላ ጃቫስክሪፕትን እንማራለን። በጣም አስደሳች መሆን አለበት!!</p>

ስላይድ 14: የመስመር መሰበር ምሳሌ

  • <p> ጽጌረዳዎች ቀይ ናቸው። <br /> ቫዮሌቶች ሰማያዊ ናቸው። <br /> ለፈተና 1 ማጥናት አለብህ። <br /> ለአንተ ጥሩ ይሆናል!</p>

ስላይድ 15: የአግድም መስመር ምሳሌ

  • <p>የሚቀጥለው ሳምንት ፈተና እውነት/ውሸት፣ ብዙ ምርጫ፣ አጭር መልስ እና የውሸት ኮድ ጥያቄዎችን ያካትታል። ካልኩሌተር መጠቀም አይችሉም።</p>
  • <hr />
  • <p>ከፈተናው በኋላ ጃቫስክሪፕትን እንማራለን። በጣም አስደሳች መሆን አለበት!!</p>

ስላይድ 16: የርዕስ ምሳሌ

  • <h1>ይህ ርዕስ 1 ነው</h1>
  • <h2>ይህ ርዕስ 2 ነው</h2>
  • <h3>ይህ ርዕስ 3 ነው</h3>
  • <h4>ይህ ርዕስ 4 ነው</h4>
  • <h5>Tይህ ርዕስ 5 ነው</h5>
  • <h6>ይህ ርዕስ 6 ነው</h6>

ስላይድ 17: የአስተያየት ምሳሌ

  • <!-- ይህ የአስተያየት አጠቃቀምን ለማሳየት የተወሰነ የናሙና ኤችቲኤምኤል ብቻ ነው። -->
  • <p>የእኔ አንቀጽ ይኸውና።</p>

ስላይድ 18: የተደረደረ ዝርዝር ምሳሌ

  • <ol> <li>ስምዎን እና የማህበራዊ ዋስትና ቁጥርዎን በፊተኛው ገጽ ላይ ያስቀምጡ።</li>
    <li>ጥያቄዎችን 1-10 በገጽ 1 ላይ ይመልሱ።</li>
    <li>ጥያቄዎችን 11-20 በገጽ 2 ላይ ይመልሱ።</li>
    <li>ጥያቄዎችን 21-25 በገጽ 3 ላይ ይመልሱ።</li>
    <li>ሁሉንም ገጾች በአንድነት በስታፕል ያያይዙ።</li> </ol>

ስላይድ 19: ያልተደረደረ ዝርዝር(Unordered list) ምሳሌ

  • <ul> <li>ስምዎን እና የማህበራዊ ዋስትና ቁጥርዎን በፊተኛው ገጽ ላይ ያስቀምጡ።</li>
    <li>ጥያቄዎችን 1-10 በገጽ 1 ላይ ይመልሱ።</li>
    <li>ጥያቄዎችን 11-20 በገጽ 2 ላይ ይመልሱ።</li>
    <li>ጥያቄዎችን 21-25 በገጽ 3 ላይ ይመልሱ።</li>
    <li>ሁሉንም ገጾች በአንድነት በስታፕል ያያይዙ።</li> </ul>

ስላይድ 20: የማገናኛ(Link) ምሳሌ

  • <a href="http://www.csee.umbc.edu/~jtang/cmsc104">JTang's CMSC104 Page</a>

ስላይድ 21: የምስል(Image) ምሳሌ

  • <img src="logo.png" alt="UMBC logo" />

ስላይድ 22: የHTML ማረሚያ (Validation)

  • የ HTML ማረሚያ ሂደቱ የተጻፈው የHTML ኮድ የ W3C (World Wide Web Consortium) ደንቦችን እንደሚከተል ማረጋገጥ ነው።
  • የ W3C Markup Validation Service ተጠቀም እንዲህ በማድረግ የHTML ኮድህን ስህተቶች ይፈትሹ: <a href="http://validator.w3.org/">validator.w3.org</a>

ስላይድ 23: ማጠቃለያ

  • HTML የድር ገጾችን ለመፍጠር የሚያገለግል ቋንቋ ነው።
  • ድረ-ገጹ እና ኢንተርኔት አንድ አይደሉም።
  • የኤችቲኤምኤል ሰነዶች የገጹን አወቃቀር እና ይዘት የሚገልጹ ምልክቶች (tags) ያሏቸው ናቸው።
  • የኤችቲኤምኤል ኮድዎን ስህተቶች ለማረጋገጥ የW3C ምልክት ማረጋገጫ አገልግሎትን ይጠቀሙ።

እንኳን ደስ አላችሁ!

  • የኤችቲኤምኤል(HTML) እና የድር(Web) ኮርሱን በተሳካ ሁኔታ አጠናቅቀዋል። የሲኤስኤስ ኮርስ ለመቀጠል ከፈለጉ።
  • If you want to continue to the CSS course