2. INDEX
• INTRODUCTION TO WEB DEVELOPMENT
• INTRODUCTION TO HTML
• BASICS OF HTML
• COMMENTING
• SPECIAL CHARACTER
• HYPERLINKS
• HTML ELEMENTS
• INTRODUCTION TO CSS
• CSS SYNTAX
• CSS INCLUSION
• CSS MEASURMENT UNITS
• CSS COLORS
• INTRODUCTION TO JAVASCRIPT
• JAVASCRIPT SYNTAX
• JAVASCRIPT ENABLING
• JAVASCRIPT PLACEMENT
• JAVASCRIPT VARIABLES
• JAVASCRIPT OPERATORS
3. WEB DEVELOPMENT
• Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management.
• The word Web Development is made up of two words, that is:
• Web: It refers to websites, web pages or anything that works over the internet.
• Development: It refers to building the application from scratch
• Web Development can be classified into two ways:
• Frontend Development
• Backend Development
4. INTRODUCTION TO HTML
• Hypertext Markup Language (HTML) is one of the three main components of modern webpages,
along with Cascading Style Sheets (CSS) and JavaScript.
• HTML is a markup language used by the browser to manipulate text, images, and other content,
in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991
• The markup used by HTML includes tags, like <p>…</p>, to demarcate different HTML elements
within the same webpage.
5. BASICS OF HTML
• HTML is a markup language. It tells the web browser what content to display.
• Separates content from presentation
• Uses a pre-defined set of elements to identify content types.
• Elements contain one or more “tags”. Tags are surrounded by angle brackets,
and the “closing” tag is prefixed by a forward slash.
• The DOCTYPE is typically the first line of the HTML document.
6. COMMENTING IN HTML
• The comment tag ( <!-- Comment--> ) is used to insert comments in the HTML code.
• It is a simple piece of code that is wiped off (ignore) by web browsers i.e. , not displayedby the
browser.
• It helpsthe coder and reader to understandthe piece of code used for especiallyin complexsource
code.
• Types of HTML Comments: There are three types of comments in HTML which are:
❑ Single-line comment
❑ Multi-linescomment
❑ Using <comment> tag
• SYNTAX:
<!-- COMMENTSHERE -->
7. SPECIAL CHARACTERS
• The underlying markup of a webpage typically contains many more ampersand characters(i.e. &) than
appear in the rendered output.
• In HTML, each special character is preceded by an ampersand, followed by the HTML markup name for that
character followed by a semicolon.
8. HYPERLINKS IN HTML
• In HTML, hyperlinks (also called ‘anchors’) typically have the following sort of structure:
<a href="Pages/AboutNematrian.pdf";>text</a>
• The value of href is where the link points to:
❑The ‘text’ material seen by the user can contain HTML, so can include e.g. images and formatted
text
❑The href value used here, i.e. “Pages/AboutNematrian.pdf” means that the link points to a
webpage .
9. HTML ELEMENTS
• The basic building blocks of HTML are elements (also called tags).
• The most general way of formatting text (capable of altering any of the default formatting of any
visible HTML element) involves use of Cascading Style Sheets (CSS) or in-file or in-line
equivalents
• 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.
10. INTRODUCTION TO CSS
• CSS stands for Cascading Style Sheets
• CSS is a simple design language intended to simplify the process of making web pages
presentable
• CSS is used to design HTML tags.
• CSS is a widely used language on the web.
• HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style
on HTML tags.
11. CSS SYNTAX
• A CSS rule set contains a selector and a declaration block.
• Selector:Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.
• Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For
the above example, there are two declarations:
color: yellow;
font-size: 11 px;
• Property: A Property is a type of attributeof HTML element. It could be color,border etc.
• Value:Values are assigned to CSS properties.In the above example, value "yellow" is assigned to color
property.
12. CSS INCLUSION
• Css inclusions covers different types of ways to include style sheet on a web page.
• Different methods of CSS Inclusion into HTML:
There are four methods to include CSS in your HTML Document.
➢ Inline CSS
➢ Embedded/Internal CSS
➢ External CSS
➢ Imported CSS
13. CSS MEASURMENT UNITS
CSS supports a number of measurements including absolute units such as
inches, centimeters, points, and so on
14. CSS COLORS
• These are used to set a color either for the foreground of an element (i.e., its text) or for the
background of the element.
• We can define the color of an element by using the following ways:
❖ RGB format.
❖ RGBA format.
❖ Hexadecimal notation.
❖ HSL.
❖ HSLA
❖ Built-in color.
15. INTRODUCTION TO JAVASCRIPT
• JavaScript is a lightweight, interpreted programming language.
• Designed for creating network-centric applications.
• Complementary to and integrated with Java
• Complementary to and integrated with HTML
• Open and cross-platform.
16. JAVASCRIPT SYNTAX
• JavaScript can be implemented using JavaScript statementsthat are placed within
the <script>... </script> HTML tags in a web page.
• The <script> tag alerts the browser program to start interpreting all the text
between these tags as a script.
• The script tag takes two important attributes:
Language: This attribute specifies what scripting language you are using.
Type: This attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript“.
17. JAVASCRIPT ENABLING
Here are simple steps to turn on or turn off JavaScript in your Internet Explorer−
• Follow Tools → Internet Options from the menu.
• Select Security tab from the dialog box.
• Click the Custom Level button.
• Select Enable radio button under Active scripting.
• Finally click OK and come out.
18. JAVASCRIPT PLACEMENT
Preferred way to include Javascript in an HTML are as follows:
• Script in <head>...</head> section.
• Script in <body>...</body>section.
• Script in <body>...</body>and <head>...</head>sections.
• Script in an external file and then include in <head>...</head> section.
19. JAVASCRIPT VARIABLES
• These are the type of values that can be represented and manipulated in a programming
language
• JavaScript allows you to work with three primitive data types:
❖Numbers, e.g., 123,120.50 etc.
❖ Strings of text, e.g. "This text string" etc.
❖ Boolean, e.g. true or false.
20. JAVASCRIPT OPERATORS
• In JavaScript, an operator is a special symbol used to perform
operations on operands (values and variables).
• Javascript operator types:
