Scribd
Upload
4 views31 pages

HTML

The document provides an overview of client/server architecture, web protocols, HTML, CSS, and JavaScript, detailing their roles in web development. It covers the structure of HTML documents, various tags and their attributes, as well as JavaScript's functionality for creating dynamic web pages. Additionally, it discusses event handling, forms, and the evolution of CSS, emphasizing the importance of these technologies in building interactive websites.

Uploaded by

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

HTML

The document provides an overview of client/server architecture, web protocols, HTML, CSS, and JavaScript, detailing their roles in web development. It covers the structure of HTML documents, various tags and their attributes, as well as JavaScript's functionality for creating dynamic web pages. Additionally, it discusses event handling, forms, and the evolution of CSS, emphasizing the importance of these technologies in building interactive websites.

Uploaded by

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

Client/Server Architecture

-------------------------------------
Client(Machine)->Send request->Server(Machine)->Response
Protocol==>Set of rules that describes how the webpages transfer on the web.
HTTP==>Hyper Text Transfer protocol =>how the webpages transfer on the web
FTP =>File Transfer protocol =>File transfering
SMTP =>Simple Mail Transfer protocol =>Mail Transfer

Website=>Collection of webpages.
Webpage=>Pages on the web collection of hyper text,hyper link,images.

Network=>Connection between two or more machine.


Internet==>Networks of Networks.

Browser==>It is a software tool used to run the webpage on the internet


Ex:IE,Nestcape Navigator,Mozila Firefox.

Webaddress=>URL(Uniform Resource Locator)

HTML - Hyper Text Markup Language


--------
-Hyper - Jumping
-Hyper Text - A text that links to another document.
-Markup - Format of a text stored along with
the text. e.g. <b>Apollo</b>
-Language - Human to computer communication tool.

<html> - opening markup tag


</html> - closing tag.

A HTML file should be saved with .html or .htm extension.


A html file is called a web page.
A collection of web pages posted to internet server
is called a website.

Picture files:
.jpg (JPEG- Joint Photographic Experts Group)
.gif (GIF - Graphic Interchange Format)
.png(portable network graphics)
.bmp (BMP - Bitmap)

<BODY> tag:
Attributes:
BGCOLOR - Background color
TEXT - Text color
BACKGROUND - Background picture file name.

<P> - Paragraph tag


Attributes:
ALIGN="CENTER"
="LEFT"
="RIGHT"

<H1> to <H6> - heading tags


e.g.
<H1>Introduction to HTML</H1>
<H2>About</H2>

<FONT> tag
Attributes:
FACE = "Arial"
"Courier New"
SIZE = "1"
= "12"
COLOR="RED"
="BEACH"

E.G
<p Align="center">
<FONT SIZE="4" COLOR="GREEN">
With <FONT SIZE="10" COLOR="BLUE">HTML</FONT> we can create documents that contain Formatted Text
</FONT>
</p>

<B> - Bold tag <u><I><B>7-9 batch</B></I></u>


<I> - Italic tag
<U> - Underline tag
<CENTER> Center align some text </CENTER>
<STRIKE> - Strikethrough effect

///////////////////////////////////////////////////////////////

<SUP> - Superscript tag 10<SUP>3</SUP>=1000


<SUB> -Subscript tag H<SUB>2</SUB>O

<BR> - Line Break tag


<HR> - Horizontal line tag

Attributes:
SIZE = "5" - thickness of the line (5 pixels)
WIDTH = "50%" - length of the line; 100% by default
ALIGN ="LEFT"
="RIGHT"
="CENTER"
COLOR ="red"

<IMG> - Image tag (Picture/Photo)


Attributes:
SRC (Source) = "image_file_name"
WIDTH = "50%"
HEIGTH = "50%"

<A> - Anchor tag for hyperlink


Attributes:
HREF (Hyper Reference) = "filename.html"

Marquee- Used to moveing our text or images.


--------

Attributes
---------
1)behavior
i)Scroll
ii)Slide
iii)Alternate
2)direction
i)right
ii)left
iii)down
iv)up
3)scrollamount- used to specify the speed of our text or images.
4)scrolldelay- used to specify the delay of our text or images.

List
-----
--> To display the related items one by one.

Types of List
----------------
Basically there are 3 types of list.They are

1.Ordered List-5 ways


A,a,I,i,1

2.UnOrdered List-3 ways


Circle,Disc,Square
3.Defintion List

Nested list is also possible.


(i.e)Inside ordered list unordered list
Inside unordered list ordered list

Tables
--------
-->To display the data in Table format.

Attributes
-----------
border
bgcolor
colspan
rowspan
cellpadding
cellspacing

subtags
----------
<tr></tr> - tablerow
<th></th> - table head
<td></td> - table data

Four Elements
------------------
1.Rowspan-To combine the rows
2.Colspan-To combine the columns
3.Cellpadding-To mention the space between a cell and the text.
4.Cellspacing-To mention the space between the cells.

Forms
-----
-->Used to get user input.

Tag
---
1.<form></form>
2.<input type=name of the control..> --> Used to create a control.

Form tag Attributes


--------------------
1)Method
a)Get --> Used to get the user input
b)Post --> Used to post the user input
2)Action
a)It contains the html filename.(Eg :sample.html)

Controls
------------
1.Textbox --> Used to get the User Input
2.Checkbox --> Used to Choose more than one option at the same time
3.Radio Button --> Used to select only one option at the same time
4.Button --> Used to submitt the user input values
5.Menu --> Used to create a list of items in a single control

Fieldset
-----------
-->Used to give a name to group of controls.
Legend
------
--> It is a sub element of Fieldset.
--> It is used to give heading of the Fieldset Control.

CSS - Cascading Style Sheets


=============================
HTML-Hyper Text Markup Language
DHTML-Dynamic HTML

HTML DHTML
--------- --------
1.Static -individual Dynamic -multiple
2.No Security Security

Cascading Style Sheet(CSS)


--------------------------
1.It is DHTML
2.It is used for formatting the web page.
3.It is a separate technology that binds with HTML tags.

Types of Styles
---------------
1.Inline style
2.Embedded style
3.External style
4.User defined style.

Evolution of CSS
-----------------
1.CSS1 is the 1st version.It includes font,font style,margins & applying more colors.
2.CSS-p is next version of CSS1.It specify the positioning of web pages.But it was not supported by browser like
IE,Netscape navigator.
3.CSS2 is next version of CSS-p.It includes all the features of CSS-P and inclued some additional features like making
web pages accessible to physically impaired people & making web pages uniformly visible on different devices.
4.CSS3 is under development.

JavaScript
----------
*Java Script is programming language

*JavaScript is a client-side scripting language used to create dynamic Web pages

*Case sensitive language

*Used to validate the input values and display some messages to the user.

*It is also called Client-side scripting engine or client-side validation language.

3 Layers
------------
1.Presentation Layer(PL)
2. Business Layer(BL) ==>Interface b/w Presentation Layer and database Layer
3. Database Layer(DL)

(Send Request to Server through BL)


PresentationLayer ------------------------------------------------>
(Send the PL request to DL)
BusinessLayer------------------------------------->

DatabaseLayer(It send the response to PL through BL)

Task of Client
--------------
1.Verifying the input values.
2.Confirming with the user for specific action.
3.Displaying information,warning and error messages.

Task of Server
--------------
1.Accessing database or files to retrieve values.
2.Storing and maintaing client information.
3.Main purpose is used to store the data or information.

Using JavaScript
----------------
There are three ways that JavaScript can be used within an HTML file.
It can be put within
1.<SCRIPT> tags within the <HEAD> tag (header scripts),
2. Within <SCRIPT> tags within the <BODY> tag (body scripts), or
3. Called directly when certain events occur.

JavaScript is put inside the <HEAD> tag primarily when you are initializing variables and creating functions that will be
used throughout the entire script. Code here is executed once, when the page is loaded.

JavaScript handles these events:


Event Caused by
1.onAbort - The user aborted loading the page.
2.onBlur - The user left the object .
3.onChange - The user changed the object .
4.onClick - The user clicked on an object .
5.onError - The script encountered an error .
6.onFocus -The user made an object active .
7.onLoad - The object finished loading .
8.onMouseOver - The cursor moved over an object .
9.onMouseOut - The cursor moved off of an object .
10.onSelect - The user selected the contents of an object .
11.onSubmit - The user submitted a form .
12.onUnload - The user left the window .

Any of these event handlers can be added to any HTML tag which can cause the event to occur.
For example, the onLoad event handler can be added to the <BODY> tag, and the event will be called when the page
has completed loading.

NOSCRIPT ELEMENT
----------------
-->Used to check whether our browser support javascript or not.

Eg:
----
<html>
<body>
<noscript>
<h1>This Browser does not support Javascript.</h1>
</noscript>
<h1>Welcome to Javascript</h1>
</body>
</html>

Javascript Keywords
------------------------
A keyword is a reserved word that indicates a particular action or a command to be implemented when used within
the script.Keywords are predefined terms that can't be used as an object name or function name or a variable name.
There are lot of keywords.They are
1.break
2.continue
3.do
4.for
5.import
6.new
7.this
8.void
9.case
10.default
11.else
12.function
13.in
14.return
15.typeof
16.while
17.comment
18.delete
19.export
20.if
21.label
22.switch
23.var --> Used for Variable Declaration
24.with

Built-in Functions
-----------------------
JS provides different built-in functions,which a programmer can use directly within the script.

Some built-in functions are:


1.parseInt( ) -->The conversion is done using this function
2.isNaN( )[is Not a Number] -->Used to check whether the given value is a number or not.
3.alert( ) -->Used to provide some message to user.(such as Error msg,warning msg or confirm msg)
4.toFixed( ) -->Used to specify the number of digits to be displayed after the decimal point.
5.toPrecision( ) -->Used to specify the number of digits to be displayed from the given number.
6.toString() --> Used to convert any value into a string value.

Java Script
-----------
* It is a programming language.
* document.write("Sample")
* Case-sensitive language

Variables
------------
It is a location of memory address where the value has been stored.

Variable Declaration
--------------------
var,var1,var2,.....
Ex:
---
var a,b,c

Initilaization
--------------
var1=value
var2=value

Ex:
---
a=20
b=30

Getting Input at Runtime


-------------------------
prompt("Text to display in the prompt","default")
Ex:
----
prompt("Give Value for A:","1")

Parsing
--------
1. parseInt()
2. parseFloat()
3. parseDouble()

Operators
------------
1. Arithmetic Operator => +, -, * , / , %
2. Relational Operator => < , >, <=, >=, ==, !=
3. Logical Operator => &&(AND), ||(OR) , !(NOT)
4. Assignment Operator => =, +=, -=, *=, /=, %=
5. Ternary or condtional Operator => condition?true_statement:false_statement
6. Unary Operator => ++, --

Control Structures
------------------
1. if()
i. if ... else
--------------
Syntax:
-------
if(condition)
{
true-Statement;
}
else
{
false-Statement;
}
ii. if ... else if ...else
--------------------------
Syntax:
--------
if(condition1)
{
Statement1;
}
else if(Condition2)
{
Statement2;
}
else
{
Statement3;
}

iii.Nested if
-------------
Syntax:
-------
if(Condition1)
{
if(Condition2)
{
Statement1;
}
else
{
}
}

2. switch()
-----------
switch(exp)
{
case exp1:
statement1;
break;
case exp2:
statement2;
break;
case exp3:
statement3;
break;
.
.
.
default:
default_statement;
break;
}

Looping Structure
----------------------
Until the condition is true same statements repeated...
1. while
Syntax:
---------
var_initilaization
while(condition)
{
block_of_Statement
var increment or decrement
}
2. do while
Syntax
---------
var_initilaization
do
{
block_of_Statement
var increment or decrement
}
while(condition)
3. for
Syntax
---------
for(var_initialization;condition;var increment (or) decrement)

Array
-------
It is a collection of related dataitems.

Declaration
--------------
var_name=new Array(size)
Ex:
----
a=new Array(5)

a[0],a[1],a[2],a[3],a[4]
Array index start at 0th index.

Function
-----------
=> A function is a sub program, that accepts inputs as arguments/parameters,
and may returns results.

It is a self-contained block of statements that perform specific tasks.


Main advantages of the function is reusable.

Function have two types


-------------------------------
1.Built-in Functions => used in math calulation functions

Some built-in functions are:


1.parseInt( ) -->The conversion is done using this function
2.isNaN( )[is Not a Number] -->Used to check whether the given value is a number or not.
3.alert( ) -->Used to provide some message to user.(such as Error msg,warning msg or confirm msg)
4.toFixed( ) -->Used to specify the number of digits to be displayed after the decimal point.
5.toPrecision( ) -->Used to specify the number of digits to be displayed from the given number.
6.toString() --> Used to convert any value into a string value.

2,User-Defined Functions => used in function prototype or declaration

Function Definition
------------------------
function fun_name(argument1,args2,....)
{
block_of_statements;
}

Function calling
--------------------
fun_name(args1,args2,...)

Event Handling
-------------------
1. Click => onClick
2. Mouse Move => onMouseMove
3. Mouse Over => onMouseOver
4. Double Click => ondblClick

HTML JavaScript
A Script is a small program which is used with HTML to make web pages more attractive, dynamic and
interactive, such as an alert popup window on mouse click. Currently, the most popular scripting
language is JavaScript used for websites.

Example:

<html>

<body>

<h1>JavaScript Date and Time example</h1>

<button type="button"

onclick="document.getElementById('demo').innerHTML = Date()">

Click me to display Date and Time.</button>

<p id="demo"></p>

</body>

</html>

HTML <script> Tag


The HTML <script> tag is used to specify a client-side script. It may be an internal or
external JavaScript which contains scripting statements, hence we can place <script> tag
within <body> or <head> section.

It is mainly used to manipulate images, form validation and change content dynamically.
JavaScript uses document.getElementById() method to select an HTML element.

Example:
<html>
<body>

<h2>Use JavaScript to Change Text</h2>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "Hello JavaTpoint";

</script>

</body>

</html>

HTML events with JavaScript


An event is something which user does, or browser does such as mouse click or page
loading are examples of events, and JavaScript comes in the role if we want something to
happen on these events.

HTML provides event handler attributes which work with JavaScript code and can perform
some action on an event.

Syntax:
<element event = "JS code">

Example:
<html>
<body>
<h2>Click Event Example</h2>
<p>Click on the button and you csn see a pop-up window with a message</p>
<input type="button" value="Click" onclick="alert('Hi,how are you')">
</body>
</html>

HTML can have following events such as:


o Form events: reset, submit, etc.
o Select events: text field, text area, etc.
o Focus event: focus, blur, etc.
o Mouse events: select, mouseup, mousemove, mousedown, click, dblclick, etc.

Following are the list for Window event attributes:

Event Event Name Handler Name Occurs when

onBlur blur When form input loses focus

onClick click When the user clicks on a form element or a link

onSubmit submit When user submits a form to the server.

onLoad load When page loads in a browser.

onFocus focus When user focuses on an input field.

onSelect select When user selects the form input filed.

1) JavaScript can change HTML content.

Example:
<!DOCTYPE html>

<html>

<body>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo"></p>

<script>
function myFunction() {

document.getElementById("demo").innerHTML = "Hello JavaTpoint!";

</script>

</body>

</html>

2) JavaScript can change HTML style

Example:
<!DOCTYPE html>

<html>

<body>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>

function myFunction() {

document.getElementById("demo").style.fontSize = "25px";

document.getElementById("demo").style.color = "brown";

document.getElementById("demo").style.backgroundColor = "lightgreen";

</script>
<button type="button" onclick="myFunction()">Click Me!</button>

</body>

</html>

3) JavaScript can change HTML attributes.

Example:

<!DOCTYPE html>

<html>

<body>

<script>

function light(sw) {

var pic;

if (sw == 0) {

pic = "pic_lightoff.png"

} else {

pic = "pic_lighton.png"

document.getElementById('myImage').src = pic;

</script>
<img id="myImage" src="pic_lightoff.png" width="100" height="180">

<p>

<button type="button" onclick="light(1)">Light On</button>

<button type="button" onclick="light(0)">Light Off</button>

</p>

</body>

</html>

Use External Script


Suppose, you have various HTML files which should have same script, then we can put
our JavaScript code in separate file and can call in HTML file. Save JavaScript external files
using .js extension.

Syntax:

1. <script type="text/javascript" src="URL "></script>


Example:
<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="external.js"></script>

</head>

<body>
<h2>External JavaScript Example</h2>

<form onsubmit="fun()">

<label>Enter your name:</label><br>

<input type="text" name="uname" id="frm1"><br>

<label>Enter your Email-address:</label><br>

<input type="email" name="email"><br>

<input type="submit">

</form>

</body>

</html>

JavaScript code:

function fun() {

var x = document.getElementById("frm1").value;

alert("Hi"+" "+x+ "you have successfully submitted the details");

HTML Phrase tag


The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of
text or semantics of text. Following is the list of phrase tags, some of which we have already discussed
in HTML formatting.
o Abbreviation tag : <abbr>
o Acronym tag: <acronym> (not supported in HTML5)
o Marked tag: <mark>
o Strong tag: <strong>
o Emphasized tag : <em>
o Definition tag: <dfn>
o Quoting tag: <blockquote>
o Short quote tag : <q>
o Code tag: <code>
o Keyboard tag: <kbd>
o Address tag: <address>

1. Text Abbreviation tag


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

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

Output:
2. Marked tag:
The content written between <mark> and </mark> tag will show as yellow mark on browser. This tag
is used to highlight a particular text.

Competitive questions on Structures in HindiKeep Watching

Example
1. <p>This tag will <mark>highlight</mark> the text.</p>
Test it Now

Output:
3. Strong text:
This tag is used to display the important text of the content. The text written between <strong> and
</strong> will be displayed as important text.

Example
1. <p>In HTML it is recommended to use <strong>lower-
case</strong>, while writing a code. </p>
Test it Now

Output:
4. Emphasized text
This tag is used to emphasize the text, and displayed the text in italic form. The text written between
<em> and </em> tag will italicized the text.

Example
1. <p>HTML is an <em>easy </em>to learn language.</p>
Test it Now

Output:
5. Definition tag:
When you use the <dfn> and </dfn> tags, it allow to specify the keyword of the content. Following
is the example to show how to definition element.

Example
1. <p><dfn>HTML </dfn> is a markup language. </p>
Test it Now

Output:
6. Quoting text:
The HTML <blockquote> element shows that the enclosed content is quoted from another source.
The Source URL can be given using the cite attribute, and text representation of source can display
using <cite> ..... </cite>element.

Example
1. <blockquote cite="https://www.keepinspiring.me/famous-
quotes/"><p>”The first step toward success is taken when you refuse to be a captive of
the environment in which you first find yourself.”</p></blockquote>
2. <cite>-Mark Caine</cite>
Test it Now

Output:
7. Short Quotations:
An HTML <q> ....... </q> element defines a short quotation. If you will put any content between <q>
....... </q>, then it will enclose the text in double quotes.

Example:
1. <p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About,
You Don?t Have To Be Pushed. The Vision Pulls You.</q>?</p>
Test it Now

Output:
8. Code tags
The HTML <code> </code> element is used to display the part of computer code. It will display the
content in monospaced font.

1. <p>First Java program</p>


2. <p><code>class Simple{ public static void main(String args[]){
3. System.out.println("Hello Java"); }} </code>
4. </p>
Test it Now

Output:
9. Keyboard Tag
In HTML the keyboard tag, <kbd>, indicates that a section of content is a user input from keyboard.

1. <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restor


e page on chrome.</p>
Test it Now

Output:
10. Address tag
An HTML <address> tag defines the contact information about the author of the content. The content
written between <address> and </address> tag, then it will be displayed in italic font.

1. <address> You can ask your queries by contact us on <a href="">example123@newdo


main.com</a>
2. <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
3. </address>
Test it Now
Output:

HTML Video Tag


HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such as a movie clip, song clip
on the web page.

Currently, there ares three video formats supported for HTML video tag:

mp4
webM
ogg

EXAMPLE
-------
<html>
<body>

<h1>The video element</h1>

<video width="620" height="440" controls>


<source src="Azar.mp4" type="video/mp4">
<source src="Azar.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>

Audio
-----
HTML Audio Tag
HTML audio tag is used to define sounds such as music and other audio clips. Currently there are three supported file
format for HTML 5 audio tag.

mp3
wav
ogg

Example
--------
<html>
<body>
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>
</body>
</html>

You might also like