The basics of web development consist of three technologies: HTML, CSS, and JavaScript. In this post, we'll cover the basics of each technology.
HTML, or HyperText Markup Language, is the standard markup language for documents on the World Wide Web. HTML elements are the building blocks of HTML pages.
An HTML element is consists of a start tag, content, and an end tag. The start tag is enclosed in angle brackets, and the end tag is also enclosed in angle brackets but includes a forward slash before the element name.
For example, the <p>
element represents a paragraph of text. The <p>
start tag tells the web browser that the enclosed content is a paragraph, and the </p>
end tag tells the web browser that the paragraph has ended.
Here's an example of a paragraph element:
<p>This is a paragraph of text.</p>
Most HTML elements can have attributes, which are used to provide additional information about the element. Attributes are specified in the start tag and are usually made up of a name and a value, separated by an equals sign.
For example, the <a>
element, which represents a hyperlink, has an href
attribute, which specifies the URL of the page that the link goes to.
Here's an example of a hyperlink element:
<a href="https://www.example.com/">This is a link to an external website.</a>
<head>
ElementThe <head>
element contains information about the document, such as the document's title, and is used to load external resources, such as CSS stylesheets and JavaScript files.
Here's an example of the <head>
element:
<head>
<title>This is the document's title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
ElementThe <body>
element contains the document's content, which is displayed by the web browser.
Here's an example of the <body>
element:
<body>
<!-- This is a comment -->
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
</ul>
</body>
CSS, or Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in a markup language. CSS is used to style all HTML tags, including the document's <body>
, <head>
, and <html>
elements.
CSS rules are made up of selectors and declarations. A selector is used to specify the HTML element(s) that the CSS rule applies to. A declaration is used to specify the CSS properties and values that are applied to the HTML element(s) specified by the selector.
CSS declarations are made up of a property and a value, separated by a colon. Multiple declarations can be separated by a semicolon.
Here's an example of a CSS rule:
p {
color: red;
font-size: 16px;
}
This CSS rule will make all <p>
elements have a red color and a font size of 16px.
CSS rules can be placed in the <head>
element of an HTML document, in a separate CSS file, or inline within an HTML element.
Here's an example of an HTML document with an inline CSS rule:
<html>
<head>
<title>This is the document's title</title>
</head>
<body>
<h1 style="color: red;">This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
JavaScript is a programming language that is used to make web pages interactive. JavaScript code can be placed in the <head>
element of an HTML document, in a separate JavaScript file, or inline within an HTML element.
Here's an example of an HTML document with an inline JavaScript:
<html>
<head>
<title>This is the document's title</title>
</head>
<body>
<button onclick="alert('This is an alert')">Click me!</button>
</body>
</html>
In this example, when the button is clicked, an alert box will appear with the text "This is an alert."
JavaScript code can also be used to dynamically change the content and style of an HTML document.
Here's an example of a JavaScript that changes the text of an <h1>
element:
<html>
<head>
<title>This is the document's title</title>
</head>
<body>
<h1 id="heading">This is a heading</h1>
<script>
document.getElementById("heading").innerHTML = "This is a new heading";
</script>
</body>
</html>
In this example, the text of the <h1>
element is changed from "This is a heading" to "This is a new heading" when the page is loaded.
For more information about HTML, CSS, and JavaScript, check out the following resources:
<script>
element to load external JavaScript files. Use the <script>
element only to inline JavaScript code.