Dear Students Have you ever wondered how content on a website is created by looking at news, magazines, tutorials, online stores or any other different type of website?
HTML Introduction
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
A Simple HTML Document
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>My first paragraph.</p>
</body>
- The <!DOCTYPE html> declaration defines that this document is an HTML5 document
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the HTML page
- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
- The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- The <h1> element defines a large heading
- The <p> element defines a paragraph
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>|
Start tag |
Element content |
End tag |
|
<h1> |
My First Heading |
</h1> |
|
<p> |
My first paragraph. |
</p> |
|
<br> |
none |
none |
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
Web BrowsersThe purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
Note: The content inside the <body> section (the white area above) will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.
<DOCTYPE! html>:
This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive.
<html>:
This is called the HTML root
element. All other elements are contained within it.
<head>:
The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front-end of a webpage. HTML elements used inside the <head> element include:
· <style>
· <title>
· <base>
· <script>
· <meta>
· <link>
<body>:
the body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file using .html or .htm. Once saved as an HTML document, the file can be opened as a webpage in the browser.
NOTE: Basic/built-in text editors are Notepad (Windows) and TextEdit (Macs). Basic text editors are entirely sufficient for when you’re just getting started. As you progress, there are many feature-rich text editors available which allow for greater function and flexibility.
Here’s an example of an HTML webpage:|
|
|
Features of HTML:
· It is easy to learn and easy to use.
· It is platform-independent.
· Images, videos, and audio can be added to a web page.
· Hypertext can be added to text.
· It is a markup language.
Why learn HTML?
· It is a simple markup language. Its implementation is easy.
· It is used to create a website.
· Helps in developing fundamentals about web programming.
· Boost professional career.
Advantages:
· HTML is used to build websites.
· It is supported by all browsers.
· It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
· HTML can only create static webpages. For dynamic webpages, other languages have to be used.
· A large amount of code has to be written to create a simple web page.
·
The
security feature is not good.
