PM Coverage

WEB PROGRAMMING
Pre-Mid term Coverage
Introduction
Web programming refers to the writing, markup and coding involved in Web
development, which includes Web content, Web client and server scripting and network
security. The most common languages used for Web programming are XML, HTML, JavaScript,
Perl 5 and PHP. Web programming is different from just programming, which requires
interdisciplinary knowledge on the application area, client and server scripting, and database
technology. (https://www.techopedia.com/article/topics retrieval 11/22/19).
HTML (Hypertext Markup Language) is the foundation of a website. While you may see
file extensions like php, cfm, asp, etc., these files will still contain HTML tags in order to display
content. An HTML file is placed on a server and when requested by a user, it is read into the
user’s browser and displayed as a web page.
The standards and practices for writing HTML are set by the World Wide Web
Consortium (W3C) and there are multiple versions of HTML. Since this is more of an
introduction to HTML, we will not go into detail about the various versions like XHTML, HTML
4.01, and HTML 2.0.
HTML is a very easy language to learn and super simple to write (not that I would
necessarily call HTML a language so to speak). A Markup Language is defined as transporting
data, not acting upon the data itself. The “code” is encapsulated in a skeleton like the example
below.
HTML Skeleton
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
As you can see, the language uses words contained inside <>, known as tags or
elements. You also might notice that every tag is almost duplicated, but the second tag has a /
before it. These are referred to as opening and closing tags and are required by most HTML
elements. The important tags here are <html>, <head>, <body>. The <html> simply tells the
browser, “Hey, this is html code.” While the <head> tells the browser specific things about the
document, it does not display anything on the web page. Finally, anything inside of
the <body></body> tags will display in the web page. We will go into more detail about
the <head> and <body> later.
What is HTML?
1.Any and every webpage is encoded in HTML( Hyper Text Markup Language).
2.A HTML document is a plain text file which is encoded in HTML language.A browser is used
to decode the HTML document and display(or render) it to the user
3.All contents within the HTML document is surrounded by tags.These tags enable the browser
to determine the formatting, layout and other specifications related to the HTML webpage(or
document).
4.HTML international standards and specifications and are defined and maintained by the
World Wide Web Consortium(W3C) and WHATWG.
The specifications of HTML are never complete and is continously evolving as the demand of
more features increases.
So what is HTML5?
1. There is a huge buzz surrounding HTML5.HTML5 is a major upgrade to HTML specification,
last such upgrade happened some 11 years ago(XHTML 2000)
2. The update introduces new features like interactivity, smart forms, improved multimedia
support, better semantics ,offline support etc etc. But all this is in addition to the earlier features
and the slate hasn't been wiped clean or everything done from the scratch.
3. In fact HTML5 is an umbrella term used to describe all the related set of technologies that are
used to develop modern and rich in feature web contents. The most important ones are
Cascading style sheets(CSS) and Javascript.
HTML Elements and Tags

1. The HTML web document is made up of elements. Each element is usually made up of two
tags start tag and end tag(eg:<start tag> ..... </end tag>).
2. Usually most HTML elements have two-sided tags. The end tag always ends with a forward
slash( / ).
<start tag> All your contents go here </end tag>

Note- The html tags are not case-sensitive i.e </body> and </boDY> or even </BODY> will be
treated as body element only.
HTML Document Structure

<html>
<head> Title and metadata go here </head>
<body>
<h1> The Main heading </h1>
<p> The paragraph </p>
<h2> The Sub heading </h2>
<p> The paragraph </p>
</body>
</html>
Explanation.
1. The HTML start tag (<html>) denotes the start of html document, and end Tag (</html>)
denotes the end of html document.
2. The head tag (<head> .... </head>) contains the title , metadata or links to external javascript
and CSS resources.
3. The body tag (<body> .... </body>) indicates that anything within the tags will be displayed by
the browsers main window.
4. The contents enclosed within the headings(<h1> .... </h1>) denote the main headings of the
contents.
5. The text encapsulated within the paragraph tag (<p> .... </p>) indicates paragraphs or any
text
So all the tags function just like containers to store or hold different types of data.(eg: Text,
images, multimedia etc).
HTML Evolution over the years.
 HTML [1991]
 HTML2 [1994]
 HTML + CSS [1996]
 Javascript [1996]
 HTML4 [1997]
 CSS 2.0 [1998]
 XHTML 1 [2000]
 Layouts without Tables[2002]
 AJAX [2005]
 HTML5 [2009]
Part II.
Creating HTML Documents
All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Skeleton
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
HTML Tags description Example

<h1> </h1> Defines HTML
<h2> </h2> headings <html>
<h3> </h3> <head>
<h4> </h4>
<h5> </h5> <title>HTML Head Tag - Tutorial and Reference</title>
<h6> </h6> </head>
<body>
<h1> I am very important </h1>
<h2> I am very important </h2>
<h3> I am important </h3>
<h4> I am kind of important </h4>
<h5> I am somewhere below important </h5>
<h6> I am near the importance and size of a paragraph tag </h
6>
</body>
</html>
<title> </title> Indicates the title

of the document
<body> Encloses the body

</body> of the HTML
document
<Bg> Indicates the

background color
<p> </p> Creates

paragraph <p> I am a paragraph. </p>
<p> I am another paragraph. </p>
<br> Creates a line

break
<hr> Creates a
horizontal rule line
<ol> Defines an
<ol>
ordered list
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<pre></pre> Defines a pre-

formatted text
<ul> Defines an
<ul>
unordered list
<li>Oranges</li>
<li>Bananas</li>
<li>Watermelons</li>
<li>Pineapples</li>
<li>Grapes</li>
</ul>
<b></b> Defines a bold text

<b>classgist</b>
<i></i> Italized text

<i> classgist</i>
<em></em> Defines an
emphasized text.
<div></div> Defines a section

in a document <div>This is a DIV container</div>
<dd></dd> Defines a </head>

<body>
description of an
<h1>GeeksforGeeks</h1>
item in a definition <h2>dl Tag</h2>
list. <dl>
<dt>GeeksforGeeks</dt>
<dd>A Computer Science Portal For
<dl></dl> Defines a Geeks</dd>
definition list </dl>
</body>
</html>
<img> Defines an image

<img src="logo.jpg" alt="sitelogo" w
idth="100" height="100">
(The source file
(src), alternative Or
text (alt), and size
<html>
(width and height)
are provided as <head>
attributes: <title>Img Src Attribute Example</title>
</head>
<body>
<img
src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400">
</body>
</html>
<sub></sub> Defines a <!DOCTYPE html>

subscripted text <html>
<body>
<p>Testing <sub>subscript text</sub></p>
<sup></sup> Defines a <p>Testing <sup>superscript text</sup></p>
superscripted text </body>
</html>
<table></table> Defines a table
<table border="1" cellpadding="5" ce
llspacing="5">
<td></td> Defines a cell in a <tr>
table <td>One</td>
<td>Two</td>
<th></th> Defines a header </tr>
cell in a table. <tr>
<td>Three</td>
<td>Four</td>
<tr></tr> Defines a row in a
table </tr>
</table>
<a><a/> Defines a
hyperlink <a href="http://www.classgist.com">classgist</a>
(The link's destination is specified in the href attribute.)
Radio button A radio button is a <input type="radio" name="gender" value="male"> Male

form element that
allows the user to <input type="radio" name="gender" value="female"> Female
select one option from
a range of options.
Radio buttons are
created with the
HTML <input> tag.
Radio buttons can be
nested inside
a <form> element or
they can stand alone.
They can also be
associated with a form
via the form attribute
of the <input> tag.
Checkboxes
<h3>Checkboxes</h3>
<p>What would you like for lunch?</p>
<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="orange"> Orange
<input type="checkbox" name="fruit" value="banana"> Banana
<p><input type="submit" value="Submit"></p>
</form>
<h3>Result:</h3>
<iframe name="result2" style="height:100px;width:200px;"></iframe
>
<form></form> <form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender"
value="female">Female<br>
<input type="radio" name="gender" value="other">Other
<input list="Options">
<datalist id="Options">
<option value="Option1">
</datalist>
<input type="submit" value="Submit">
<input type="color">
<input type="checkbox" name="correct"
value="correct">Correct
</form>
Note: Give series of activities to see the output of the codes:

Please add html codes to the table above based on the activities given. Integrate CSS after the
introduction of the html code.

PM Coverage

Uploaded by

Copyright:

Available Formats

PM Coverage

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PM Coverage

Uploaded by

Copyright:

Available Formats

WEB PROGRAMMING

Pre-Mid term Coverage

HTML Elements and Tags

<start tag> All your contents go here </end tag>

HTML Document Structure

<head> Title and metadata go here </head>

<h1> The Main heading </h1>

<p> The paragraph </p>

<h2> The Sub heading </h2>

<p> The paragraph </p>

HTML Tags description Example

<title> </title> Indicates the title

<body> Encloses the body

<Bg> Indicates the

<p> </p> Creates

<br> Creates a line

<pre></pre> Defines a pre-

<b></b> Defines a bold text

<i></i> Italized text

<div></div> Defines a section

<dd></dd> Defines a </head>

<img> Defines an image

<sub></sub> Defines a <!DOCTYPE html>

Radio button A radio button is a <input type="radio" name="gender" value="male"> Male

Note: Give series of activities to see the output of the codes:

You might also like