Bold and Beautiful – Mastering HTML
Hey guys and gals! If you’re here, you’re probably interested in learning more about HTML, the language of the internet! HTML is exciting because it allows you to create stunning websites and blogs of your own. Plus, it’s pretty easy to learn and incorporate into your daily routine.
In this post, we’ll cover the basics of HTML from scratch. We’ll go beyond just writing simple text, instead we’ll teach you how to add images, links, and other fun elements to your blog or website. You’ll get a grip on how to bold, italicize, underline, and strike through text as well.
Without further ado, grab your laptop, notebook, and a coffee (or any beverage of your choice), and let’s get started!
What is HTML?
HTML stands for Hypertext Markup Language, which is the standard language used to create web pages and applications. HTML allows developers to structure web content responsively, making it easier to read for users. HTML is the backbone of the internet as it allows anyone to view and interact with web content via their desktop computers or mobile devices.
HTML uses simple text formatting and coding to structure elements in a file. The code creates different kinds of content formats such as headlines, paragraphs, links, and images. HTML may appear overwhelming at first glance, but it’s a straightforward markup language that can be quickly understood.
Getting started with HTML
Before we dive into the tools you need to create your HTML files, let’s first discuss basics. HTML is a markup language. A markup language is like a recipe. It tells the browser what to display on the screen. HTML code is written in a text file that is saved with an .html or .htm extension, and it can be created using any text editor, even in Windows Notepad.
Websites like W3Schools offer free courses for people who are new to HTML. They offer interactive tutorials, examples, and quizzes to help you get started on your HTML journey, and it is free. There are plenty of places online where you can find HTML guides and tools that you can use.
Creating your first HTML page
Let’s create your first HTML page now! The first step is to create a new file in Windows Notepad or any text editor of your choice. Save this new file as “index.html”. The “.html” extension is important as it makes it clear that this file is an HTML document. The document name, when displayed on a website, will be what is visible in the tab of the user’s browser. For our website, we’ll name it “My First Website”.
Once you’ve saved the “index.html” file, open it using your text editor of choice, type in the following code (or copy and paste it):
Welcome to my first website
Here are a few reasons why I created this website
- To practice my HTML coding skills
- We all need a good website, don’t we?
- To encourage others to learn HTML as well
It’s important to note that the beginning and end of the HTML document are indicated through the opening tag and the closing tag. The element which contains the title tag is usually used for tags that do not appear on the webpage. The body element contains all of the visible content.
As you can see, we’ve added an h1 tag which stands for a level one header; this is the biggest header available, whose content is an introduction of what this page is about. We added a p tag which creates a paragraph section and an ordered list using ol.
Thanks to basic HTML, you’ve created your first webpage!
Adding styles to your page
Now that you’ve made your first HTML page, you can add some style to your page. HTML is not designed for styling; it’s designed for content, however, you can use CSS (Cascading Style Sheets) to style up your HTML webpage.
Let’s create a basic CSS document. The first step to add a style to your HTML page is to create a new file on your computer and save it as “style.css” in your site’s folder.
Once you have created a CSS document, you can add the following header code to your HTML page’s head element:
Welcome to my first website
Here are a few reasons why I created this website
- To practice my HTML coding skills
- We all need a good website, don’t we?
- To encourage others to learn HTML as well
Now, let’s write some styles in the CSS document so we can format your h1 and p tags.
h1 {
color: #000000;
text-align: center;
font-size: 40px;
}
p {
color: #686868;
font-size: 18px;
line-height: 1.5;
}
You are free to explore more advanced CSS tutorial later on since these areas are beyond the scope of this post. However, just using that simple CSS snippet above, you can change or style your webpage to look more visually appealing.
Adding Images to Your HTML Pages
Images are incredible in HTML. From brand logos to book covers and everything in between, images turn plain text into something visually stimulating. Adding images to your HTML document is simple; it requires that you have the image file saved in the same folder as the HTML file.
Let’s say we have an image saved as “fan.jpg” in our folder. You’d add the following code to display the image on the webpage.
Welcome to my first website
Here are a few reasons why I created this website
- To practice my HTML coding skills
- We all need a good website, don’t we?
- To encourage others to learn HTML as well
It’s important to tag the image using the to indicate that this is an image. We’re using the src attribute to specify the image file path, width attribute to define the image’s width, and height attributes to indicate the image’s height. The alt attribute specifies the image text: it is what gets read when a user, for instance, has turned off image display on their browser.
Adding links
HTML contains a range of tags that allow us to specify a wide range of links to content across the internet. Using a link tag, also called , we can link to both internal pages and external pages outside of our site.
Let’s say we want to link our internal “about.html” file with the “index.html” page. We can create a hyperlink to navigate from index.html to about.html without necessarily closing the webpage.
Welcome to my first website
Here are a few reasons why I created this website
- To practice my HTML coding skills
- We all need a good website, don’t we?
- To encourage others to learn HTML as well
Check out our About page to learn more!
Let’s now create the about.html document in the same folder as index.html and add some content in it.
About Me
My name is Lina, and I am an HTML enthusiast. I have been passionate about HTML for over three years now and would love to learn and create more websites.
The above code showcases a basic way to link from index.html to about.html. However, you can be more creative and link to external pages. The true glory of using links in HTML is the endless versatility that it provides, allowing you to add external links, email links, and beyond.
Adding styles and links to specific words
You can also add styles or links to specific words in paragraphs or headers. You can use the tag to bold a word, or the tag to italicize words.
For example, let’s bold the title of our webpage in the h1 tag.
Welcome to my first website
Here are a few reasons why I created this website
- To practice my HTML coding skills
- We all need a good website, don’t we?
- To encourage others to learn HTML as well
Check out our About page to learn more!
Let’s also add an italicized word in the list.
- To practice my HTML coding skills
- We all need a good website, don’t we?
- To encourage others to learn HTML as well
Conclusion
Using HTML is the first step in creating stunning website or blog pages. With this beginner’s guide, you now have the necessary foundation to create something fantastic. The possibilities are endless, and they can blow your mind when it comes to creating beautiful sites.
We hope you found this guide helpful; it’s a focused, sufficient introduction to HTML, and it’s essential for anyone who wants to learn web development. There’s still a lot more to explore, so keep delving deeper into the world of HTML, and ensure you check out Common HTML Tags, Advanced HTML, and HTML tips and tricks.
Image Credit: Pexels