What is HTML? । Elements, Syntax & Notes PDF

What is HTML? । Elements, Syntax & Notes PDF : In this post you are learn about the What is HTML5 (Hyper Text Markup Language) languages,Elements, Syntax and definition etc.

HTML, or HyperText Markup Language is the standard markup language used to create web pages. It is a combination of Hypertext and Markup language. The Hypertext defines the link between web pages, and Markup defines the text document within tags to structure the web pages.

HTML is human-readable and uses tags to define what manipulation has to be done on the text.

Table of Contents

What is HTML?

HTML stands for HyperText Markup Language and it is used to create webpages. It uses HTML tags and attributes to describe the structure and formatting of a web page.

HTML consists of various elements, that are responsible for telling search engines how to display page content. For example, headings, lists, images, links, and more.

Features of HTML

It is easy to learn and easy to use.
It is platform-independent.
Images, videos, and audio can be added to a web page.
Hypertext can be added to the text.
It is a markup language.

HTML Elements and Tags

HTML uses predefined tags and elements that instruct the browser on how to display the content. HTML elements include an opening tag, some content, and a closing tag. It’s important to remember to include closing tags. If omitted, the browser applies the effect of the opening tag until the end of the page.

HTML Page Structure

<!DOCTYPE html> – This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive.
<html> – This is called the HTML root element. All other elements are contained within it.
<head> – The head tag contains the “behind the scenes” elements for a webpage. Elements
within the head aren’t visible on the front end of a webpage. HTML elements used inside the element include:
- <style> – This HTML tag allows us to insert styling into our web pages and make them appealing to look at with the help of CSS.
- <title> – The title is what is displayed on the top of your browser when you visit a website and contains the title of the webpage that you are viewing.
- <base> – It specifies the base URL for all relative URL’s in a document.
- <noscript> – Defines a section of HTML that is inserted when the scripting has been turned off in the user’s browser.
- <script> – This tag is used to add functionality to the website with the help of JavaScript.
<meta> – This tag encloses the metadata of the website that must be loaded every time the website is visited. For eg:- the metadata charset allows you to use the standard UTF-8 encoding on your website. This in turn allows the users to view your webpage in the language of their choice. It is a self-closing tag.
<link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self-closing.
<body> – The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front end.

HTML History

Key uses of HTML are:

Creating web page.
Integrating CSS and JavaScript
Accessing web content
Semantic markup
Cross-platform compatibility

HTML Elements

An HTML Element is a collection of start and end tags with the content inserted between them. HTML elements are building blocks of web pages, representing different types of content such as headings, paragraphs, links, and images.

bold	The bold tag in HTML is used to specify the bold text without any extra importance.	<b>… </b>
button	The button tag in HTML is used to define the clickable button. <button> tag is used to submit the content.	<button>…</button>
comment	The comment tag is used to insert comments in the HTML code.	<!–…–>
dialog	This tag is used to create a popup dialog and models on a web page. This tag is new in HTML5.	<dialog open> Contents… </dialog>
div	The div tag is used in HTML to make divisions of content in the web page (text, images, header, footer, navigation bar, etc).	<div>Content</div>
footer	The footer tag in HTML is used to define a footer of HTML document. This section contains the footer information.	<footer>…</footer>
form	This form is used basically for the registration process, logging into your profile on a website or creating your profile on a website, etc.	<form> Form Content… </form>
head	The head tag in HTML is used to define the head portion of the document which contains information related to the document.	<head>…</head>
header	The header tag is used to contain the information related to the title and heading of the related content.	<header> …</header>
heading	An HTML heading tag is used to define the headings of apage. These 6 heading elements are h1,h2, h3, h4, h5,and h6; with h1 being the highest level and h6 being the least.	<h1>Heading1</h1><h2>Heading2</h2>
hr	The hr tag in HTML stands for horizontal rule and is used to insert a horizontal rule.	<hr>
image	HTML Image, how to add the image in HTML. In earlier times, the web pages only contains textual content, which made them appear quite boring and uninteresting.	<img src=”url” alt=”some_text” width=”” height=””>
italic	This tag is generally used to display a technical term, phrase, the important word in a different language.	<i> Contents</i>
lable	The label tag in HTML is used to provide a usability improvement for mouse users.	<label> form content… </label>
list	The list tag in HTML is used to define the list item in an HTML document. It is used within an Ordered List or Unordered List .	<li> List Items </li>
marquee	The marquee tag in HTML is used to create scrolling text or images on a webpage. It scrolls either horizontally or vertically.	<marquee>Contents</marquee>
nav	The nav tag is used for declaring the navigational section in HTML documents. Websites typically have sections dedicated to navigational links, which enables users to navigate the site.	<nav> Links… </nav>
paragraph	The tag in HTML defines a paragraph. These have both opening and closing tags.	<p> Content </p>
q	The q tag is a standard quotation tag and is used for short quotations.	<q> Content </q>
span	The HTML span element is a generic inline container for inline elements and content.	<span> Content </span>
table	HTML Table, various ways to implement it, & will also understand its usage through the examples. HTML Table is an arrangement of data in rows and columns, or possibly in a more complex structure.	<table>… </table>
tbody	The tbody tag in HTML is used to make a group of the same type of content of the body element.	<tbody>Table contents </tbody>
td	The table data tag is used to define a standard cell in an HTML table.	<td>..</td>
th	The table header tag in HTML is used to set the header cell of a table. Two types of cells in the HTML table Header & Standard.	<th>..</th>
thead	This tag is used in HTML tables as head and body which are known as thead and tbody.	<thead>Table head Content.</thead>
tr	The table row tag is used to define arow in an HTML table. The <tr>element contains multiple <th> or<td> elements.	<tr>…..</tr>
title	The title tag in HTML is used to define the title of HTML document. It sets the title in the browser toolbar.	<title> Title name</title>
underline	The underline tag in HTML stands for underline, and it’s used to underline the text enclosed within the <u> tag.	<u> Contents… </u>
video	HTML5 Video, along with knowing the different ways to add the videos to the HTML page.	<video src=””> </video>

HTML Comments

HTML comments are notes that you can add to your HTML code to explain or describe parts of the code. These notes are not visible on the webpage; they are only there for developers to read. You can use comments to remind yourself of things, explain what a part of the code does, or temporarily hide some code while working on a page.

How to write HTML comments:

HTML comments start with <!– and end with –>. Anything between these symbols will be ignored by the browser.

The advantage of assembly language is that it requires less memory and less execution time to execute a program.

Example:

<!-- This is a comment -->
<p>This is a paragraph of text.</p>

In this example:

<!– This is a comment –> is a comment that won’t show up on the webpage.
Only the <p>This is a paragraph of text.</p> will be shown on the page.

Why use HTML comments?

To explain code: You can add notes to explain what a part of the code does.
To leave reminders: You can write “to-do” notes for future changes.
To hide code: You can temporarily hide some parts of the code while testing.

What are semantic HTML tags?

Semantic HTML tags (<header>, <footer>, <nav>, <main>, <article>, <section>, etc.) provide meaning to the content they enclose, aiding accessibility, SEO (Search Engine Optimization), and structuring of web pages beyond mere presentation.

Article

In HTML, the element is used to represent a self-contained piece of content that can be independently distributed or reused. It is typically used for content that could stand alone or be syndicated, such as a blog post, news article, forum post, or a product description.

Key Characteristics of the <article> Element:

Self-contained: The content inside an element should make sense on its own, even if it is taken out of the webpage.
Independent: It can be independently distributed or reused (e.g., a news story that could be published on multiple websites).
Relevance: It should contain content that could be reused or republished without losing meaning.

Syntax:

<article>
 <h2>Article Title</h2>
 <p>This is the content of the article. It can include text, images, videos, etc.</p>
</article>

When to Use the <article> Element:

Blog posts: Each individual post on a blog can be wrapped in an element.
News stories: A single news story or report could be placed in an .
Product descriptions: For an e-commerce website, a product description can be inside an tag.
Comments or reviews: User comments or reviews can also be contained within
tags.

ASIDE, HEADER, FOOTER

<aside>: Used for content that is related but separate from the main content (e.g., sidebars, related articles).
<header>: Represents the header section, usually containing a site’s title, navigation links, and introductory content.
<footer>: Represents the footer section, typically containing copyright info, site links, and additional details.

<aside> Element

The <aside> element represents content that is tangentially related to the main content of the page. It is often used for sidebars, pull quotes, related links, or additional information that complements the main content but isn’t central to it.

Example :

<aside>
 <h3>Related Articles</h3>
 <ul>
 <li><a href="#">How to Travel the World</a></li>
 <li><a href="#">Top Destinations for 2024</a></li>
 </ul>
</aside>

In this example:

The element contains related links or additional information that is not the primary focus but is still related to the main content on the page.

<header> Element

The <header> element is used to define the header or introductory content of a page or a section. It typically contains elements like the site’s title, logo, navigation menus, and sometimes a tagline or other introductory content.

Example :

<header>
 <h1>My Website</h1>
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>
</header>

In this example:

The <header> contains the main heading of the website (<h1>) and a navigation menu (<nav>).

<footer> Element

The <footer> element is used to define the footer or closing content of a page or a section. It typically contains information like copyright notices, contact details, links to privacy policies or terms of service, and other site-wide links.

Example :

<footer>
 <p>© 2024 My Website. All rights reserved.</p>
 <ul>
 <li><a href="#">Privacy Policy</a></li>
 <li><a href="#">Terms of Service</a></li>
 </ul>
</footer>

In this example:

The <footer> contains copyright information and links to the site’s privacy policy and terms of service.

HTML Attributes

HTML attributes provide additional information about an HTML element. They are used to define properties or characteristics of an element, such as its behavior, appearance, or content. Attributes are written within the opening tag of an HTML element and are always in the form of a name-value pair.

Syntax of HTML Attributes: <element name=”value”>

In this example:

href is the attribute name, which specifies the URL to navigate to when the link is clicked.
“https://www.example.com” is the attribute value, which provides the URL.

Common HTML Attributes:

Here are some of the most commonly used HTML attributes:

1.id: Used to uniquely identify an element in the document. It must be unique within the page.

<div id="main-content">
     This is a div with an id.
</div>

2. class: Specifies one or more class names for an element, which can be used for styling with CSS or targeting in JavaScript.

<p class="intro-text">
     This is an introductory paragraph.
</p>

3. style: Allows you to apply inline CSS styles directly to an element.

<h1 style="color: blue; text-align: center;">
     Styled Header
</h1>

4. src: Specifies the source URL of an image, script, or other media element.

<img src="image.jpg" alt="An example image">

5. alt: Provides alternative text for an image if it cannot be displayed.

<img src="logo.png" alt="Company logo">

6. href: Specifies the URL of a hyperlink.

<a href="https://www.example.com">Click Here</a>

7. target: Defines how a link will be opened (e.g., in the same window, a new window, etc.).

<a href="https://www.example.com" target="_blank">Open in a new tab</a>

8. type: Defines the type of input for form elements, like text, password, etc.

<input type="text" placeholder="Enter your name">

9. placeholder: Provides a short hint or text to display in an input field before the user enters their own input.

<input type="email" placeholder="Enter your email">

10. value: Specifies the value of form elements such as input fields or buttons.

<input type="button" value="Click Me">

11. title: Provides extra information about an element, usually displayed as a tooltip when the user hovers over the element.

<p title="This is a tooltip">Hover over me!</p>

12. disabled: Disables an element (like a button or input field), making it un clickable or uneditable.

<button disabled>Cannot click me</button>

13. checked: Used with checkbox or radio buttons to specify that the input is selected by default.

<input type="checkbox" checked>

14. readonly: Makes an input field read-only, so users can’t change its value.

<input type="text" value="Read only text" readonly>

15. width and height: Used to specify the dimensions of an image, video, or canvas.

<img src="image.jpg" width="300" height="200" alt="Image">

List of Elements in HTML

1.Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

2. HTML Meta Tags

DOCTYPE, title, link, meta and style

3. HTML Text Tags

4.HTML Link Tags

5.HTML Image and Object Tags

6.HTML List Tags

7.HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

8. HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

<p> below example shows the example of list</p>
<ol> 
<li>a</li> 
<li>B</li> 
<li>c</li> 
<li>d</li> 
</ol>

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

<p> below example shows the unordered list</p>
<ul> 
<li>a</li> 
<li>B</li> 
<li>c</li> 
<li>d</li> 
</ul>

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia

<dl> – Stands for Description List. This tag is used to group a list of terms and their corresponding descriptions.
<dt> – Stands for Description Element or Description Term. This tag is used to define a term or name in the description list.
<dd> – Stands for Description Description or Description data. This tag is used to define the description or value associated with a term in the description list.

<dl>
<dd> datatypes in c </dd>
 <dt>int</dt>
<dd>0-9</dd>
 <dt>float</dt>
<dd>floating point</dd>
 <dt>char</dt>
<dd>single character</dd>
</dl>

HTML Form

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. .

WE USUALLY FILL FORM ON COLLEGE WEBSITES,OR ANY OTHER WEBSITE .WE CAN USE HTML FORM TO MAKE THEM AT OUR OWN SITE.

Syntax : <form> CONTENT</form>

<form> 
 Enter your name <br> 
 <input type="text" name="username"> 
 </form>

Radio Button Control

The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.

<form> 
 <label for="gender">Gender: </label> 
 <input type="radio" id="gender" name="gender" value="male"/>Male 
 <input type="radio" id="gender" name="gender" 
value="female"/>Female <br/> 
</form>

Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.

<form> PRACTICAL SUBJECT IN BCA 1 SEM: <BR>
 <input type="checkbox" id="C" name="SUBJECT" value="C">
 <label for="C">C LAB</label><br>
 <input type="checkbox" id="WEB" name="SUBJECT" value="WEB">
 <label for="WEB">WEB LAB</label><br>
 <input type="checkbox" id="FUNDA_LAB" name="SUBJECT" 
value="FUNDA_LAB">
 <label for="FUNDA_LAB">FUNDAMENTAL LAB</label><br>
 <button type="submit">Submit</button>
 </form>

Fieldset

The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend> element which provide caption for the grouped elements.

<fieldset> 
 <legend>LIST OF LAB EXAM:</legend>
PRACTICAL SUBJECT IN BCA 1 SEM:<br> 
 <input type="checkbox" id="C LAB" name="C LAB" value="C LAB"/> 
 <label for="C LAB">C LAB</label> <br> 
 <input type="checkbox" id="WEB LAB" name="WEB LAB" value="WEB 
LAB"/> 
 <label for="WEB LAB">WEB LAB</label> <br> 
 <input type="checkbox" id="FUNDAMENTAL LAB" 
name="FUNDAMENTAL LAB" value="FUNDAMENTAL LAB"/> 
 <label for="FUNDAMENTAL LAB">FUNDAMENTAL LAB</label> 
</fieldset>
</form>

HTML Password Field Control

The password is not visible to the user in password field control.

<form> 
 <label for="password">Password: </label> 
 <input type="password" id="password" name="password"/> <br/> 
</form>

HTML Class

In HTML, a class is an attribute that is used to assign a specific name to an HTML element. This class name can be used to apply styles or target elements using JavaScript. Classes allow you to group similar elements together, making it easier to apply the same styling or behavior to multiple elements.

Key Points :

A class can be assigned to any HTML element.
Multiple elements can share the same class.
Classes are defined using the class attribute.

<!DOCTYPE html>
<html lang="en">
<head>
 <title>HTML Class Example</title>
 <style>
 /* CSS styles applied to elements with class 'highlight' */
 .highlight {
 background-color: yellow;
 color: red;
 }
 </style>
</head>
<body>
 <h1 class="highlight">This is a heading with the class "highlight"</h1>
 <p class="highlight">This paragraph also has the class "highlight".</p>
 <p>This paragraph does not have the class.</p>
</body>
</html>

Explanation:

In the example above, the h1 and p elements are assigned the class highlight.
The CSS in the <style> tag targets the highlight class and applies specific styles (yellow background and red text color).
Only elements with the highlight class will have these styles applied.

HTML id

In HTML, an ID is an attribute that uniquely identifies an HTML element on a webpage. Unlike classes, which can be applied to multiple elements, an ID should be used to identify a single, specific element. Each element in a document should have a unique ID, and it can be used to apply styles, target elements in JavaScript, or navigate to specific parts of the page.

Key Points :

An ID must be unique within a page (no two elements should have the same ID).
It is defined using the id attribute.
IDs are often used in JavaScript to manipulate specific elements or in CSS
to apply unique styles to a single element.

<!DOCTYPE html>
<html lang="en">
<head>
 <title>HTML ID Example</title>
 <style>
 /* CSS style applied to element with id 'unique-heading' */
 #unique-heading {
 color: blue;
 font-size: 30px;
 }
 </style>
</head>
<body>
 <h1 id="unique-heading">This heading has a unique ID</h1>
 <p>This paragraph does not have an ID.</p>
</body>
</html>

Explanation:

The h1 element has an id attribute with the value unique-heading.
The CSS targets this ID (#unique-heading) and applies a blue color and
font size of 30px.
Since the ID must be unique, only the element with this exact ID will
have these styles applied.

Differences between Class and ID

Uniqueness: An ID must be unique on the page (only one element can have a given ID), while classes can be applied to multiple elements.
Selection: IDs are targeted with # in CSS and JavaScript (e.g., #myID), while classes are targeted with a . (e.g., .myClass).
Usage: IDs are commonly used for unique elements (like a specific button or form), while classes are used when multiple elements need the same style or behavior.

Summary:

ID: Unique, used to identify a single element.
Class: Can be reused across multiple elements, used to apply the same style or behavior to multiple items.

HTML iframe

An iframe (short for inline frame) in HTML is an element that allows you to embed another webpage or document inside the current page. It’s like placing a window to another website or content within your webpage. The embedded content can be from the same domain or an external site.

Key points about <iframe>:

The <iframe> element is used to embed another HTML document within the current page.
It creates a “frame” that can load other content like a website, video, or map.
You can control the size and position of the iframe using HTML attributes and CSS.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
 <title>Iframe Example</title>
</head>
<body>
 <h1>Embedding an Iframe</h1>
 <!-- Embedding an iframe -->
 <iframe src="https://www.example.com" width="600" height="400" 
title="Example Website"></iframe>
</body>
</html>

HTML Table

A table in HTML is used to organize data in a grid of rows and columns. It allows you to display tabular data such as lists, schedules, or any other type of information that can be structured in rows and columns.

Basic Structure of a Table:

<table>: The container for the table.• <tr>: Defines a table row.
<th>: Defines a table header (for column or row headers).
<td>: Defines a table cell (contains data).

<table>
 <thead>
 <tr>
 <th>Product</th>
 <th>Price</th>
 <th>Quantity</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Apple</td>
 <td>$1.00</td>
 <td>10</td>
 </tr>
 <tr>
 <td>Banana</td>
 <td>$0.50</td>
 <td>20</td>
 </tr>
 <tr>
 <td>Orange</td>
 <td>$0.80</td>
 <td>15</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td>Total</td>
 <td>$32.00</td>
 <td>45</td>
 </tr>
 </tfoot>
 </table>

HTML layout

An HTML layout is the structure or arrangement of different elements on a webpage. It determines how the content is organized and displayed when you open a website in a browser.

Key Parts of a Simple HTML Layout:

Header: The top part of the page. Often includes the website title or logo.
Navigation (Nav): A section with links to other pages or sections of the website (like Home, About, Contact).
Main Content: The main area where the most important information or content of the webpage is displayed (e.g., text, images, articles).
Sidebar: A side area (usually to the left or right) for additional content or links, like advertisements or related articles.
Footer: The bottom part of the page, often used for copyright information, contact details, or social media links.

In Simple Terms:

The HTML layout is just how you organize and display all the parts of your website (header, navigation, content, etc.) using HTML tags.
It’s like arranging furniture in a room: each part (header, content, footer) has its place and serves a specific purpose.

HTML <section>

An HTML <section> is a part of a webpage that groups related content together. It is used to divide a webpage into different sections, making the content more organized and easier to manage.

The <section> tag defines a section in a document.

Simple Explanation:

A section is like a “chunk” or “part” of a webpage that contains a specific topic or category of content.
Each section can have its own heading, text, images, or other elements.

<section>
<h2>Contact</h2>
<p>You can reach us via email at contact@ourcompany.com.</p>
</section>

Steps To Publish Website

Create Your Website
- Design and build your website (use HTML/CSS or a website builder like WordPress).
Buy a Domain Name
- Choose and purchase a domain name (e.g., www.yoursite.com)
  from a domain registrar.
Choose a Web Hosting Service
- Pick a hosting provider (e.g., Bluehost, SiteGround) to store your
  website files online.
Upload Your Website Files
- Use FTP (File Transfer Protocol) or your hosting service’s file manager to upload your website files to your hosting server.
Link Domain to Hosting
- Update your domain’s DNS settings to point to your hosting
  provider’s nameservers.
Test Your Website
- Visit your website (e.g., www.yoursite.com) to make sure
  everything works correctly.
Make Your Site Live
- Once everything looks good, your site is live and available on the
  internet.
Maintain Your Website
- Regularly update your content and fix any issues that come up.

HTML Notes PDF Download

Click on the link given below to download PDF of HTML5 Notes.

Heading	Links
HTML5 Notes PDF Download Link	Click Here
Join WhatsApp Group Link	Click Here
Join Telegram Group Link	Click_Here

What is HTML?

Features of HTML

HTML Elements and Tags

HTML Page Structure

HTML History

HTML Elements

HTML Comments

How to write HTML comments:

Example:

Why use HTML comments?

What are semantic HTML tags?

Article

Key Characteristics of the <article> Element:

Syntax:

When to Use the <article> Element:

ASIDE, HEADER, FOOTER

<aside> Element

<header> Element

<footer> Element

HTML Attributes

Common HTML Attributes:

List of Elements in HTML

1.Unclosed HTML Tags

2. HTML Meta Tags

3. HTML Text Tags

4.HTML Link Tags

5.HTML Image and Object Tags

6.HTML List Tags

7.HTML Table Tags

8. HTML Form Tags

HTML Lists

HTML Ordered List or Numbered List

HTML Unordered List or Bulleted List

HTML Description List or Definition List

HTML Form

Radio Button Control

Checkbox Control

Fieldset

HTML Password Field Control

HTML Class

HTML id

Differences between Class and ID

HTML iframe

HTML Table

HTML layout

HTML <section>

Steps To Publish Website

HTML Notes PDF Download

View More

Leave a Comment Cancel reply

© 2024 kkeducations • Built with kkeducations