HTML and CSS

HTML
 HTML Common tags

 List
 Tables
 Images
 Forms
 Frames
 Cascading Style sheets
 HTML stands for Hypertext Markup Language.
 HTML is a method of describing the format of

documents which is viewed on the screen.
 This was developed by Tim Berners-Lee.
 HTML is an application of SGML.

 HTML 1991
 HTML+ 1993
 HTML 2.0 1995
 HTML 3.2 1997
 HTML 4.01 1999
 XHTML 1.0 2000
 HTML5 2012
 XHTML5 2013
 HTML stands for Hyper Text Markup Language
 HTML is a markup language
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages

 HTML markup tags are usually called HTML tags.
 HTML tags are keywords (tag names) surrounded by angle brackets like
<html>.
 They are not case sensitive : <HEAD> , <head> , <hEaD> are same.
 HTML tags normally come in pairs like <b> and </b>.
 The first tag in a pair is the start tag, the second tag is the end tag.
 The end tag is written like the start tag, with a forward slash before the
tag name.
 Start and end tags are also called opening tags and closing tags.
 Syntax: <tagname>content</tagname>
 <html>
 <head>
 <title> First HTML Document </title>
 </head>
 <body>
 <h1>This a heading</h1>
 <p>A sample paragraph</p>
</body>
 </html>
 To learn HTML we can use text editors like
Notepad (PC) or TextEdit (Mac).
 HTML can be edited by using a professional

HTML editors like:
 Adobe Dreamweaver.
 Microsoft Expression Web.
 CoffeeCup HTML Editor.

 Step 1 : Start notepad
 Step 2 : Write/Edit the code in the notepad
 Step 3 :Save your HTML as filename.htm/html
 Step 4 : Run the HTML file.

 Comments can be inserted into the HTML code to
make it more readable and understandable.
 Comments are ignored by the browser and are not

displayed.
 

 HTML Paragraphs
 <p>This is a paragraph.</p>
 HTML Headings
 HTML headings are defined with the
 <h1> to <h6> tags.
 <h1>This is a heading</h1>
<h2>This is a heading</h2>
 <hr> Tag:
 The <hr> tag creates a horizontal line in an

HTML page.
 The hr element can be used to separate
content:
 HTML Line Breaks:
 Use the <br> tag if you want a line break.

 <basefont size=“n”> where n= 1to 7.
 <font size=“[+/-]n” color=“#rrggbb”>
 <b> ….</b>
 <i>……</i>
 <sub>….</sub>
 <sup>…..</sup>
 <pre>….</pre>
 & < > "
 A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to another
document.
 When you move the cursor over a link in a Web page,

the arrow will turn into a little hand.
 The most important attribute of the <a> element is

the href attribute, which indicates the links
destination.
 <a href="url">Link text</a>
 <a href=“www.googlescholar.com”> Visit My

Favorite website!</a>
 The target attribute specifies where to open
the linked document.
 The example below will open the linked

document in a new browser window or a new
tab:
 <a href="http://www.googlescholar.com/"
target="_blank">Visit My Favorite
website!</a>
 The most common HTML lists are ordered
and unordered lists:
 An ordered list:
1.The first list item
2.The second list item
3.The third list item
 An unordered list:
. List item
. List item
. List item
 An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
 The list items are marked with bullets (typically

small black circles).
 <ul type=“disc” | “square” | “circle” |” compact” >
 <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
 Output:
.Coffee
.Milk
 An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
 The list items are marked with numbers.

 <ol type=“a” | “A” | “I” | “i” | start = “n”>
 <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
 Output:
1. Coffee
2. Milk

 A description list is a list of terms/names, with a description of
each term/name.
 The <dl> tag defines a description list.
 The <dl> tag is used in conjunction with <dt> (defines
terms/names)
 and <dd> (describes each term/name):
 <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 Coffee
- black hot drink
Milk
- white cold drink
 Tables is a grid of information as a ledger or
spread sheet.
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr>
tag).
 Each row is divided into data cells (with the
<td> tag) where td is "table data," and holds
the content of a data cell.
 A <td> tag can contain text, links, images,
lists, forms, other tables, etc.
 <table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
 Header information in a table are defined with the <th>
tag.
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
 <html>
 <body>
 <h4>Cell that spans two columns:</h4>

 <tr>
 <th>Name</th>
 <th colspan="2">Telephone</th>
 </tr>
 <tr>
 <td>Bill Gates</td>
 <td>555 77 854</td>
 <td>555 77 855</td>
 </tr>
 </table>
 </body>
 </html>
 <h4>Cell that spans two rows:</h4>
 <tr>
 <th>First Name:</th>
 <td>Bill Gates</td>
 </tr>
 <tr>
 <th rowspan="2">Telephone:</th>
 <td>555 77 854</td>
 </tr>
 <tr>
 <td>555 77 855</td>
 </tr>
 </table>
 Tag Description
 <table> Defines a table

 <th> Defines a header cell in a table
 <tr> Defines a row in a table
 <td> Defines a cell in a table
 <caption> Defines a table caption
 <thead> Groups the header content in a table
 <tbody> Groups the body content in a table
 <tfoot> Groups the footer content in a table
 <html>
 <body>
 <h4>Without cellpadding:</h4>
 <tr>
 <td>First</td>
 <td>Row</td>
 </tr>
 <tr>
 <td>Second</td>
 <td>Row</td>
 </tr>
 </table>
 <h4>With cellpadding:</h4>
 <table border="1"
 cellpadding="10">
 <tr>
 <td>First</td>
 <td>Row</td>
 </tr>
 <tr>
 <td>Second</td>
 <td>Row</td>
 </tr>
 </table>
 </body>
 </html>
 <html>
 <body>
 <h4>Without cellspacing:</h4>
 <tr>
 <td>First</td>
 <td>Row</td>
 </tr>
 <tr>
 <td>Second</td>
 <td>Row</td>
 </tr>
 </table>
 <h4>With cellspacing="0":</h4>
 <table border="1" cellspacing="0">
 <tr>
 <td>First</td>
 <td>Row</td>
 </tr>
 <tr>
 <td>Second</td>
 <td>Row</td>
 </tr>
 </table>
 In HTML, images are defined with the <img>
tag.
 The <img> tag is empty, which means that it
contains attributes only, and has no closing
tag.
 To display an image on a page, you need to
use the src attribute. Src stands for "source".
The value of the src attribute is the URL of the
image you want to display.
 <img src="url" alt="some_text ">
 HTML frames 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.
HTML Horizontal Frames
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top“ src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src=“/html/bottom_frame.htm" />
<body> Your browser does not support frames. </body>
</frameset>
</html>
above example creates the horizontal frames

Output:
 here we replaced rows attribute by cols and changed their width.
This will create all the three frames vertically:
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
<body>
Your browser does not support frames.
</body>
</frameset>
</html>
Output:
 The <iframe> tag defines a rectangular region within the document in which
the browser can display a separate document, including scrollbars and
borders.
 The src attribute is used to specify the URL of the document that occupies
the inline frame.
<html>
<head>
<title>HTML Iframes</title>
</head>
<body> <p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
 HTML forms are used to pass data to a server.
 An HTML form can contain input elements

like text fields, checkboxes, radio-buttons,
submit buttons, select lists, textarea.
 The <form> tag is used to create an HTML

form:
 The most important form element is the <input>
element.
 The <input> element is used to select user

information.
 An <input> element can vary in many ways,

depending on the type attribute.
 An <input> element can be of type text field,

checkbox, password, radio button, submit
button, and more.
 <input type="text"> defines a one-line input
field that a user can enter text.
 <form>
First name: <input type="text"
name="firstname"><br>
Last name: <input type="text"
name="lastname">
</form>
 <input type="password"> defines a password
field:
 <form>
Password: <input type="password"
name="pwd">
</form>
 <input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a
limited number of choices:
 <form>
<input type="radio" name="sex"
value="male">Male<br>
<input type="radio" name="sex"
value="female">Female
</form>
 <input type="checkbox"> defines a
checkbox.
 Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
 <form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>
 <input type="submit"> defines a submit button.
 A submit button is used to send form data to a
server.
 The data is sent to the page specified in the
form's action attribute.
 The file defined in the action attribute usually
does something with the received input:
 <form name="input"
action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
 <html>
 <body>
 <form action="">
 <select name="cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat">Fiat</option>
 <option value="audi">Audi</option>
 </select>
 </form>
 </body>
 </html>
 <html>
 <body>
 <form action="">
 <input type="button" value="Hello world!">
 </form>

 </body>
 </html>
 In HTML there is the capability to separate
presentation and content.
 As style is simply a set of formatting

instructions that can be applied to a piece of
text.
 Style can be cascaded, which means the

formats can override any which were defined
earlier in the document.
 A CSS rule has two main parts: a selector, and
one or more declarations.
 The selector is normally the HTML element

you want to style.
 Each declaration consists of a property and a

value.
 The property is the style attribute you want to

change. Each property has a value.
 <html>
 <head>
 <title > A Simple Stylesheet </title>
 <style>
 body {background-color:yellow;}
 h1 {font-size:36pt;}
 h2 {color:blue;}
 p {margin-left:50px;}
 </style>
 </head>
 <body>
 <h1>This header is 36 pt</h1>

 <h2>This header is blue</h2>
 <p>This paragraph has a left margin of 50 pixels</p>
 </body>
 </html>
 Inline Stylesheets: Style within the Body section.
 An inline style can be used if a unique style is to be

applied to one single occurrence of an element.
 Internal Stylesheets: Style within the Head section.

 An internal style sheet can be used if one single
document has a unique style.
 External Stylesheets: Style defined externally and

used in the file required.
 An external style sheet is ideal when the style is
applied to many pages.
 <HTML>
 <HEAD>
 <TITLE> Example for Internal Stylesheets</TITLE>
 </HEAD>
 <BODY style="background-color:yellow">
 <h1 align="center" style="font-family:verdana;font-
size:50px;color:red">BVRIT</h1>
 <p style="font-color:green;margin-left:200px“>HELLO GUYS</p>
 </BODY>
 </HTML>
 <html>
 <head>
 <title > A Simple Stylesheet </title>
 <style>
 H1{
 color:red;
 Border: thin groove;
 Text-allign:center;
 }
 </style>
 </head>
 <body>
 <h1> SIMPLE STYLESHEET </h1>
 </body>
 </html>
 Usage of Inline style sheets is restricted to
single selector.
 Usage of Internal style sheets brings changes

only to a single web page.
 If we want to create an application consisting

of multiple web pages ??
 <HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <link rel="stylesheet" type="text/css"
href="externalexample.css">
 </HEAD>
 <BODY>
 <h1>header by using using external style sheet</h1>
 <p>paragraph by using using external style sheet</p>
 </BODY>
 </HTML>
 h1
 {
 color:red;align-center;
 text-align:center
 }
 h2
 {
 color:green;align-center;
 text-align:center
 }
 A CSS comment begins with "/*", and ends
with "*/", like this:
 /*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
 In addition to setting a style for a HTML
element, CSS allows you to specify your own
selectors called "id" and "class".
 The id selector is used to specify a style for a

single, unique element.
 The id selector uses the id attribute of the

HTML element, and is defined with a "#".
 The style rule below will be applied to the element with id=“Hello":
 <html>
 <head>
 <style>
 #hello
 {
 text-align:center;
 color:red;
 }
 </style>
 </head>
 <body>
 <p id="hello">Hello World!</p>
 <p>This paragraph is not affected by the style.</p>
 </body>
 </html>
 The class selector is used to specify a style
for a group of elements.
 Selector.classname {property:value;
property:value}
 <selector class=classname>
 H1.fred
 {
 Color:blue;
 Background-color:red;
 Font-family:”Book Antiqua”,Times,serif;
 border:thin groove yellow;
 }
 <h1 class=“fred”> A SIMPLE HEADING </h1>

 To apply a piece of formatting to many
different elements within a page but not
necessarily to the entire page.
 .fred
 {
 Color:blue;
 }
 <html>
 <head>
 <title> Example for Anonymous classes</title>
 <style>
 .fred
 {
 Color:blue;
 }
 </style>
 </head>
 <body>
 <h1 class =“fred”>A SIMPLE HEADING </h1>
 <p class =“fred”> APPLYING THE STYLE FRED TO PARAGRAPH </p>
 </body>
 </html>
 Fonts:
 Font- family: <family name> [<generic
family>]
 Font-style:normal|italic|oblique
 Font-
wieght:normal|bold|bolder|lighter|100|200|
…900
 Font-size:[small|medium|large]
 Color:<value>
 Background-color: <value>|transparent
 Background-image:url|none
 Text-
decoration:none|underline|overline|line-
through
 Text-transformation:
none|capitalize|uppercase|lowercase
 Text-allign:left|right|center|justify

 Margin:length|percantage|auto {1,4}
 Border-width:thin|thick|medium|length {1,4}
 Padding:length|percantage {1,4}
 Border-color:value {1,4}
 Border-
style:none|dotted|dashed|solid|double|groov
e|ridge {1,4}
 Width:length|percantage|auto
 Height:length|auto
 The designers use images as the backgrounds of
their pages and then place further images and text
over them.
 We can place text items and images on top of each
other in multiple layers.
 Z-index:n
 Position:absolute |relative
 Left:n
 Top:n
 Width:n
 Height:n
 <html>
 <head>
 <title> LAYERING TEXT</title>
 </head>
 <body>
 <h1>Layering Text </h1>
 <div style=“z-index:2; left:50px;top:250px;position:absolute;font-size:36pt;border:thin-groove;”>
 <p>This is the higher layer </p>
 </div>
 <div style=“z-index:1; left:100px;top:225px;position:absolute;font-size:46pt;border:thin-

groove;background-color:green;”>
 <p>SOME MORE TEXT </p>
 </div>
 <div style=“z-index:4; left:10px; top:30px;width: 150px; position:absolute;background-color:yellow;

color:black; font-size:18pt;”>
 <p>SOME TEXT IS PLACED IN A BOX THAT DOESnt go right acorss the screen </p>
 </div>
 <hr>
 </body>
 </html>

HTML and CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML and CSS

Uploaded by

Copyright:

Available Formats

HTML

 HTML Common tags

 HTML is a method of describing the format of

 This was developed by Tim Berners-Lee.

 HTML is an application of SGML.

 HTML is a markup language

 A markup language is a set of markup tags

 The tags describe document content

 HTML documents contain HTML tags and plain text

 HTML documents are also called web pages

 HTML tags normally come in pairs like <b> and </b>.

 HTML can be edited by using a professional

 Microsoft Expression Web.

 CoffeeCup HTML Editor.

 Step 2 : Write/Edit the code in the notepad

 Step 3 :Save your HTML as filename.htm/html

 Step 4 : Run the HTML file.

 Comments are ignored by the browser and are not



 The <hr> tag creates a horizontal line in an

 Use the <br> tag if you want a line break.

 <font size=“[+/-]n” color=“#rrggbb”>

 When you move the cursor over a link in a Web page,

 The most important attribute of the <a> element is

 <a href=“www.googlescholar.com”> Visit My

 The example below will open the linked

 The list items are marked with bullets (typically

 The list items are marked with numbers.

 <h4>Cell that spans two columns:</h4>

 <table> Defines a table

above example creates the horizontal frames

 An HTML form can contain input elements

 The <form> tag is used to create an HTML

 The <input> element is used to select user

 An <input> element can vary in many ways,

 An <input> element can be of type text field,

 As style is simply a set of formatting

 Style can be cascaded, which means the

 The selector is normally the HTML element

 Each declaration consists of a property and a

 The property is the style attribute you want to

 <h1>This header is 36 pt</h1>

 <p>This paragraph has a left margin of 50 pixels</p>

 An inline style can be used if a unique style is to be

 Internal Stylesheets: Style within the Head section.

 External Stylesheets: Style defined externally and

 Usage of Internal style sheets brings changes

 If we want to create an application consisting

 The id selector is used to specify a style for a

 The id selector uses the id attribute of the

 <h1 class=“fred”> A SIMPLE HEADING </h1>

 <div style=“z-index:1; left:100px;top:225px;position:absolute;font-size:46pt;border:thin-

 <div style=“z-index:4; left:10px; top:30px;width: 150px; position:absolute;background-color:yellow;

You might also like