Week1 Lab

Design Methodology and Technology Optional Lab Handouts - 1
Lab 1-1: Practicing your XHTML skills

In this optional lab, you will practice your XHTML skills by creating a basic Web page.
This lab ofers suggested examples of content, but you can substitute any content you
choose. See the course appendixes for a complete list of XHTML tags and their functions.
Note: The example content is available from the supplemental CD-ROM in the fles
Resume.txt (without XHTML tags) and Resume.htm (with XHTML tags). The steps in this lab
refer to a fle called MyResume.htm, which you will create yourself. However, the example
code and fgures use the example from Resume.htm.
1. Verify that you have created the C:\CIW\Dsgn_Mthd_Tech\LabFiles\ directory on
your computer, and that the LabFiles\ folder contains subfolders and student fles
for lessons in this course. If this directory does not exist, insert your student
supplemental CD-ROM in your CD drive now, and extract the fles for the Design
Methodology and Technology course.
Note: Instructions for using the CIW Master Supplemental CD-ROM are provided in the
front matter section of this book.
2. Notepad (or other text editor): Open a new text fle and save it as MyResume.htm
to the C:\CIW\Dsgn_Mthd_Tech\LabFiles\Lesson01\OptLab_1-1\ folder.
3. Notepad: Create a basic Web page structure using the <!DOCTYPE>, <html>,
<head>, <title> and <body> tags in the order shown. Be sure to give your page an
appropriate descriptive title.
<!DOCTYPE t!l P"#L$C %-&&'(C&&DTD XHTML 1)* Transitional&&E+%
%tt,:&&---)-()org&T.&/t!l1&DTD&/t!l1-transitional)0t0%1
<t!l /!lns2%tt,:&&---)-()org&1333&/t!l%1
<4a01
<titl41 My .4su!4 <&titl41
<&4a01
<bo0y1
<&bo0y1
<&t!l1
4. Notepad: Add some opening text between the <body> tags. The example shows
entries for a rsum, but you can substitute any text you prefer.
<body>
5a!son P) Lang
677 Cla-ill .oa0
Marinita8 C9 36:63
;<1=> 777-:*77
Ob?4cti@4:
To contribut4 !y '4b 04sign skills to an 4ntr4,r4n4urial organiAation
5kills:
Bno-l40g4 oC '4b 04sign conc4,ts
5it4 04@4lo,!4nt an0 !anag4!4nt skills
Bno-l40g4 oC basic '4b t4cnology conc4,ts
E/,4ri4nc4 -it '4b a,,lications an0 tools
Bno-l40g4 oC a0@anc40 '4b t4cnology conc4,ts
2014 Prosot Learning! a "#a$pus #o$pany - %ll &ights &eser'ed( "ersion )(2
</body>
5. Notepad: Save MyResume.htm.
6. Browser: Open MyResume.htm in your browser. Your page formatting should
resemble Figure OL1-1. Note that although you used returns in your text fle to
separate lines of content, you will need to add XHTML formatting tags to make
content formatting appear on your Web page.
*igure OL1-1+ ,asic -eb page content
7. Notepad: Open MyResume.htm in your text editor. Add XHTML paragraph <p> and
line break <br> tags as shown to separate lines of text. Add XHTML heading tags to
change to a larger (or smaller) bold serif font (use heading levels one through three to
enlarge text).
Note: Remember that the XHTML specifcation requires you to close all tags properly,
using either a pair of container tags or a single closed tag. Thus, the <h#> and <p>
elements always require separate closing </h#> and </p> tags, and the <br> element
should always be written as a closed stand-alone <br/> tag.
<body>
<11
Samson P. Lang
<&11
255 Clawhill Road
<br&1
Marinita, CA 9229
<br&1
!"#$% 555&'55
<,1
(b)*+ti,*-
<&,1
.o +ontrib/t* my 0*b d*sign s1ills to an *ntr*2r*n*/rial organi3ation
<,1
S1ills-
Design Methodology and Technology Optional Lab Handouts - .
<&,1
4nowl*dg* o5 0*b d*sign +on+*2ts
<br&1
Sit* d*,*lo2m*nt and manag*m*nt s1ills
<br&1
4nowl*dg* o5 basi+ 0*b t*+hnology +on+*2ts
<br&1
672*ri*n+* with 0*b a22li+ations and tools
<br&1
4nowl*dg* o5 ad,an+*d 0*b t*+hnology +on+*2ts
</body>
8. Notepad: Save MyResume.htm.
9. Browser: Open MyResume.htm in your browser. Your page formatting should
resemble Figure OL1-2.
*igure OL1-2+ ,asic -eb page /ith 0h11! 0p1 and 0br1 tags
10.Notepad: Open MyResume.htm in your text editor. Change the formatting on the
Objective and Skills lines from paragraph style to heading-level-two style. Use the
XHTML <div> tag to center the frst four lines of text. Use the unordered list <ul> and
list item <li> tags to change the Skills section items to a bulleted (unordered) list.
<body>
<0i@ align2%c4nt4r%1
<h#>
Samson P. Lang
</h#>
255 Clawhill Road
<br/>
Marinita, CA 9229
<br/>
!"#$% 555&'55
<&0i@1
<,1
<61
(b)*+ti,*-
<&61
<&,1
<,1
<61
S1ills-
<&61
<&,1
<ul1
<li1 4nowl*dg* o5 0*b d*sign +on+*2ts <&li1
<br&1
<li1 Sit* d*,*lo2m*nt and manag*m*nt s1ills <&li1
<br&1
<li1 4nowl*dg* o5 basi+ 0*b t*+hnology +on+*2ts <&li1
<br&1
<li1 672*ri*n+* with 0*b a22li+ations and tools <&li1
<br1
<li1 4nowl*dg* o5 ad,an+*d 0*b t*+hnology +on+*2ts <&li1
<&ul1
</body>
11.Notepad: Save MyResume.htm.
12.Browser: Open MyResume.htm in your browser. Your page formatting should
*igure OL1-.+ ,asic -eb page /ith centered heading and list
13.Notepad: Open MyResume.htm in your text editor. In the opening <body> tag,
change the background color of your page to black, and change the color of your text
to white. Use the <hr> tag to add a horizontal rule that extends across three-quarters
of the screen under the name and address section of your page.
<body bgcolor2%D******% t4/t2%DEEE%>
<di, align89+*nt*r9>
<h#>
Samson P. Lang
</h#>
255 Clawhill Road
<br/>
Marinita, CA 9229
<br/>
!"#$% 555&'55
</di,>
<r -i0t2%<7F%&1
<h2>
(b)*+ti,*-
</h2>
<h2>
S1ills-
</h2>
</l>
<li> 4nowl*dg* o5 0*b d*sign +on+*2ts </li>
<li> Sit* d*,*lo2m*nt and manag*m*nt s1ills </li>
<li> 4nowl*dg* o5 basi+ 0*b t*+hnology +on+*2ts </li>
<li> 672*ri*n+* with 0*b a22li+ations and tools </li>
<li> 4nowl*dg* o5 ad,an+*d 0*b t*+hnology +on+*2ts </li>
<//l>
</body>
*igure OL1-4+ ,asic -eb page /ith hori3ontal rule! colored te4t and bac5ground
16.Notepad: Open MyResume.htm in your text editor. Change the background color of
your page to gray. Insert an image at the bottom of the page using the <img> tag, and
be sure to add an alternative text description of the image. Use the <div> tag to
center the image on the page. Make the image a hyperlink to a Web page using the
anchor <a> tag. (You can add any image and link to any page you like; the example
image fle used here is available on your supplemental CD-ROM.) Be sure that any
image you reference resides in the same location as your Web page fle.
Note: When using multiple tags on a section of text, remember to use good coding
practice by closing tags in the order that you opened them.
<body bg+olor89gray9 t*7t89:;;;9>
<di, align89+*nt*r9>
<h#>
Samson P. Lang
</h#>
255 Clawhill Road
<br/>
Marinita, CA 9229
<br/>
!"#$% 555&'55
</di,>
<hr width89"5<9/>
<h2>
(b)*+ti,*-
</h2>
<h2>
S1ills-
</h2>
</l>
<li> 4nowl*dg* o5 0*b d*sign +on+*2ts </li>
<li> Sit* d*,*lo2m*nt and manag*m*nt s1ills </li>
<li> 4nowl*dg* o5 basi+ 0*b t*+hnology +on+*2ts </li>
<li> 672*ri*n+* with 0*b a22li+ations and tools </li>
<li> 4nowl*dg* o5 ad,an+*d 0*b t*+hnology +on+*2ts </li>
<//l>
<0i@ align2%c4nt4r%1
<a r4C2%tt,:&&---)ci--c4rtiG40)co!%1
<i!g src2%ci--logo)giC% bor04r2%*% alt2%C$' logo%&1
<&a1
<&0i@1
</body>
resemble Figure OL1-5. Verify that your image acts as a hyperlink by passing your
mouse pointer over the image: Your mouse pointer should change into a pointing
hand when it passes over a link, and the status bar at the bottom of your browser
window should state the URL to which the link points. Check that your hyperlink is
functional by clicking the image.
*igure OL1-2+ ,asic -eb page /ith i$age as hyperlin5
This optional lab reviewed basic XHTML tags and page creation for students who need
practice or a refresher in XHTML. Remember that a basic knowledge of XHTML gives you
a great advantage in the Web development market. If you completed this optional lab as
an introduction or refresher before attempting Lab 1-1, you can begin Lab 1-1 now for a
more challenging exercise that includes XHTML tables.
Design Methodology and Technology Optional Lab Handouts - )
Lab 6-1: "sing a 'iki sit4
In this optional lab, you will learn to edit pages on a Wiki site.
1. Browser: Open www.wikipedia.org, the home page of Wikipedia. Wikipedia is a free
Wiki-based encyclopedia.
2. Browse around the Wikipedia site to learn how it works.
3. When you feel oriented to the site, open the How To Edit page at
http://en.wikipedia.org/wiki/Wikipedia:How_to_edit_a_page, and read the
information there.
4. Wiki sites generally have a special page called the sandbox where users can practice
editing text. Click the Sandbox link to locate the sandbox on Wikipedia, and make
some edits. Do not worry about making mistakes; the sandbox is the safest place on
a Wiki and you cannot cause any damage to the site here.
5. What do you see as the benefts of a Wiki? What are the risks involved in a Wiki?
What steps does Wikipedia take to address these risks?
_____________________________________________________________________________________
Wiki sites are just one of many tools available for collaborating over the Web. Although
Wiki sites are not ideal for every project collaboration situation, they can provide a useful
tool for many jobs.

Week1 Lab

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Week1 Lab

Загружено:

Авторское право:

Доступные форматы

Design Methodology and Technology Optional Lab Handouts - 1

Lab 1-1: Practicing your XHTML skills

Вам также может понравиться