Programming languages: coding: software development
Stand alone s/w: calculator,alarm
Web based s/w: using internet
HTML Introduction
HTML is the standard markup language for creating Web pages.
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>SP Computers</h1>
<p>My first paragraph.</p>
<br>
<hr>
Note: Some HTML elements have no content (like the <br> element).
These elements are called empty elements. Empty elements do not
have an end tag!
WHY HTML ?
HTML has facility of Ordinary text formatting and process
of applying extra features to this ordinary text.
HTML is a collection of platform independent styles that define
define various components of web.
It is effective medium of presenting information to developers.
Advantages of HTML
HTML is easy to learn and implement (Alternative to traditional presentation
software.)
Powerful text formatting facility
Device and platform independent.
HTML is Free. ...
HTML is supported by all Browsers. ...
HTML is Simple to Edit. ...
HTML can Integrate Easily with Other Languages. ...
HTML is Lightweight. ...
HTML is Basic of all Programming Languages.
Browser- software/program to use internet
e.g. Chrome, MS edge, safari, opera, internet explorer, Mozilla firefox
Visual studio code / notepad + browser /
notepad++
Smartphone : Andoroid – Acode /Anwriter
HTML Page Structure
Below is a visualization of an HTML page structure:
HTML – architecture/ Layout
Css- styling
Script - behaviour
Basic HTML Tags
<HTML> - This tag identifies a document as an html document.
Document should start with <HTML> tag and end with</HTML>
<HEAD>- This tag contains information about the document. This
tag contains TITLE, BASE,ISINDEX,META,SCRIPT,STYLE AND LINK
Tags. The syntax is <HEAD>…….</HEAD>
<TITLE>- This tag specifies title of the document, which should be
placed inside <head> tag. The text should be simple text. Therefore
it should be short, less than 64 characters.
Style – Stylesheet instructions should be written in stylesheet
language. Stylesheet specifies how document should be formatted
for display. The HTML style attribute is used to add styles to an
element, such as color, font, size, and more.
Script-Script program code -- for enclosing within a document
For eg.
<HTML>
<HEAD>
<SCRIPT Language=”VBSCRIPT”>VBSCRIPT</SCRIPT>
</HEAD>
<BODY>- This tag defines contents of document. Various elements
are included within this body tag….like heading, paragraph, llist,
link, images etc.
Attributes for Body tag
BACKGROUND: <body background=”a.gif”>
BACKGROUND COLOR: <body bgcolor=”Red”>
TEXT :<body text=”BLUE”>
<P> - Paragraph is defined in this tag. It can contain Align attribute
for alignment of text within a tag.
Eg. <P align=”center”>This is paragraph</p>
HTML automatically add extra line before and after <p> tag
Indentations or blank lines/spaces are ignored in<p> tag.
<PRE> - Preformatted text can be inserted in a document using this
tag. The text inside a <pre> element is displayed in a fixed-width
font (usually Courier), and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
<BR>The HTML <br> element defines a line break. Use <br> if you
want a line break (a new line) without starting a new paragraph.
The <br> tag is an empty tag, which means that it has no end tag.
<HR>-The <hr> tag defines a thematic break in an HTML page, and
is most often displayed as a horizontal rule.The <hr> element is
used to separate content (or define a change) in an HTML page
HEADINGS – <H1>--- <H6> defines heading tags. HTML headings
are titles or subtitles that you want to display on a webpage. HTML
headings are defined with the <h1> to <h6> tags.<h1> defines the
most important heading. <h6> defines the least important heading.
Character formatting tag
<b>….</b> :Bold
<i>…</i>: Italic
<u>…..</u>: Underline
<Em>… </em>: Emphasis
<strong>….</strong>: Strong
<sub>….</sub> : Subscript H2SO4
<sup>..</sup>: Superscript X2+Y2=Z3
<font size=16 face=”Calibri” color=”darkred”>
</font>
HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Type of ul tags : type=”disc”, “circle”,”square”
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<OL>- ordered list
1,2,3
A,B,C,
I,II,III
<ol type="I" style= "Font-size:120%; color:Red">
<li>Rose</li>
<li>Lotus</li>
<li>Jasmine</li>
<li> Delia</li>
<li>Lily</li>
</ol>
Nested List tags
<h3>Nested list example: Multilevel List</h3>
<UL>
<li>Maharashtra</Li>
<ul>
<li>Pune</li>
<ol>
<li>Haveli</li>
<li>Baramati</li>
</ol>
<li>Mumbai</li>
</ul>
<li>Karnataka</li>
<ol>
<li>Bengalore</li>
<li>Belgaon</li>
</ol>
<li>Gujrath</li>
<ul>
<li>Baroda</li>
<li>Ahemedabad</li>
</ul>
<li>Madhyapradesh</li>
<ol>
<li>Bhopal</li>
<li>Indore</li>
</ol>
</ul>
<ul type=”circle”>
<li>File</li>
<ul>
<li>New</li>
<ol>
<li>Document</li>
<li> Blog post</li>
<li>template</li>
</ol>
<li>Open</li>
<li>Save</li>
<li>Print</li>
</ul>
<li>Edit</li>
<li>View</li>
</ul>
File
New
Document
Blog post
template
Open
Save
Print
Exit
Edit
Cut
Copt
Paste
View
Status bar
Format
Word wrap
Font
Font
Font-size
Font-style
Help
Mobile menu
<ol>
<li>Call</li>
<ul>
<li>received<li>
<li>dialed</li>
<li>missed</li>
</ul>
<li>Message</li>
<ul>
<li>Inbox</li>
<li>Write message</li>
<li>Outbox</li>
</ul>
<li>multimedia</li>
<ul>
<li>Clock<li>
<li>calculator</li>
<li>Fm Radio</li>
</ul>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list.
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with
a <th> tag. Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
Table elements
<table> - element to define a table
<tr>- element to define a table row
<td> - element to define a table data
<th> - element to define a table heading
<caption> - element to define a table caption
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Table attributes
Align- This attribute specifies horizontal placement of table.
Left: aligns the table to left(default)
Right: aligns the table to right
Center: aligns the table in the center
Bgcolor- sets the color of the background of the table. Example
<table bgcolor=”yellow”>……</table>
Border- This attribute indicates the thickness of the border of the table in
pixels. Give the value as an integer. For example <table border=”2”>
Cellpadding- This attribute determines the amount of space between
the border of the cell and contents of the cell. For example
<table cellpadding=”20”>. The default value is 1.
Cellspacing- This attribute determines the amount of space between
indivisual cells in a table in pixels. The default value is 2.
Height- This attribute specifies the height of the table. This can be a
percentage of height of page or parent element.
Width- This attribute defines width of the table. This can be a percentage of
width of page or parent element. For example
<table height=120%>
Cols- This attribute indicates how many columns fit in the width of the
window
Hspace- This attributes specifies the distance between left and right edges
of the table and surrounding content i.e. horizontal margin.
Vspace- This attribute defines distance between top and bottom edges of
the table and surrounding content.
Attributes for <th> and <td> tags:
Align – Horizontal alignment of a cell(Left,Center,Right)
Valign – Vertical alignment of a cell(top,middle,bottom)
Colspan - The number of columns a cell spans
Rowspan – The number of rows a cell spans.
Example 1:
Name Address City Contact number
Sagar Muthal Samarthnagar Nagpur 9850247645
Ashvini Kulkarni Tilaknagar Mumbai 8484767564
Kalpana Joshi High-Bliss Society Pune 9988767534
Example 2:
Admission process
Cummins college of Engineering
Courses No. of Students
Computer 120
Instrumentation 80
E & TC 60
Example 3:
Snacks Center
Food Rate discount
Pav-bhaji Rs.120 5%
Pizza Rs.350 7%
Example 4:
Programming Language type Example
Object oriented Programming Language Java
CPP
Structured Language C
Basic
Example 5:
With toppings Rs.150
Pizza(domino’s)
Without toppings Rs.120
Cheese pavbhaji Rs.40
Pav-bhaji
Jain pavbhaji Rs.42
Example 6:
Programming Languages
Java
Object oriented programming
C++
C
Structured language
Basic
<table border=2>
<tr>
<td colspan=2>Programming Language</td>
</tr>
<tr>
<td rowspan=2>Object Oriented Language</td>
<td>Java</td>
</tr>
<tr>
<td>C++</td>
</tr>
<tr>
<td rowspan=2>Structured Language</td>
<td>C </td>
</tr>
<tr>
<td>Basic</td>
</tr>
</table>
Example 7:
YEAR
1998 1999 2000
UNITS 500 400 1000
SALES
INCOME 1000 800 2000
FACULTY
ARTS SCIENCE COMMERC
E
BOYS 100 400 500
STUDENTS GIRLS 300 300 400
HTML IMAGES
<IMG> - this tag is used to insert image in webpage. Images
can be of following types.
GIF
JPEG/JPG/PNG
XPM- X pixMap
XBM- X bitmap
Image Attributes
SRC-Source attribute is compulsory. The format is
<img src=”Location(URL)”>
Where URL is address of the image to be displayed. Uniform
Resource Locator
ALT – specifies the alternative text if browser do not support
img tag or loading takes time. The format is
<img src=”Location” Alt=”This is image”>
Align- specifies the alignment of image with respect to
surrounding text.
(Right,Top,Texttop,Middle,Baseline,Bottom)
Border – Specifies the width of the border around the image.
Height – specifies the height of the image in pixels or
percentage of height of window. The format is
<img src=”location” height=100>
Width – specifies the width of the image in pixels or
percentage of width of the window. The format is
<img src=”Location” width=150>
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
A link does not have to be text. A link can be an image or any other HTML element!
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL (uniform
Resource Locator) address.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Links - The target attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was
clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Use target="_blank" to open the linked document in a new browser window or
tab:
<a href="https://www.google.com/" target="_blank">Visit Google!</a>
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in
the href attribute.
A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part):
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href=" D:\Samruddhi\12th science\HTML\HTML Colors">HTML Colors</a></p>
<p><a href="D:\Samruddhi\MCCE\sylabus & notes\C programming Crash course">C
Programming</a></p>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width=42 height=42>
</a>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email program
(to let them send a new email):
Example
<a href="mailto:someone@example.com">Send email</a>
Link to same page in a document
Particular places in a document can be marked as specific destinations of hypertext links
via NAME attribute, link to specific sections.
Anchors are used to move the reader to particular sections of document.
This type of anchor is called as named anchor.
<p>
<a href="#samepage">Link to samepage</a>
</p>
<a NAME="samepage">
<h2>
You are in same page.
</h2>
</a>
<marquee> To scroll text</marquee>
CSS –cascade style sheet
<html>
<head>
<style>
H2{
Color:Yellow;
}
</style>
</head>
<body>
</body>
</html>
HSC Science
1. Physics
2. Chemistry
3. Maths
4. Computer Science
a. Paper 1
i. Operating System
ii. Data Structure
iii. CPP Programming
iv. Html
b. Paper 2
i. Introduction To Microprocessor
ii. Instruction Set Of 8085
iii. Networking Technology
iv. X-86 Family
v. Introduction To Microcontroller
Title bar –
Topmost bar of every window, shows the title of application
Scrollbars –
Vertical /horizontal bar to move page or window up/down and move across left/right
