The difference between front-end and back-end development

The difference between front-end and back-end development

Introduction to HTML


WHAT IS HTML?

🔹 HyperText Markup Language

🔹 HTML is a markup language that web developers use to structure
and describe the content of a webpage (not a programming
language)

🔹HTML consists of elements that describe different types of content:
paragraphs, links, headings, images, video, etc.

🔹Web browsers understand HTML and render HTML code as website




Html ,መለት HyperText Markup Language ሲሆን  እሱም ደግሞ ሚጠቅመን web pageቸንን  structureን ለመስተካከል  ነው content ,paragraph ,heading የተለያዩ ነገሮችን ለመገንባት ይጠቅመናል ስለዚህ ለweb pageችን ወናው ነዉ መለት ነዉ  css እና JavaScript ለመጠቀም የግድ html የስፈልጋል



#website #technology #news

Channel :👇👇👇👇👇👇👇
https://t.me/Muju_man_coding

ሰላም ቤተሰቦቻችን ይህን app download አድርጉት ከአሁን በሃላ በተግባር ስለ ምንማር ይህ app አስፈላጊ ነው ከታች ያለዉን link በመንካት አውርዱት 👇👇👇👇👇👇👇👇👇👇👇👇


Check out "Spck Editor / Git Client"
https://play.google.com/store/apps/details?id=io.spck

Structure of an HTML document


ሰላም ቤተሰቦች በያላችሁበት ሰላማቹ ይብዛ
ዛሬ የምንማረው  የ html structureን ነው።

structure ስንል ምን መሰላችሁ የ html አወቃቀር ማለት ነው ።

ስንት አወቃቀሮች አሉት ?

እነሱስ ማናቸው ?

እያላችሁ ረሳቹን እየጠየቃችሁ ራሳችሁን እየዘጋጃቹ ጠብቁን


https://t.me/Muju_man_coding

HTML documents have two sections

Header
- Contains information about the document
- The <head> … </head> element defines the head


headre አብዛኛውን ግዜ title ,link ,style እና meta የመሳሰሉትን ምንጽፍበት ነው።

header ላይ የምንጽፈው ነገር web pageኣችን ላይ አይታይም


Body
- Contains the actual document content
- The <body> … </body> element defines the body


- Body የ web pageኣችን ዋናው part ነው
body ላይ ምንጽፈው ነገር ቀጥታ web page ኣችን ላይ ይታያል የ web paegኣችን ዋና part ነው።



https://t.me/Muju_man_coding

#html #css #javascript

ተጨማሪ
https://t.me/Muju_man_coding

In HTML, <!DOCTYPE> (short for "Document Type Declaration") is an instruction that tells the web browser which version of HTML the document is using. It helps the browser render the webpage correctly. The declaration is placed at the very top of an HTML document before any other content.

<!DOCTYPE> ባጭሩ document type ማለት ነው።  እኛ የምንጠቀመው html type ወይም ምን አይነት html እንደ ምንጠቀም በቀላሉ browserኣችን እንዲያውቅ የደርጋል

-browser የምንችለው  Chrome, Firefox, Safari, and Edge ናቸው እነሱም  HTML, CSS, and JavaScript በቀላሉ interpret ወይም  ሚተረጉሙልን ናቸው

For modern HTML, the doctype declaration is very simple:

<!DOCTYPE html>

This declaration tells the browser that the document is written in HTML5, the latest version of HTML. Older versions of HTML have more complex doctype declarations, but HTML5 simplifies this to ensure compatibility and uniform rendering across browsers.

<!DOCTYPE html>

ይህ doctype ለ browsereኣችን በቀላሉ html5 እንደ ሚጠቀም ይነግረዋል ።

HTML5 modern የሆነ doctype ነው ። በተጨማሪ  በጣም ቀላል ነው።

old doctype declare ስናረጋቸው በጣም ውስብሰብ ናቸዉ።

Element

An HTML element is a fundamental component of an HTML document that defines structure and content. It consists of an opening tag, content (in some cases), and a closing tag. Elements can contain text, images, links, and other content, or they can be structural, like defining headers or divisions in a webpage.

<opening-tag> Content goes here </closing-tag>

- Element የ HTMLአቺን  ወና part ነው
አሱም በዉስጡ ሶስት ነገርችን ይይዛል

1,opening tag
2,content ( ጹፎችን , ምስሎችን , link  አና ወዘታ )
3,closing tag

Types of HTML Elements:
- Block elements: These take up the full width available (e.g., <div>, <p>, <h1>).
- Inline elements: These take up only as much width as necessary (e.g., <a>, <span>, <img>).

የ  html አይነትች

- Block element የለንን ሙሉ width ሚይዘው ማለት ነው
- Inline element ደሞ ከተሰጠው width ውቺ ምንም ቦታ አይዝም



What is opening tag and closing tag ?


In HTML, opening tags and closing tags are used to define the start and end of an HTML element.

1. Opening Tag:
   - It marks the beginning of an element.
   - It is written with the element's name inside angle brackets (< >).
   - Example: <p> for a paragraph element.

2. Closing Tag:
   - It marks the end of an element.
   - It is written similarly to the opening tag, but with a forward slash (/) before the element's name.
   - Example: </p> for the end of a paragraph element.

Together, the opening and closing tags define the content enclosed by the element:

<p>This is a paragraph.</p>

Some HTML elements, like <img /> (image) and <br /> (line break), are self-closing and do not require a closing tag.


⭐ በ html ዉስጥ opening tag አና closing tag ምተቅሙን የ htmlሉን መጀመሪያዉን አና መቻረሻዉን ምገልፁልን ነው

Opening tag የ ምንለው  ምያሰየን መግብያዉን ነው  ወይም መጀመርያዉን ነው

*closing tag የምንለው መደምደምያዉን ነው ምያሰየን 

Content  አኛ መፃፉ የፈለግነዉን  ነገር ምንፅፍበት  ነው  ለመስተላለፍ የፈለግነዉን ሃሳብ እዛ ነው  ምንፅፈው

በ opening አና በ closing tag መካከል ነው ሚገኘው


ስናጠቃልለው opening tag elementአችን የጀመረበት ቦታ ሚያሳየው ነው
Closing tag ምያሰየን  elementአችን ምያቆምበት ቦታ ነው

ለምሳሌ :-

<p>

ይሄ opening tag ይባላል

<\p> 

ይሃ ደሞ closing tag ይባላል

ይሄን አጠር በላ video አናየዋለን
ይመቻቹ  commentአችሁን  ከታች አሳዉቁን
👇👇👇👇👇👇👇👇👇👇👇👇👇👇

HTML Headings

HTML headings are used to define headings and subheadings in a web page. There are six levels of headings, from <h1> to <h6>. These tags help structure the content of a page, with <h1> being the highest (or most important) level of heading, and <h6> the lowest.

⭐⭐Html heading ማለት ከ web page አችን title ለመፃፍ ምንጠቀመው ነው

Html heading ለመፃፍ 6 ደረጃ አለን <h1> አስካ <h6> ድረስ  <h1> ትልቁ ሲሆን <h6> ደሞ በጣም ትንሹ ና የመቸረሻው  ነው

HTML Heading Tags:
- <h1>: Main heading (usually used for the title of the page).
- <h2>: Subheading under <h1>.
- <h3>: Subheading under <h2>.
- <h4>: Subheading under <h3>.
- <h5>: Subheading under <h4>.
- <h6>: Subheading under <h5>.

Example:

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

importance of Headings:
- SEO (Search Engine Optimization): Search engines use headings to understand the structure and content of a page, making headings important for ranking in search results.
- Accessibility: Screen readers use headings to help users navigate the content of a webpage easily.

👉https://t.me/muju_man

Top 10 programming languages & frameworks for beginner web developers:

1. HTML/CSS – Basics of web structure & styling
2. JavaScript – Adds interactivity
3. Python – Backend & versatility
4. PHP – Server-side scripting
5. SQL – Database management
6. Ruby on Rails – Easy backend framework
7. Node.js – JavaScript backend runtime
8. React – Popular frontend library
9. Angular – Framework for building dynamic UIs
10. Bootstrap – Simplifies responsive design