ሰላም! 👋 HTML፣ CSS እና JavaScript ምን እንደሆኑ፣ ልዩነታቸውና እንዴት ጥቅም ላይ እንደሚውሉ በቀላል አማርኛ እንመልከት። እንዲሁም እነዚህን ቴክኖሎጂዎች ለመማር የሚያነሳሳ ምክር እሰጣለሁ። 😊
HTML (HyperText Markup Language):
HTML ማለት የድረ-ገጽ (website) አጽም ነው። 🧱 ልክ እንደ ቤት ግድግዳና ጣሪያ፣ HTML የድረ-ገጹን መሰረታዊ መዋቅር ይፈጥራል። በHTML በመጠቀም ጽሑፎችን፣ 🖼️ ምስሎችን፣ 🎥 ቪዲዮዎችን እና ሌሎች ይዘቶችን በድረ-ገጹ ላይ እንዴት እንደምናሳይ እንወስናለን። HTML "tags" በሚባሉ ምልክቶች በመጠቀም ይሰራል። ለምሳሌ፣ <p> የሚለው ምልክት አንቀጽ ለመጀመር፣ <img> ደግሞ ምስል ለማስገባት ያገለግላል።
CSS (Cascading Style Sheets):
CSS ማለት የድረ-ገጹን ገጽታ (style) የምንቆጣጠርበት ቋንቋ ነው። 🎨 ልክ እንደ ቤት ቀለም እና የቤት እቃዎች፣ CSS ለድረ-ገጹ ውበት እና ማራኪነት ይሰጣል። ✨ በCSS በመጠቀም የጽሑፎችን ቀለም፣ ቅርጸ-ቁምፊ (font)، መጠን፣ የጀርባ ቀለም (background color) እና ሌሎች የንድፍ ባህሪያት ማስተካከል እንችላለን። CSS HTMLን የበለጠ ቆንጆ 😍 እና ለተጠቃሚ ምቹ ያደርገዋል። 👍
JavaScript:
JavaScript ማለት ለድረ-ገጹ ተለዋዋጭነት (dynamic) እና ተግባራዊነት የምንሰጠው ቋንቋ ነው። ⚙️ ልክ እንደ ቤት የኤሌክትሪክ መስመር፣ JavaScript በድረ-ገጹ ላይ የተለያዩ ተግባራት እንዲከናወኑ ያስችላል። ለምሳሌ፣ አንድ ቁልፍ ሲጫን አንድ ነገር እንዲሆን፣ ወይም አንድ ፎርም ሲሞላ መረጃው እንዲላክ በJavaScript እንጽፋለን። JavaScript ድረ-ገጾችን በይነተገናኝ (interactive) ያደርጋቸዋል። 🚀
ልዩነታቸው በአጭሩ:
HTML: የድረ-ገጹ መዋቅር (structure) 🧱
CSS: የድረ-ገጹ ገጽታ (style) 🎨
JavaScript: የድረ-ገጹ ተግባራዊነት (functionality) ⚙️
ለምን መማር አለብን? 🤔
እነዚህን ቴክኖሎጂዎች መማር ብዙ ጥቅሞች አሉት።
የራስዎን ድረ-ገጽ ይፍጠሩ: የፈለጉትን አይነት ድረ-ገጽ፣ ጦማር (blog) ✍️ ወይም የመስመር ላይ መደብር 🛍️ መፍጠር ይችላሉ።
የድር ልማት (web development) ሙያ ይኑርዎት: የድር ልማት በዓለም ላይ በጣም ተፈላጊ ከሆኑ ሙያዎች አንዱ ነው። 👨💻👩💻
የፈጠራ ችሎታዎን ይግለጹ: ድረ-ገጾችን በመፍጠር ሃሳቦችዎን እና ችሎታዎን ለዓለም ማካፈል ይችላሉ።💡
የተሻለ ግንዛቤ: የቴክኖሎጂውን ዓለም እና እንዴት እንደሚሰራ መረዳት ይችላሉ። 🤓
የሚያነሳሳ ምክር:
በትንሹ ይጀምሩ: በአንድ ጊዜ ሁሉንም ነገር ለመማር አይሞክሩ። መሰረታዊ HTML፣ CSS እና JavaScriptን በመማር ይጀምሩ። ✅
ተለማመዱ: በተቻለዎት መጠን ኮድ ይጻፉ እና ይሞክሩ። "Practice makes perfect" እንደሚባለው በተግባር ብዙ ይማራሉ! ⌨️
ምንጮችን ይጠቀሙ: ብዙ ነጻ የመማሪያ ምንጮች፣ እንደ ዩቲዩብ ቪዲዮዎች፣ የመስመር ላይ ትምህርቶች እና መጽሐፍት አሉ። 📚
ትዕግስት ይኑርዎት: መማር ጊዜ ይወስዳል፣ ስለዚህ አይበሳጩ። በጽናት ይቀጥሉ! persevering_face
ማህበረሰብን ይቀላቀሉ: ከሌሎች ተማሪዎች እና ፕሮፌሽናል ድር ገንቢዎች ጋር ይገናኙ። እርስ በርስ መረዳዳት እና መማር ጠቃሚ ነው። 🤝
እነዚህን ምክሮች በመከተል እና በጽናት በመማር፣ የድር ልማት ችሎታዎን ማዳበር እና ስኬታማ የድር ገንቢ መሆን ይችላሉ። 👏 መልካም እድል! 👍🎉
https://t.me/Muju_man_coding
HTML (HyperText Markup Language):
HTML ማለት የድረ-ገጽ (website) አጽም ነው። 🧱 ልክ እንደ ቤት ግድግዳና ጣሪያ፣ HTML የድረ-ገጹን መሰረታዊ መዋቅር ይፈጥራል። በHTML በመጠቀም ጽሑፎችን፣ 🖼️ ምስሎችን፣ 🎥 ቪዲዮዎችን እና ሌሎች ይዘቶችን በድረ-ገጹ ላይ እንዴት እንደምናሳይ እንወስናለን። HTML "tags" በሚባሉ ምልክቶች በመጠቀም ይሰራል። ለምሳሌ፣ <p> የሚለው ምልክት አንቀጽ ለመጀመር፣ <img> ደግሞ ምስል ለማስገባት ያገለግላል።
CSS (Cascading Style Sheets):
CSS ማለት የድረ-ገጹን ገጽታ (style) የምንቆጣጠርበት ቋንቋ ነው። 🎨 ልክ እንደ ቤት ቀለም እና የቤት እቃዎች፣ CSS ለድረ-ገጹ ውበት እና ማራኪነት ይሰጣል። ✨ በCSS በመጠቀም የጽሑፎችን ቀለም፣ ቅርጸ-ቁምፊ (font)، መጠን፣ የጀርባ ቀለም (background color) እና ሌሎች የንድፍ ባህሪያት ማስተካከል እንችላለን። CSS HTMLን የበለጠ ቆንጆ 😍 እና ለተጠቃሚ ምቹ ያደርገዋል። 👍
JavaScript:
JavaScript ማለት ለድረ-ገጹ ተለዋዋጭነት (dynamic) እና ተግባራዊነት የምንሰጠው ቋንቋ ነው። ⚙️ ልክ እንደ ቤት የኤሌክትሪክ መስመር፣ JavaScript በድረ-ገጹ ላይ የተለያዩ ተግባራት እንዲከናወኑ ያስችላል። ለምሳሌ፣ አንድ ቁልፍ ሲጫን አንድ ነገር እንዲሆን፣ ወይም አንድ ፎርም ሲሞላ መረጃው እንዲላክ በJavaScript እንጽፋለን። JavaScript ድረ-ገጾችን በይነተገናኝ (interactive) ያደርጋቸዋል። 🚀
ልዩነታቸው በአጭሩ:
HTML: የድረ-ገጹ መዋቅር (structure) 🧱
CSS: የድረ-ገጹ ገጽታ (style) 🎨
JavaScript: የድረ-ገጹ ተግባራዊነት (functionality) ⚙️
ለምን መማር አለብን? 🤔
እነዚህን ቴክኖሎጂዎች መማር ብዙ ጥቅሞች አሉት።
የራስዎን ድረ-ገጽ ይፍጠሩ: የፈለጉትን አይነት ድረ-ገጽ፣ ጦማር (blog) ✍️ ወይም የመስመር ላይ መደብር 🛍️ መፍጠር ይችላሉ።
የድር ልማት (web development) ሙያ ይኑርዎት: የድር ልማት በዓለም ላይ በጣም ተፈላጊ ከሆኑ ሙያዎች አንዱ ነው። 👨💻👩💻
የፈጠራ ችሎታዎን ይግለጹ: ድረ-ገጾችን በመፍጠር ሃሳቦችዎን እና ችሎታዎን ለዓለም ማካፈል ይችላሉ።💡
የተሻለ ግንዛቤ: የቴክኖሎጂውን ዓለም እና እንዴት እንደሚሰራ መረዳት ይችላሉ። 🤓
የሚያነሳሳ ምክር:
በትንሹ ይጀምሩ: በአንድ ጊዜ ሁሉንም ነገር ለመማር አይሞክሩ። መሰረታዊ HTML፣ CSS እና JavaScriptን በመማር ይጀምሩ። ✅
ተለማመዱ: በተቻለዎት መጠን ኮድ ይጻፉ እና ይሞክሩ። "Practice makes perfect" እንደሚባለው በተግባር ብዙ ይማራሉ! ⌨️
ምንጮችን ይጠቀሙ: ብዙ ነጻ የመማሪያ ምንጮች፣ እንደ ዩቲዩብ ቪዲዮዎች፣ የመስመር ላይ ትምህርቶች እና መጽሐፍት አሉ። 📚
ትዕግስት ይኑርዎት: መማር ጊዜ ይወስዳል፣ ስለዚህ አይበሳጩ። በጽናት ይቀጥሉ! persevering_face
ማህበረሰብን ይቀላቀሉ: ከሌሎች ተማሪዎች እና ፕሮፌሽናል ድር ገንቢዎች ጋር ይገናኙ። እርስ በርስ መረዳዳት እና መማር ጠቃሚ ነው። 🤝
እነዚህን ምክሮች በመከተል እና በጽናት በመማር፣ የድር ልማት ችሎታዎን ማዳበር እና ስኬታማ የድር ገንቢ መሆን ይችላሉ። 👏 መልካም እድል! 👍🎉
https://t.me/Muju_man_coding
👍5❤1
Code Spark
Project የልሰራቹ ሰዎች ለመስራት ዝግጁ ናቹ
This is your project after you finished your project send it on the following bot 👇👇👇👇👇👇
@Projects1t2m1Bot
If you have anyquestion about the project you can ask in the bot
@Projects1t2m1Bot
If you have any
🎉 Congratulations, Ethio Coders Family! 🎉
🚀 We’ve officially reached 2K subscribers! 🚀
This is just the beginning—let’s keep learning, coding, and growing together! 💻🔥
🥳🎊 Thank you for being part of this amazing journey! 🎊🥳
🚀 We’ve officially reached 2K subscribers! 🚀
This is just the beginning—let’s keep learning, coding, and growing together! 💻🔥
🥳🎊 Thank you for being part of this amazing journey! 🎊🥳
👏3👍2
🌙 Ramadan Mubarak, Ethio Coders Family!
Alhamdulillah, we are blessed to see Ramadan, a month of fasting, prayer, and kindness.
This is a time to purify our hearts, seek forgiveness, and increase our good deeds. May Allah accept our fasts, prayers, and all our efforts.
Let us use this month to be patient, help others, and get closer to Allah.
May He fill our hearts with peace, guide us to the right path, and bless us with success in this life and the Hereafter.
May this Ramadan bring mercy, happiness, and barakah to you and your loved ones. Ramadan Kareem! 🤲
Alhamdulillah, we are blessed to see Ramadan, a month of fasting, prayer, and kindness.
This is a time to purify our hearts, seek forgiveness, and increase our good deeds. May Allah accept our fasts, prayers, and all our efforts.
Let us use this month to be patient, help others, and get closer to Allah.
May He fill our hearts with peace, guide us to the right path, and bless us with success in this life and the Hereafter.
May this Ramadan bring mercy, happiness, and barakah to you and your loved ones. Ramadan Kareem! 🤲
❤7👏2👍1
Uses of Web Development
Web development is used to create and maintain websites and web applications. It helps in:
Business & E-commerce – Companies sell products and services online.
Social Networking – Platforms like Facebook, Twitter, and LinkedIn connect people.
Education – Online learning platforms like Udemy and Coursera provide courses.
Entertainment – Websites like YouTube, Netflix, and Spotify offer media content.
Government & Services – Websites provide online services like bill payments and registrations.
Healthcare – Hospitals and clinics use websites for appointments and health records.
How to Make a Profit from Web Development
Freelancing – Work on platforms like Fiverr, Upwork, and Freelancer.
Building & Selling Websites – Create websites and sell them to businesses.
Web Hosting & Maintenance – Offer hosting services and website management.
Creating & Selling Web Templates – Design website themes and sell them on platforms like ThemeForest.
Affiliate Marketing – Create a website and earn by promoting products.
Ads & Monetization – Run a blog or a web app and earn from Google AdSense.
Web Development Jobs – Get hired as a web developer for companies.
E-commerce Store – Sell products or services through your own website.
Teaching Web Development – Create online courses or tutorials on YouTube.
If you want to start web development, you can learn HTML, CSS, JavaScript, and frameworks like React or Vue.js.
Web development is used to create and maintain websites and web applications. It helps in:
Business & E-commerce – Companies sell products and services online.
Social Networking – Platforms like Facebook, Twitter, and LinkedIn connect people.
Education – Online learning platforms like Udemy and Coursera provide courses.
Entertainment – Websites like YouTube, Netflix, and Spotify offer media content.
Government & Services – Websites provide online services like bill payments and registrations.
Healthcare – Hospitals and clinics use websites for appointments and health records.
How to Make a Profit from Web Development
Freelancing – Work on platforms like Fiverr, Upwork, and Freelancer.
Building & Selling Websites – Create websites and sell them to businesses.
Web Hosting & Maintenance – Offer hosting services and website management.
Creating & Selling Web Templates – Design website themes and sell them on platforms like ThemeForest.
Affiliate Marketing – Create a website and earn by promoting products.
Ads & Monetization – Run a blog or a web app and earn from Google AdSense.
Web Development Jobs – Get hired as a web developer for companies.
E-commerce Store – Sell products or services through your own website.
Teaching Web Development – Create online courses or tutorials on YouTube.
If you want to start web development, you can learn HTML, CSS, JavaScript, and frameworks like React or Vue.js.
HTML FORM
-------------------------------------
HTML Form (የHTML ፎርም) ምንድን ነው? 📝✨
የHTML ፎርም ተጠቃሚዎች መረጃዎችን እንዲያስገቡና ወደ ሰርቨር እንዲልኩ የሚያስችል የHTML አካል ነው። ለምሳሌ፣ የይለፍ ቃል፣ የተጠቃሚ ስም፣ ኢሜይል አድራሻ፣ አስተያየት፣ ወዘተ. ማስገባት እንችላለን። 🤩🚀
የHTML ፎርም መሰረታዊ አካላት (Basic Components of HTML Form)
<form> Tag (የ<form> መለያ) 📦🔒
ይህ መለያ የፎርሙን መጀመሪያና መጨረሻ ያመለክታል። (Defines the beginning and end of a form)
የፎርሙን ተግባርና መረጃ የሚላክበትን መንገድ ይገልጻል። (Specifies the form's action and method)
ዋና ዋናዎቹ ባህሪያት action እና method ናቸው። (Main attributes: action and method)
action: መረጃው የሚላክበትን የሰርቨር ፋይል (ለምሳሌ፣ process.php) ያመለክታል። 🚀 (Specifies the server file to which the form data is sent)
method: መረጃው የሚላክበትን መንገድ ይወስናል (ለምሳሌ፣ GET ወይም POST)። (Determines the HTTP method used to submit the form)
GET: መረጃውን በURL ውስጥ ይልካል (ለትንሽ መረጃ ተስማሚ ነው፣ ነገር ግን ደህንነቱ የተጠበቀ አይደለም)። 🧐 (Sends form data in the URL)
POST: መረጃውን በHTTP ጥያቄ ውስጥ ይልካል (ለብዙ መረጃና ለደህንነት ተስማሚ ነው)። 👍 (Sends form data in the HTTP request body)
ምሳሌ:
<input> Tag (የ<input> መለያ) ⌨️🖱️
ተጠቃሚዎች መረጃዎችን እንዲያስገቡ የሚያስችል የግብዓት መስክ ይፈጥራል። (Creates input fields for user input)
የግብዓት አይነቶች በtype ባህሪ ይገለፃሉ (ለምሳሌ፣ text, password, email, checkbox, radio, submit)።
(Input types are defined by the type attribute)
type="text": የጽሑፍ ግብዓት መስክ ይፈጥራል። 📝 (Creates a text input field)
ምሳሌ:
type="password": የይለፍ ቃል ግብዓት መስክ ይፈጥራል (የተጻፈው ጽሑፍ በነጥቦች ወይም በከዋክብት ይሸፈናል)። 🔒👀 (Creates a password input field)
ምሳሌ:
type="email": የኢሜይል አድራሻ ግብዓት መስክ ይፈጥራል (የኢሜይል ቅርጸት ትክክል መሆኑን ያረጋግጣል)። 📧✔️ (Creates an email input field)
ምሳሌ:
type="checkbox": የአማራጭ ሳጥን ይፈጥራል (ብዙ አማራጮችን መምረጥ ይቻላል)። ✅☑️ (Creates a checkbox input)
ምሳሌ:
type="radio": የክብ አማራጭ ይፈጥራል (አንድ አማራጭ ብቻ መምረጥ ይቻላል)። 🔘⭕ (Creates a radio button input)
ምሳሌ:
type="submit": ፎርሙን የሚያስገባ ቁልፍ ይፈጥራል (መረጃውን ወደ ሰርቨር ይልካል)። 🚀👍 (Creates a submit button)
ምሳሌ:
<label> Tag (የ<label> መለያ) 🏷️📝
የግብዓት መስክን መለያ ይሰጣል (ተጠቃሚዎች የትኛውን መረጃ ማስገባት እንዳለባቸው እንዲያውቁ ይረዳል)። (Provides a label for an input element)
for ባህሪው የትኛውን ግብዓት እንደሚያመለክት ይገልጻል። (The for attribute links the label to an input element)
ምሳሌ:
<textarea> Tag (የ<textarea> መለያ) 📝💬
ብዙ መስመር ያለው የጽሑፍ ግብዓት መስክ ይፈጥራል (ለአስተያየት ወይም ለረጅም ጽሑፍ ተስማሚ ነው)። (Creates a multiline text input field)
ምሳሌ:
<select> Tag (የ<select> መለያ) ⬇️📋
ተጠቃሚዎች ከአማራጮች ዝርዝር ውስጥ አንዱን እንዲመርጡ ያስችላል። (Creates a dropdown list)
<option> መለያዎች አማራጮችን ይገልጻሉ። (The <option> tags define the options in the list)
ምሳሌ:
የHTML ፎርም ምሳሌ (HTML Form Example)
-------------------------------------
HTML Form (የHTML ፎርም) ምንድን ነው? 📝✨
የHTML ፎርም ተጠቃሚዎች መረጃዎችን እንዲያስገቡና ወደ ሰርቨር እንዲልኩ የሚያስችል የHTML አካል ነው። ለምሳሌ፣ የይለፍ ቃል፣ የተጠቃሚ ስም፣ ኢሜይል አድራሻ፣ አስተያየት፣ ወዘተ. ማስገባት እንችላለን። 🤩🚀
የHTML ፎርም መሰረታዊ አካላት (Basic Components of HTML Form)
<form> Tag (የ<form> መለያ) 📦🔒
ይህ መለያ የፎርሙን መጀመሪያና መጨረሻ ያመለክታል። (Defines the beginning and end of a form)
የፎርሙን ተግባርና መረጃ የሚላክበትን መንገድ ይገልጻል። (Specifies the form's action and method)
ዋና ዋናዎቹ ባህሪያት action እና method ናቸው። (Main attributes: action and method)
action: መረጃው የሚላክበትን የሰርቨር ፋይል (ለምሳሌ፣ process.php) ያመለክታል። 🚀 (Specifies the server file to which the form data is sent)
method: መረጃው የሚላክበትን መንገድ ይወስናል (ለምሳሌ፣ GET ወይም POST)። (Determines the HTTP method used to submit the form)
GET: መረጃውን በURL ውስጥ ይልካል (ለትንሽ መረጃ ተስማሚ ነው፣ ነገር ግን ደህንነቱ የተጠበቀ አይደለም)። 🧐 (Sends form data in the URL)
POST: መረጃውን በHTTP ጥያቄ ውስጥ ይልካል (ለብዙ መረጃና ለደህንነት ተስማሚ ነው)። 👍 (Sends form data in the HTTP request body)
ምሳሌ:
<form action="process.php" method="post">
</form>
<input> Tag (የ<input> መለያ) ⌨️🖱️
ተጠቃሚዎች መረጃዎችን እንዲያስገቡ የሚያስችል የግብዓት መስክ ይፈጥራል። (Creates input fields for user input)
የግብዓት አይነቶች በtype ባህሪ ይገለፃሉ (ለምሳሌ፣ text, password, email, checkbox, radio, submit)።
(Input types are defined by the type attribute)
type="text": የጽሑፍ ግብዓት መስክ ይፈጥራል። 📝 (Creates a text input field)
ምሳሌ:
<label for="username">የተጠቃሚ ስም:</label><br>
<input type="text" id="username" name="username"><br>
type="password": የይለፍ ቃል ግብዓት መስክ ይፈጥራል (የተጻፈው ጽሑፍ በነጥቦች ወይም በከዋክብት ይሸፈናል)። 🔒👀 (Creates a password input field)
ምሳሌ:
<label for="password">የይለፍ ቃል:</label><br>
<input type="password" id="password" name="password"><br>
type="email": የኢሜይል አድራሻ ግብዓት መስክ ይፈጥራል (የኢሜይል ቅርጸት ትክክል መሆኑን ያረጋግጣል)። 📧✔️ (Creates an email input field)
ምሳሌ:
<label for="email">ኢሜይል:</label><br>
<input type="email" id="email" name="email"><br>
type="checkbox": የአማራጭ ሳጥን ይፈጥራል (ብዙ አማራጮችን መምረጥ ይቻላል)። ✅☑️ (Creates a checkbox input)
ምሳሌ:
<label for="vehicle1">መኪና አለኝ</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Car"><br>
<label for="vehicle2">ብስክሌት አለኝ</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Bike"><br>
type="radio": የክብ አማራጭ ይፈጥራል (አንድ አማራጭ ብቻ መምረጥ ይቻላል)። 🔘⭕ (Creates a radio button input)
ምሳሌ:
<label for="male">ወንድ</label>
<input type="radio" id="male" name="gender" value="male"><br>
<label for="female">ሴት</label>
<input type="radio" id="female" name="gender" value="female"><br>
type="submit": ፎርሙን የሚያስገባ ቁልፍ ይፈጥራል (መረጃውን ወደ ሰርቨር ይልካል)። 🚀👍 (Creates a submit button)
ምሳሌ:
<input type="submit" value="አስገባ">
<label> Tag (የ<label> መለያ) 🏷️📝
የግብዓት መስክን መለያ ይሰጣል (ተጠቃሚዎች የትኛውን መረጃ ማስገባት እንዳለባቸው እንዲያውቁ ይረዳል)። (Provides a label for an input element)
for ባህሪው የትኛውን ግብዓት እንደሚያመለክት ይገልጻል። (The for attribute links the label to an input element)
ምሳሌ:
<label for="username">የተጠቃሚ ስም:</label>
<textarea> Tag (የ<textarea> መለያ) 📝💬
ብዙ መስመር ያለው የጽሑፍ ግብዓት መስክ ይፈጥራል (ለአስተያየት ወይም ለረጅም ጽሑፍ ተስማሚ ነው)። (Creates a multiline text input field)
ምሳሌ:
<label for="comment">አስተያየት:</label><br>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea><br>
<select> Tag (የ<select> መለያ) ⬇️📋
ተጠቃሚዎች ከአማራጮች ዝርዝር ውስጥ አንዱን እንዲመርጡ ያስችላል። (Creates a dropdown list)
<option> መለያዎች አማራጮችን ይገልጻሉ። (The <option> tags define the options in the list)
ምሳሌ:
<label for="cars">መኪና ይምረጡ:</label><br>
<select id="cars" name="cars">
<option value="volvo">ቮልቮ</option>
<option value="saab">ሳብ</option>
<option value="fiat">ፊያት</option>
<option value="audi">አውዲ</option>
</select><br>
የHTML ፎርም ምሳሌ (HTML Form Example)
<form action="process.php" method="post">
<label for="username">የተጠቃሚ ስም:</label><br>
<input type="text" id="username" name="username"><br><br>
👍3
<label for="password">የይለፍ ቃል:</label><br>
<input type="password" id="password" name="password"><br><br>
<label for="email">ኢሜይል:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="comment">አስተያየት:</label><br>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="አስገባ">
</form>
ይሄ መሰረታዊ የHTML ፎርም ማብራሪያ ነው። ማንኛውም ተጨማሪ ጥያቄ ካለቹ መጠየቅ ይቻላል። 😊👍🎉
❤1
Endat memar yelgebachu sewoch
Yihann 👉 https://t.me/Muju_man_coding/336
link bemenkat step by step memar tichilalachu
Yihann 👉 https://t.me/Muju_man_coding/336
link bemenkat step by step memar tichilalachu
Telegram
Code Spark
ABOUT US
👇👇👇👇👇👇👇👇👇👇
https://mujuman.github.io/Ethio-coders/
እስካሁን የተማርናቸው title ናቸው
1. Website ለመስራት የሚያስፈልገውን ነገሮች
https://t.me/Muju_man_coding/141
2. Web development
https://t.me/Muju_man_coding/144
3. Why shoud we learn web development
ht…
👇👇👇👇👇👇👇👇👇👇
https://mujuman.github.io/Ethio-coders/
እስካሁን የተማርናቸው title ናቸው
1. Website ለመስራት የሚያስፈልገውን ነገሮች
https://t.me/Muju_man_coding/141
2. Web development
https://t.me/Muju_man_coding/144
3. Why shoud we learn web development
ht…
📌 Semantic Tags in HTML
Semantic tags are HTML elements that clearly describe the meaning of their content. They improve readability, SEO, and accessibility of a webpage.
1️⃣ <header> - Header Section 🏷️
The <header> tag represents the top section of a webpage or a section. It often contains the logo, navigation, or title.
🔹 Example:
2️⃣ <nav> - Navigation Bar 🚀
The <nav> tag is used for the main navigation links of a webpage.
🔹 Example:
3️⃣ <section> - Grouped Content 📌
The <section> tag divides a webpage into meaningful parts.
🔹 Example:
4️⃣ <article> - Independent Content 📰
The <article> tag is used for self-contained content, such as blogs or news articles.
🔹 Example:
5️⃣ <aside> - Sidebar Content 🎯
The <aside> tag contains extra information such as ads, related links, or side content.
🔹 Example:
6️⃣ <footer> - Bottom Section 🔚
The <footer> tag represents the bottom of a webpage, usually containing copyright or contact details.
🔹 Example:
🌟 Conclusion
Semantic tags organize and structure your webpage, making it more meaningful and accessible.
This is the last class of the basic of html
Semantic tags are HTML elements that clearly describe the meaning of their content. They improve readability, SEO, and accessibility of a webpage.
1️⃣ <header> - Header Section 🏷️
The <header> tag represents the top section of a webpage or a section. It often contains the logo, navigation, or title.
🔹 Example:
<header> <h1>🌍 Welcome to My Website</h1> <nav> <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a> </nav> </header>
2️⃣ <nav> - Navigation Bar 🚀
The <nav> tag is used for the main navigation links of a webpage.
🔹 Example:
<nav> <ul> <li>🏠 <a href="index.html">Home</a></li> <li>ℹ️ <a href="about.html">About</a></li> <li>📞 <a href="contact.html">Contact</a></li> </ul> </nav>
3️⃣ <section> - Grouped Content 📌
The <section> tag divides a webpage into meaningful parts.
🔹 Example:
<section> <h2>💡 Our Services</h2> <p>We provide web development, SEO, and UI/UX design.</p> </section>
4️⃣ <article> - Independent Content 📰
The <article> tag is used for self-contained content, such as blogs or news articles.
🔹 Example:
<article> <h2>🖥️ The Future of AI</h2> <p>Artificial Intelligence is transforming the world...</p> </article>
5️⃣ <aside> - Sidebar Content 🎯
The <aside> tag contains extra information such as ads, related links, or side content.
🔹 Example:
<aside> <h3>🔗 Related Posts</h3> <ul> <li>✔️ HTML Basics</li> <li>✔️ CSS Grid & Flexbox</li> </ul> </aside>
6️⃣ <footer> - Bottom Section 🔚
The <footer> tag represents the bottom of a webpage, usually containing copyright or contact details.
🔹 Example:
<footer> <p>© 2025 My Website. All rights reserved. ✅</p> </footer>
🌟 Conclusion
Semantic tags organize and structure your webpage, making it more meaningful and accessible.
This is the last class of the basic of html
👍2❤1