Mastering Front-End with TypeScript
HTML Basics
The Skeleton of the Web
Every website you visit, from a simple blog to a complex news site, has a skeleton holding it together. That skeleton is called HTML, which stands for HyperText Markup Language. It isn’t a programming language that performs actions; instead, it’s a markup language that structures the content you see on a page.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
Think of it like the frame of a house. Before you can paint the walls or add furniture, you need the basic structure: the foundation, walls, and roof. HTML provides that structure for a webpage, telling the browser what is a heading, what is a paragraph, and where an image should go. It uses special labels called “tags” to define each piece of content.
Tags, Elements, and Attributes
HTML works by wrapping content in tags. Most tags come in pairs: an opening tag and a closing tag. The pair of tags and the content between them form an element.
<p>This is a paragraph.</p>
In this example, <p> is the opening tag that marks the beginning of a paragraph. This is a paragraph. is the content. And </p> is the closing tag, which looks just like the opening tag but with a forward slash before the tag name. The browser sees this entire element and knows to display the text as a standard paragraph.
Sometimes, elements need a bit more information to work correctly. This extra information is provided by attributes. Attributes are added inside the opening tag and provide details about the element, like where to find an image file or where a link should go. They usually come in name/value pairs, like name="value".
Building with Blocks
The most common building blocks for any webpage are headings and paragraphs. They give your content a clear hierarchy and make it readable.
Headings are created with <h1> through <h6> tags. <h1> is the most important heading, usually the main title of the page, while <h6> is the least important. Using headings correctly helps both users and search engines understand the structure of your content.
<h1>This is the main title</h1>
<p>This is a paragraph of text explaining the topic.</p>
<h2>This is a subtitle</h2>
<p>Here is some more detailed information.</p>
Paragraphs, as we've seen, use the <p> tag. The browser automatically adds some space before and after each paragraph, making the text easy to read.
Lists are another fundamental tool for organizing information. There are two main types: unordered lists (for bullet points) and ordered lists (for numbered items). An unordered list uses the <ul> tag, and each item inside it is marked with an <li> tag (for list item).
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
For a numbered list, you simply swap <ul> with <ol>.
<ol>
<li>First, gather your ingredients.</li>
<li>Second, mix them together.</li>
<li>Third, bake for 30 minutes.</li>
</ol>
Finally, what makes the web a web? Links! The anchor tag, <a>, creates hyperlinks. The destination of the link is specified in the href attribute, which stands for “hypertext reference.”
<a href="https://www.example.com">Visit our website!</a>
The text between the <a> and </a> tags is what becomes the clickable link on the page.
Images and Forms
A webpage without images would be pretty boring. To embed an image, you use the <img> tag. This is a self-closing tag, meaning it doesn't need a separate closing tag.
It requires two key attributes: src to specify the image file's path or URL, and alt to provide alternative text. The alt text is crucial for accessibility, as it describes the image for screen readers used by visually impaired users and also displays if the image fails to load.
<img src="images/cat.jpg" alt="A fluffy orange cat sleeping on a chair">
To collect information from users, you need forms. The <form> element acts as a container for different types of input fields. The <input> tag is versatile and can create text boxes, password fields, checkboxes, and buttons. Its behavior is determined by its type attribute.
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Log In">
</form>
This code creates a simple login form. The <label> tags provide descriptive names for the input fields, which is another important practice for accessibility. The <input type="submit"> creates a button to submit the form's data.
These are the core building blocks of HTML. By combining them, you can structure any web content you can imagine.
What is the primary purpose of HTML?
The <h1> tag represents the least important heading, while <h6> represents the most important.
With these elements, you have the fundamental tools to structure a webpage. Everything else in web development builds on this foundation.