Absolute beginners guide to HTML
Introduction
HTML stands for Hypertext Markup Language
As the name says it is a markup language. In other words, it can give some words on a page a meaning, hence marking up.
An author must go through the text and specify what words need emphasis, which are lists. Either ordered or unordered. Maybe an image in there?
The hypertext part means you can jump from page to page. Allowing the author to immediately “link” to any references he makes.
Structure
The structure of an HTML page is like this:
If you type this in a text editor (Notepad for example, not Word), you can validate this on W3 validator.
Every HTML page has a certain structure
The Doctype
It starts with a doctype (<!DOCTYPE html>) that specifies the version of HTML being used. In this case it's HTML 5, but older versions are also possible.
HTML
Then it has the HTML tag. Tags are the things between between brackets. This is the root tag, the tag that contains every other tag.
Head
After that, inside of the html tag, there should be a <head> tag. The head tag specifies things about the page, but doesn't print anything on screen. It is kind of like the meta data of the page.
In the example above there is just the <title> in there, which displays the title of the page in the browser tab usually.
It is not limited to the title though. Other tags are available inside the head section. For example, style sheets (thing that makes html look pretty) of Javascript (makes html interactive) are also included in the head section. Other tags can be meta tags.
You can read more about the head section on the Mozilla developer network.
Body
Finally, we have come to the part where it starts displaying something on the screen. While you could just enter text here (and it will be displayed). It wouldn't look good. This is because html will just take all text from the body, and display it all on a single line. Not exactly what you think when you are making a web page.
Tags
Let's start talking about the content (the <body> if you recall).
You have to your availability, 6 (!!) header. From <h1> to <h6>. Your page title should be an <H1>, subtitles <h2>, sub sub titles <h3> and so on.
You can make paragraphs with the <p> tag. We can make text bold by using <strong> and emphasized by using <em>. That being said, we have enough knowledge to make a real web page.
That's it, we have build a real website. Okay, it doesn't look good or anything, but it is valid html.
Links
We still have something to talk about, and that is links. We know a little about markup language, let's learn about hypertext too. This is what makes the web, the web.
Links can be found all over the place, whether it is getting a style sheet, Javascript, an image, a link to another page, the number is links is endless. Well, not actually endless, but you get my point.
Links to pages
Let's not waste any time and have a look about what a link (to another page) looks like.
The tag is an a followed by an href attribute. The href is where it is linking to. In this case wiredpea.com
Links to images
There is another type of link and that is, to images. Images are files that are not stored inside of the HTML, so it is a link to another file (or resource, as they call it in HTML). How does a link to an image look like? Well, let's go and see:
There are a couple of things to remember.
First of all, it is a so-called self-closing tag, or a void tag. This means, there is no content and it is just the tag. This is okay, because the tag itself is displayed as the image you are referencing.
Second there is an alt attribute, this is short for "alternative". It means that if a user is using a browser that isn't capable of displaying images, it shows the alt text. Also, people who cannot see images, or have a hard time seeing images can use a screen reader, and this will show the alt text.
Third, it has a title attribute. Which shows when you hover your mouse over the image.
Conclusion
This introduction to HTML has scratched the surface of its capabilities. We've explored the basic structure of an HTML page, the role of tags, and how to create simple content. But HTML's true potential lies beyond these fundamentals.
By incorporating elements like headings, paragraphs, and images, you can build the foundation of a webpage. Links, the essence of the web, allow you to seamlessly connect your page to other resources and navigate the vast online world.
While this basic HTML might not win any design awards, it serves as a solid starting point. As you delve deeper, you'll discover how HTML interacts with CSS for styling and JavaScript for interactivity. This powerful trio forms the backbone of most websites, allowing you to create dynamic and visually appealing experiences for users.
So, the next time you browse the web, remember the language working tirelessly behind the scenes: HTML. It's the invisible architect, crafting the structure and foundation of the amazing websites you encounter daily. Now that you've taken your first steps into the world of HTML, keep exploring and unleash your creativity to build your own corner of the web!
