HTML is the foundation for the web. It’s a language that helps create web pages by telling browsers how to display text, images, and other multimedia. This article will cover the basics of HTML, including tags, elements, and attributes.
What is HTML, and how does it work
HTML stands for HyperText Markup Language. It’s a language that helps create web pages by telling browsers how to display text, images, and other multimedia. HTML is written in code, a series of instructions that the computer can understand. Browsers use this code to display web pages on screens.
HTML basics, including tags, elements, and attributes
Tags are the building blocks of HTML. They’re like the ingredients in a recipe. Tags are enclosed in < > and tell the browser what to do with the surrounding text or element. For example, the <h1> tag tells the browser to make the text inside it into a headline.
Elements are the basic units of an HTML document. They can be text, images, or other HTML tags. Elements are surrounded by < > and are usually completed with a closing tag </>. For example, the element for a headline is <h1>.
Attributes give extra information about an element. They’re like adjectives that describe a noun.
The importance of HTML to web design
HTML is essential to web design because it’s the language that browsers use to understand and display web pages. When you create a website, you need to write HTML code to tell the browser how to format the text, images, and other multimedia on the page. HTML is also necessary for creating forms and adding interactivity to your website.
How to create a basic webpage with HTML
To create a basic webpage with HTML, you need to write some code and save it as a text file with the extension .html or .htm. The code will tell the browser how to format the text, images, and other multimedia on the page.
<html> <head></head> <body> <h1>My First Webpage</h1> This is my first HTML webpage. I'll add more content later. </body> </html>
Cascading Style Sheets
CSS is a technology developed by the World Wide Web Consortium (W3C) for describing how documents are presented visually on screen. The acronym originally stood for Cascading Style Sheets. Still, in 1998 the W3C changed it to stand for “Cascading Style Sheets” or “Cascading Style Sheets Specification.” CSS allows the separation of presentation and content, giving designers more control over site appearance and making HTML markup more compact.
As a separate file, a web page can use one style sheet to define all visual aspects of its presentation: colors, fonts, layout, etc. By changing this single file, all pages on a site using the same style sheet may be quickly made to look or conform to a different style. CSS can also specify details such as the width and height of elements, margins, padding, borders around an element, and text formatting.
The name cascading comes from how styles cascade; lower-level styles override higher-level ones. This is similar to natural cascades: water flows downhill, so higher elevations can ‘cascade’ down to lower elevations. But if the higher source is dammed up, then water will collect above the dam and run over it when it fills up high enough. The same thing can happen with CSS: due to specificity rules. If several conflicting styles apply to the same element, whichever type appears last in the style sheet takes precedence.
This means that to change the appearance of an element, you only need to modify one or two lines of CSS rather than hunting around through many different files.
CSS code generally appears inside an HTML document in <style></style> elements. However, putting all styles into a separate file makes them easier to maintain and reuse across multiple pages. Separating presentation from content also allows users with limited capabilities to remove all formatting from documents without stripping away the structural information. Formatting can also be manipulated on the fly by web browsers, based either on user preferences or various constraints such as the device rendering the content.
So there you have it! You now know the basics of HTML. This is a great starting point, but don’t stop here. There are many more tags and elements to learn, which we’ll cover in future posts. In the meantime, practice what you’ve learned by creating your own web page. Are you ready to learn HTML?
For more articles on product design, NFTs, books, and crypto check out my blog.