Website Design & Development Course Outline

Website Design & Development Course outline
HTML
Basic tags <html><head> <body>
Bg color attribute <body bg color=”red”>
Background Image <body background=”.\img\1.jpg”>
Formetting
<b><u><i>
<br>
<p>
&nbsp
<h1>….<h6>,
<hr>
<hr color=”blue” height=”1” width=”20”>
<center>
<font face=”Arial” size=”14”>
List Bullets/ Numbering
<ul type=”circle”/”square”/>
<li>
</ul>
<ol type=”1”/”A”/”a”/”I”/”i” start=”10”>

<li>
</ol>
<DL>
<DT> ========= Heading
<DD>==============Explaination
</DL>
<img src=”.\img\abc” height=”300” width=”400” opacity=”50% 70% 100%
align=”center”/“left”/“right” valign=”top”/ “middle” /”CENTER”>
<marquee> </marquree>
Table
<Table border= “1/0/2/3/4” height=”200” width=”500”>
Table Caption <caption align= “bottom/top” > </caption>
Table header(bold & center) <th>
Table row <tr height=”50”> </tr>
Table column <td width=”50”>
<th rowspan=”2”>…. Generates a heading cell on two Rows

<td rowspan=”2” colspan=”3”> Generates a cell consisting on 2 rows 3 column
Linking Documents Websites and webpages

<a href=” https://www.yahoo.com/” target=”_blank”/”_parent”/”_self”/”_top”> </a>
<a href= “./page/page2.html” > Page2 </a>
<a href= “./audio/song.mp3” > Song </a>
<a href= “./video/video1.mp4” > video </a>

Audio Embedding
<audio controls>
<source src="audio\1.mp3" type="audio/mp3">
</audio>
Video Embedding
<video width="300" controls >
<source src="video\video1.mp4" type="video/mp4">
</video>
3 types of hyper Links(not covered in this file…..)
External Link
Internal Link
External to Internal Link
MAPS
<map Name= “map1”>

<area shape= “rect” cords= “x1,y1,x2,y2” href= “Page2.html”>
<area shape=”circle” cords=”center x, center y, radius” href=”2.html”>
<area shape=”polygon” cords=”x1,y1,x2,y2,x3,y3… xn,yn,x1,y1>
</map>
<img src= “./img/124.html” usemap=“#map1”>
Frames
<head></head>
<frameset rows=”50%”,”50%”>
<frameset cols=”20%”,*>
<frame src=”1.html”>
</frameset>
<frameset cols=”70%”,”30%”>
</frameset>
</frameset>
There will be no body tag in this
<Div width=”20” height=”20”>

</Div>
<Layer hidden width=”20” height=”20>
</layer>
DHTML
In line Style Sheeting (Style is Typed in the tag where it is required)
<h2 style="background-color:black; color:white;">This is a Pattern</h2>
Internal Style Sheeting(Style is Typed in <Head> tag)
<style type="text/css">
body{
background-color:black;
color:White;
Font-family:Arial;
}
.abc{
background-color:red;
color:orange;
Font-family: Courier New;
}
#xyz{
background-color:blue;
color:Yellow;
font-family:Snap ITc
}
</style>
External Style Sheeting (a file will be saved as style.css) and attributes will
be pasted in it.
In <head> tag of the add following code
<link rel="stylesheet" href="#filename.css">
Font Attributes
Attributes Value
Font-Family Arial, San Sarif
Font-Size 1% 2% 1px 2Px 20px
Font-Style Normal, Italic,Oblique
Font-weight Normal Bold Bolder lighter or 100 200-900
Font-Color Hexadecimal code or color name
Color+Background
Attributes Value
Color Hexadecimal code or color name
Background-color Hexadecimal code or color name
Background-Image .\image\1.jpg
Background-Repeat No-repeat,repeat-x,repeat-y,repeat
Text
Attributes Value
Text-decoration None,underline,overline,line-through,blink
Vertical-Alignment Baseline,sub,super,top,text-top
Text-Transform Capatalize,Upper,Lower
Text-align Left,center right,Justify
Text-Indent 3%,30px,3
Margin
Attributes Value
Margin-top 10,10%,10px
Margin-bottom 10,10%,10px
Margin-Left 10,10%,10px
Margin-Right 10,10%,10px
Margin 10,10%,10px
List Style
Attributes Value
List-style Disc,circl,square,decimal,lower-roman,upper-
roman,lower-alpha,upper-alpha,none
Border
Attributes Value
Border-style Solid,double,groove ridge,inst,onset
Border-color Color name,hexa code
Border-width Thick,medium,thin
Border-bottom-width Thick,medium,thin
Border-top-width Thick,medium,thin
Border-left-width Thick,medium,thin
Border-right-width Thick,medium,thin
Border-top 10,green,solid (width,color,style)
Border-bottom 10,green,solid (width,color,style)
Border-left 10,green,solid (width,color,style)
Border-right 10,green,solid (width,color,style)
border Can Take up all attributes of border.

Website Design & Development Course Outline

Uploaded by

Copyright:

Available Formats

Website Design & Development Course Outline

Uploaded by

Document Information

Original Description:

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

Website Design & Development Course Outline

Uploaded by

Copyright:

Available Formats

Website Design & Development Course outline

List Bullets/ Numbering

<ol type=”1”/”A”/”a”/”I”/”i” start=”10”>

<th rowspan=”2”>…. Generates a heading cell on two Rows

Linking Documents Websites and webpages

<a href= “./page/page2.html” > Page2 </a>

<a href= “./audio/song.mp3” > Song </a>

<a href= “./video/video1.mp4” > video </a>

<source src="audio\1.mp3" type="audio/mp3">

<video width="300" controls >

<source src="video\video1.mp4" type="video/mp4">

3 types of hyper Links(not covered in this file…..)

External to Internal Link

<map Name= “map1”>

<Div width=”20” height=”20”>

<Layer hidden width=”20” height=”20>

<h2 style="background-color:black; color:white;">This is a Pattern</h2>

Internal Style Sheeting(Style is Typed in <Head> tag)

In <head> tag of the add following code

<link rel="stylesheet" href="#filename.css">

You might also like