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.
- 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:
2. Closing Tag:
- It marks the end of an element.
- It is written similarly to the opening tag, but with a forward slash (
- Example:
Together, the opening and closing tags define the content enclosed by the element:
Some HTML elements, like
⭐ በ html ዉስጥ opening tag አና closing tag ምተቅሙን የ htmlሉን መጀመሪያዉን አና መቻረሻዉን ምገልፁልን ነው
Opening tag የ ምንለው ምያሰየን መግብያዉን ነው ወይም መጀመርያዉን ነው
*closing tag የምንለው መደምደምያዉን ነው ምያሰየን
Content አኛ መፃፉ የፈለግነዉን ነገር ምንፅፍበት ነው ለመስተላለፍ የፈለግነዉን ሃሳብ እዛ ነው ምንፅፈው
በ opening አና በ closing tag መካከል ነው ሚገኘው
ስናጠቃልለው opening tag elementአችን የጀመረበት ቦታ ሚያሳየው ነው
Closing tag ምያሰየን elementአችን ምያቆምበት ቦታ ነው
ለምሳሌ :-
ይሄ opening tag ይባላል
ይሃ ደሞ closing tag ይባላል
ይሄን አጠር በላ video አናየዋለን
ይመቻቹ commentአችሁን ከታች አሳዉቁን
👇👇👇👇👇👇👇👇👇👇👇👇👇👇
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አችሁን ከታች አሳዉቁን
👇👇👇👇👇👇👇👇👇👇👇👇👇👇
👍5❤4
HTML Headings
HTML headings are used to define headings and subheadings in a web page. There are six levels of headings, from
⭐⭐Html heading ማለት ከ web page አችን title ለመፃፍ ምንጠቀመው ነው
Html heading ለመፃፍ 6 ደረጃ አለን <h1> አስካ <h6> ድረስ <h1> ትልቁ ሲሆን <h6> ደሞ በጣም ትንሹ ና የመቸረሻው ነው
HTML Heading Tags:
-
-
-
-
-
-
Example:
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
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
👍1
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
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
HTML Paragraphs
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph
• Example
Output:
This is a paragraph
This is another paragraph.
HTML peragraphs መለት ሰለ አንድ ነገር መፅሐፍ ስንፈልግ የምንጠቀመው ነው
HTML <p> elenent paragraph ስንፅእፍ የምንጠቀመው ነው
ለምሳሌ :-
https://t.me/Muju_man_coding
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph
• Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Output:
This is a paragraph
This is another paragraph.
HTML peragraphs መለት ሰለ አንድ ነገር መፅሐፍ ስንፈልግ የምንጠቀመው ነው
HTML <p> elenent paragraph ስንፅእፍ የምንጠቀመው ነው
ለምሳሌ :-
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
https://t.me/Muju_man_coding
1. What is the purpose of the <!DOCTYPE html> declaration?
Anonymous Quiz
15%
A) To define the title of the HTML page
22%
B) To specify the language of the document
54%
C) To tell the browser which version of HTML to expect
9%
D) To style the HTML page
2,Which HTML tag is used for the largest heading?g?**
Anonymous Quiz
71%
A) <h1>
17%
B) <h6>
4%
C) <h3>
8%
D) <p>
3,What tag is used to create a paragraph in HTML?L?**
Anonymous Quiz
15%
A) <para>
5%
B) <div>
77%
C) <p>
3%
D) <h2>
4,Which element is required to start an HTML document ?
Anonymous Quiz
16%
A) <head>
24%
B) <html>
58%
C) <!DOCTYPE html>
2%
D) <body>
👍1
6,What tag is used to add metadata like the title or character set to an HTML document?
Anonymous Quiz
33%
A) <meta>
20%
B) <title>
20%
C) <html>
28%
d) <head>
To learn web design and development from basic to advanced levels, you can follow these steps:🤩🤩
⏩HTML and CSS:
Start with the basics of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML provides the structure and content of web pages, while CSS handles the visual presentation. Learn how to create web pages, format text, add images, and apply styles using HTML and CSS.
⏩JavaScript:
Expand your knowledge by learning JavaScript, a programming language for web development. JavaScript adds interactivity and dynamic features to websites. Study JavaScript concepts like variables, functions, loops, and conditional statements. Learn how to manipulate the Document Object Model (DOM) and create interactive elements.
⏩Responsive Web Design:
Understand the principles of responsive web design, which ensures websites adapt to different screen sizes and devices. Learn techniques such as media queries and flexible layouts to create responsive and mobile-friendly websites.
⏩Front-End Frameworks:
Explore popular front-end frameworks like Bootstrap or Foundation. These frameworks provide pre-built components and a responsive grid system, making it easier to design and develop modern, visually appealing websites.
⏩Back-End Development:
Dive into back-end development to create dynamic websites and handle server-side operations. Learn a back-end programming language such as Python, PHP, or Node.js. Understand concepts like server-side scripting, handling databases, and interacting with APIs.
⏩Database Management:
Gain knowledge of database management systems such as MySQL or PostgreSQL. Understand how to create, manage, and query databases, as well as the principles of database design and normalization.
⏩Content Management Systems (CMS):
Explore popular CMS platforms like WordPress, Joomla, or Drupal. Learn how to customize and develop themes, create plugins or modules, and manage website content using CMS tools.
⏩Version Control:
Familiarize yourself with version control systems like Git. Learn how to track changes, collaborate with others, and manage your codebase effectively using version control.
⏩Web Performance and Optimization:
Study techniques for optimizing website performance, such as optimizing images, minifying CSS and JavaScript files, and caching. Understand concepts like page speed, performance testing, and website optimization best practices.
⏩Continuous Learning and Industry Trends:
Stay updated with the latest web design and development trends, technologies, and tools. Follow blogs, forums, and online communities to learn from industry experts and explore new advancements.
➡️Build Projects and Practice:
Put your knowledge into practice by building projects and websites. Start with small projects and gradually work on more complex ones. Building real-world projects will help you gain practical experience and refine your skills.
⏩HTML and CSS:
Start with the basics of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML provides the structure and content of web pages, while CSS handles the visual presentation. Learn how to create web pages, format text, add images, and apply styles using HTML and CSS.
⏩JavaScript:
Expand your knowledge by learning JavaScript, a programming language for web development. JavaScript adds interactivity and dynamic features to websites. Study JavaScript concepts like variables, functions, loops, and conditional statements. Learn how to manipulate the Document Object Model (DOM) and create interactive elements.
⏩Responsive Web Design:
Understand the principles of responsive web design, which ensures websites adapt to different screen sizes and devices. Learn techniques such as media queries and flexible layouts to create responsive and mobile-friendly websites.
⏩Front-End Frameworks:
Explore popular front-end frameworks like Bootstrap or Foundation. These frameworks provide pre-built components and a responsive grid system, making it easier to design and develop modern, visually appealing websites.
⏩Back-End Development:
Dive into back-end development to create dynamic websites and handle server-side operations. Learn a back-end programming language such as Python, PHP, or Node.js. Understand concepts like server-side scripting, handling databases, and interacting with APIs.
⏩Database Management:
Gain knowledge of database management systems such as MySQL or PostgreSQL. Understand how to create, manage, and query databases, as well as the principles of database design and normalization.
⏩Content Management Systems (CMS):
Explore popular CMS platforms like WordPress, Joomla, or Drupal. Learn how to customize and develop themes, create plugins or modules, and manage website content using CMS tools.
⏩Version Control:
Familiarize yourself with version control systems like Git. Learn how to track changes, collaborate with others, and manage your codebase effectively using version control.
⏩Web Performance and Optimization:
Study techniques for optimizing website performance, such as optimizing images, minifying CSS and JavaScript files, and caching. Understand concepts like page speed, performance testing, and website optimization best practices.
⏩Continuous Learning and Industry Trends:
Stay updated with the latest web design and development trends, technologies, and tools. Follow blogs, forums, and online communities to learn from industry experts and explore new advancements.
➡️Build Projects and Practice:
Put your knowledge into practice by building projects and websites. Start with small projects and gradually work on more complex ones. Building real-world projects will help you gain practical experience and refine your skills.
👍5❤1
Learn Django Easily 🤩
Here's all you need to get started 🙌
1. Introduction to Django
- What is Django?
- Setting up the Development Environment
2. Django Basics
- Django Project Structure
- Apps in Django
- Settings and Configuration
3. Models
- Creating Models
- Migrations
- Model Relationships
4. Views
- Function-Based Views
- Class-Based Views
- Generic Views
5. Templates
- Template Syntax
- Template Inheritance
- Template Tags and Filters
6. Forms
- Creating Forms
- Form Validation
- Model Forms
7. URLs and Routing
- URLconf
- Named URL Patterns
- URL Namespaces
8. Django ORM
- Querying the Database
- QuerySets
- Aggregations
9. Authentication and Authorization
- User Authentication
- Permission and Groups
- Django's Built-in User Model
10. Static Files and Media
- Serving Static Files
- File Uploads
- Managing Media Files
11. Middleware
- Using Middleware
- Creating Custom Middleware
12. REST Framework
- Django REST Framework (DRF)
- Serializers
- ViewSets and Routers
13. Testing
- Writing Tests
- Testing Models, Views, and Forms
- Test Coverage
14. Internationalization and Localization
- Translating Strings
- Time Zones
15. Security
- Securing Django Applications
- CSRF Protection
- XSS Protection
16. Deployment
- Deploying with WSGI and ASGI
- Using Gunicorn
- Deploying to Heroku, AWS, etc.
17. Optimization
- Database Optimization
- Caching Strategies
- Profiling and Performance Monitoring
18. Best Practices
- Code Structure
- DRY Principle
- Reusable Apps
Here's all you need to get started 🙌
1. Introduction to Django
- What is Django?
- Setting up the Development Environment
2. Django Basics
- Django Project Structure
- Apps in Django
- Settings and Configuration
3. Models
- Creating Models
- Migrations
- Model Relationships
4. Views
- Function-Based Views
- Class-Based Views
- Generic Views
5. Templates
- Template Syntax
- Template Inheritance
- Template Tags and Filters
6. Forms
- Creating Forms
- Form Validation
- Model Forms
7. URLs and Routing
- URLconf
- Named URL Patterns
- URL Namespaces
8. Django ORM
- Querying the Database
- QuerySets
- Aggregations
9. Authentication and Authorization
- User Authentication
- Permission and Groups
- Django's Built-in User Model
10. Static Files and Media
- Serving Static Files
- File Uploads
- Managing Media Files
11. Middleware
- Using Middleware
- Creating Custom Middleware
12. REST Framework
- Django REST Framework (DRF)
- Serializers
- ViewSets and Routers
13. Testing
- Writing Tests
- Testing Models, Views, and Forms
- Test Coverage
14. Internationalization and Localization
- Translating Strings
- Time Zones
15. Security
- Securing Django Applications
- CSRF Protection
- XSS Protection
16. Deployment
- Deploying with WSGI and ASGI
- Using Gunicorn
- Deploying to Heroku, AWS, etc.
17. Optimization
- Database Optimization
- Caching Strategies
- Profiling and Performance Monitoring
18. Best Practices
- Code Structure
- DRY Principle
- Reusable Apps
👍3❤2👏1