Scribd
Upload
66 views38 pages

WWWTTTT 11

The document provides an introduction to HTML and web programming. It discusses key topics such as: - The World Wide Web and how web pages are formatted using HTML. - Common HTML elements like headings, paragraphs, images, lists, tables, and forms that allow formatting and structure of web pages. - How HTML tags work and common tags like <h1>, <p>, <img>, <ul>, <ol>, <table>, <form>, and <input>. - Additional HTML features like frames that allow dividing the browser window into multiple sections.

Uploaded by

123hackzon
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
66 views38 pages

WWWTTTT 11

The document provides an introduction to HTML and web programming. It discusses key topics such as: - The World Wide Web and how web pages are formatted using HTML. - Common HTML elements like headings, paragraphs, images, lists, tables, and forms that allow formatting and structure of web pages. - How HTML tags work and common tags like <h1>, <p>, <img>, <ul>, <ol>, <table>, <form>, and <input>. - Additional HTML features like frames that allow dividing the browser window into multiple sections.

Uploaded by

123hackzon
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/ 38

Introduction to Web Programming

• World Wide Web The World Wide Web (abbreviated


WWW or the Web) is an information space where
documents and other web resources are identified
by Uniform Resource Locators (URLs), interlinked by
hypertext links, and can be accessed via the Internet.
• Web pages are primarily text documents formatted
and annotated with Hypertext Markup Language
(HTML).
• In addition to formatted text, web pages may contain
images, video, audio, and software components that
are rendered in the user's web browser as coherent
pages of multimedia content.
WWW is another example of client/server
computing. Each time a link is followed, the client is
requesting a document (or graphic or sound file)
from a server (also called a Web server) that's part
of the World Wide Web that "serves" up the
document.
The server uses a protocol called HTTP or Hyper
Text Transport Protocol.
The standard for creating hypertext documents for
the WWW is Hyper Text Markup Language or HTML.
HTML essentially codes plain text documents so
they can be viewed on the Web.
HTML
HTML is the building block for web pages. HTML
is a format that tells a computer how to display a web
page.
The documents themselves are plain text files with
special "tags" or codes that a web browser uses to
interpret and display information on your computer
screen.
HTML stands for Hyper Text Markup Language.
An HTML file is a text file containing small markup
tags.
The markup tags tell the Web browser how to
display the page.
An HTML file must have an htm or html file
extension.
HTML Tags
• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters
< and >.
• The surrounding characters are called angular
brackets.
• HTML tags normally come in pairs like and The
first tag in a pair is the start tag, the second tag is
the end tag .
• The text between the start and end tags is the
element content . HTML tags are not case
sensitive, <B>means the same as<b>.
HTML TABLES:
A table in HTML consists of table cells inside rows and columns.
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Cells
• Each table cell is defined by a <td> and a </td>
tag.
• td stands for table data.
Table Rows
• Each table row starts with a <tr> and ends
with a </tr> tag.
• tr stands for table row.
Table Headers
• Sometimes you want your cells to be table
header cells. In those cases use the <th> tag
instead of the <td> tag:
• th stands for table header.
• <table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML Table Borders
• HTML tables can have borders of different
styles and shapes.
1)bgcolor attribute - You can set background
color for whole table or just for one cell.
2)background attribute - You can set background
image for whole table or just for one cell. You
can also set border color also using
bordercolor attribute.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1“ bordercolor="red“ bgcolor="yellow">
<tr><th>Name</th>
<th>Salary</th></tr>
<tr><td>Jayapal </td>
<td>50,000.00</td> </tr>
<tr><td>Ravi</td>
<td>45,000.00</td>
</tr>
</table>
</body>
</html>
Output
Images
• Images are very important to beautify as well as
to depict many complex concepts in simple way
on your web page.
• Insert Image: insert any image in the web page
by using <img>tag.
<img align="left|right|middle|top|bottom">
Syntax:
<img src="Image URL" ... Attributes/>
<!DOCTYPE html>
<html>
<head> <title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
</body> </html>
Lists
HTML offers web authors three ways for specifying
lists of information.
All lists must contain one or more list elements.
Lists are of three types
1) Un ordered list
2)Ordered List
• Unordered Lists:
An unordered list is a collection of related items
that have no special order or sequence. This list is
created by using HTML <ul> tag. Each item in the
list is marked with a bullet.
<!DOCTYPE html> <html> <head>
<title>HTML Unordered List</title> </head>
<body>
<ul> <li>Beetroot</li> <li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body> </html>
• Ordered Lists:-
items are numbered list instead of bulleted, This
list is created by using <ol>tag.
<!DOCTYPE html>
<html> <head> <title>HTML Ordered List</title>
</head>
<body>
<ol type=“1”> <li>Beetroot</li>
<li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol>
</body>
HTML FORMS
• HTML Forms are required to collect some data from the
site visitor.
• For example, during user registration you would like to
collect information such as name, email address, credit
card, etc.
• A form will take input from the site visitor and then will
post it to a back-end application such as CGI, ASP Script
or PHP script etc.
• The back-end application will perform required
processing on the passed data based on defined
business logic inside the application.
• There are various form elements available like text
fields, text area fields, drop-down menus, radio
buttons, checkboxes, etc.
Syntax:
<form action="Script URL" method="GET|POST">
form elements like input, text area etc. </form>
• There are different types of form controls that you
can use to collect data using HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Submit and Reset Button
• Text Input Controls:-
There are three types of text input used on forms:
1) Single-line text input controls - This control is
used for items that require only one line of user
input, such as search boxes or names. They are
created using HTML <input>tag.
<form>
Firstname:<br>
<input type= "text“ name="firstname"><br>
Lastname:<br>
<input type="text" name="lastname">
</form>
2) Password input controls –
This is also a single-line text input but it masks the
character as soon as a user enters it. They are also
created using HTML <input>tag.
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
3) Multi-line text input controls –
This is used when the user is required to give
details that may be longer than a single sentence.
Multi-line input controls are created using HTML
<textarea> tag.
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description: <br />
<textarea rows="5" cols="50" name="description">
Enter description here... </textarea>
</form> </body> </html>
Checkboxes Controls:-
• Checkboxes are used when more than one option is
required to be selected. They are also created using
HTML <input> tag but type attribute is set to
checkbox.
<html>
<head><title>Checkbox Control</title></head>
<body>
<form> <input type="checkbox" name="C++"
value="on"> C++ <br>
<input type="checkbox" name="C#" value="on"> C#
<br>
<input type="checkbox" name="JAVA" value="on">
JAVA </form>
</body></html>
• Radio Button Control:-
Radio buttons are used when out of many options,
just one option is required to be selected. They are
attribute is set to radio.
<html>
<head><title>Radio Box Control</title></head>
<body><p>Select a Course</p>
<form>
<input type="radio" name="subject" value="C++"> C++ <br>
<input type="radio" name="subject" value="JAVA"> JAVA
<br>
<input type="radio" name="subject" value="HTML"> HTML
</form>
</body></html>
• Select Box Controls :-
A select box, also called drop down box which
provides option to list down various options in the
form of drop down list, from where a user can
select one or more options.
<html>
<head> <title>Select Box Control</title> </head>
<body>
<form> <select name="dropdown">
<option value="C++" selected>C++</option>
<option value="JAVA">JAVA</option>
<option value="HTML">HTML</option>
</select> </form> </body> </html>
• File Select boxes:-
If you want to allow a user to upload a file to your
web site, you will need to use a file upload box, also
known as a file select box. This is also created using
the <input> element but type attribute is set to file.
<!DOCTYPE html>
<html>
<head> <title>File Upload Box</title> </head>
<body> <p>File Upload Box</p>
<form> <input type="file" name="fileupload"
accept="image/*" />
</form> </body> </html>
• Button Controls:-
There are various ways in HTML to create clickable
buttons. You can also create a clickable button using
<input> tag by setting its type attribute to button.
The type attribute can take the following values:
<html>
<head> <title>File Upload Box</title> </head> <body>
<form>
<input type="submit" name="submit"
value="Submit"/>
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton"
src="test1.png" />
</form> </body></html>
HTML frames:
 These are used to divide your browser window
into multiple sections where each section can load
a separate HTML document.
 A collection of frames in the browser window is known as a
frameset.
 The window is divided into frames in a similar way
the tables are organized: into rows and columns.
 To use frames on a page we use <frameset> tag
instead of <body> tag.
 The <frameset> tag defines, how to divide the window into
frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical
frames. Each frame is indicated by <frame> tag and it
defines which HTML document shall open into the frame.
• Note: HTML <frame>Tag. Not Supported in HTML5.
<frameset cols="25%,50%,25%"> <frame
src="frame_a.htm"> <frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
<html>
<head> <title>Page Title</title> </head>
<body>
<iframe src="sample1.html" height="400" width="400“
frameborder="1">
<h1>This is aHeading</h1>
<p>This is aparagraph.</p> </iframe> </body> </html>
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be
displayed on screen, paper, or in other media.
CSS saves a lot of work.
• It can control the layout of multiple web pages
all at once.
CSS can be added to HTML elements in 3 ways:
• Inline - by using the style attribute in
HTMLelements
• Internal - by using a <style> element in the
<head>section
• External - by using an external CSS file
Inline CSS
• An inline CSS is used to apply a unique style to a
single HTML element. An inline CSS uses the style
attribute of an HTML element.
• This example sets the text color of the <h1>
element to blue:
<html>
<head> <body>
<title>Page Title</title></head>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body> </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
<html>
<head>
<style>
Body
{background-color: powderblue;}
h1 {color: blue;} p {color:red;}
</style> </head>
<body> <h1>This is aheading</h1> <p>This is a
paragraph.</p> </body> </html>
External CSS:-
• An external style sheet is used to define the
style for many HTML pages.
• With an external style sheet, you can change
the look of an entire web site, by changing one
file! To use an external style sheet, add a link to
it in the <head> section of the HTML page:
<html>
<head> <link rel="stylesheet" href="styles.css">
</head>
<body> <h1>This is aheading</h1> <p>This is a
paragraph.</p>
</body> </html>
An 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.
body
{
background-color: powderblue; }
h1
{ color:blue; }
p { color:red; }
CSS Fonts:
The CSS color property defines the text
color to be used.
<html>
<head>
<style>
h1 { color: blue; font-family: verdana; font-size: 300%; }
p{ color: red; font-family: courier; font-size: 160%; }
</style>
</head>
<body> <h1>This is aheading</h1> <p>This is
aparagraph.</p>
</body>
</html>
• CSS Border: The CSS border property
defines a border around an HTML
element.
• CSS Padding: The CSS padding property
defines a padding (space) between the
text and the border.
• CSS Margin: The CSS margin property
defines a margin (space) outside the
border.
<html>
<head> <style>h1
{ color: blue; font-family: verdana; font-size: 300%;
}p
{ color: red; font-size: 160%; border: 2px solid
powderblue; padding: 30px; margin: 50px; }
</style>
</head>
<body> <h1>This is aheading</h1> <p>This is
aparagraph.</p>
</body> </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