01-HTML Introduction

What is HTML?

HTML is a markup language for describing web documents (web pages).
  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag describes different document content

A Small HTML Document

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The text between <html> and </html> describes an HTML document
  • The text between <head> and </head> provides information about the document
  • The text between <title> and </title> provides a title for the document
  • The text between <body> and </body> describes the visible page content
  • The text between <h1> and </h1> describes a heading
  • The text between <p> and </p> describes a paragraph
Using this description, a web browser will display a document with a heading and a paragraph.

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content goes here...</tagname>
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a forward slash inserted before the tag name
The start tag is also called the opening tag, and the end tag the closing tag.

Web Browsers

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
The 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:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Only the <body> section (the white area above) is displayed in a browser.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps the browser to display a web page correctly.
It must only appear once, at the top of the page (before any HTML tags).
There are different document types. To display a web page correctly, the browser must know both type and version.
The doctype declaration is not case sensitive. All cases are acceptable:
<!DOCTYPE html>

<!doctype HTML>

Common <!DOCTYPE> Declarations

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
All tutorials and examples at W3Schools use HTML5.

HTML Versions

Since the early days of the web, there have been many versions of HTML:
VersionYear
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

Comments

Post a Comment

Popular posts from this blog

Mark your Calender Google Pixel 2 is coming on Oct.4

Image
Google Pixel 2 Gets FCC-Certified With Android O, Snapdragon 835 And 'Active Edge' The Google Pixel 2 edged closer to its launch after being certified by the Federal Communications Commission (FCC), and according to the regulatory filing, the device will come with Android O and Snapdragon 835, features long expected. The device, expected to be launched in the next two months, will also have a new ‘Active Edge’ feature, similar to Edge Sense on the HTC U11. A screenshot of the device in the filing displays the feature, which is expected to be a gesture-based trigger for the voice assistant. Pressing the edges of the display is expected to trigger the Google Assistant. On the U11, the gesture can also be used to open apps or even take photos. According to  PhoneArena , the device will also have different navigation buttons, with the home button doubling as the trigger for the assistant. The device is also expected to have a 64GB base variant since the leaked scr
Read more

10 Best Google Chrome Shortcuts You Should Use in 2019

Image
Amazon.in Widgets 1. Manage Chrome Tabs and Windows There are times when we hurriedly close an important tab and have no idea how to get it back. Well,  you can use Ctrl+Shift+T to bring back the tab in the original state . Similarly, there are shortcuts to efficiently manage tabs and windows without any hassle. We have compiled basic shortcuts below so that you can use on Chrome without losing any time. Open new tab: Ctrl+T Open new window: Ctrl+N Close current tab: Ctrl+W Reopen Closed Tab: Ctrl+Shift+T Close current window: Ctrl+Shift+W Open Incognito Window: Ctrl+Shift+N Switch chrome tabs: Ctrl+Tab Switch chrome tabs on Mac: Cmd+Option+Right or Left arrow Open link in a new tab: Ctrl+Click Open link in a new window: Shift+Click 2. Webpage Shortcuts You hit refresh button but nothing changes? Well, it’s because the webpage is loading the cached content.  You can use Ctrl+Shift+R which refreshes the webpage from scratch  discarding the cached content. There a
Read more

You Can Now Schedule Emails in Gmail

Image
The feature works pretty much how you’d expect it to work. You can write your email whenever you want, and schedule it to be sent at a later date and time of your choosing. This can come in very handy for people looking to send birthday greetings on time, but who keep forgetting. Anyway, here’s how to use the feature on the Gmail app on Android, and on the Gmail web app. How to Schedule Emails in Gmail on Mobile To schedule an email on your smartphone, just follow the steps below. Launch the Gmail app, and compose a new email. Once you’re done with that, tap on the three dot menu on the top right, and tap on ‘ Schedule Send .’ You will now be able to choose between the preset times, or  pick a date and time  of your own choosing by tapping on the last icon. Once you’re done, just tap on ‘ Schedule send ‘ and that’s it. Gmail will schedule your email and it’ll be sent automatically at the time of your choosing. If you want to take a look at your scheduled emails,
Read more