The only thing standing in your way of getting on the Web is learning the lingo: HyperText Markup Language, or HTML for short. Prepare for some language lessons. After this lesson, you will not only understand some basic HTML elements, but you will also be able to speak HTML with a little flair.
The Web’s entire foundation is hypertext. In the previous tutorial, we tested HyperText and discovered it to be a useful tool (the ‘HT’ in HTML) for organizing documents. Now we’ll look at the ‘ML‘ in HTML, or Markup Language, which will allow us to structure the documents.
In order to create and publish hypertext documents on the World Wide Web, one must learn the HyperText Markup Language (HTML), which is the standard markup language used for creating web pages. HTML consists of a set of elements and tags that provide the structure and content of a web page. By learning HTML, one can create and edit web pages, add text, images, links, and other multimedia elements, and control the layout and formatting of a web page. After learning the basics of HTML, one can start experimenting and adding their own unique style to their web pages. HTML is a simple language to learn, but it takes practice and experimentation to master.
This tutorial will not teach you everything there is to know about HTML. In this tutorial, we will only cover the most fundamental HTML concepts so that you can keep up with us.
There are many resources available for learning HTML, including books, online tutorials, and video courses. There are hundreds of books on HTML that cover a wide range of topics, from beginner-friendly introductions to advanced techniques for experienced developers. These books provide a comprehensive understanding of the language and its various elements, as well as practical examples and exercises for practice. Additionally, there are thousands of online tutorials and videos available, many of which are free and easily accessible, to help you learn and master HTML. We encourage you to check them out and find the resources that best fit your learning style and experience level.
Before we begin discussing HTML, let us first refresh our memories.
What Are Web Servers?
Web servers work around the clock on the Internet, waiting for requests from Web browsers. What kinds of requests? Requests for Web pages, images, sounds, and possibly a movie. When a server receives a request for one of these resources, it locates the resource and returns it to the browser.
How Does A Web Server Work?
You already know how a browser works: you’re surfing the Web and click on a link to go to a specific page. When you click that button, your browser requests an HTML page from a Web server, retrieves it, and displays it in your browser window.
But how does the browser know how to display a page? This is where HTML comes into play. HTML tells the browser everything about the page’s content and structure.
HTML (Hypertext Markup Language) is a markup language that is used to create the structure and content of a webpage. It uses tags, such as <p> for paragraphs and <img> for images, to define the different elements on a page. The browser reads the HTML code and uses it to display the page in a way that makes sense to the user.
How do you write a HTML page?
So you’ve heard that HTML is essential for getting a browser to display your pages, but what exactly does HTML look like? What exactly does it do? Let’s look at some HTML… imagine you’re making a Web page to promote EnableGeek. In HTML, you’d write something like this:
<html>
<head>
<title>EnableGeek</title>
</head>
<body>
<h1>EnableGeek - Start Learning With Us</h1>
<img src="enablegeek.png" alt=”logo of enablegeek” />
<p>
Learn the Basic, Intermediate and Advanced level of <em>Java programming</em> in one place.
</p>
<h2>Directions</h2>
<p>
Receive email updates on new courses and more
</p>
</body>
</html>What the browser creates…
The tags that surround your text are interpreted by the browser when it reads your HTML. Tags are simply words or characters enclosed in angle brackets, such as <head>, <p>, <h1>, and so on. The tags provide information to the browser about the structure and meaning of your text. Instead of just giving the browser a bunch of text, you can use HTML tags to tell the browser what text is in a heading, what text is a paragraph, what text needs to be emphasized, or even where images should be placed. Let’s see how the browser interprets the EnableGeek tags:
Meaning of the tags (how each tag in the HTML maps to what the browser displays):
Tag
<html>
.
.
.
.
.
.
.
</html>Browser Renders…
The <html> tag is the root element of an HTML document. It is used to define the structure and content of a web page. All other elements in the document must be contained within the <html> element. The opening <html> tag should be placed at the beginning of the document, and the closing </html> tag should be placed at the end of the document.
It tells the web browser that the document is an HTML document and the browser should use an HTML renderer to display the content.
This tag is required in all HTML documents and must only appear once. All other elements in the document should be contained within the <html> element.
Tag
<head>
.
.
.
</head>The <head> element is a container for all the head elements of an HTML document. It contains meta information about the document, such as the title of the document, which is displayed in the browser’s title bar or tab, and links to CSS and JavaScript files.
The <head> element should be placed immediately after the opening <html> tag, and before the <body> element. The closing </head> tag should be placed immediately before the opening <body> tag.
The <head> element can contain several sub-elements such as <title>, <meta>, <link>, <script> which provide additional information about the document.
Tag
<title>EnableGeek</title>Browser Renders…
The <title> element is required in the head and is used to set the title of the document, which appears in the browser’s title bar or tab.
Tag
<body>
.
.
.
</body>Browser Renders…
The <body> element is a container for all the visible content of an HTML document. It contains the text, images, and other elements that are displayed in the browser window. The opening <body> tag should be placed immediately after the closing </head> tag, and the closing </body> tag should be placed immediately before the closing </html> tag.
The <body> element can contain a variety of different elements, such as headings, paragraphs, lists, images, and links, which are used to create the structure and content of the web page.
In summary, the <body> tag is used to define the main content of an HTML document, which is displayed in the browser window. It contains all the elements that make up the content of the web page.
Tag
<h1>EnableGeek - Start Learning With Us</h1>Browser Renders…
The <h1> tag is used to define a heading in an HTML document. It is used to create a large, bold text that is used to indicate the main content or sections of a web page. The <h1> tag is used for the most important heading on a web page, and there are six levels of headings, from <h1> to <h6>, with <h1> being the most important and <h6> being the least important.
The text contained within the <h1> tag is usually displayed in a larger and bolder font than the surrounding text, and is used to indicate the main content or sections of a web page.
The <h1> tag is also used by search engines to understand the structure and content of a web page, so it is important to use headings appropriately and in a logical order to help search engines understand the content of your web page.
It is recommended to use only one <h1> tag per page, as it represents the main topic of the page.
In summary, the <h1> tag is used to define a heading in an HTML document, and is used to create a large, bold text that is used to indicate the main content or sections of a web page. It is the most important heading level and it is recommended to use it only once per page.
Tag
<img src="enablegeek.png" alt=”logo of enablegeek”/>Browser Renders…
The <img> tag is used to embed images in an HTML document. It is a self-closing tag, which means that it does not require a closing tag. The <img> tag is used to display images on a web page, such as photographs, diagrams, and icons.
The <img> tag requires a source attribute, which is used to specify the URL of the image file.
The “src” attribute is used to specify the URL of the image file, and the “alt” attribute is used to provide a text description of the image, which is displayed if the image cannot be loaded or if the user is using a screen reader.
It’s important to note that the <img> tag does not have any content, it’s only used to reference an image file.
In summary, the <img> tag is used to embed images in an HTML document. It requires a “src” attribute to specify the URL of the image file and an “alt” attribute to provide a text description of the image. It also supports some other attributes such as “width”, “height”, “style”, “class” and “id” to specify additional information about the image.
Tag
<p>
Learn the Basic, Intermediate and Advanced level of <em>Java programming</em> in one place.
</p>Browser Renders:
The <p> tag is used to define a paragraph in an HTML document. The <p> tag is a block-level element, which means that it creates a new block formatting context and takes up the full width of its parent container. The text contained within the <p> tags is usually displayed with a consistent margin above and below the text, which separates it from the surrounding content.
The text within the <p> tags will be treated as a single paragraph and will have a consistent margin above and below it, which separates it from the surrounding content.
Tag:
<em>Java programming</em>
Browser Renders:
The <em> tag (short for “emphasis”) is used to indicate text that should be emphasized, typically displayed in italic. This tag is used to indicate text that is important or has special meaning.
Tag:
<h2>Directions</h2>
Browser Renders:
The <h2> tag is used to define a heading in an HTML document. It is used to create a text that is used to indicate sub-sections or subtopics of a web page. The <h2> tag is used for a secondary heading on a web page, and there are six levels of headings, from <h1> to <h6>, with <h1> being the most important and <h6> being the least important.
The text contained within the <h2> tag is usually displayed in a larger and bolder font than the surrounding text, but smaller than <h1>, and is used to indicate the sub-sections or sub-topics of a web page.
Tag
<p>
Learn the Basic, Intermediate and Advanced level of <em>Java programming</em> in one place.
</p>
Browser Renders…
The <p> tag has already been described.
That’s all there is to HTML for now. HTTP will be covered in the following tutorial. In a later tutorial, we will discuss how to get this web page onto the Web Server so that anyone with a web browser can access it.
Before we move on to the next tutorial we want to discuss a tag called <a>.
The <a> tag, also known as the “anchor” tag, is used to create hyperlinks in an HTML document. Hyperlinks allow users to navigate to other web pages or different parts of the same web page, by clicking on text or images.
The <a> tag requires a “href” attribute, which is used to specify the URL of the page or resource that the link should navigate to. For example:
<a href=”https://www.enablegeek.com/”>This is a link</a>
When the text “This is a link” is clicked, the user will be taken to the website “https://www.enablegeek.com/”.
People often confuse a element with a tag. An element is the opening tag, plus the content, plus the closing tag.
ELEMENT = <OPENING-TAG> CONTENT </CLOSING TAG>
Content can be another element or text or whatever.
