Scribd
Upload
73 views81 pages

A822959691 - 25374 - 29 - 2020 - HTML CSS Javascript

This document provides an overview of HTML, CSS, and JavaScript. It discusses the basic structure and tags of HTML like headings, paragraphs, lists, tables and forms. It then covers CSS topics like selectors, properties, and ways to insert stylesheets. Finally, it briefly introduces JavaScript. The document is intended as a introductory guide to these core web technologies.

Uploaded by

VamsiSanam
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
73 views81 pages

A822959691 - 25374 - 29 - 2020 - HTML CSS Javascript

This document provides an overview of HTML, CSS, and JavaScript. It discusses the basic structure and tags of HTML like headings, paragraphs, lists, tables and forms. It then covers CSS topics like selectors, properties, and ways to insert stylesheets. Finally, it briefly introduces JavaScript. The document is intended as a introductory guide to these core web technologies.

Uploaded by

VamsiSanam
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/ 81

HTML CSS JAVASCRIPT

(Book: HTML 5 COVERS CSS3, JAVASCRIPT,XML,XHTML,AJAX by


KOGENT LEARNING, DREAMTECH
PRESS)
HTML
I INTRODUCTION
HTML
HTML
HTML
HTML ATTRIBUTES
HTML ATTRIBUTES
II BASIC TAGS
HEADING TAG
PARAGRAPH TAG
FIRST PROGRAM
Heading in the center using attribute align
CENTER TAG
BREAK TAG
HORIZONTAL LINES
Background Color and Font Tag
Background Image
NAVIGATION TAG
III FORMATTING IN HTML
BOLD TEXT
ITALIC TEXT
UNDERLINED TEXT
STRIKE TEXT
MONOSPACED FONT
SUPERSCRIPT TEXT
SUBSCRIPT TEXT
LARGER TEXT
SMALLER TEXT
MARKED TEXT
QUOTATIONS
DIFFERENT FORMATTING TAGS
GROUPED TEXT TAG(div)
It is used to group different elements to created divisions or sections of a web page.
It is written as: < div > Place content here…..! </ div >
Grouping Home About US Contact US
IV HTML IMAGE TAG AND ATTRIBUTES
Inserting an image on Webpage
Set an image with width/height attribute
Image Border
Image Alignment(right,left,center)
For center alignment use center tag
Image Alignment(center)
V VIDEO TAG
VIDEO FROM LOCAL STORAGE(LAPTOP/PC)
VIDEO FROM YOUTUBE
VI AUDIO TAG
AUDIO TAG
VII LISTS
LISTS
• In HTML, information can be specified using three types of lists.
• A list must contain at least one list element.
• Lists contain:
• <ul> - This is an unordered list. The list items will be listed using plain
bullets.
• <ol> - This is an ordered list. The list items in this list will be listed
with different schemes of numbers.
• <dl> - This is a definition list. The items in the definition list will be
arranged in the same way as they are in a dictionary.
UNORDERED LIST
type Attribute
• The type Attribute You can
actually specify the type of
bullet to be used by using the
type attribute of the <ul> tag.
• The default a bullet time is a
disc.
• The other possible options are:
<ul type="disc">
<ul type="square">
<ul type="circle">
ORDERED LIST
The type Attribute
• You can specify the numbering type
you like by using the type attribute of
the <ol> tag. The number will be the
default numbering type.
• The other possible options are the
following:
• <ol type="A"> - Upper-Case Letters.
• <ol type="a"> - Lower-Case Letters.
• <ol type="I"> - Upper-Case Numerals.
• <ol type="i"> - Lowercase Numerals.
• <ol type="1"> - Default-Case
Numerals.
DEFINITION LIST
• XHTML an HDMI support a list style called the definition list. Here are
the entities will be listed like as they are in a encyclopedia or
dictionary.
• Using the definition list is ideal for representing a list of items,
glossary, or other value/name lists.
• The given tags will be used by the definition list.
• <dl> - Defines the start of the list
• <dt> - A term
• <dd> - Term definition
• </dl> - Defines the end of the list
DEFINITION LIST
VIII TABLES
TABLE
• HTML tables are created with
the <table> tag.
• The <tr> tag is used to define
table rows while the <td> is used
to define data cells within the
row.
TABLE ATTRIBUTES
TABLE ATTRIBUTES
Cell padding and Cell spacing
Modifying Table Rows
Modifying Table Data
Merging Cells Horizontally(colspan)
<!DOCTYPE html> <td>Entomology</td>
<html> <td>Ornitology</td>
<head> <td>Ecology</td>
<title>Simple Table</title> </tr>
</head> </table>
<body> </body>
<table align= "center" border="3" width="600"> </html>
<tr>
<td colspan="3">Science</td>
</tr>
<tr>
<td>Botany</td>
<td>Zoology</td>
<td>Bacteriology</td>
</tr>
<tr>
Merging Cells Vertically(rowspan)
<!DOCTYPE html> <tr>
<html> <td>Entomology</td>
<head> <td>Ornitology</td>
<title>Simple Table</title> <td>Ecology</td>
</head> </tr>
<body> </table>
<table align= "center" border="3" width="600"> </body>
<tr> </html>
<td rowspan="3">Science</td>
<td>Biology</td>
<td>Maths</td>
<td>English</td>
</tr>
<tr>
<td>Botany</td>
<td>Zoology</td>
<td>Bacteriology</td>
</tr>
Merging Cells Vertically and Horizontally
<!DOCTYPE html> <tr>
<html> <td>Entomology</td>
<head> <td>Ornitology</td>
<title>Simple Table</title> <td>Ecology</td>
</head> </tr>
<body> </table>
<table align= "center" border="3" width="600"> </body>
<tr> </html>
<td rowspan="3">Science</td>
<td colspan=“3”>Biology</td>
</tr>
<tr>
<td>Botany</td>
<td>Zoology</td>
<td>Bacteriology</td>
</tr>
Practice Question1
CSS
I INTRODUCTION
CSS
• CSS means Cascading Style Sheets. CSS was created to simplify the
process of designing and presenting web pages. It is an easy-to-learn
design language that offers powerful control over the presentation of
HTML documents.
• CSS lets you save time. You can write one style sheet and define a
style for each element and apply it to several HTML pages.
• Faster loading time. If you’re using CSS, you need not create HTML
tag attributes all the time. You just have to write a CSS style for a tag
and apply it to each occurrence of that tag. This means less code
which translates to faster loading time.
CSS
• CSS3 is the latest version of Cascading Style Sheets. It introduced many new
properties that are currently being implemented in most browsers. The following
are CSS3’s most important modules:
Selectors
Text effects
Backgrounds and borders
Box model
2D/3D transformations
Animations
Multiple column layout
User interface
CSS PARTS
• A CSS style rule consists of two major parts:
• Selector: A selector is the HTML tag or element that will be styled. It could
be any tag like <table>, <p>, or <h1>. You can specify several selectors over
which the style may be applied.

• Declaration block: A declaration block consists of a property: value pair and


each pair are separated by a colon. A CSS property points to an HTML
attribute and can include color, border, etc. A value is assigned to each
property declared. A declaration block is enclosed by curly braces and may
contain one or more declarations which are separated by semicolons.
• Here’s an example of a rule set:
h1 {color:red; font-size:10px}
CSS SELECTORS
• Selectors are used to specify HTML elements based on their id, name,
attribute, class, etc. There are different ways to define CSS selectors and
you can choose whichever you need or whatever feels more convenient.

The Element Selector: The element selector uses the element’s name as
the basis for implementing a style.
• For example:
p{
text-align: left;
color: blue;
}
• The above style rule will result in all <p> elements to be left-aligned with a
blue text color.
CSS SELECTORS
ID Selector: ID selectors name an element’s id attribute as the basis
for implementing a style set. An element with that ID will be
formatted according to its style rule. To use the ID selector, you will
write a hash (#) character before the element’s ID.
• For example, the following style rule will apply to an element with the
id of "parax":
#parax {
text-align: left;
color: blue;
}
CSS SELECTORS
Class Selector: Class selectors are used to format elements with a
particular class attribute. The style rule you define will apply to all
elements that match the specified class. To use the class selector, you
will write a period (.) before the class name.
• For example, in the following code, all HTML elements with
class="black" will be blue and left-aligned:
.black {
text-align: left;
color: blue;
}
INSERTING A STYLE SHEET
• There are three ways to insert a style sheet:
• External style sheet
• Internal style sheet
• Inline style

External Style Sheets : An external style sheet allows you to change the look of
multiple pages and the layout of your entire website by simply changing a single
file. Any modification made to the external style sheet instantly updates all web
pages. The external style sheet is implemented by making a reference to the file
inside the link element placed within the <head> section of the HTML page.
EXTERNAL STYLE SHEETS
INTERNAL STYLE SHEETS
• An internal style sheet is commonly used when you want to present a
page in a different style.
• It is defined inside the <style> element placed within the <head> and
</head> tags of the HTML page.
• For example, the following code uses an internal style sheet to create
a pink background for the entire page and a heading in green font:
INTERNAL STYLE SHEETS
INLINE STYLE SHEETS
• An inline style is commonly used to apply a unique style or isolated
changes to a single element such as a headline, paragraph, or other
element.
• The use of inline style will override both external and internal style
sheets.
• To use it, you have to add the style attribute to the specific element.
INLINE STYLESHEET
<!DOCTYPE html>
<html>
<body>
<h1 style="color:yellow;margin-left:25px;">This space is reserved for a
heading. </h1>
<p>This is a space for a paragraph.</p>
</body>
</html>

You might also like