Page 73 - COPA VOL II of II - TP -Punjabi
P. 73
IT ਅਤੇ ITES (IT & ITES) ਅਭਿਆਸ 1.31.114
COPA - HTML ਟੈਗਸ ਪ੍ਰੈਕਭਟਸ HTML ਦੀ ਵ੍ਤੋਂ ਕ੍ਦੇ ਹੋਏ ਸਧਾ੍ਨ ਸਭਿ੍ ਵੈਬ
ਵ੍ਤੋਂ ਕ੍ਦੇ ਹੋਏ ਸਧਾ੍ਨ ਸਭਿ੍ ਵੈਬ ਪੇਜ ਬਣਾਓ (Create simple static web pages using CSS)
ਉਦੇਸ਼: ਇਸ ਅਭਿਆਸ ਦੇ ਅੰਤ ਭਿੱਚ ਤੁਸੀਂ ਯੋਗ ਹੋਿੋਗੇ
• HTML ਪ੍ਰੋਗ੍ਾਮ ਦੀ ਵ੍ਤੋਂ ਕ੍ਕੇ ਇੱਕ ਟੈਕਸਟ ਸੁਨੇਹਾ ਪ੍ਰਦ੍ਭਸ਼ਤ ਕ੍ੋ।ੋ
• HTML ਪ੍ਰੋਗ੍ਾਮ ਦੀ ਵ੍ਤੋਂ ਕ੍ਦੇ ਹੋਏ ਇੱਕ ਪੈ੍ਾਗ੍ਰਾਫ ਪ੍ਰਦ੍ਭਸ਼ਤ ਕ੍ੋ।
ਲੋੜਾਂ (Requirements)
ਟੂਲ/ਉਪਕ੍ਨ/ਮਸ਼ੀਨਾਂ (Tools/Equipment/Machines)
• ਭਿੰਡੋਜ਼ ਦੇ ਨਾਲ ਇੱਕ ਕੰਮ ਕਰਨ ਿਾਲਾ PC OS - 1 No.
ਭਿਧੀ (PROCEDURE)
ਟਾਸਕ 1: CSS ਸੰਟੈਕਸ, ੍ੰਗ ਜੋੜਨਾ, ਫੌਂਟ, ਬੈਕਗ੍ਰਾਉਂਿ, ਭਚੱਤ੍ ਬਾ੍ਿ੍, ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ, ਟੈਕਸਟ ਟ੍ਰਾਂਸਫਾ੍ਮੇਸ਼ਨ, ਸੂਚੀਆਂ ਆਭਦ
ਪ੍ਰੋਗ੍ਾਮ b order: 10px solid transparent;
<!DOCTYPE html> p adding: 15px;
<html> b order-image: url(border.png) 30% round; }
<head> div.a { text-transform: uppercase;}
<!-- S tyle o f h1 s elector f or c olor, text-align, div.b { text-transform: lowercase;}
background and border -->
div.c { text-transform: capitalize;}
<!-- Style of p selector for Paragraph -->
</style>
<!-- Style of body selector for body -->
</head>
<!-- Style of bordering selector for border image
--> <body>
<!-- Style of div selector for text-transform --> <h1>Welcome to N ational I nstructional M edia
Institute</h1>
<style>
<p i d=”borderimg1”> National I nstructional Media
h1 { color: Orange; Institute (NIMI) was set up in the name of Central
t ext-align: center; Instructional Media Institute (CIMI) i n Chennai i n
December 1986 by the Government of India.</p>
b ackground-color:DodgerBlue;
<p
id=”borderimg2”> It as a Subordinate
b order: 2px solid Tomato;} under Directorate General of E mploymen t
p {background-color:Violet} and T raining (DGE&T) w ith the assistance f rom
Government of G ermany t hrough
body{ background-color: lightblue;}
GTZ (German Agency for Technical Co-operation)
#borderimg1 { as the executing agency. </p>
border: 10px solid transparent; <img i d=”borderimg3” s rc=”1.jpg” a lt=”Mountains”
p adding: 15px; width=”300” height=”200”>
border-image: url(border.png) 50 round;} <div class=”a”>Thank You </div>
#borderimg2 { <div class=”b”>Thank You </div>
b order: 10px solid transparent; <div class=”c”>Thank You </div>
p adding: 15px; </body>
border-image: url(border.png) 20% round;} </html>
#borderimg3 {
59
