Scribd
Upload
80 views43 pages

Unit 4 ICSE Imp Topics

Icse imp topics for btech

Uploaded by

haeirtelivision
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
80 views43 pages

Unit 4 ICSE Imp Topics

Icse imp topics for btech

Uploaded by

haeirtelivision
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 43

Unit-IV Introduction to HTML: HTML Documents, SGML, Basic structure

of an HTML document, Text Elements, Tag Elements, Special Character


elements, Image tags, HTML Table tags and lists, Anchor tag, Name tag,
Hyperlinks – FTP/HTTP/HTTPS, Static and Dynamic Web Pages

Introduction to HTML:

o HTML stands for HyperText Markup Language.


o HTML is used to create web pages and web applications.
o HTML is widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming
language.

Basic structure of an HTML document

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>

What is HTML
HTML is an acronym which stands for Hyper Text Markup
Language which is used for creating web pages and web applications.
Let's see what is meant by Hypertext Markup Language, and Web page.

Web Page: A web page is a document which is commonly written


in HTML and translated by a web browser. A web page can be
identified by entering an URL. A Web page can be of the static or
dynamic type. With the help of HTML only, we can create static
web pages. Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser


about the version of HTML.

<html > :This tag informs the browser that it is an HTML document. Text
between html tag describes the web document. It is a container for all
other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which
contains the metadata(information about the document). It must be
closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page
which appears at the top of the browser window. It must be placed inside
the head tag and should close immediately. (Optional)

<body> : Text between body tag describes the body content of the page
that is visible to the end user. This tag contains the main content of the
HTML document.

<h1> : Text between <h1> tag describes the first level heading of the
webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.

Html VERSION:

HTML 1.0: The first version of HTML was 1.0, which was the barebones
version of HTML language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it
was standard language version for website design. HTML 2.0 was able to
support extra features such as form-based file upload, form elements such
as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This
version was capable of creating tables and providing support for extra
options for form elements. It can also support a web page with complex
mathematical equations. It became an official standard for any browser till
January 1997. Today it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is
a very stable version of HTML language. This version is the current official
standard, and it provides added support for stylesheets (CSS) and
scripting ability for various multimedia elements.
HTML5 : HTML5 is the newest version of HyperText Markup language.
The first draft of this version was announced in January 2008. There are
two major organizations one is W3C (World Wide Web Consortium), and
another one is WHATWG( Web Hypertext Application Technology Working
Group) which are involved in the development of HTML 5 version, and still,
it is under development.

Features of HTML
1) It is a very easy and simple language. It can be easily understood
and modified.

2) It is very easy to make an effective presentation with HTML because


it has a lot of formatting tags.

3) It is a markup language, so it provides a flexible way to design web


pages along with the text.

4) It facilitates programmers to add a link on the web pages (by html


anchor tag), so it enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any


platform like Windows, Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to


the web pages which makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags


either in lower-case or upper-case.

HTML text Editors


o An HTML file is a text file, so to create an HTML file we can use any text
editors.
o Text editors are the programs which allow editing in a written text, hence
to create a web page we need to write our code in some text editor.
o There are various types of text editors available which you can directly
download, but for a beginner, the best text editor is Notepad (Windows) or
TextEdit (Mac).
o After learning the basics, you can easily use other professional text editors
which are, Notepad++, Sublime Text, Vim, etc.
o A. HTML code with Notepad. (Recommended for
Beginners)
o Notepad is a simple text editor and suitable for beginners to learn
HTML. It is available in all versions of Windows, from where you
easily access it.
o Step 1: Open Notepad (Windows)
o

o Step 2: Write code in HTML


o

o Step 3: Save the HTML file with .htm or .html extension.


o

o Step 4: Open the HTML page in your web browser.


o To run the HTML page, you need to open the file location, where you
have saved the file and then either double-click on file or click on
open with option
o

Building blocks of HTML


An HTML document consist of its basic building blocks which are:

o Tags: An HTML tag surrounds the content and apply meaning to it. It is
written between < and > brackets.
o Attribute: An attribute in HTML provides extra information about the
element, and it is applied within the start tag. An HTML attribute contains
two fields: name & value.
Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>

o Elements: An HTML element is an individual component of an HTML


file. In an HTML file, everything written within tags are termed as
HTML elements.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of paragraph tag</
p>
10. </body>
11. </html>

Output:

The building blocks


This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

HTML Tags
HTML tags are like keywords which defines that how web browser will
format and display the content. With the help of tags, a web browser can
distinguish between an HTML content and a simple content. HTML tags
contain three main parts: opening tag, content and closing tag. But some
HTML tags are unclosed tags.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)

Syntax
<tag> content </tag>

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>


<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>


Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to -put a line
across the webpage.

Tags in HTML
There are many tags in HTML which facilitate the process of describing
web page to the server. These tags are arranged in a specific manner to
get the desired output. Some of the important tags of HTML are discussed
below -

1. <!Doctype> - It describes the type of document


2. <html> - describes that the document is an html document
3. <title> - describes title of the document
4. <body> - describes the body of the document
5. <h1> to <h6> - describes the headings in html
6. <p> - describes a paragraph
7. <br> - produces a line break of single line
8. <hr> - describes a thematic content change
9. <!--?--> - Describes a comment

Tags in html are useful entities that allow a developer to manipulate the
look and functionalities of a web page. Additionally, some of the tags have
closing tags that include a forward slash, indicating a closing tag.
Examples of the closing tags are body, title, and html. However, some
tags do not have closing tags; examples of such tags are <br>
and <img>. Such elements are often known as empty or void elements in
HTML.

Other useful tags in html are -

1. <b> - It is used to bold the written text.


2. <i> - It is used to make the written text italic.
3. <u> - It is used to underline the content written in the tag.
4. <li> - It is used to form a list in the content.
5. <ol> - It is used to form an ordered list in the content.
6. <ul> - It is used to form an unordered list in the content.
7. <marquee> - Adds scrolling effect to the text or image in the content.

HTML Meta Tags


DOCTYPE, title, link, meta and style

HTML Text Tags


<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>,
<address>, <ins>, <del> and <br>

HTML Formatting Elements


Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

Text Abbreviation tag


This tag is used to abbreviate a text. To abbreviate a text, write text
between <abbr> and </abbr> tag.

Example
<p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is
used to create web pages. </p>

Output:
HTML Link Tags
<a>

HTML Anchor TAG:


The HTML anchor tag defines a hyperlink that links one page to another
page. It can create hyperlink to other web page as well as files, location,
or any URL. The "href" attribute is the most important attribute of the
HTML a tag. and which links to destination page or URL.

href attribute of HTML anchor tag


The href attribute is used to define the address of the file to be linked. In
other words, it points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

1. <a href="second.html">Click for Second Page</a>


Test it Now

Specify a location for Link using target attribute


If we want to open that link to another page then we can use target
attribute of <a> tag. With the help of this link will be open in next page.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. <p>Click on <a href="https://www.javatpoint.com/" targe
t="_blank"> this-link </a>to go on home page of JavaTpoint.</p>
8. </body>
9. </html>

Note:

o The target attribute can only use with href attribute in anchor tag.
o If we will not use target attribute then link will open in same page.

Appearance of HTML anchor tag


An unvisited link is displayed underlined and blue.

A visited link displayed underlined and purple.

An active link is underlined and red.

HTML Image Tag


<img>,

HTML List Tags


<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags


table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags


form, input, textarea, select, option, optgroup, button, label, fieldset and
legend

HTML Scripting Tags


script and noscript

HTML Image TAG:


HTML img tag is used to display image on the web page. HTML img tag
is an empty tag that contains attributes only, closing tags are not used in
HTML image element.

Let's see an example of HTML image.

Attributes of HTML img tag


1) src
It is a necessary attribute that describes the source or path of the image.
It instructs the browser where to look for the image on the server.

The location of image may be on the same directory or another server.


2) alt
The alt attribute defines an alternate text for the image, if it can't be
displayed. The value of the alt attribute describe the image in words. The
alt attribute is considered good for SEO prospective.

3) width
It is an optional attribute which is used to specify the width to display the
image. It is not recommended now. You should apply CSS in place of width
attribute.

4) height
It h3 the height of the image. The HTML height attribute also supports
iframe, image and object elements. It is not recommended now. You
should apply CSS in place of height attribute.

Example:
1. <img src="animal.jpg" height="180" width="300" alt="animal ima
ge">

How to get image from another directory/folder?


To insert an image in your web, that image must be present in your same
folder where you have put the HTML file. But if in some case image is
available in some other directory then you can access the image like this:

1. <img src="E:/images/animal.png" height="180" width="300" al


t="animal image">

Use <img> tag as a link


We can also link an image with other page or we can use an image as a
link. To do this, put <img> tag inside the <a> tag.

Example:
1. <a href="https://www.javatpoint.com/what-is-robotics"><img sr
c="robot.jpg" height="100" width="100"></a>
HTML Lists Tag:
HTML Lists are used to specify lists of information. All lists may contain
one or more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)


2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

HTML Ordered List or Numbered List


In the ordered HTML lists, all the list items are marked with numbers by
default. It is known as numbered list also. The ordered list starts with
<ol> tag and the list items start with <li> tag.

1. <ol>
2. <li>sql</li>
3. <li>MongoDB</li>
4. <li>IBMdb2</li>
5. <li>Oracle</li>
6. </ol>

HTML Ordered List or Numbered List displays elements in numbered


format. The HTML ol tag is used for ordered list. We can use ordered list to
represent items either in numerical order format or alphabetical order
format, or any format where an order is emphasized. There can be
different types of numbered list:

o Numeric Number (1, 2, 3)


o Capital Roman Number (I II III)
o Small Romal Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)

ol type="I"
Let's see the example to display list in roman number uppercase.

1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

I. HTML
II. Java
III. JavaScript
IV. SQL

ol type="i"
Let's see the example to display list in roman number lowercase.

1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

i. HTML
ii. Java
iii. JavaScript
iv. SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

A. HTML
B. Java
C. JavaScript
D. SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.

1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

a. HTML
b. Java
c. JavaScript
d. SQL

start attribute
The start attribute is used with ol tag to specify from where to start the
list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with


"E".

<ol type="a" start="5"> : It will show lower case alphabets starting


with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting
with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting
with "v".

1. <ol type="i" start="5">


2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

v. HTML
vi. Java
vii. JavaScript
viii. SQL

reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5
version. If you use the reversed attribute with

tag then it will numbered the list in descending order (7, 6, 5, 4......1).

Example:
1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

HTML Unordered List | HTML Bulleted List


HTML Unordered List or Bulleted List displays elements in bulleted
format . We can use unordered list where we do not need to display items
in any particular order. The HTML ul tag is used for the unordered list.
There can be 4 types of bulleted list:

o disc
o circle
o square
o none

To represent different ordered lists, there are 4 types of attributes in <ul>


tag.
Type Description

Type "disc" This is the default style. In this style, the list items are marked with bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

HTML Unordered List Example


1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java
o JavaScript
o SQL

ul type="circle"
1. <ul type="circle">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

o HTML
o Java
o JavaScript
o SQL

ul type="square"
1. <ul type="square">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

 HTML
 Java
 JavaScript
 SQL

ul type="none"
1. <ul type="none">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now
Output:

o HTML
o Java
o JavaScript
o SQL

HTML Description List | HTML Definition


List
HTML Description List or Definition List displays elements in definition
form like in dictionary. The <dl>, <dt> and <dd> tags are used to define
description list.

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.


2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).

1. <dl>
2. <dt>HTML</dt>
3. <dd>is a markup language</dd>
4. <dt>Java</dt>
5. <dd>is a programming language and platform</dd>
6. <dt>JavaScript</dt>
7. <dd>is a scripting language</dd>
8. <dt>SQL</dt>
9. <dd>is a query language</dd>
10.</dl>
Test it Now

Output:

HTML

is a markup language

Java

is a programming language and platform


JavaScript

is a scripting language

SQL

is a query language

HTML Table
HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.

We can create a table to display data in tabular form, using <table>


element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is
recommended to use div tag over table to manage the layout of the
page .

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

HTML Table Example


Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

HTML Table with Border


There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML


2. By border property in CSS

1) HTML Border attribute


You can use border attribute of table tag in HTML to specify border. But it
is not recommended now.

1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

HTML Table with cell padding


You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML


2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is


recommended to use CSS. So let's see the code of CSS.

HTML Table width:


We can specify the HTML table width using the CSS width property. It
can be specify in pixels or percentage.

HTML Table with colspan


If you want to make a cell span more than one column, you can use the
colspan attribute.

It will divide one cell/row into multiple columns, and the number of
columns depend on the value of colspan attribute.

Let's see the example that span two columns.

1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>

HTML Table with rowspan


If you want to make a cell span more than one row, you can use the
rowspan attribute.

It will divide a cell into multiple rows. The number of divided rows will
depend on rowspan values.

Let's see the example that span two rows.

1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</
td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>

HTML table with caption


HTML caption is diplayed above the table. It must be used after table tag
only.
1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>

HTML Form
An HTML form is a section of a document which contains controls such as
text fields, password fields, checkboxes, radio buttons, submit button,
menus etc.

An HTML form facilitates the user to enter data that is to be sent to the
server for processing such as name, email address, password, phone
number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site
visitor.

For example: If a user want to purchase some items on internet, he/she


must fill the form such as shipping address and credit/debit card details so
that item can be sent to the given address.

HTML Form Tags


Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.


<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML <form> element


The HTML <form> element provide a document section to take input from
user. It provides various interactive controls for submitting information to
web server such as text field, text area, password field, etc.

Note: The <form> element does not itself create a form but it is container to
contain all required form elements, such as <input>, <label>, etc.

Syntax:

1. <form>
2. //Form elements
3. </form>

HTML <input> element


The HTML <input> element is fundamental form element. It is used to
create form fields, to take input from user. We can apply different input
filed to gather different information form user. Following is the example to
show the simple text input.

Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>

Output:

HTML TextField Control


The type="text" attribute of input tag creates textfield control also known
as single line textfield control. The name attribute is optional, but it is
required for the server side component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Output:
Note: If you will omit 'name' attribute then the text filed input will not be submitted
to server.

HTML <textarea> tag in form


The <textarea> tag in HTML is used to insert multiple-line text in a form.
The size of <textarea> can be specify either using "rows" or "cols"
attribute or by CSS.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12.</html>

Output:
HTML Password Field Control
The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password
"/> <br/>
4. </form>

Output:

HTML 5 Email Field Control


The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

It will display in browser like below:


Note: If we will not enter the correct email, it will display error like:

Radio Button Control


The radio button is used to select one option from multiple options. It is
used for selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be
selected at a time.

Using radio buttons for multiple options, you can only choose a single
option at a time.

1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="
male"/>Male
4. <input type="radio" id="gender" name="gender" value="femal
e"/>Female <br/>
5. </form>
Checkbox Control
The checkbox control is used to check multiple options from given
checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" valu
e="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" val
ue="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" val
ue="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>

Output:
Submit button control
HTML <input type="submit"> are used to add a submit button on web
page. When user clicks on submit button, then form get submit to the
server.

Syntax:

1. <input type="submit" value="submit">

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web


page.

The name attribute can be omit here.

Example:

1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>

Output:
HTML Form Example
Following is the example for a simple form of registration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/
>Male <br>
21. <input type="radio" id="gender" name="gender" value
="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others"/
>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
Test it Now

Output:

Static and Dynamic Web Pages

Website is a collection of related web pages that may contain text,


images, audio and video. The first page of a website is called home page.
Each website has specific internet address (URL) that you need to enter in
your browser to access a website.
Website is hosted on one or more servers and can be accessed by visiting
its homepage using a computer network. A website is managed by its
owner that can be an individual, company or an organization.

A website can be of two types:

o Static Website
o Dynamic Website

Static website
Static website is the basic type of website that is easy to create. You don't
need the knowledge of web programming and database design to create a
static website. Its web pages are coded in HTML.

The codes are fixed for each page so the information contained in the
page does not change and it looks like a printed page.

Dynamic website
Dynamic website is a collection of dynamic web pages whose content
changes dynamically. It accesses content from a database or Content
Management System (CMS). Therefore, when you alter or update the
content of the database, the content of the website is also altered or
updated.

Dynamic website uses client-side scripting or server-side scripting, or both


to generate dynamic content.

Client side scripting generates content at the client computer on the basis
of user input. The web browser downloads the web page from the server
and processes the code within the page to render information to the user.
In server side scripting, the software runs on the server and processing is
completed in the server then plain pages are sent to the user.

Static Website Dynamic Website

Prebuilt content is same every time the Content is generated quickly and chan
page is loaded. regularly.

It uses the HTML code for developing a It uses the server side languages s
website. as PHP,SERVLET, JSP, and ASP.NET etc.
developing a website.

It sends exactly the same response for It may generate different HTML for each of
every request. request.

The content is only changed when someone The page contains "server-side" code which all
publishes and updates the file (sends it to the server to generate the unique content w
the web server). the page is loaded.

Flexibility is the main advantage of static Content Management System (CMS) is the m
website. advantage of dynamic website.

Special Character elements:


special characters are typically those that can't be easily typed into a
keyboard or may cause display issues if typed or pasted into a web
page.

If you plan to use any of the special characters on this page, you should
use either the HTML entity name or the HTML entity number. This will
ensure that it displays correctly in most/all browsers.

For example, if you want to display a copyright symbol "©", you should
use either &#169; or &copy; in your code.

HTML Reserved Characters


The following special characters are reserved in HTML. That is because
these are the characters that make up the HTML language. If you use
one of these characters in an article, the browser will try to interpret it
as HTML. Therefore, you should use the entity name or entity number
when you want to output any of these reserved characters.

Character Entity Number Entity Name Description


" &#34; &quot; quotation mark
' &#39; &apos; apostrophe
& &#38; &amp; ampersand
< &#60; &lt; less-than
> &#62; &gt; greater-than

SGML

SGML stands for Standard Generalized Markup Language. It


can be defined as the standard for defining generalized markup
language for documents.
It was developed and designed by the International
Organization for Standards i.e ISO.
HTML was theoretically an example of an SGML-based language
until HTML 5, which browsers cannot parse as SGML for
compatibility reasons. The SGML is extended from GML and later on
it is extended to HTML and XML.
The extension of SGML files is:
.sgml
Characteristics
 The SGML Declarations.
 The Prologue, containing a DOCTYPE declaration with the
various markup declarations that together make a DTD i.e
Document Type Definition.
 The instance itself, containing one top-most element and
its contents
Components of an SGML Document :
There are mainly three components of SGML document. They are –
1. SGML Declaration
2. Prolog
3. Document instance.
Advantages
 It has the capability to encode the full structure of the
document and can support any media type.
 It is of much more use than HTML which provides
capabilities to code visual representation and not to
structure the real piece of information.
 Separates content from appearance.
 SGML files encoding is allowed for more complex
formatting as compared to HTML.
 The Stylesheets present in SGML make the content to use
for different purposes.
 Extremely flexible.
 Well supported with many tools available because of ISO
standard.
Disadvantages
 It may be typical to code software in SGML.
 Tools that are used in SGML are expensive.
 It may not be used widely.
 Special software is required to run or to allow the document
to display.
 Creating DTD’s requires exacting software engineering.

Example 1: In this example, we will write code in SGML


 SGML

<EMAIL>
<SENDER>
<PERSON>
<FIRSTNAME>GEEKS FOR GEEKS</FIRSTNAME>
</PERSON>
</SENDER>
<BODY>
<p>A Computer Science Portal For Geeks</p>
</BODY>
</EMAIL>

Output:

simple Paragraph

Example 2: In this example, we will see how to write code in SGML


and its element.
 SGML

<EMAIL>
<RECEIVER>
<PERSON>
<FIRSTNAME>Krishna</FIRSTNAME>
</PERSON>
</RECEIVER>
<BODY>
<p>It is a name of the person.</p>

</BODY>
</EMAIL>

Output:

Difference between HTML and HTML5


HTML5 is more complete and easier than HTML4, it has lots of new tags
like <header>, <footer>, <navy>, <Audio>, <video>, <main> etc.
It also supports graphics. In the following image, we have described all the
essential terms related to HTML and HTML5.

HTML is referred to as the primary language of the World Wide Web.


HTML has many updates over time, and the latest HTML version
is HTML5. There are some differences between the two versions:

o HTML5 supports both audio and video while none of them were part of
o HTML cannot allow JavaScript to run within the web browser,
while HTML5 provides full support for running JavaScript.
o In HTML5, inline mathML and SVG can be used in a text, while in HTML it
is not possible.
o HTML5 supports new types of form controls, such as date and time,
email, number, category, title, Url, search, etc.
o Many elements have been introduced in HTML5. Some of the most
important are time, audio, description, embed, fig, shape, footer,
article, canvas, navy, output, section, source, track, video, etc.

Difference between Html and Html5

Features Html Html5

definition A hypertext markup language (HTML) is the HTML5 is a new version of H


primary language for developing web pages. with new functionalities w
markup language with Inte
technologies.

Multimedia Language in HTML does not have support for HTML5 supports both video
support video and audio. audio.

Storage The HTML browser uses cache memory as HTML5 has the storage opt
temporary storage. like:application cache, S
database, and web storage.

Browser HTML is compatible with almost all browsers In HTML5, we have many
compatibilit because it has been present for a long time, tags, elements, and some t
y and the browser made modifications to that h
support all the features. been removed/modified, so o
some browsers are f
compatible with HTML5.

Graphics In HTML, vector graphics are possible with In HTML5, vector graphics
support tools LikeSilver light, Adobe Flash, supported by default.
VML, etc.

Threading In HTML, the browser interface and JavaScript The HTML5 has the JavaSc
running in the same thread. Web Worker API, which allows
browser interface to run
multiple threads.

Storage Uses cookies to store data. Uses local storage instead


cookies

Vector and Vector graphics are possible with the help of Vector graphics is an integral
Graphics technologies like VML, Silverlight, of HTML5, SVG and canvas.
Flash,etc.

Shapes It is not possible to create shapes like circles, We can draw shapes like circ
rectangles, triangles. rectangles, triangles.

Doc type Doctype declaration in html is too long The DOCTYPE declaration in ht
<! DOCTYPE HTML PUBLIC "- // W3C // DTD is very simple "<! DOCT
HTML 4.01 // EN" html>
"http://www.w3.org/TR/html4/strict.dtd">

Character Character encoding in HTML is too long. Character encoding declaratio


Encoding <! DOCTYPE HTML PUBLIC "- // W3C // DTD simple <meta charset = "UTF-
HTML 4.0 Transitional // EN">

Multimedia Audio and video are not the part of HTML4. Audio and video are essen
support parts of HTML5,like: <Audi
<Video>.

Vector In HTML4, vector graphics are possible with Vector graphics are an inte
Graphics the help of techniques like VML, Silver light part of HTML5, S
and Flash. and canvas.

Html5 uses cookies. It supplies local storage in p


of cookies.

Shapes It is not possible to draw shapes like circles, Using html5, you can draw sha
rectangles, triangles. like circles, rectang
triangles.

Browser Works with all older browsers A new browser supports this.
Support

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy