Scribd
Upload
17 views

HTML Notes

The document discusses HTML elements and tags used to structure web pages. It describes common elements like headings, paragraphs, lists, links, and tables. It also covers empty elements, block-level and inline elements.

Uploaded by

lolvir12
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

HTML Notes

The document discusses HTML elements and tags used to structure web pages. It describes common elements like headings, paragraphs, lists, links, and tables. It also covers empty elements, block-level and inline elements.

Uploaded by

lolvir12
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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

You might also like