Scribd
Upload
12 views

Practice Tasks For Learning HTML

The document provides instructions for basic HTML practice tasks using Notepad to create an HTML file called hello.html displaying "Hello World!". It describes experimenting with different HTML tags like headings, paragraphs, line breaks, text alignment, background colors, horizontal rules, links, and images. Suggested changes include modifying heading sizes, adding paragraphs, line breaks, text alignment, background colors, horizontal rules, links to other pages and images with alignment.

Uploaded by

saivishwa20
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
12 views

Practice Tasks For Learning HTML

The document provides instructions for basic HTML practice tasks using Notepad to create an HTML file called hello.html displaying "Hello World!". It describes experimenting with different HTML tags like headings, paragraphs, line breaks, text alignment, background colors, horizontal rules, links, and images. Suggested changes include modifying heading sizes, adding paragraphs, line breaks, text alignment, background colors, horizontal rules, links to other pages and images with alignment.

Uploaded by

saivishwa20
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 2

Practice Tasks for Learning HTML

Basic Instructions: Open Notepad and type in the following: <html> <head> <title>Hello World!</title> </head> <body> Hello World! </body> </html> Save as hello.html !hanging "save as type# to "$ll %iles# &inimi'e the Notepad and open (nternet )*plorer. +se %ile/Open/,rowse to find hello.html and open it in the browser to see how it loo-s. &inimi'e (nternet )*plorer and &a*imi'e Notepad. )dit the file as shown in the following e*amples. )a!h time yo. !hange it .se %ile/Save as to ma-e s.re yo. save it as a file with the e*tension .html of the type "all files.# $fter yo. save the !hanges go ba!- to (nternet )*plorer and !li!- the "refresh# b.tton to reload the page and see the effe!t of yo.r !hanges. Changes to try: )*periment with heading si'es: )n!lose some te*t in the body of yo.r page with the tags <h/> and </h/> and add some more te*t between tags <h0> and </h0>. &a-e paragraphs: 1.t the tags <p> and </p> aro.nd a se!tion of te*t that sho.ld be a paragraph. 2his will !a.se a blan- line after the te*t. &a-e linebrea-s: 1.t the tag <br> where yo. want to for!e the te*t to wrap to the ne*t line with no blan- line inserted.

$lign the te*t in the !enter or to the right: +se the <p> tag adding e*tra information: <p align3!enter> or <p align3right>. 4emember to !lose yo.r paragraph with </p>. 5ive yo.r page a ba!-gro.nd !olor by adding to the <body> tag. 6hange <body> to <body bg!olor3#red#>. 2ry other !olors. 2here are !ertain "named# !olors that wor-. Other !olors are spe!ified .sing !odes s.!h as this: <body bg!olor3#7899999#>. $dd a hori'ontal r.le to yo.r page. 2his tag does not need to be !losed. $dd <hr> or <hr width3:9;>. $dd a lin-: 4elative lin-s: 4efer to html do!.ments in the same folder with the page yo.<re editing. =oo-s li-e this: <a href3#page0.html#>5o to page 0.</a> $bsol.te lin-s: 4efer to html do!.ments anywhere on the web. =oo-s li-e this: <a href3http://www.google.!om>5oogle</a> $dd graphi!s: +se 5(%s and >15s. (t loo-s li-e this: <img sr!3#pi!t.re.gif# alt3#pi!t.re of me#> $lign the graphi! by adding to the above: <img sr!3#pi!t.re.gif# alt3#pi!t.re of me# align3right> ?o. don<t need to !lose this tag. $dd a graphi! lin-: )n!lose the <img..> tag in the <a href@> tags to ma-e it !li!-able. )*ample: <a href3#http://www.google.!om#><img sr!3#pi!t.re.gif# alt3#pi!t.re of me#></a>

You might also like