HTML Notes

Web Technologies[HTML,CSS and Javascript].
--> Programmers will use web technologies "to develop Frontend of an application".
whereas Java is used "to develop Backend of an application".
--> These two languages are having "Different representation", where Java has an "instruction"
representation and Web Technologies has an "Tags representation".
--> All Instructions are represented with "{}" and All Tags are represented with "<>".
--> All the Codings must be started with "Template". For HTML Coding, we have to follow
the below Template:
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
--> Steps to be followed while HTML coding are:
HTML_Template --> Tags -----------> Save[.html] ----> execution[Browsers].

-----------------------------------------------------------------------------------------
Description on HTML_Template:
--> <html> tag in Template indicates that "Programmers are starting to code in HTML lang".
--> <head> tag in Template indicates "Head section of an app", which corresponds to
tab of an Browser.
--> Head Section of an app consists of Two Important factors:
i. favicon.
ii. title of an app.
--> <title> tag in Template indicates "Title of an app", which has to be specified on tab
of an Browser.
--> <body> tag in Template indicates "body section of an app", where Contents of app
will be displayed.
NOTE: "</>" indicates "tag is ended".

-----------------------------------------------------------------------------------
Creating Favicons:
--> To place favicon in HTML Coding, Programmers will make use of <link> tag within
<head> tag.
--> The syntax followed is :
<link rel="icon" href="Path of the icon file"></link>
--> Any Image can be converted into favicon by using "favicon generator from google".
------------------------------------------------------------------------------------
HTML Forms:
--> Programmers use HTML Forms concept "In order to take User Info into our application".
--> HTML Forms consists of 2-important components:
1. Labels
2. Inputs
--> Labels are direction for user to provide specific information needed. whereas Inputs are
actual info given by user.
--> while coding, inputs are referred by using "<input>" tag, which results in Text box
on browsers.
--> Attributes are additional information which is given to tag for Enhancing output.
"type" attribute within <input> tag is used to change the behaviour of Text Box.
NOTE: <br> tag is nothing but "break tag", which is used to break current line and give
the contents in next line.
--> "Placeholder" attribute is used to create "water mark" on text box. And it can also be
used as an alternative for Labels.
--> If type="submit", then "Button" will be displayed on Browser.

--> If type="number", then User is Allowed to provide only Numbers in text Box.
--> If type="password", then Everything given by user will be displayed in the form of
dots.
--> If we are using "value" attribute, then Programmers can change the default contnt on the
button.
RadioButtons, CheckBoxes, DropDown List And TextAreas:

--> As a Programmer, we use radio buttons, if we have to give user "To Select One option".
NOTE: By default, Radio buttons can be selected Multiple. Explicitly, Programmers makes it
to act like single option selector by using "name" attribute.
--> For "name" attribute, we pass an "identifier", which must be maintained same throughout
all radio buttons.
--> As a programmer, we use checkboxes, if we have to give user "To Select Multiple option".
--> DropDown List is preferred over Radio Buttons because If their are multiple options
to be provided, then radio buttons would occupy more space compared to DropDown List.
--> DropDown List can be created by using "<select> tag and <option> tag".
--> Textarea is preferred, if user is providing more contents like address, comments, feedback etc.
Textarea can also be resized by using "rows" attribute and "cols" attribute.
NOTE: Inputs can be made as "Mandatory" by using "required" attribute and "<form>" tag.
* symbol on labels are just an indication that current input is mandatory for users.
"Pattern" attribute and "title" attribute:

--> "pattern" attribute is used within <input> tag, which is used "To validate userinfo
according to conditions specified by programmer".
--> "title" attribute is used within <input> tag, which can be used to provide information
about the pattern which has to be followed.
syntax:
pattern="[what type of contents user shd provide]{what shd be length of content}"
Example-1: PhoneNumber:__________________
condition-1: only digits
condition-2: must be exactly 10-digits
pattern="[0-9]{10}" [OR] pattern="[6-9]{1}[0-9]{9}"

Example-2: Name:______________
condition-1: only Alphabets
condition-2: must be between 8 to 12 characters
pattern="[A-Za-z]{8,12}" [OR] pattern="[A-Z]{1}[a-z]{7,11}"
Example-3: CVV:_____
condition-1: only digits
condition-2: must hav exactly 3-digits
pattern="[0-9]{3}"
Special Note:
1. Pattern for validating PAN Card Number:
pattern="[A-Z]{5}[0-9]{4}[A-Z]{1}"
2. Pattern for validating Aadhar card Number:

pattern="[0-9]{12}" [OR] pattern="[0-9]{4}[ ]{1}[0-9]{4}[ ]{1}[0-9]{4}"
--------------------------------------------------------------------------------------
HTML Tables:
--> Programmers makes use HTML Tables Concept "To Organize/align the output on the Browser".
--> To start working with HTML Tables, programmers must decide number of rows and number of
columns required.
--> In this, we make use of 3-important tags:
i. <table> tag
ii. <tr> tag
iii. <td> tag
--> <tr> tag represents row, whereas <td> tag represents column.
---------------------------------------------------------------------------
Hyperlinks:
--> Connecting two HTML Files in an app is called as Hyperlinks.
--> Hyperlinks are represented in the program by using "Anchor Tag", which is indicated as
"<a>" tag.
--> <a> tag takes two attributes:
i. "href" attribute - which is used to provide HTML FileName to be linked.
ii. "target" attribute - which is used to open Hyperlink in new tab of browser.
syntax:
<a href="HTMLFileNameToBeConnected" target="blank"></a>
--------------------------------------------------------------------------------
Text-Formatting Tags:
--> As a programmer, we use text-formatting tags for "Changing the appearance of the text
in an application".
Tags Functionality/Behaviour
i. <h1>,<h2>,<h3> --> Used to increase font size of the text.where
<h4>,<h5>,>h6> <h1> is having highest font size and <h6>
is lowest font size.
ii. <strong> --> used to make text to appear in BOLD.
iii. <em> --> used to make text to appear in ITALICS.

<em> represents "Emphasize"
iv. <sup> --> used to make text to appear as Power.

<sup> represents "Superscript".
v. <sub> --> used to make text to appear as base.

<sub> represents "SubScript".
vi. <del> --> used to give line strike on the text.
vii. <ins> --> used to provide underline to the text.
viii. <mark> --> used to highlight text by giving

background color. By default, it is yellow.
ix. <marquee> --> used to provide scrolling on thr browser.

It can be controllerd by using two attributes.
1. direction 2.scrollamount.
x. <p> --> used to represent many lines of text.

<p> stands for paragraph.
xi. <pre> --> used to change font type. <pre> represents

preformat tag.
-----------------------------------------------------------------------------------------
<div> tag:
--> Programmers use <div> tag "to create separate sections for particular purpose".
In order to start working with <div> tag, Programmers must provide respective
width and height as dimensions.
--> Height and width must be mentioned together by using "style" attribute. and also it
must be given with "pixels[px]".
--> "float" property is used for aligning the sections. It can be given with "right" and
"left" as values.
NOTE: Usage of "style" attribute represents working of CSS. CSS basically used to enhance the
output on browser.
------------------------------------------------------------------------------------
HTML Lists
--> Programmers will make use HTML Lists "To Arrange the content along with different types
of serial numbers representation".
--> We have two types of Lists.

i. Ordered List
ii. Unordered List
--> Ordered List is displayed in the form of "Numbers, Alphabets or Roman Numbers". whereas
Unordered List is displayed in the form of "Bullets".
--> To change the type of serial number representation, we make use of "type" attribute
within <ol> tag and <ul> tag.
------------------------------------------------------------------------------
Multimedia Tags:
--> We have 3 important multimedia tags which are given below:
i. <img> tag
ii. <audio> tag
iii. <video> tag
--> <img> tag is used to place image files in an application, which can be resizable according
to programmers need.
--> It takes 4-attributes and they are "src", "height", "width" and "alt" attribute.
"src" attribute is used to provide Path of Image File. "height" and "width" attribute
is used to resize the image.
--> "alt" attribute is used to provide text which will be displayed, if their is an issue
in loading the image.
--> <audio> tag is used to place audio files and <video> tag is used to place video files
in an application.
NOTE: How to make images to act like HyperLinks?

Ans: By using <a> tag with <img> tag, we can create images to act like hyperlinks.
NOTE: <meta> tag is used to provide some extra information about File like
i. editor used for coding.
ii. programmer name who has done coding.
iii. technologies used in coding.
iv. description about the coding in the given file.
----------------------------------------------------------------------------------
CSS(Cascading Styling Sheet):
--> CSS is used by programmers in order to Enhance/Improve the output of HTML Coding
on the Browser.
--> Programmers can perform CSS Coding in 3-ways:

1. Inline CSS
2. Internal CSS
3. External CSS
--> In Inline CSS Coding, we make use of "style attribute" within HTML Tag.
--> In Internal CSS coding, we make use of "<style> tag" within <head> tag.
--> In External CSS coding, we make use of "Separate CSS File" to write css program and
link to HTML File using <link> tag.
syntax:
<link rel="stylesheet" href="CSS_FileName">
NOTE: If all types of CSS Coding is applied, then priority is given as below
Inline >> Internal >> External
NOTE: CSS is case-insensitive language, which consists of n-number of Properties. If

property name is having More than 1 word, then it is separated by "hyphen(-)".
--> "opacity" css property is used to reduce brightness of the given color. The values
which can be given is between 0.0 to 1.0.
------------------------------------------------------------------------------
Types of Selectors:
--> There are 3-types of selctors:
i. Element Selector
ii. Id Selector
iii. Class Selector
--> If CSS has to be applied for all occurance of respective tag, then it is referred as
"Element Selector".
--> If CSS has to be applied for one occurance of respective tag, then it is referred as
"Id Selector".
--> Id selector can be worked by using "id" attribute with "#" symbol, which indicates that
the specified identifier is an "id".
--> If CSS has to be applied for More than one occurance but not all occurance of respective tag
then it is referred as "Class Selector".
--> Class selector can be worked by using "class" attribute with "." symbol, which indicates that
the specified identifier is an "class".
-------------------------------------------------------------------------
Few Commonly used CSS Properties:
1. "background-color" property is used to apply backgroundcolor for respective HTML element.
2. "background-image" property is used to provide background image for the <body> tag.
The syntax to be followed is:
background-image:url('Image File Name with extension');
NOTE: The above syntax works only if "Coding files" and "Image File" are in same folder.
3. "color" property is used to change text color.
4. "padding" property is used to provide space around the content. It can also be applied
for particular side by using any one of the below css properties:
i. padding-top - for Top side.
ii. padding-right - for Right side.
iii. padding-bottom - for Bottom side.
iv. padding-left - for Left side.
NOTE: We can also apply padding for four sides by using short cut as given below:
syntax:
padding:top right bottom left;
Ex:
padding:20px 30px 40px 50px; Here 20px is for Top side
30px is for Right side
40px is for bottom side
50px is for left side
5. "text-align" property is used to align text either to "left","right","center".
6. "text-decoration" property is used to provide "underline","line-through" on the text.
7. "text-shadow" property is used to provide shadow of original text. The syntax to be

followed is:
syntax:
text-shadow:verticalDistance horizontalDistance shadowColor;
Example: text-shadow:5px 5px blue;
8. "text-transform" property is used to change text into "uppercase","Lowercase" and "Capitalize".

9. "text-indent" property is used to provide space in the first line of the text alone.
10. "letter-spacing" property is used to provide space between letters of the word.
11. "word-spacing" property is used to provide space between words of the sentence.
12. Combinators is the concept which is used to apply CSS for particular inner tags.
In other words, Combinators is nothing but Group of selectors.
13. "font-size" property is used in CSS to increase the size of font displayed.
14. "float" property is used to align the contents towards left and right.
15. "margin" property is used to provide space from the extreme borders. It can also be
applied for specific side by using below properties:
i. margin-top
ii. margin-right
iii. margin-bottom
iv. margin-left
16. "background-size" property is used to resize background image given for <body> tag.
17. "pseudo classes" are special classes which applies unique styling for HTML Tags.
syntax:
tagname:pseudoclassname { property:value;........... }
18. "hover" is an pseudo class which applies CSS Properties only if cursor is placed
on the contents.
Example:
a:hover { CSSPropertiesCode }
19. "border" property is used to separate the contents by drawing one solid line between
them. border property must be given with 3-important info:
i. border-width
ii. border-type
iii. border-color
NOTE: While working with "border" property, it is mandatory to provide border-width and border-type.
whereas border-color is optional.
20. "border-collapse" property is used to remove extra borders and provie common border
among the contents.
21. "font-weight" property is used to make contents as bold.
22. "font-style" property is used to make contents as italics.
NOTE: The Combination of margin,border, padding is called as "CSS Box Model".
---------------------------------------------------------------------------------------------
JavaScript:
--> Programmers prefer Javascript for two important reasons:
i. It provides flexibility in validation of User data.
ii. It offers page-responsive behaviour.
--> To do coding in javascript, we have two ways:

i. Internal Javascript.
ii. External Javascript.
--> Internal Javascript coding is performed by writing <script> tag within <head> tag.
whereas External Javascript coding is performed in separate JS file and linked into
HTML File by using below syntax:
<script src="External Javascript FileName"></script>
-------------------------------------------------------------------------------------
Variable Declaration and Function Declaration in JS:
--> Variables are declared by using "var" keyword. Irrespective of data to be stored,
we use only "var" keyword in javascript.
syntax:
var varName = value;
where varName is an identifier.
Ex: var num = 10;

var num1 = 45.67;
var num3 = false;
var num4 = "qwerty";
var num5 = 'a';
--> Functions are declared by using "function" keyword inorder to perform some opration.
Every function will be called for its execution.
syntax:
function funcName(args/no args)
{
//code
}
where funcName is an identifier.
--> document.write() is used to print the contents of javascript on browser.
NOTE: In Javascript coding, we can include HTML Tags within double quotes("")
---------------------------------------------------------------------------------------
Operators and Statements in JavaScript:
--> All the operators like Arthimetic operators, Relational operators, logical operators
is same as JAVA Language.
--> All Statements like Conditional Statements, Looping Statements are same as JAVA Language.
--> The Slight change in syntax of "for-loop" in javascript is:

"Mentioning 'var' keyword is optional in Initialization part of for-loop"
NOTE: Generally Local variables in javascript will not be given with "var" keyword.
----------------------------------------------------------------------------------------
Functions With Arguments:
--> We prefer functions with arguments to pass desired values according to users need.
--> When we call function with arguments, then it is programmers responsibility to pass
values for arguments.
--> The number of values we pass must be equal to number of arguments in the function.
----------------------------------------------------------------------------------
Event Handlers:
--> Calling Javascript function from HTML file based on the events like reloading the page,
pressing any key on keyboard, clicking buttons etc. is called as Event Handlers.
--> All Event Handlers will be startinf with "on", followed by respective event.
--> Few Event Handlers are:

i. onload - calls JS Function if user reloads the page.
ii. onclick - calls JS Function if user clicks the button.
--> The syntax used to read values from HTML File:

document.getElementById("identifier").value
where document refers to current HTML File
getElementById("identifier") refers tag which is given with respective identifier.
value refers to read data given by user.
--> The syntax used to subsitute JS Output into HTML file is:
document.getElementById("identifier").innerHTML = JSOutputToBeGiven.
where innerHTML refers to substituting JSOutput in HTMLFile.
--> To work with innerHTML, we follow two important steps:

1. assign an identifier to an tag where JSOutput has to be substituted.
2. use the above syntax of innerHTML specified.
NOTE: <input type="button"> should be maintained while working with innerHTML.
NOTE: "value" property is used to read data from HTML File to JS File, whereas "innerHTML"
property is used to give data from JS File to HTML File.
[value]
HTML------------------->Javascript
<------------------
[innerHTML]
--> "onkeyup" Event handler executes JS Function, once user releases the key which was
pressed. "onkeypress" Event handler executes JS Function, once user presses any key.
--> "length" property is used to find length of the contents stored in an variable.
--> "fontcolor()" function is an inbuilt JS Function, which is basically used to give

colors for text which is declared in JS file.
--> "style" property is used in JS to indicate that CSS is being used in the program.
NOTE: we cannot repeat same event handler within one tag. Two functions cannot be called
by using one event handler.
--> "backgroundColor" property is used to apply background colors for an specified HTML
tag. It works only after "style" property is used.
--> "onblur" event handler is used to execute function if user leaves the current input
and moves to next input.
--> "borderColor" property is used to apply colors to borders of the input. It works with
onblur event handler.
--> "focus()" function is an inbuilt JS function, which is basically used to control

the movement of cursor between the inputs.
--> "getAttribute()" function is an inbuilt function, which is used to read attribute

values from HTML file to JS File. As an argument, we pass Attribute name for this
function.
--> "borderRadius" property is used to change rectangular shaped borders into curved
shaped borders.
--> "boxShadow" property is used to provide reflection of the text box. It takes 4-imp
values:
i. horizontal distance. ii. vertical distance. iii. blur. iv. color
NOTE: If horizontal distance and vertical distance is given as 0px, then actual text box
and reflection of text box is at same position.
NOTE: "focus" is an pseudo class in CSS, which is used to execute CSS Properties only if
user selects an specified Tag/Id/Class.
-----------------------------------------------------------------------------
Popup Boxes:
--> We have 3-types of popup boxes:
1. alert popup box
2. confirm popup box
3. prompt popup box
--> All the above popup boxes are represented in the form of functions.
--> alert() function allows user to select OK option. confirm() function allows user to
select either OK or CANCEL option.
--> prompt() function allows user to provide "Value" first and then followed by selecting
OK or CANCEL option.
-----------------------------------------------------------------------------------
JavaScript Objects:
--> Object is an entity which consists of multiple information, which can be referred as
variables.
Ex: BankAccount Object:

i. AccountNumber
ii. AccountHolderName
iii. TypeOfAccount
--> All the info given by user will be combined as an object and passed onto the server
for further processing.
--> To combine info into object, we make use of "{}", object literals. To read values from
object, we use "ObjectName.infoName".
Example: A Car Object is having color, brand and price as information.
var car = {color:"white",
brand:"skoda",
price:12.00
}
----------------------------------------------------------------------------------------
Pseudo classes[continue..]
--> The 4-important pseudo classes which works with cursor movements are:
i. :link - used to indicate an hyperlink as "not visited".
ii. :visited - used to indicate an hyperlink as "visited".
iii. :hover - used to apply css if user place the cursor on hyperlink.
iv. :active - used to apply css if user clicks the hyperlink.
--> we dont have :blur pseudo class. In order to implement blur functionality in CSS, then
we have to make use of ":not(:focus)".
--------------------------------------------------------------------------

HTML Notes

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Notes

Transféré par

Droits d'auteur :

Formats disponibles

Web Technologies[HTML,CSS and Javascript].

--> Steps to be followed while HTML coding are:

HTML_Template --> Tags -----------> Save[.html] ----> execution[Browsers].

NOTE: "</>" indicates "tag is ended".

--> If type="submit", then "Button" will be displayed on Browser.

RadioButtons, CheckBoxes, DropDown List And TextAreas:

"Pattern" attribute and "title" attribute:

pattern="[0-9]{10}" [OR] pattern="[6-9]{1}[0-9]{9}"

pattern="[A-Za-z]{8,12}" [OR] pattern="[A-Z]{1}[a-z]{7,11}"

2. Pattern for validating Aadhar card Number:

ii. <strong> --> used to make text to appear in BOLD.

iii. <em> --> used to make text to appear in ITALICS.

iv. <sup> --> used to make text to appear as Power.

v. <sub> --> used to make text to appear as base.

vi. <del> --> used to give line strike on the text.

vii. <ins> --> used to provide underline to the text.

viii. <mark> --> used to highlight text by giving

ix. <marquee> --> used to provide scrolling on thr browser.

x. <p> --> used to represent many lines of text.

xi. <pre> --> used to change font type. <pre> represents

--> We have two types of Lists.

NOTE: How to make images to act like HyperLinks?

--> Programmers can perform CSS Coding in 3-ways:

Inline >> Internal >> External

NOTE: CSS is case-insensitive language, which consists of n-number of Properties. If

3. "color" property is used to change text color.

5. "text-align" property is used to align text either to "left","right","center".

6. "text-decoration" property is used to provide "underline","line-through" on the text.

7. "text-shadow" property is used to provide shadow of original text. The syntax to be

8. "text-transform" property is used to change text into "uppercase","Lowercase" and "Capitalize".

21. "font-weight" property is used to make contents as bold.

22. "font-style" property is used to make contents as italics.

NOTE: The Combination of margin,border, padding is called as "CSS Box Model".

--> To do coding in javascript, we have two ways:

Ex: var num = 10;

--> document.write() is used to print the contents of javascript on browser.

--> The Slight change in syntax of "for-loop" in javascript is:

--> Few Event Handlers are:

--> The syntax used to read values from HTML File:

--> To work with innerHTML, we follow two important steps:

NOTE: <input type="button"> should be maintained while working with innerHTML.

--> "fontcolor()" function is an inbuilt JS Function, which is basically used to give

--> "focus()" function is an inbuilt JS function, which is basically used to control

--> "getAttribute()" function is an inbuilt function, which is used to read attribute

Ex: BankAccount Object:

Vous aimerez peut-être aussi