Scribd
Upload
55 views4 pages

Website Design & Development Course Outline

This document outlines the key elements of HTML and CSS needed to design and develop websites, including tags for formatting text, adding images, creating lists and tables, linking pages, and embedding audio/video. It also covers CSS properties for styling fonts, colors, backgrounds, text, margins, borders and more. Advanced topics covered include internal and external CSS, DHTML, and framesets.

Uploaded by

Abdullah Mufty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views4 pages

Website Design & Development Course Outline

This document outlines the key elements of HTML and CSS needed to design and develop websites, including tags for formatting text, adding images, creating lists and tables, linking pages, and embedding audio/video. It also covers CSS properties for styling fonts, colors, backgrounds, text, margins, borders and more. Advanced topics covered include internal and external CSS, DHTML, and framesets.

Uploaded by

Abdullah Mufty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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”>
<frame src=”2.html”>
</frameset>
<frameset cols=”70%”,”30%”>
<frame src=”3.html”>
<frame src=”4.html”>
</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.

You might also like