HTML (Hyper Text Markup Language) is the backbone of every webpage. It defines the structure and layout of content on the web. Learning HTML was my first step in becoming a web developer, and it gave me the confidence to explore more complex technologies. Understanding HTML has allowed me to create structured content, which is essential for both user experience and search engine optimization (SEO). It also laid the foundation for me to delve into CSS and JavaScript, which enhance the styling and interactivity of web pages.
Learning outcomes for HTML:
1.Basic Structure:
Understanding <!DOCTYPE>, <html>, <head>, <body>.
Creating semantic layouts with tags like <header>, <footer>, <section>, and <article>.
2.Text Formatting:
Using tags like <h1> to <h6>, <p>, <strong>, and <em> to format content.
3.Links and Media:
Adding hyperlinks with <a> and embedding images with <img>.
Embedding videos and audio with <video> and <audio>.
4.Forms and Inputs:
Designing forms with <form>, <input>, <textarea>, <button>, and form attributes like required and placeholder.
5.Tables and Lists:
Structuring data with <table>, <thead>, <tbody>, and <tr>.
Creating ordered and unordered lists with <ol> and <ul>.
CSS (Cascading Style Sheets) is a style sheet language used to control the layout and presentation of web pages. It allows developers to separate the structure of a web page (HTML) from its visual design, including colors, fonts, spacing, and positioning. CSS enables responsive design, ensuring that websites adapt seamlessly to various screen sizes and devices. By using CSS, developers can create visually appealing and consistent designs across different browsers, enhancing the user experience.
Learning outcomes for CSS:
Layout Techniques: Mastered the use of CSS to arrange elements using grid systems, flexbox, and float properties for responsive page layouts.
Color and Typography: Enhanced visual appeal by applying color schemes, font styles, and text properties to create aesthetically pleasing designs.
Responsive Web Design: Implemented fluid layouts with media queries to ensure websites are optimized for both desktop and mobile screens.
Visual Effects: Integrated CSS animations and transitions to improve user interaction with smooth element movements and hover effects.
Reusable Design Elements: Utilized CSS classes, IDs, and variables to create reusable styles and improve maintainability of the website.
Cross-Platform Styling: Ensured consistency of design and style across multiple browsers, optimizing user experience on all devices.
<html>
<head>
<title>KOUSHIK's webpage</title>
</head>
<body>
<iframe src="https://www.wikipedia.org/" name="My portfolio" height="400px" width="400px"></iframe><br>
<form>
First name: <input type="text" value=""><br>
Last name: <input type="text" value=""><br>
</form>
<!--TEXT-->
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" placeholder="Enter your first name" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" placeholder="Enter your last name" name="lname"><br>
</form>
<form>
<input type="radio" id="html" name="Working on" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="CSS" name="Working on" value="CSS">
<label for="CSS">CSS</label><br>
<input type="radio" id="java" name="Working on" value="java">
<label for="java">Java</label><br>
</form>
<form>
<input type="checkbox" id="vehicle" name="veh" value="Bike">
<label for="vehicle">I have a bike</label><br>
<input type="checkbox" id="vehicle1" name="veh" value="Car">
<label for="vehicle1">I have a Car</label><br>
<input type="checkbox" id="vehicle2" name="veh" value="Plane">
<label for="vehicle2">I have a Plane</label><br>
</form>
<p><strong>Gender:</strong></p>
<form action="/action_page.php">
<input type="radio" id="male" name="Working on" value="male">
<label for="male">Male</label><br>
<input type="radio" id="fem" name="Working on" value="fem">
<label for="fem">Female</label><br>
<input type="submit" value="Submit">
</form>
<form target="_blank">
Enter a text:<input type="text">
</form>
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="2" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="ferrari">Ferrari</option>
</select>
</form>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<form>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" placeholder="Enter your first name" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" placeholder="Enter your last name" name="lname"><br>
</fieldset>
</form>
</body>
</html>