Visual Programming for Web Development
Introduction to Web Technologies
The Building Blocks of the Web
Every website you visit is built with three core technologies: HTML, CSS, and JavaScript. Think of building a house. HTML is the frame and foundation—it provides the structure. CSS is the paint, wallpaper, and furniture that make the house look good. JavaScript is the plumbing and electricity that make it functional, letting you turn on lights or open the garage door.
Together, these three languages create everything you see and interact with on the web.
HTML for Structure
HTML, or HyperText Markup Language, is the standard language for creating web pages. It isn't a programming language; it's a markup language. You use it to describe the content on a page, like headings, paragraphs, and images. You do this with "tags," which are keywords surrounded by angle brackets.
tag
noun
An HTML command that specifies how a part of a document should be formatted or displayed.
For example, to create a main heading, you wrap your text in an <h1> tag. For a paragraph, you use a <p> tag. Most tags have an opening tag (like <h1>) and a closing tag (like </h1>). Here’s what a very basic HTML document looks like:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
The <body> tag contains all the visible content of the page. When a browser reads this file, it understands how to display the text based on these tags.
CSS for Style
While HTML provides the raw structure, CSS (Cascading Style Sheets) brings it to life with style. You use CSS to control colors, fonts, spacing, and the layout of your elements. This separation is powerful: the HTML file focuses on the content, while the CSS file focuses on the presentation.
A CSS rule has two main parts: a selector and a declaration. The selector points to the HTML element you want to style. The declaration contains the properties (like color or font-size) and their values.
/* This is a CSS comment */
h1 {
color: navy;
font-size: 24px;
}
In this example, the selector is h1. It targets all <h1> elements. The declarations inside the curly braces will make the text of every <h1> tag navy blue and set its size to 24 pixels.
JavaScript for Interactivity
JavaScript is the programming language of the web. It's what makes websites interactive. If you've ever clicked a button that revealed more content, submitted a form without the page reloading, or seen an animated graphic, you've seen JavaScript in action.
JavaScript can directly manipulate the HTML and CSS of a page. It views the HTML document as an object, called the Document Object Model (DOM). By interacting with the DOM, JavaScript can add, change, or remove elements and styles in response to user actions.
Put simply: HTML defines the nouns (the elements), and JavaScript provides the verbs (the actions).
Here's a small taste of what it can do. Imagine you have a paragraph in your HTML with an ID, like <p id="demo">Hello World</p>. You could use JavaScript to find that element by its ID and change its content when a user clicks a button.
// Find the element with the ID "demo"
let paragraph = document.getElementById("demo");
// A function to change its text
function changeText() {
paragraph.textContent = "Hello, Web!";
}
You would then connect that changeText() function to a button in your HTML. When the button is clicked, the text on the page instantly updates. This ability to change the page dynamically is what makes modern web applications possible.
Let's review what we've learned.
Ready to check your understanding?
In the analogy of building a house for a website, what does CSS represent?
Which technology is considered a markup language, not a programming language?
Understanding how HTML, CSS, and JavaScript work together is the first major step in web development. With these fundamentals, you can build almost anything on the web.