Lecture 1
Lecture 1
tecnsoltrainings.com
What is HTML?
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.
tecnsoltrainings.com
History of HTML
HTML was created by Sir Tim Berners-Lee in late 1991 but was not
released officially, published in 1995 as HTML 2.0. HTML 1.0 was released
in 1993. Then comes the HTML 2.0, published in 1995, which contains all
the features of HTML 1.0 along with that few additional features for
designing websites utill January 1997. Then comes the HTML 3.0. It
included improved new features of HTML. But these powerful features of
new HTML slowed down the browser in applying further improvements.
Then comes HTML 4.01, which is widely used and was a successful version
of HTML before HTML 5.0, which is currently released and used
worldwide. HTML 5 can be said for an extended version of HTML 4.01,
which was published in the year 2012.
tecnsoltrainings.com
HTML Editors
To write HTML code, we need an HTML editor, and we can do this with the
help of a notepad on our computer.A web page is a text file in which a
hypertext language is written according to HTML grammar. This HTML code
is displayed by the browser converting it to a web page. Programs in which
HTML code is written or modified are called HTML editors. For example
Visual Studio Code, Sublime Text, Dreamweaver, Notepad++ etc.. Following
steps are required to run HTML code into your web browser
Open the Text Editor
Write HTML code
Save the file with the extension .html
Run the HTML page into your browser
tecnsoltrainings.com
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
<tagname>Content goes here...</tagname>
<p>My first paragraph.</p>
Most tags of HTML have two sections: an opening and a closing portion, and
any text is written within that has its effect based on the working of the tag.
HTML tag has both a opening <tagname> and a closing tag </tagname>. The
closing of tags is done by a forward slash (/) at the very start of the tag name.
Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end
tag.
tecnsoltrainings.com
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other
elements). All HTML documents consist of nested HTML elements.
The following example contains six HTML elements (<html>, <head>, <title>, <body>,
<h1> and <p>): <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
tecnsoltrainings.com
Example Explained
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
tecnsoltrainings.com
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
<element_name attribute_name = "value"> content </element_name>
For example, The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:
<img src="img_1.jpg">
The <img> tag should also contain the width and height attributes, which
specifies the width and height of the image (in pixels):
<img src="img_1.jpg" width="500" height="600">
tecnsoltrainings.com