HTML and How It works
Introduction
Hey there! Today, I want to chat with you about HTML, which stands for HyperText Markup Language. No need to worry if that sounds a bit technical – I'm here to guide you through the basics in a friendly and straightforward way.
I'm JP, the same guy you might have seen on Github as @piratesjp. Today, I've put together a comprehensive tutorial on HTML just for you. So, let's dive right into the world of HTML!
First things first, what exactly is HTML? Well, Tim Berners-Lee came up with it in 1991 to serve as a standard for creating web pages. Essentially, HTML is like the skeleton of a website. It's a set of instructions telling your web browser how to show text, images, videos, and other elements on a webpage.
Think of it as the building blocks that create the structure and look of a website – similar to how bricks and mortar build a house.
In a nutshell:
- HTML is the language we use to create websites.
- It defines the basic structure or layout of web pages.
- HTML is made up of tags within an HTML document, usually ending in ".html" or ".htm."
- There are different versions of HTML, with HTML5 being the latest.
Now, why is it called HyperText Markup Language? Let's break it down. 'Hypertext' means linking text with other documents, and 'markup language' refers to a language using specific tags.
In simpler terms, HTML helps display text, graphics, audio, video, etc., in a specific way using special tags. Tags are like those meaningful texts enclosed in angle brackets, such as '<head>'. Each tag has a unique role in building an HTML page.
Quick Exercise: Open a webpage, right-click, choose 'View Page Source,' and you'll see the HTML code. That's the code the server sent to display the page.
To make HTML, CSS, and JavaScript more relatable, imagine building a webpage like putting together a car. HTML is the skeleton, CSS adds the paint and finishing touches, and JavaScript is the engine, bringing in functionality and interactivity.
Now, a bit of history – Tim Berners-Lee kicked off the World Wide Web in 1989 and introduced the first version of HTML in 1991. There have been refinements over the years, with HTML4.0 becoming a standard in 1999. The latest and greatest is HTML5.
How websites work, keeping it simple and relatable.
You've probably heard about frontend and backend. Frontend is what you see on a website – the tables, images, and buttons you interact with. It's crafted using HTML, CSS, and JavaScript. On the flip side, the backend manages behind-the-scenes tasks like storing and processing data, using languages like Python, Ruby, or Java. Frontend is all about appearance, while backend takes care of functionality.
So, how does the magic happen?
When you want information from the internet, you use a web browser. This browser fetches content from web servers, where it's stored in HTML documents.
To create an HTML document, you write code with specific tags in a code editor, save it with a '.html' extension, and voila! The browser interprets the HTML, reads it, and displays the webpage.
Now, what's a web browser?
It's a program that understands HTML tags and presents them in a readable format for us. Developers use HTML because it's a clear way to tell the browser what to show. In the next section, I'll guide you on setting up VS Code to write your HTML code and see it in action.
What's an HTML document?
It's a text document saved with '.html' or '.htm,' containing text and tags enclosed in '< >.' These tags give instructions for configuring the webpage. The structure of an HTML document? We'll get into that in the next part.
And the rendered page?
That's the beautiful output of our HTML document – what you see on the browser.
How does a basic website operate?
1. The web browser requests a website from the web server, like www.snazzycoder.com
2. The web server sends HTML, CSS, and JavaScript files back.
3. The browser parses and interprets these files, creating the website you see.
Now, about browsers and how they work.
A browser reads HTML documents and turns them into web pages. It can't access content directly; servers help with that. Parsing and rendering are the two main tasks:
1. Parsing turns raw bytes into characters, then into tokens, and finally into a DOM tree (Document Object Model).
2. Rendering takes each node in the DOM tree and displays it on the screen.
Don't stress about the nitty-gritty of browser workings just yet. Focus on learning HTML. In the next tutorial, we'll set up VS Code and some extensions to write your HTML code. Exciting stuff ahead!
Labels: HTML
posted by Mr JP @ December 24, 2023
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home