Scribd
Upload
140 views77 pages

HTML and CSS

The document discusses various aspects of HTML including: - Common HTML tags such as lists, tables, images and forms. - The history and evolution of HTML standards from HTML in 1991 to HTML5 in 2012. - How HTML uses markup tags to define the structure and layout of a web page. - Key HTML tags for text formatting, links, lists, tables, and images. - How to add frames and iframes to structure the layout of a web page.

Uploaded by

Laxmi Burri
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
Download as ppt, pdf, or txt
140 views77 pages

HTML and CSS

The document discusses various aspects of HTML including: - Common HTML tags such as lists, tables, images and forms. - The history and evolution of HTML standards from HTML in 1991 to HTML5 in 2012. - How HTML uses markup tags to define the structure and layout of a web page. - Key HTML tags for text formatting, links, lists, tables, and images. - How to add frames and iframes to structure the layout of a web page.

Uploaded by

Laxmi Burri
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
Download as ppt, pdf, or txt
Download as ppt, pdf, or txt
You are on page 1/ 77

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.

 <!-- This is a comment -->


 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>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
 <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>
 &amp; &lt; &gt; &quot; &nbsp;
 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>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 Header information in a table are defined with the <th>
tag.
 <table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 <html>
 <body>

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


 <table border="1">
 <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>
 <table border="1">
 <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>
 <table border="1">
 <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>
 <table border="1">
 <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;
 Background-color:red;
 Font-family:”Book Antiqua”,Times,serif;
 border:thin groove yellow;
 }
 <html>
 <head>
 <title> Example for Anonymous classes</title>
 <style>
 .fred
 {
 Color:blue;
 Background-color:red;
 Font-family:”Book Antiqua”,Times,serif;
 border:thin groove yellow;
 }
 </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>

You might also like