Unit – 2

Hyper Text Markup Language

 Languages used for Web Development

Web developers use different programming languages depending on what they’re building:

 Some programming languages apply to the front end, or client side. Front-end web development

codes all the interfaces and visuals a user sees—from buttons to graphics, Languages like HTML

and CSS are front-end languages.

 Other programming languages, like Python and Java, are primarily for backend web development.

These so-called “server-side languages” handle communication between the front-end interface

and the databases and servers that support it.

A full-stack developer can code on both the front and back end, a skillset that requires broader language

expertise. Most developers start by learning front-end languages like JavaScript.

1. JavaScript

In 2020, for the eighth year running, JavaScript topped the list of most popular programming languages in

StackOverflow’s Developer Survey. Along with CSS and HTML, JavaScript is one of the three core web

programming languages.

JavaScript is a scripting language. It runs directly from its source code; it doesn’t need to be translated into

machine code before it runs.

JavaScript is also a full-stack language—though it’s most commonly used on the front end. JavaScript

creates interactive web page elements like:

 Clickable buttons

 Images that can zoom in and out

 On-page audio and video

JavaScript codes the front end of some of the world’s most famous websites LinkedIn, Amazon, Facebook,

and more.

Programmers also use JavaScript to create server-side applications using the runtime

environment Node.js. Node.js lets developers write JavaScript programs for operating systems like Linux,

macOS, and Windows.

JavaScript is satisfying to use and relatively quick to learn, thanks to a massive user community and plenty

of documentation. Once you’re familiar with the basics of JavaScript, you can start using libraries and

frameworks that expand what this language can do.

React.js and React Native

React.js and React Native are open-sourced resources for front-end development.

With React.js, you build, arrange, and render reusable components. This makes app development simpler

and more maintainable. React.js also uses a virtual document object model (DOM), which means you can

make changes without writing directly to the main interface.

React Native is a larger framework for developing native mobile applications, though some developers

have used it to build desktop apps. It uses React.js as its main library but adds much more functionality,

mostly by integrating other languages like Java and C++.

React is one of the most popular frameworks for modern web development.

AngularJS

AngularJS is an open-source structural framework for dynamic app construction. It uses HTML as its

template language but extends the available syntax so you can build and scale Rich Internet

Applications (RIAs). An RIA gives web apps more interactivity and visual appeal by integrating elements of

graphical desktop applications.

AngularJS creates single-page applications (SPAs). A SPA loads a single document and updates the

content of that document using JavaScript. This fast-tracks the loading process and improves app

performance.
AngularJS improves the SPA build process by providing:

 Unit testability

 Reusable code components

 Data binding for a more responsive experience

 JavaScript-powered controllers for HTML views

 More functionality with shorter code

As a cross-platform framework, AngularJS works on all major web browsers and can create mobile apps

for Android and iOS.

2. Python

Python is a general-purpose language that’s intuitive to learn and capable of creating highly advanced

programs. In 2021, Python topped the list of most popular programming languages for the first time.

Most famous as the go-to programming language for machine learning, artificial intelligence, and data

science, Python is also one of the best languages for web development. Primarily used on the back end,

Python is an excellent language for beginners. Its syntax is simple and highly readable, even if it’s your first

coding language.

Python is also an object-oriented programming language; it divides your code into self-contained units that

you can transfer between projects to avoid redundant, from-scratch programming.

Most importantly, Python boasts an extensive and growing collection of modules, libraries, and

frameworks—collections of pre-written code that let you scale app and software development quickly.

Django
Django was developed to meet the fast-paced needs of a newsroom, and it shows. This open-source

framework speeds the creation of functioning, scalable web applications, so you can build a functioning app

in a matter of hours.

With Django, you get almost every structural component you might need “out of the box,” letting you build

out the details of your app without wasting time on parts that have already been built. You also get pre-

packaged solutions for common web development tasks, including user authentication and site mapping.

Flask

Like Django, Flask is a Python framework designed to make web application programming easier. It’s a

microframework, so the focus is on simplicity. It’s easier to learn and launch than Django, but you can still

use it to code larger apps.

3. Ruby

Like Python, Ruby is an object-oriented programming language designed for usability. It’s popular among

web developers because it:

 Categorizes code into simple building blocks called classes.

 Uses “garbage collection” to manage and clean memory.

 Encapsulates instructions in blocks, so it’s easier to call on them.

Ruby is the basis for the popular Ruby on Rails framework for web applications. Like Ruby itself, Ruby on

Rails is intuitive for non-programmers to learn. It has a massive user community and plenty of tutorials, plus

dedicated libraries that make coding faster.

Because RoR is so quick to learn, it lets developers build and launch minimum viable products (MVPs)

quickly. This makes it a popular framework for e-commerce brands like Shopify and Spree.

Jekyll
Jekyll is a simple static website generator that is based on Ruby. If you are interested in hosting static web

pages for simple content, such as a blog, Jekyll provides an easy way to combine Markdown, Liquid,

HTML, and CSS to deploy your website.

4. Swift

Swift is an open-source language for application development on Apple platforms. Built for modern app

developers, it’s designed for power and speed as well as safety. It features:

 A streamlined syntax that makes maintenance easier.

 Failsafes that reduce runtime crashes.

 High performance using the most basic possible code.

 Interactive debugging .

Swift is a full-stack language that’s taking over from Apple’s older Objective-C code, but it’s compatible

enough that Objective-C developers can still use it. It’s also a great language for brand-new coders, thanks

to playgrounds and tutorials that let everyone experiment with coding.

5. HTML

HyperText Markup Language (HTML) is the most popular markup language in the world, and it is a must-

learn for front-end web developers. Compared to languages like JavaScript and Python, HTML is relatively

simple.

HTML is a declarative markup language. It defines the elements of a web page through labeling—it does

not process logic, manipulate data, or take inputs and produce outputs like a scripting language would. It is

strictly used for page structuring and templating. Most beginning front-end developers start by learning

HTML, and the format that web pages take when stored on servers.

HTML uses sections called “element blocks” to indicate parts of a website. Within those blocks, HTML adds

tags to specify how different elements should look. For example:

 <img> displays an image.

  <h2> indicates a heading.

 <p> signifies a paragraph.

It’s impossible to code a functioning website without HTML. In fact, if you right-click on any web page (not

on a link) and select View Page Source, you can see the HTML for that site.

6. CSS

Cascading Style Sheets (CSS) works hand-in-hand with HTML. CSS is a styling language—a special kind

of declarative language that describes what HTML code should look like on-screen.

CSS can:

 Position an element somewhere specific on the page.

 Add shading and borders.

 Specify the color and style of a link.

 Change the size, font, or color of the text.

 Alter page background color.

 Animate page elements and sprites.

 And much (much) more...

CSS is slightly more complex than HTML, but it’s still accessible to beginners and especially important

for web design. Once you learn the basics, you can expand your knowledge with extension languages like

SASS and its syntax SCSS.

7. PHP

PHP, short for Hypertext Preprocessor, is a server scripting language. This language creates scripts on

web servers that create customized responses for each user’s request—unlike what you’d get with a

website that looks the same to everyone.

Learning PHP lets you create web pages that have customized user interfaces. One well-known example

is WordPress, which uses PHP to structure and display thousands of different websites to visitors.
 HTML-5
The major points of HTML are given below:

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

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.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and dynamic.
It can turn text into images, tables, links, etc.

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.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of
styling, and which looks in a nice format on a web browser. An HTML document is made of many
HTML tags and each HTML tag contains different content.

 Basic 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.

Syntax : <tag> content </tag>

<!DOCTYPE>

The <!DOCTYPE> declaration represents the document type, and helps

browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading.

Example :

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Headings Are Important

Search engines use the headings to index the structure and content of your web
pages.

Users often skim a page by its headings. It is important to use headings to show
the document structure.

<h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML
page:

Example

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>
 <h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a paragraph<br>with line breaks.</p>

The <br> tag is an empty tag, which means that it has no end tag.

 Formatting Tags
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

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.

Example
<strong>This text is important!</strong>
HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is
typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.

Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed in
italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example
<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will
usually strike a line through deleted text:

Example
<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will
usually underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
 HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:

Example
<p>This is _subscripted text.</p>

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used
for footnotes, like WWW [1]:

Example
<p>This is ^{superscripted} text.</p>

 Adding Images
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web
server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot
in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and
the alt text are shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Tip: A screen reader is a software program that reads the HTML code, and allows the user to "listen"
to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web
page might flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of
images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Notes on external images: External images might be under copyright. If you do not get permission to
use it, you may be in violation of copyright laws. In addition, you cannot control external images; they
can suddenly be removed or changed.

Animated Images
HTML allows animated GIFs:

Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

Example
 <a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:

Example
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

The image will float to the left of the text.</p>

 Lists
HTML Lists
HTML lists allow web developers to group a set of related items in list

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker. It can have one of
the following values:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Nested HTML Lists

Lists can be nested (list inside list):

Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:

Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 Multimedia
The HTML <video> Element
To show a video in HTML, use the <video> element:

Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The HTML <audio> element is used to play an audio file on a web page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Add muted after autoplay to let your audio file start playing automatically

YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

 Upload the video to YouTube

 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the player
 Add any other parameters to the URL (see below)

Example
 <iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

 Inserting Tables
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 .

HTML Table Tags

Tag Description

<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.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each
column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

 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>

 External and Internal Linking

Website is a collection of interconnected web pages. Links creation are an essential part of web
design. Links creation properly utilizes the content and reduce the effort for repetition of content.
Links can be used to interconnect two different web pages or it may be used as HTML hyperlinks
to go to some other URL or we can use a link to navigate in the same web page.

Internal Links in html

An internal link is used in html page to navigate properly in the webpage. If you want to go to any
specific location in the same page by clicking on a link, you can create an internal link in the
webpage. <a> tag is used for link creation in html page.

Syntax:

<a href= “#link1”> MyLink</a>

Here “href” contain the location name where the link will navigate us when we click on “MyLink”.
The location is given a name for reference and the name contain “#” at the time of creating link.

<a name= “Link1”> my link starts here </a>

This is the place where we will reach on click.

Example:

<! DOCTYPE html>

<html>

<head>

<title> Internal link example </title>

</head>
<body>

<p>Welcome to my web-page. This is an example of internal link creation in html web-

page.</p><br>

<a name= “HTML Introduction”> Introduction to Html </a>

<p> Html is hyper text mark-up language.</p><br><br>

<a name= “CSS Introduction”> Introduction to CSS </a>

<p> Cascading Style Sheet is used for styling the web pages</p><br><br>

<a href= “#HTML Introduction”> html</a><br>

<a href= “#CSS Introduction”> css</a>

</body>

</html>

Advantages of good internal link are :

 Internal link improves usability through anchor text.

 Internal linking improves page rank.
 Internal linking boots page views.
 Internal link decreases the bounce rate.
 Internal linking improves the indexing of your site.

External Links in html

An external link is used to interconnect two html webpages. When you want to navigate to some
other page or any other URL by clicking on a link on webpage, external links are created. An
external link can be created by using anchor tag in html web page.

Syntax:

<a href= “Pagename.html or URL”> text to be written on link </a>

Here Pagename.html or URL is the name of the webpage or address where link will navigate on
click.

Example:

“Page1.html”

<! DOCTYPE html>

<html>
<head>

<title> This is Page1 </title>

</head>

<body>

<h1> Page 1</h1>

<br>

<a href= “Page2.html”> Back</a>

</body>

</html>

“Page2.html”

<! DOCTYPE html>

<html>

<head>

<title> External link example</title>

</head>

<body>

<h1> this page creates external links in html webpage</h1>

<br>

<a href= https://msatechnosoft.in> URL external link </a>

<br>

<a href= “Page1.html”> Page1 external link</a>

 </body>

</html>

Advantages of good external linking are :

 External link may helps the readers.

 Good external link helps to improve the authority of your website.
 Linking to outside website will not hurt your page rank .
 External link is just like your giving some extra resources to read that.
 External links help in enhancing credibility.

Difference between external link and internal link :

External link Internal link

It is difficult to control. It is easy, fast and free to control.

It appears within the body text, in content. It appears in website navigation as well as in the content.

It passes SEO authority from other site to your site, It passes SEO authority pages on your site, increasing the
increasing your “domain authority”. “page authority” of specific pages.

It has more value. It has less value.

It connects to your external pages. It connects to your internal pages.

Domain 1 A links to Domain 2 b. Domain 1 A links to B.

It improves the quality of web pages. It helps bots to find other web pages on your site.

It helps in increasing traffic to your website. It also helps in increasing traffic to your website.

 Frames
HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax
<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen
readers to read out what the content of the iframe is.

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
 <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

With CSS, you can also change the size, style and color of the iframe's border:

Example
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

 Forms
The <form> Element
The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.
The <input> Element
The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

All the different input types are covered in this chapter: HTML Input Types.

Text Fields
The <input type="text"> defines a single-line input field for text input.

Example

A form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
This is how the HTML code above will be displayed in a browser:

First name:

Last name:

Note: The form itself is not visible. Also note that the default width of an input field is 20
characters.

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it
toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

 HTML

CSS

JavaScript

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

A form with checkboxes:

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

This is how the HTML code above will be displayed in a browser:

I have a bike

I have a car

I have a boat

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Example

A form with a submit button:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:

First name:
John

Last name:
Doe

Submit

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

This example will not submit the value of the "First name" input field:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>