3. Web Design (HTML)


Lesson No. 3 Impressive Web Designing

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



1 comment: