Você está na página 1de 14

COMPUTER c- Common o-Operating m-Machine p-Particularly u-Used for t-Trade, e-Education, and r-Research HTML ASSIGNMENT

Class 1: Example 1: <html> <head> <body> <center> <h1>welcome to html</h1> <h2>welcome to html</h2> <h3>welcome to html</h3> <h4>welcome to html</h4> <h5>welcome to html</h5> <h6>welcome to html</h6> </center> </body> </head> </html> Output:

Exercise: Create a webpage that prints your name to the screen. Create a webpage that prints the numbers 1 - 10 to the screen. Create a webpage and set its title to "This is a webpage". Create a webpage that prints the message "When was this webpage created? Check page's title for the answer." to the screen, and set the title of the page to the current date. Create a webpage that prints any text of your choosing to the screen, do not include a head section in the code. Repeat exercise #5, but this time include a head section in the code. Class 2: Print your name in green. Print the numbers 1 - 10, each number being a different color. Prints your name in a Tahoma font. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font. Print a paragraph that is a description of a book, include the title of the book as well as its author. Names and titles should be underlined, adjectives should be italicized and bolded. Print your name to the screen with every letter being a different heading size. Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 102 = 100) Prints 10 names with a line break between each name. The list should be alphabetized, and to do this place a subscripted number next to each name based on where it will go in the alphabetized list.

(Example: Alan1). Print first, the unalphabetized list with a subscript number next to each name, then the alphabetized list. Both lists should have an <h1> level heading. Print two paragraphs that are both indented using the &nbsp; command. Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal line print a paragraph relating to the text in the heading.

Class 3:
Print some preformatted text of your choosing. (hint: use the <pre> tag) Print a long quote and a short quote. Cite the author of each quote. Solution: <html> <body> <blockquote> "Anyone who has lost track of time when using a computer knows the propensity to dream, the urge to make dreams come true and the tendency to miss lunch." - Tim Berners-Lee </blockquote> <br /> <q>"Hi, EVERYONE, HOW ARE YOU? "</q> - LBSTI </body> </html>

Output:

"Anyone who has lost track of time when using a computer knows the propensity to dream, the
urge to make dreams come true and the tendency to miss lunch." - Tim Berners-Lee

" Hi, EVERYONE, HOW ARE YOU? " - LBSTI


Print some deleted and inserted text of your choosing.

Solution:

<html> <body> HTML stands for <del>Hyper Translation Markup Language</del> <ins>Hyper Text Markup Language</ins>. </body> </html>

Output:
HTML stands for Hyper Translation Markup Language Hyper Text Markup Language.
Print a definition list with 5 items.

Output:

HTML Pen A markup language A writing tool Lettuce A vegetable Technology The development of tools which serve as a means to certain objectives Megabyte A unit of data consisting of 1024 kilobytes

Print two addresses in the same format used on the front of envelopes (senders address in top left corner, receivers address in the center).

Output:

Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the abbreviations and acronyms represent.
Solution : <html> <body> <abbr title="Abstract">Abstr.</abbr> <br /><br /> <abbr title="Biochemistry">Biochem.</abbr> <br /><br /> <abbr title="Example">Ex.</abbr> <br /><br /> <abbr title="Literature">Lit.</abbr> <br /><br /> <abbr title="Mathematics">Math.</abbr> <br /><br /> <acronym title="World Wide Web Consortium">W3C</acronym> <br /><br /> <acronym title="Institute of Electrical and Electronic Engineers">IEEE</acronym> <br /><br /> <acronym title="International Standards Organization"> ISO </acronym> <br /><br />

<acronym title="Hyper Text Markup Language">HTML</acronym> <br /><br /> <acronym title="Beginners All Purpose Symbolic Instruction Code">BASIC </acronym> <p> Move your mouse over an abbreviation or acronym to get more data. </p> </body> </html>

Display five different images. Skip two lines between each image. Each image should have a title. Display an image that has a border of size 2, a width of 200, and a height of 200. Display an image that when clicked will link to a search engine of your choice (should be opened in a new window). Display an image that when clicked will link to itself and will display the image in the browser by itself.

Class 4:
Print two lists with any information you want. One list should be an ordered list, the other list should be an unordered list. NESTED LISTS

Coding
Preceeding Text <OL TYPE="1"> <LI>List Item 1 <OL TYPE="a"> <LI>Nested List Item 1 <LI>Nested List Item 2 </OL> <LI>List Item 2 <UL> <LI>Nested List Item 1 </OL> </OL>

results Preceeding Text I. List Item 1 a. Nested List Item 1 b. Nested List Item 2 II. List Item 2 Nested List Item 1

ORDERED<LI>TYPES

coding <OL> A. <LI TYPE="A">List item <LI TYPE="a">List item a. <LI TYPE="I">List item I. <LI TYPE="i">List item i. <LI TYPE="1">List item </OL> 1.

results List item List item List item List item List item

Class 5:
Create some links to various search engines (google, yahoo, altavista, lycos, etc). Create links to five different pages on five different websites that should all open in a new window. Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. Create a page with a link at the bottom of it that when clicked will jump all the way to the top of the page. Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. At the bottom of the page there should be a link to jump back to the top of the page.

Exercise 1.
A D B E C F

Exercise 2.
A B C D E F

Exercise 3.
Title goes here A C E B D F

Exercise 4.
A Title goes here B C D E F

Exercise 5.
A D

Title goes here

Exercise 6.
Title goes here A B C B G J D E F

Exercise 7.
Title goes here A D E F C H I K L M N O

Class 6:

Exercise 1:
Make a simple page and put two text inputs and a Submit button into it. Ask for the user's name and address...
Top of Form

Name: Address:
Submit

Exercise 2:
Ask for a few more things first name, last name, address, city, state, zip. Arrange things neatly in a borderless table so everything lines up and looks nice and neat...
Top of Form

Name: Address: City: State: Zip:


Send Your Order

make the Name, Address and City boxes a little bigger and add a text area for Additional Comments...
Top of Form

Name: Address: City: State: Zip: Magazine: Subscription: 1 year Additional Comments: 2 years

Send Your Order


Bottom of Form Bottom of Form
Bottom of Form

DHTML
The major benefits of CSS are: 1. Cleaner code Easier to maintain Speedier download Better for search engine optimization 2. Modular code Style rules can be applied to multiple pages Consistency of design Easier to Maintain 3. Design Power Precise control of position, size, margins, etc. 4. Division of labor Developers develop / Designers design 5. Better Accessibility (see footnote) No need to misuse tags (e.g, <blockquote> for formatting) No need for invisible images for positioning Users' style sheets override authors' styles

Class 7:
CSS rules are statements that define the style of an element or group of elements. The syntax is as follows:
Syntax selector {property:value; property:value; property:value}

Each property:value pair is a declaration. Multiple declarations are separated by semi-colons. The selector defines which elements are affected by the rule. Take a look at the following rule.
p { color:darkgreen; font-family:Verdana; font-size:10pt }

This rule specifies that all paragraph text should be dark green and use a 10-point Verdana font. Example:
The code sample below illustrates how inline styles are used.

Code Sample: InlineStyles.html

<Html> <Head> <Title> Inline Styles </title> </head> <body> <p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p> <ul style="margin-top:-20px; font-size:10pt"> <li style="list-style-type:square">Hello</li> <li style="list-style-type:circle">Hi</li> <li style="list-style-type:disc">Howdy</li> </ul> </body> </html>

Output: This page will render as follows

Class 8:
Exercise :
Exercise 1: Define your own styles for the h1, h2, , h6 tags, and create a document with six heading levels that use the newly defined header styles. Exercise 2: Define three different paragraph class styles, p1, p2, and p3 that meet the following requirements: p1: left and right margins of 20 pixels background color of Pink (#FF00FF) foreground color of blue. font-family of Arial,Helvetica,sans-serif

p2: p3: Exercise 3:

font-size 10pt font-weight normal left aligned text left and right margins of 30 pixels background color of black foreground color of #FFFF00 font-family of Arial,Helvetica,sans-serif font-size 10pt font-weight normal text indent of 1 centimeter background color of rgb(204, 51, 51) foreground color of white font-family of Arial,Helvetica,sans-serif font-size 10pt font-weight normal

Create six paragraphs, each with a heading. Use h1 through h6 for the headings. Then create a paragraph under each heading. The first and fourth paragraph must use p1, the second and fifth must use p2, and the third and sixth must use p3. Exercise 4: Move the document level style sheet to an external style sheet file, and link the external style sheet file to your document.

Class : 9
Exercise 5: Define a list style of upper-roman, and use it to create an ordered list of your hobbies

Define additional styles in the external style sheet for the following two exercises. Exercise 6: Create paragraphs that includes at least two images and enough text to precede the images, flow around them (one on the left and one on the right), and continue after the last image. Exercise 7: Create an unordered list of three popular books. The bullet for each book must be a small image of the book's cover. Find the images in computer library.

Você também pode gostar