Scribd
Upload
16 views

new itr

The document provides a comprehensive overview of HTML, including its definition, basic structure, characteristics, advantages, and disadvantages. It also covers HTML editors, comments, layouts, elements, links, images, and introduces CSS and JavaScript, detailing their syntax and functionalities. Additionally, it discusses Bootstrap and concludes with references, making it a valuable resource for understanding web development fundamentals.

Uploaded by

atharvmiraje39
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
16 views

new itr

The document provides a comprehensive overview of HTML, including its definition, basic structure, characteristics, advantages, and disadvantages. It also covers HTML editors, comments, layouts, elements, links, images, and introduces CSS and JavaScript, detailing their syntax and functionalities. Additionally, it discusses Bootstrap and concludes with references, making it a valuable resource for understanding web development fundamentals.

Uploaded by

atharvmiraje39
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/ 52

INDEX

Sr No. Contents Page


No.

1 What is html 1-1

2 Html basic format page structure 2-4

3 Characteristics of html 5-6

4 Advantages Disadvantages of html 6-6

5 Html Editors 7-7

6 Html Comments 8-8

7 Html Layouts 9-11

8 Html Elements

9 Html Links

10 Html Images

11 Html Styles-CSS

12 Internal CSS
13 External CSS

14 Introduction of javascript

15 Basics of javascript

16 Operator function

17 lopping statement

18 function

19 Bootstrap

20 Features of Bootstrap
21 Advantages &
Disadvantages
of Bootstrap
22 Conclusion

23 Reference
 What is HTML?

HTML stands for Hypertext Markup Language. It is used to design web pages
using the markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages and markup language
defines the text document within the tag that define the structure of web pages.

What is HTML used for?


HTML is used to create the structure of web pages that are displayed on the
World Wide Web (www). It contains Tags and Attributes that are used to design
the web pages. Also, we can link multiple pages using Hyperlinks.
 HTML Basic Format Page Structure

The basic structure of an HTML page is laid out below. It contains


the essential building-block elements (i.e. doctype declaration,
HTML, head, title, and body elements) upon which all web pages
are created.

• <DOCTYPE! html> – A doctype or document type


declaration is an instruction that tells the web browser
about the markup language in which the current page is
written. It is not an element or tag. The doctype
declaration is not casesensitive.

• <html> – This tag is used to define the root element of


HTML document. This tag tells the browser that it is an
HTML document. It is the second outer container element
that contains all other elements within it.
• <head> – This tag is used to define the head portion of
the HTML document that contains information related to the
document. Elements within the head tag are not visible on
the frontend of a webpage.

•<body>-The body tag is used to enclose all the visible


content of a webpage. In other words, the body content is
what the browser will show on the front end.
Example: This is the basic example of HTML that display the heading
and paragraph content
<!DOCTYPE html>

<html>

<!-- Head Section content -->

<head>

<!-- Page title -->

<title>Basic Web Page</title> </head>

<!-- Body Section content -->

<body>

Output :

WELCOME TO D Y PATIL

College of Engineering and Polytechnic


 Characteristics of HTML:

 Easy to understand: It is the most straightforward language


you can say, very easy to grasp this language and easy to
develop.
 Flexibility: This language is so much flexible that you can
create whatever you want, a flexibleway to designwebpages
along withthetext.
 Linkable: You can make linkable text like users can connect
from one page to anotherpageorwebsitethroughthese
characteristics.
 Limitless features: You can add videos, GIFs, pictures, or
sound anything you want thatwill
makethewebsitemoreattractiveand understandable.
 Support: You can use this language to display the documents on
any platform like Windows, Linux, or Mac.
 Advantages of HTML:

 HTML is easy to learn, easy to apply and it’s totally free you
will just need a text editor and a browser.
 HTML is supported by all the browsers and it is the most friendly
search engine.
 HTML can easily integrate with other languages and is easy to
develop.
 It is the basic of all programming languages and the lightest
language ever.
 In HTML, the display changes frequently depending on the
window size or the device size making it comfortable to read
by the user.

 Disadvantages of HTML:

 HTML can be used to create only static Web-page, it can


not create dynamic web- page.
 There is a lack of security in HTML.
 Creating a simple Web-page required so many tags.
 HTML language is not centralised i.e. all the web pages that are
connected, you havetodesign them separately elseneed to use CSS.
 HTML Editors:

HTML text editors are used to create and modify web pages. HTML
codes can be written in any text editors including the notepad. One
just needs to write HTML in any text editor and save the file with
an extension “.html” or “.html”. Some of the popular HTML
text editors are given below:

 VS CODE
 Bracket
 Notepad
 Notepad++
 Sublime Text 3
 Atom
 HTML Comments:

• The comment tag ( < ! - - comment - - > ) is used to insert comments in


the HTML code. It is a good practice of coding, so that coder and the
reader can get help to understand the code. It is useful to understand
steps of the complex code. The comment tag is helpful while the
debugging of codes.

• It is a simple piece of code that is wiped off by web browser

• It helps the coder and reader to understand the piece of code.


HTML Layout

Page layout is the part of graphic design that deals with the
arrangement of visual elements on a page. Page layout is used to
make the web pages look better. It establishes the overall
appearance, relative importance, and relationships between the
graphic elements to achieve a smooth flow of information and eye
movement for maximum effectiveness or impact.

 div have a special class/id associated with them.

<div class = "header">....</div>

<div class = "section">....</section>

 Header: The part of the front end which is used at the top of the
page. <header> tag is used to add a header section on web
pages.s Syntax:

<header>

<h1>-
<h2> - - - -</h1>
---------

</
header>

 Navigation bar: The navigation bar is the same as the menu list.
It is used to display the content information using hyperlinks.
<nav> tag is used to add the nav section(nav elements) in web
pages.

Syntax:
<nav>

<ul>

<li>......</li>

<li>......</li>
• Footer: The footer section contains the contact information and other
query related to web pages. The footer section is always put on the bottom
of the web pages. The <footer> tag sets the footer on web pages.

Syntax:
<footer> .....

</footer>
 HTML ELEMENTS

In this article, we will know the HTML Elements, along with


understanding the various available elements & their syntax
through the examples. An HTML element is the collection of start
and end tags with the content inserted in between them.

Syntax:
<tagname > Contents...
</tagname>

Supported Tags: HTML Elements supports almost all HTML Tags.


HTML Element: The HTML element consist of 3 parts.

i)Opening tag: It is used to tell the browser


where the content material starts.

ii)Closing tag: It is used to tell the browser


where the content material ends.

iii)Content: It is the actual content material


inside the opening and closing tag.
 HTML Links

Links are found in nearly all web pages. Links allow users to click
their way from page to page.

HTML Links

- Hyperlinks

HTML links

are

hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a
little hand

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link
text</a>

The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.
 HTML IMAGES

Images can improve the design and the appearance of a

web page. Example:

<img src=”HTML.png” alt=”What Is HTML” >


Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page,


within a <style> element.

The following example sets the text color of ALL the <h1> elements (on
that page) to blue, and the text color of ALL the <p> elements to red.
In addition, the page will be displayed with a "powderblue"
background color:

Example:
<!DOCTYPE html>

<html> <head> <style> body {background-color:aliceblue;} h1 {color: blue;} p

{color: red;}

</style>

</head>

<body>
External CSS

An external style sheet is used to define the style for


many HTML pages

To use an any external sheet , add a link to it in the


<head> section of each HTML page.

Example:
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="styles.css">

</head>

<body>

The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

body { background-
color: powderblue; } h1

color:
blue;

} p

CSS Colors, Fonts and Sizes


Here, we will demonstrate some commonly used CSS properties. You will
learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-size property defines the text size to be used.

<!DOCTYPE html>

<html>

<head> <style>

h1 { color:
blue; }font-family:
p { color
red; :
fontfamily:
courier;

160%;

</
<h1>This is a
heading</h1>

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

Example:
Javascript

 Introduction:

JavaScript is a dynamic computer programming language. It is


lightweight and most commonly used as a part of web pages, whose
implementations allow client side script to interact with the user and
make dynamic pages. It is an interpreted programming language
with object-oriented capabilities.
JavaScript was first known as Live Script, but Netscape changed its
name to JavaScript, possibly because of the excitement being
generated by Java. JavaScript made its first appearance in Netscape
2.0 in 1995 with the name Live Script. The general- purpose core of
the language has been embedded in Netscape, Internet Explorer, and
other web browsers.
• Basic of javascript:

Advantages of JavaScript:

• Less server interaction − You can validate user input before


sending the page off to the server. This saves server traffic,
which means less load on yourserver.

• Immediate feedback to the visitors − They don't have to wait


for a page reload to see if they have forgotten to enter
something

• Increased interactivity − You can create interfaces that react


when the user hovers over them with a mouse or activates
them via the keyboard.

• Richer interfaces − You can use JavaScript to include such


items as drag and drop components and sliders to give a Rich
Interface to your site visitors.
Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language. It


lacks the following important features −

• Client-side JavaScript does not allow the reading or writing


of files. This has been kept for security reason.
JavaScript – Syntax

JavaScript can be implemented using JavaScript statements that are placed within the

<script>... </script> HTML tags in a webpage.

You can place the<script> tags, containing your JavaScript, anywhere


within your web page, but it is normally recommended that you should
keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text
between these tags as a script. A simple syntax of your JavaScript will
appear as follows.
<script…>
JAVASCRIPT
CODE
</script>
Your First JavaScript Code

<html>

<body>

<script language = "javascript" type = "text/javascript">

<!--

document.write("Hello World!")

//-->

</script>
This code will produce the following result − Hello World!
• Semicolons are Optional
Simple statements in JavaScript are generally followed by a
semicolon character, just as they are in C, C++, and Java.
JavaScript, however, allows you to omit this semicolon if each of
your statements are placed on a separate line. For example, the
following code could be written without semicolons.
• Case Sensitivity
JavaScript is a case-sensitive language. This means that the
language keywords, variables, function names, and any other
identifiers must always be typed with a consistent capitalization of
letters.
So the identifiers Time and TIME will convey different meanings in
JavaScript.

NOTE − Care should be taken while writing variable and function


names in JavaScript.

• JavaScript Variables
Like many other programming languages, JavaScript has variables.
Variables can be thought of as named containers. You can place
data into these containers and then refer to the data simply by
naming the container.
Before you use a variable in a JavaScript program, you must declare it.
Variables are declared with the var keyword as follows.
<script type = "text/javascript">

<!-- var

money; var name;

//-->
• Operator:

What is an Operator?
Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are
called operands and ‘+’ is called the operator. JavaScript supports the following
types of operators.

• Arithmetic Operators
• Comparison Operators
• Logical (or Relational) Operators
• Assingment Operators
• Conditional(or Ternary)Operator
• if statement
The if statement is the fundamental control statement that allows
JavaScript to make decisions and execute statements conditionally.
Syntax
The syntax for a basic if statement is as follows − if (expression)

Statement(s) to be executed if expression is true

} if...else statement

The 'if...else' statement is the next form of control statement that allows
JavaScript to execute statements in a more controlled way.

• The while Loop


The most basic loop in JavaScript is the while loop which would be
discussed in this chapter. The purpose of a while loop is to execute
a statement or code block repeatedly as long as an expression is
true. Once the expression becomes false, the loop terminates. Flow
Chart
The flow chart of while loop looks as follows −
Syntax:

The syntax of while loop in JavaScript is as follows –

while (expression)

Statement(s) to be executed if expression is true

• The do...while Loop


The do...while loop is similar to the while loop except that the condition check
happens at the end of the loop. This means that the loop will always be
executed at least once, even if the condition is false.
Flow Chart

The flow chart of do while loop looks as follows –


Syntax:

The syntax for do-while loop in JavaScript is as follows –

do

Statement(s) to be executed; } while (expression); Note −


Don’t miss the semicolon used at the end of the do...while
loop.

• For Loop

The 'for' loop is the most compact form of looping. It includes the
following three important parts –

1) The loop initialization where we initialize our counter to a starting


value. The initialization statement is executed before the loop begins.

2) The test statement which will test if a given condition is true or not. If
the condition is true, then the code given inside the loop will be executed,
otherwise the control will come out of the loop

3)The flow chart of a for loop in JavaScript would be as follows


Syntax:

The syntax of for loop is JavaScript


is as follows –
for
(initialization; test condition;
iteration statement)
{
Statement(s) to be executed if test
condition is true
}
• Functions:

A function is a group of reusable code which can be


called anywhere in your program. This eliminates the need of writing the same
code again and again. It helps programmers in writing modular codes. Functions
allow a programmer to divide a big program into a number of small and
manageable functions. Like any other advanced programming language,
JavaScript also supports all the features necessary to write modular code
using functions. You must have seen functions like alert() and write() in the
earlier chapters. We were using these functions again and again, but they
had been written in core JavaScript only once.
JavaScript allows us to write our own functions as well. This section
explains how to write your own functions in JavaScript.

• Function Definition:

Before we use a function, we need to define it. The most common


way to define a function in JavaScript is by using the function keyword,
followed by a unique function name, a list of parameters (that might be
empty), and a statement block surrounded by curly braces.
Syntax
The basic syntax is shown here.

<script type = "text/javascript">

<!--

function functionname(parameter-list) { statements

//-->

</script>
 Bootstrap

What is Bootstrap?

Bootstrap is a free and open-source toolkit designed for building


responsive websites and web applications. It is one of the most popular CSS
frameworks. Bootstrap help developers to create mobile-first, adaptive web
designs that work seamlessly across all devices and screen sizes. Originally
developed by Mark Otto and Jacob Thornton at Twitter

. Bootstrap has evolved into a widely-used framework, ensuring


compatibility with major browsers like Internet Explorer, Firefox, and Chrome.

Why Use Bootstrap?

Bootstrap simplifies web development by offering responsive,


mobile-first framework with pre-designed components. It streamlines the
creation of modern, professional websites with its easy-to-use grid system
and built-in JavaScript plugins. With extensive browser compatibility and a
strong community, Bootstrap accelerates development time, ensuring
consistent and visually appealing designs across all devices.
Steps to Start Learning Bootstrap

Bootstrap Layout:

Bootstrap layout is built on a flexible grid layout that adjusts seamlessly to


different screen sizes. It uses a 12-column grid system to create responsive
designs. You can control the width and positioning of columns by combining
classes for different screen sizes (e.g., .col-md-6 for medium devices). The
layout also includes containers and rows to structure your content effectively.

 Breakpoints
 Containers
 Grid
 Columns
 Gutters
 Utilities
 Z-index

Bootstrap Content

Bootstrap provides a range of classes to enhance and structure content. It


includes typography classes for headings, paragraphs, and text alignment, as
well as helper classes for spacing and text colors. Bootstrap’s content classes
make it easy to format text, create responsive images, and manage layout in a
consistent and visually appealing manner.

 Reboot
 Typography
 Images
 Tables
 Figures

Bootstrap Forms

Bootstrap simplifies form creation with pre-styled components and


layouts. It includes classes for form controls like text inputs, select menus, and
checkboxes. Forms can be easily customized with various input sizes,
validation states, and layout options. Bootstrap also supports form groups and
custom form elements to enhance usability and appearance.

 Forms

 Form Controls

 Select

 Checks and Radios

 Range

 Input group

 Floating labels

 Form Layout

 Form Grid
 Horizontal Form

 Validation

Bootstrap Components:

Bootstrap offers a rich set of pre-designed components to streamline UI


development. These include buttons, cards, modals, navbars, and more. Each
component is customizable and responsive, ensuring that your web application
maintains a consistent look and feel across different devices and screen sizes.

 Accordion
 Alerts
 Badges
 Breadcrumb
 Buttons
 Button Group
 Card
 Carousel
 Close Button
 Collapse
 Dropdowns
 List Group
 Modal
 Navbar
 Offcanvas
 Popovers
 Pagination
 Progress
 Scrollspy
 Spinners
 Toasts
 Tooltips
Features of Bootstrap:

Bootstrap offers an extensive array of pre-built components designed to


streamline web development:

 Grid System: Easily create responsive layouts with a flexible grid


system that adjusts seamlessly to various screen sizes.
 Forms: Build user-friendly forms with diverse styles and
functionalities, including validation.
 Buttons: Add customizable buttons of all shapes and sizes to enhance
your website’s interactivity.
 Navigation: Implement intuitive navigation menus, from simple
dropdowns to advanced mega menus.
 Alerts: Effectively communicate with dismissible alerts, warnings,
and success notifications.
 Images: Improve your website’s visual appeal with responsive image
Advantages of using Bootstrap:

 Responsive Design: Bootstrap automatically adjusts the layout to fit


different screen sizes and devices, ensuring a consistent user experience
across desktops, tablets, and smartphones.
 Predefined Styles and Components: It offers a library of ready-to-use
components (buttons, forms, navigation bars) and styles, reducing
development time and effort.
 Mobile-First Approach: It is designed with a mobile-first philosophy,
ensuring that web applications are optimized for mobile devices and then
scaled up for larger screens.
 Customizable and Scalable: It allows easy customization through
variables and mixins, and scales with your project’s needs as it
grows.
 Grid System: Utilizes a flexible grid system to create complex layouts
with ease, accommodating various screen sizes and content
requirements.
 JavaScript Plugins: Includes a range of built-in JavaScript plugins for
interactive elements like modals, carousels, and tooltips, enhancing
functionality without additional coding.
 Documentation and Community Support: Offers extensive
documentation and a large community of users for support, tutorials, and
best practices, making it easier to find solutions and guidance.
 Ease of Integration: Easily integrates with various web technologies and
frameworks, including HTML, CSS, and JavaScript, making it a versatile
choice for different projects.
Disadvantages of using Bootstrap:

 Learning Curve: Requires learning Bootstrap’s classes, grid system, and


customization options, which may be challenging for beginners.
 Limited Customization: While customizable, modifying Bootstrap to fit
specific design requirements can be cumbersome and may require
overriding default styles extensively.
 Overuse of Classes: Encourages the use of numerous classes in
HTML elements, which can make the code harder to read and
maintain.
 Complex Layouts: While it simplifies many aspects, creating complex or
highly customized layouts might require extensive overrides and custom
CSS.
 CONCLUSION:

HTML provides the basic structure of sites, which is enhanced and modified by other technologies
like CSS and JavaScript. web development is essential for all businesses in the modern world. It
can establish credibility, expand reach, provide information, increase sales, and improve
customer engagement.

Web development can also provide several benefits, including


responsive design, search engine optimization, integration with social media, data analysis, and e-
commerce functionality. By investing in web development, businesses can improve their online
presence, reach more customers, and ultimately succeed in today's digital marketplace.
 Refreance

 https://www.linkedin.com/pulse/modern-world-requires-web-development-
all#:~:text=In%20conclusion%2C%20web%20development%20is,sales%2C
%20and%20improve%20customer%20engagement.

 https://www.mygreatlearning.com/blog/top-web-development-projects/

 https://montana-media-arts.github.io/mart341-webDev/modules/week-6/
conclusion/
REFERENCE:

https://www.geeksforgeeks.org/html https://www.w3schools.com/html

https://html.com/ https://www.codecademy.com/learn/learn-html

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