Unit-1
HTML and CSS
Html : Hiper text markup language.
CSS: cascading style sheet.
Html: we are going develop web pages
Css: we will separate the web page presentation rather than its
content of a web page.
Html: tim berner lee.
Versions: 1.0
2.0
3.0
4.0
5.0
Extension for Html
.html or .htm
One.html
Two.htm
Software’s we are using for web pages:
Any editor and a browser.
Creating a web page:Editor: notepad, notepad++, edit+ or
wordpad
Display your output: Browser: i/e , Mozilla, chrome…
Tag:
<kldjflksdjf>
<html> open container
</html> close/end tag
<br> no end tag empty singleton
Structure to create a web page:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
09/05/2020
Character formatting tags:
1. <b>CSE
2. <i>
3. <u>
4. <sub>H2o
5. <sup>(a+b)2
6. <strong>
7. <big>
8. <small>
Block level formatting tags:
<body>
<body attributename=”value”>
2 attributes:
Bgcolor:
<body bgcolor=”name of the color”or “hexadecimal#000000 to
#FFFFFF”
Background: provide a background image for your web page
<body background=”path”>
<p> : provide your content as a paragraph
11-05-2020
<p align=”left/center/right”>
Djflkjslkfjlksf
</p>
<heading tags>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Align=”left/right/center”
<hr> Horizontal line : page break for a web page
Align
Width
Size
Noshade
Color
<font> It is used to specify a font to your content
Face: times new roman/arial/
Size 1 to 7
Color: name or hexadecimal
Marquee:
Align
Behavior
direction
Color
Scrollamount
Scrolldealy
Loop
Hiperlinks:
Anchor tag
<a>
</a>
Attributes:
Href
Target
Name
12/05/2020
Hyper links
<a>Name of your link</a>
Attributes:
Href: hyperlink reference name(html page you want to connect)
Name: it used to maintain a hyper link in the same page
Title: display the description of a link whenever you placed your
cursor on the link
Target: on which place your linked page output will be
displayed ( frame level)
Image tag:
Syntax:
<img src=”path” height=”n” width=”n” alt=”string”>
List Tags: are used to display your content in an ordered or
unordered form
1. Unordered list--- unordered format(bullet series)
2. Ordered list------- ordered format(number series or
sequence series)
3. Definition list ---- definition format
<li> </li>
Unordered list:
List will be displayed with bulltes(squares, circles and dots)
Syntax of ul
<ul type=’circle|square|dot’>
<li>item name</li
</ul>
Ordered list:
List will be displayted with a sequence
Numbers 1,2,3,4
Roman Numbers(I,II,III or i, ii,iii)
Alphabets(a,b,c or A,B,C)
Syntax:
<ol type=’a’|’A’|’I’ start=’n’>
<li>---</li>
<li>---</li>
<li>---</li>
<ol>
Definition list/description
This is tag is used to define a word or description of a content
<dl>
<dt>
<dd>
Table:
To display your content in the form of row and column , then
use table tag.
Syntax:
<table align=’center’|’left’|’right’ border=’n’ >
<tr>
<th></th>
<td></td>
</tr>
</table>
St.Mary’s Group of Institutions Guntur
Hi Hello How are you
Raja Rani Mantri
CSE
Hi Hello
Colspan: merge columns
Rowsapn: merge rows
<td> or <th>
Cellpadding:
Cellspacing:
<table>
Frames:
Frameset:
<frameset rows=’n,n’ or cols=’n,n’>
<frame name=’’ src=’’>
<frame>
</faremeset>
Entire frame tag information should available at head tag only
20-05-2020
Form:
Syntax:
<form name=’’ method=’’ action=’’>
</form>
Name: provide a name for your form tag
Method: how you can submit the data to the browser, get or post
Action: it will decide where to send your form data
Fields:
Text: display the data in text format
Password: display data but in the form of *******
Radio button: displays radio button ( select only one item)
Check box: display check boxes (select multiple items)
Submit: create a submit button
Reset :create a reset button
Button: create a button
Drop down menu can be created with the help of select tag
<select name=’name’>
<option>Value</option>
<option>Value</option>
</select>
Text area: provide a text box with no.of rows and coumns
<textarea name=’’ rows=’n’ cols=’m’>
</textarea>
Input element:
Syntax
<input type=’text/password/radio/checkbox/submit/reset/button’
Name=’’ value’’ size=’’>
Html5:
CSS
Cascading style sheet:
Separation of your web page presentation rather than its content.
Levels of CSS Programming
1. Inline Css programming
2. Internal CSS Programming or Embedded
3. External CSS Programming
Inline: Style code can written in the tag it self. For that particular
line only
Syntax:
<htmltag style=”propertyname:propertyvalue;
propertyname:propteryvalue;”>Content</htmltag>
<h1 style=”color:red;font-size:35pt;”>Welcome to Inline
CSS</h1>
Internal: Style code can be written in separate place(Header
section), and the style can be effected through out the web page
Syntax:
<head>
<style type=”text/css”>
Selector{propertyname:propertyvalue;}
Selector{propertyname:propertyvalue;propertyname:propertyval
ue;}
</style>
</head>
External : Style code written in a separate file, that can be
include to any no of web pages.(file.css)
<head>
<link rel=”stylesheet” type=”text/css” href=’file.css”>
</head>
Rel:
Type:
Href:
Css program contains rules:
Selector and property names and property value
Syntax:
Selector name {propertyname: propertyvalue;
propertyname: propertyvalue;}
Selector names are html tags / elements
Property names are attributes of the html tags
Property values are values of the attributes
H1{text-align:CENTER;}
H2{COLOR:RED;}
FONT{FONT-FACE:MONOTYPE CORSIVA;}
Selector forms:
How we will write selectors can be known by using this concept.
1. Selector element
2. Selector id
3. Selector class
4. Universal selector
5. Group selector
Selector element:
H1{propertyname:value;}
P{propertyname:value}
Selector ids:
By using this selector id we can write css rule as unique
Start with #
Example:
#para{text-align:center;color:red;}
<h1 id=”para”>raja</h1>
<p id=”para”>Rani</p>
Selector classes:
we can css rule,
start with . symbol
Example:
.wt{color:green;}
.bda{color:red;}
.cns{color:yellow;}
<h1 class=’wt”>Wt</h1>
<h1 class=’cns’>CNS</h1>
Universal selector:
Will effect entire web page with out using any staements
Start with *
Example:
CSS Box Model:
Conflict Resolution:
