Lesson No. 3 Impressive Web Designing
PPT Part-1
PPT Part-2
HTML
HTML stands for Hyper Text Markup Language. It is the basic markup language for creating
web pages and websites. A HTML web page contains markups or tags that defines how to display information on the browser’s window.
Advantages of HTML - Refer Textbook
Disadvantages of HTML - Refer Textbook
Tag
A tag in HTML document is a html element surrounded by angular brackets which has a specific meaning and task in HTML.
E.g. <html>, <body>, <head>, <h1>, <br>, etc.
Structure of HTML document:
<html>
<head>
</head>
<body>
</body>
</html>
A HTML document has two sections
1) HEAD section and 2) BODY section
A HTML file is saved with .html or .htm extension
<html> tag :
The <html> tag represents the root of an HTML document. It is the starting tag of web page.
It is the container for all other HTML elements, which are enclosed in <html> …… </html>
<head> tag:
The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts, styles, meta information, and more. E.g.<title>, <style>, <base>, <link>, <meta>, <script>, <noscript>
<body> tag:
The <body> tag defines the document's body. This is the section which is displayed on the web page.
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
which are enclosed in <body> …… </body>.
<title> tag: It defines the title for the web page. It is written in Head section. The title will be displayed on the browser window’s title bar.
Formatting Tags (Physical Style tags)
<b> ... </b> - To display text in bold.
<i> ... </i> - Displays text in italics
<u> … </u> - To underline the text.
<br> - stands for break rule. It is used to start a new line. It has no closing tag.
<tt> ... </tt> – Displays text in mono spaced font style.
<strong> ... </strong> – Displays text bold style.
<em> ... </em> – Defines emphasized text.(browsers displays in italics style).
<mark> ... </mark> – Displays marked or highlighted text
<del> ... </del> – Displays deleted or removed text.
<ins> ... </ins> – Defines inserted(added) text.
<sub> ... </sub> – Defines subscripted text.
<sup> ... </sup> – Defines superscripted text.
<small> ... </small> – Reduces the font size of text by 1 unit.
<big>... </big> – Increases the font size of text by 1 unit.
<blockquote>... </blockquote> – Defines a quoted section.
<font> ... </font> – Changes the font of the text.
Attributes of <font> tag:
Face – specifies the name of the font
Size – specifies the size of the letters values: 1 to 7
Color – specifies the color name or color code
E.g. <font face=”Arial Black” size=5 color=blue>
Good Morning
</font>
Heading tags (H1 to H6)
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading.
<h6> defines the least important heading.
<h1> heading is big in size about 1 inch (72 pixels).
Attribute of Heading tag:
Align – specifies the alignment for the heading values: left, center, right
The heading tags are block level HTML elements which means they begin with a new line.
<p> tag:
It is used to indicate a paragraph in a web page. It is a block level html element. It has the following attributes:
a) Align - to specify alignment – left, center, right
b) Style - to specify css style commands.
c) Width - to specify horizontal dimension of the paragraph in pixels.
E.g.
<p align=center width=200>
………. …. …..paragraph ……………..
</p>
<p style="color:blue;">
………….. paragraph …………….
</p>
<body> tag
Attributes of <body> tag:
background – contains the source URL of image file to be displayed in the background.
bgcolor – specifies the color name or color code for the background color of the web page.
text – specifies the color for the text in the web page.
link – specifies the color for the links in the web page.
alink - specifies the color of an active link in the web page.
vlink - specifies the color of an visited link in the web page.
E.g. <body bgcolor=cyan link=green vlink=red>
<body background="Images/plotters3.jpg">
Comments in HTML
In HTML to write comments the following tag is used:
<!-- comments are written here -->
An HTML comment begins with <!-- and the comment closes with -->.
HTML comments are visible to anyone that views the page source code, but are not rendered by a browser. They are not shown on the window.
E.g.
<!-- Author: Mr. XYZ
Description : sample page of showing physical tags
-->
LISTS IN HTML
Html provides three types of lists which are as:
1) Unordered List
2) Ordered List
3) Definition List
Unordered List
It is the simplest list which is shown by bullet points.
Tags: <UL> </UL> - to define the list
<LI> </LI> - To define list elements
E.g.
<html>
<head>
<title>List example</title>
</head>
<body>
<h3>Fruit Lists </h3>
<UL>
<LI>Mango </LI>
<LI>Apple</LI>
<LI>Grapes</LI>
</UL>
</body>
</html>
Type Attribute
It is used to change the shape of the bullets in the unordered list. It is used in <UL> tag.
There are three types : DISC, SQUARE, CIRCLE
E.g. <UL TYPE=SQUARE>
Ordered List
It displays the list in number format. <OL> and <LI> tag is used to create Ordered list.
It has two attributes:
1) TYPE - specifies the type of numbering format. E.g. 1,2,3,4 or A,B,C .. or I, II, III, or a,b,c ..
2) START – specifies the start number in the list.
E.g. <OL TYPE=”A” START=4>
Definition List
It is used to create a list of definitions of terms.
<DL>, <DT> and <DD> tag is used to create.
e.g
<DL>
<DT>Computer</DT>
<DD>Computer is an electronic device which
Is used to store and process information. </DD>
<DT>Software</DT>
<DD>Software is a collection programs. </DD>
</DL>
<IMG> tag
It is used to insert images in the web page.
It has the following attributes:
Src - specifies the URL of the image.
Align - specifies the alignment of the image.
Border - specifies the width of the border around
the image (Value in pixels)
Height - specifies the height of the image in pixels.
Width - specifies the width of the image in pixels.
Alt - specifies the alternative text for the image. It is displayed instead of image, when image is not displayed on the web page.
LongDesc - provides URL for the long description of the image.
E.g.
<img src=”computer.jpg” height=200 width=400
Border=1 alt=”Computer image”>
HTML PRACTICAL ASSIGNMENT – 1 (Use different fonts, font styles and colors in Q. No. 1, 3 and 4)
Q1. Create a web page that will display a heading HTML and a paragraph about HTML from the textbook along with an image.
Q2. Create a web page that contains picture gallery. (Small size images at least 5)
Q3. Create web page containing an Unordered List showing list of Animals with Heading.
Q4. Create a web page containing Ordered List of Students from your class with Heading.
Creating Tables in Web Page
To create table in a web page <table> tag is used.
<tr> tag is used to define a row of table.
<td> tag is used to define a column cell of a row.
<caption> tag is used to give a title to table.
<th> tag is used to define column headers.
E.g.
<table border=1 align=center>
<caption> Student List</caption>
<tr>
<th>Roll No </th>
<th>Name </th>
</tr>
<tr>
<td> 1 </td>
<td> Kiran </td>
</tr>
</table>
Attributes of <table> tag:
Align - defines the alignment of a table and table cell. Values – Left, Center, Right.
- Used with <td> tag to align cell contents.
Bgcolor - specifies the color for the table.
Width - specifies the width for the table in pixels or %
Border – Specifies the border for the table. Values – 0 or 1
Cellpadding - specifies the distance between cell wall and the content given in pixels.
Cellspacing - specifies the distance between adjacent cells.
SKILL SET - 2 (HTML 5)
SOP 1
SOP 2
SOP 3
Plz notes appear for cyberlaw
ReplyDelete