HTML Basics
I am a dedicated and skilled Software Engineer specializing in mobile app development, backend systems, and creating secure APIs. With extensive experience in both SQL and NoSQL databases, I have a proven track record of delivering robust and scalable solutions.
Key Expertise:
Mobile App Development: I make high-quality apps for Android and iOS, ensuring they are easy to use and work well.
Backend Development: Skilled in designing and implementing backend systems using various frameworks and languages to support web and mobile applications.
Secure API Creation: Expertise in creating secure APIs, ensuring data integrity and protection across platforms.
Database Management: Experienced with SQL databases such as MySQL, and NoSQL databases like Firebase, managing data effectively and efficiently.
Technical Skills: Programming Languages: Java, Dart, Python, JavaScript, Kotlin, PHP
Frameworks: Angular, CodeIgniter, Flutter, Flask, Django
Database Systems: MySQL, Firebase
Cloud Platforms: AWS, Google Cloud Console
I love learning new things and taking on new challenges. I am always eager to work on projects that make a difference.
Structure of an HTML Document
Every HTML page starts with a <!DOCTYPE html> declaration, followed by <html>, which is the root element. Inside <html>, there are two main sections:
Head section: It contains meta-information about the document (like the title, links to stylesheets, and metadata).
Body section: This is where the visible content (text, images, videos) goes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML document.</p>
</body>
</html>
Basic HTML Elements
Headings: These elements (
<h1>to<h6>) define headings.<h1>is the largest, and<h6>is the smallest.<h1>Main Title</h1> <h2>Subheading</h2>
Paragraphs and Line Breaks:
<p>defines a paragraph.<br>is used for a line break.
<p>This is a paragraph of text.</p>
<p>This is another paragraph.<br>With a line break inside.</p>
Links:
<a href="URL">is used to create hyperlinks.<a href="https://www.example.com" target="_blank">Visit Example</a>
Images: The
<img>element embeds an image.<img src="image.jpg" alt="Description of the image" width="500">
Lists:
Ordered Lists (
<ol>): Numbered items.<ol> <li>First item</li> <li>Second item</li> </ol>
Unordered Lists (
<ul>): Bulleted items.<ul> <li>Item one</li> <li>Item two</li> </ul>
Attributes
HTML attributes provide additional information about elements. Common attributes include:
hreffor links,srcfor images,altfor images (describes the image for screen readers).idandclassare used to assign unique or reusable identifiers to elements.
Example:
<a href="https://example.com" class="link-button" id="learnMore">Learn More</a>
2. Intermediate HTML
Forms in HTML
Forms allow users to input data, which is sent to the server for processing. Key elements include:
<form>: The container for all form elements.<input>: Used for various types of user input (text, password, email, checkbox).<label>: Associates text with a form element for accessibility.<button>and<input type="submit">: Submits the form.
Example:
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Login">
</form>
Tables in HTML
Tables allow you to display data in rows and columns using the following elements:
<table>: The container for the table.<tr>: Defines a row in the table.<th>: Defines a header cell.<td>: Defines a standard cell.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>
Semantic HTML
Semantic elements give meaning to your content. They make it easier for search engines and assistive technologies to understand your page. Key semantic tags include:
<article>: Independent content such as a blog post.<section>: A section of content, such as chapters or thematic groups.<nav>: Navigation links.<header>and<footer>: Top and bottom content areas of a page.<aside>: Side content, such as a sidebar.
Example:
<article>
<header>
<h2>Blog Post Title</h2>
<p>Written by Author</p>
</header>
<p>This is the content of the blog post.</p>
<footer>
<p>Published on Date</p>
</footer>
</article>
3. Advanced HTML
HTML5 APIs
Local Storage API: Local storage allows storing data locally in the user's browser that persists even after closing the browser. It’s useful for saving user settings, preferences, or small pieces of data.
Example:
<script> // Storing data localStorage.setItem("username", "JohnDoe"); // Retrieving data let username = localStorage.getItem("username"); console.log(username); </script>Canvas API: The
<canvas>element is used to draw graphics (like charts or game elements) on a web page.Example:
<canvas id="myCanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "blue"; ctx.fillRect(20, 20, 150, 100); </script>Geolocation API: This API allows web applications to get the user's geographic location (with their permission).
Example:
<button onclick="getLocation()">Get My Location</button> <p id="location"></p> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { document.getElementById('location').innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { document.getElementById('location').innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
Drag and Drop API
This allows elements to be draggable and dropped into different parts of a web page.
Example:
<div id="drag1" draggable="true" ondragstart="drag(event)">Drag me!</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:100px;">
Drop here
</div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>
4. HTML Best Practices
Accessibility (a11y)
Use descriptive alt text for images.
Use proper labels for form elements for screen readers.
Ensure a clear focus state for interactive elements (like links and buttons) for keyboard navigation.
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" aria-label="Email Address">
SEO (Search Engine Optimization)
Title and meta tags: Ensure that each page has a unique title and meta description.
<title>My Website</title> <meta name="description" content="This is a description of my website.">Heading hierarchy: Use proper heading levels (
<h1>,<h2>, etc.) to structure your content.
Performance Optimizations
Lazy loading images: Load images only when they are about to enter the viewport.
<img src="image.jpg" alt="Example" loading="lazy">Minify HTML: Remove unnecessary characters (whitespace, comments) to reduce file size.
Async and defer for scripts: Load JavaScript files without blocking the page rendering.
<script src="script.js" async></script>GitHub Repository:
