Scribd
Upload
38 views

More About On HTML: The Following Is The Syntax

HTML is a markup language used to structure and present content on the web. It was created by Tim Berners-Lee and supports features like headings, paragraphs, lists, links, images and media. The basic structure of an HTML document involves tags like <html> to open and close the document, <head> for metadata, and <body> to contain the visible page content. HTML offers various tags to structure text, add multimedia, and hyperlink between pages to provide a flexible foundation for building web sites and applications.

Uploaded by

Anwesha Gautam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

More About On HTML: The Following Is The Syntax

HTML is a markup language used to structure and present content on the web. It was created by Tim Berners-Lee and supports features like headings, paragraphs, lists, links, images and media. The basic structure of an HTML document involves tags like <html> to open and close the document, <head> for metadata, and <body> to contain the visible page content. HTML offers various tags to structure text, add multimedia, and hyperlink between pages to provide a flexible foundation for building web sites and applications.

Uploaded by

Anwesha Gautam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML

More About on HTML

Introduction to HTML
HTML language is developed by Tim Berner-Lee at CERN (Consiel European pour la Research
Nuclear) to enable permit the researchers to share their research papers with the help of the
Internet. Generally all the browsers support HTML, but basically it was used by Mosaic
Browser. The HTML 1.0 is the first version of HTML, whereas continuous growth of Web
extended HTML growth in several other ways. World Wide Web Consortium (W3C) is the
organization which did not specify the first version of HTML. This organization maintains the
language and keeps evolving it in proper direction. Latest version of HTML is HTML 5.01
which is in general use and is the sub version of HTML 5.0. The errors which are occurring in
HTML 5.0 have been fixed in this version.
The whole HTML document comes under the <html>tag which is used as a container. The entire
content of the HTML page comes under the opening and closing of the <html>tags. This
<html>tag indicates the browser this is the starting of the document and the closing </html>tag
indicates that it’s the ending of an HTML document.

The following is the syntax:


<html>
……………...
Contents mentioned in the page
……………...
</html>

For the heading of the HTML document, the tag which is used is <head>tag. The information
contains some certain headings regarding documents that come under this. There are only few
tags which are valid under the heading section. These are the following:
<link>tag : Defines reference for the resource.
<base>tag : Defines a base URL for all the links present on a page.
<meta>tag: Defines the Meta- Information such as keyword and descriptions for search engines
and refresh rates about the page.
<script>tag : The HTML page uses the script which is defined by this tag.
<style>tag : Defines the internal style sheet for the HTML page.
The contents of the HTML document describe under the <body>tag. The contents of a web page
whatever they are defined between the opening and closing of the <body>tag, it may be a text,
audio, video and images all conies under this tag.

HTML Lists
To itemize the information in a concise format, the list makes it easy. It is used to present the
elements in an attractive way and very clearly so that the user can read as well as understand it
easily.

You can create three types of lists in HTML:

 Ordered List.
 Unordered List.
 Definition List.

Ordered List
The list of items in which each item of the list has a specific numerical order comes under the
ordered lists. The ordered list is also known as numbered lists. The order number can be
alphabetical or numeric and that can be either a lower case or upper case. By using <ol> tag
ordered list is created. With the <li> tag, the items of list are created.

The following syntax is used for creating an ordered list:


<ol>
<li> item 1</li>
<li> item 2>/li>
</ol>

Unordered List
The list which appears as a list of items and bullets and the items are presented separately comes
under the unordered lists. To create the unordered lists of items the <ul> tag is used and <li> tag
is used to create the elements.

The following is the syntax which is used to create the unordered list:
<ul>
<li> list item 1 </li>
<li> list item 2 </li>
</ul>

Definition List
The lists and explanation of the terms comes under the definition lists.

The tags which are used to create definition list are:


It starts with the definition list <dl> tag.
The <dt> tag is used for the definition list term.
The <dd> tag is used for the definition list definition starts.

The following syntax is used to create a definition list:


<dl>
<dt>this is definition term
<dd>this is definition</dd>
</dt>
</dl>

Images in HTML
HTML’s multimedia features allow you to include images, audio clips, video clips. And other
multimedia elements in the web pages.

Insert Image
You can insert any image in your web page by using <img> tag.

Syntax
<img src =“Image URL” alt = “some_text”>

Example
<Html>
<Head>
<Title> Inserting image in webpage </title>
</head>
<Body>
<img src = “/html/images/computer.png” alt = “Computer Image”>
</body>
</html>

Set Image width /Height


You can set image width and height based on your requirement using width and height attributes.
You can specify width and height of the image in terms of either pixels or percentage of its
actual size.

Example:
<Html>
<Head>
<Title> Set image width/Height ></title>
</head>
<Body>
< img src = “/html/images/computers.jpg”
alt = “Computer Image” height = “150”
Width = “150” /7
</body>
</html>

Set Image Border


By default image will have a border around it, you can specify border thickness in terms of
pixels using border attributes. A thickness of 0 means, no border around the picture.
Example:
<Html>
<Head>
<Title> Set Image Border </title>
</head>
<Body>
<img src = “/html/image/computers.jpg” alt = “Computers image” border = “3”/>
</body>
<Html>

Set Image Alignment


By default image will align at the left side of the page, but you can use align attribute to set it in
the center or right.

Example:
<Html>
<Head>
<Title> Set Image Alignment </title>
<img src = “/html/images/computer.jpg” alt =“Computers
Images” border = “3” align = “right” >
</body>
</html>

Introduction of Links
The page of a website is connected through the links. By clicking on a link, a user navigates to a
new page of a website. You can break a long document into multiple pages which allows you to
navigate from page to page easily, and this can only be done through the links. Basically, links
are having two basic components and these are Targets and Links.

How to Use Anchor Tag


The main element of the hypertext links in HTML is the anchor tag <a>. To connect one
document to another document, it is used to create a hypertext link.

Different Types of Links


There are basically three types of links available in HTML:

 Hypertext Link.
 Bookmark Link.
 Email Link.

Hypertext Link
With the help of hypertext, the hypertext link is created. It may be underlined or coloured. The
links between the web pages that can be either located in the same site or other site is created by
hypertext link.

The following are the types of Hypertext links:

 Internal Hypertext link.


 Remote Hypertext link.
 Local Hypertext Link.

Bookmark Links
To connect one section to another section within the same document or to a specific section
within another document, a bookmark link is used. Basically, it consists of two documents. A
target which acts as an identifier that designates the target of the link and a link where you click.

Email Link
A type of link that is used to create links, which open up an email application, is an email link. A
new message window is opened, when you click on the link. Using <a> tag email link is created.

Example of anchor tag :


<!DOCTYPE html>
<html>
<body>

<p>
<a href="http://koollearning.000webhostapp.com/">Click here
</a>
</p>

</body>
</html>

Example of audio tag :


<html>
<body>

<audio controls>
<source src="audio.mp3" type="audio/ogg">
Your browser does not support the video tag.
</audio>

<a href="video.html">Get Video Code</a>

</body>
</html>
Example of video tag :
<html>
<body>

<video width="320" height="240" controls>


<source src="myvideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<a href="audio.html">Get Audio Code</a>

</body>
</html>
Example of Marquee tag :
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate"


style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>

<a href="marqueealternate.html">Get marqueealternate Code</a>

<h1>Audio and Video Code</h1>


<a href="audio.html">Get Audio Code</a>
<a href="video.html">Get Video Code</a>

You might also like