?????????????????? ???? ?????? ???????????? ??????????????: ?????????? ?????????????? ???? ????????/??????/????????????????????
Srinivasan Baskaran
Cloud (Multi platform) DevOps Expert | AZ-104/AZ 400 / AWS Fundamentals Trainer | SQL | Azure | AWS | DevOps | Agile/Scrum | Linux | Freelance Consultant | Career Guidance and Mentoring in IT
Introduction:
As a coding novice, taking the first step into the vast world of web development can be both exciting and overwhelming. In this article, I'll walk you through the creation of your first program using HTML, CSS, and JavaScript. We'll take it step by step, ensuring a clear understanding of each line of code. By the end, you'll not only have a simple webpage but also a foundational knowledge of how these technologies work together.
HTML: The Skeleton of the Webpage
<!DOCTYPE html>
<html lang="en">
<head>
??<meta charset="UTF-8">
??<meta name="viewport" content="width=device-width, initial-scale=1.0">
??<title>My First Webpage</title>
</head>
<body>
</body>
</html>
Our journey begins with HTML, the Hypertext Markup Language. It provides the structure for our webpage. Let's break down the code:
<!DOCTYPE html>: This declaration defines the document type and version of HTML we are using.
<html lang="en">: The root element of the HTML document, indicating that the content is in English.
<head>: This section contains meta-information about the HTML document, such as character set and viewport settings.
<meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering and scaling on different devices.
<title>My First Webpage</title>: Sets the title of the webpage, which appears in the browser tab.
<body>: The main content of the webpage goes inside this element.
CSS: Adding Style to the Webpage
Now, let's enhance our webpage's appearance using Cascading Style Sheets (CSS).
body {
??font-family: 'Arial', sans-serif;
??background-color: #f0f0f0;
??text-align: center;
??padding: 20px;
}
In this CSS code:
领英推荐
body: Selects the <body> element.
font-family: 'Arial', sans-serif; : Specifies the font family for the text on the page.
background-color: #f0f0f0; : Sets the background color of the page.
text-align: center;: Centers the text horizontally.
padding: 20px;: Adds padding around the content inside the <body> element.
JavaScript: Adding Interactivity
Now, let's introduce some interactivity using JavaScript.
document.body.onload = function() {
??var greeting = document.createElement('h1');
??greeting.innerHTML = 'Hello, World!';
??document.body.appendChild(greeting);
};
Here's a breakdown of the JavaScript code:
document.body.onload: Specifies that the script should run when the body of the HTML document has finished loading.
var greeting = document.createElement('h1');: Creates an <h1> (heading) element.
greeting.innerHTML = 'Hello, World!';: Sets the text content of the heading.
document.body.appendChild(greeting);: Appends the heading to the <body> element.
Conclusion: Celebrating Your First Code
Congratulations! You've successfully created your first webpage using HTML, CSS, and JavaScript. This journey marks the beginning of your coding adventure. As you delve deeper, remember to build a strong foundation and embrace the joy of continuous learning. Happy coding!
Cloud (Multi platform) DevOps Expert | AZ-104/AZ 400 / AWS Fundamentals Trainer | SQL | Azure | AWS | DevOps | Agile/Scrum | Linux | Freelance Consultant | Career Guidance and Mentoring in IT
1 年Kanchi Venkata Sravani Kanchi Chitti Devi Chodisetti Priyanka
Cloud (Multi platform) DevOps Expert | AZ-104/AZ 400 / AWS Fundamentals Trainer | SQL | Azure | AWS | DevOps | Agile/Scrum | Linux | Freelance Consultant | Career Guidance and Mentoring in IT
1 年#freshers #learning #html #webpage #css #javascript #webdevelopment