Before we begin creating web pages with DreamWeaver you will learn to code with plain HTML. You will be introduced to th

Post by **answerhappygod** » Mon May 02, 2022 11:37 am

Before we begin creating web pages with DreamWeaver you will learn to code with plain HTML. You will be introduced to the most commonly used HTML code by creating a small web page. The absolute basics of a web page consist of the following “tags” (you will learn more about tags in the lecture).
❑ Open Notepad (usually located in the Accessories folder) and type in the following code:
o <html>
o </html>
▪ <head> ▪ </head> ▪ <body> ▪ </body>
❑ Save this file as la3-1.html
❑ Open the file in Internet Explorer. What can you see on the page?
❑ What can you see at the very top of the page next to the IE logo?
..............................................................................................................................................................................
Adapted from the University of Ballarat
❑ Leaveyourbrowserwindowopen.UpdateyourHTMLcodewiththefollowingline-placethecodebetween <head> and </head>:
o <title>[your name]’s hand-coded webpage </title>
▪ [your name] should contain your own name
❑ Save the file again and view it in your browser (you may have to refresh the page to see any changes). ❑ What has changed?
.............................................................................................................................................................................. ❑ Add the following code between the two “body” tags:
o <h1> Lab 3 exercise</h1>
❑ Save the file again and view it in your browser (you may have to refresh the page to see any changes). ❑ What happened?
.............................................................................................................................................................................. ❑ Add the following code between the “h1” tags:
o <h3>creating HTML pages</h3>
❑ Save the file again and view it in your browser (you may have to refresh the page to see any changes). ❑ What happened?
..............................................................................................................................................................................
❑ Next, we will use three different tags that do not require a closing tag in HTML and earlier versions <p>, <br> and <img>.
❑ First <p> which stands for “paragraph”: add the following code and text, after the “h3” tags:
o <p>
o Afleaandaflyinaflue
o Were caught, so what could they do?
o Said the fly, "Let us flee."
o "Let us fly," said the flea.
o So they flew through a flaw in the flue. o -Anonymous
o <p>
❑ Save the file again and view it in your browser (you may have to refresh the page to see any changes).
❑ Compare the text you typed with the text that is shown in the browser and write down what the difference(s)
is/are. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................
.............................................................................................................................................................................. ..............................................................................................................................................................................
❑ Next, <br> which stands for “break”: place a <br> tag at the end of each line of text AFTER the <p> tag.
❑ Save the file again and view it in your browser. Explain what the visual difference is between <p> and <br>.
.............................................................................................................................................................................. ..............................................................................................................................................................................
Adapted from the University of Ballarat
..............................................................................................................................................................................
❑ The page is a bit plain, we will use an image to improve it up a bit. The picture we will insert is called rainbow.gif. The absolute minimum code needed to insert an image is as follows – insert it before the first paragraph tag:
o <img src=”rainbow.gif”>
❑ Save the file and view it in your browser.
There are many more codes you could use here, but we will leave it for now. We will create the same page in
DreamWeaver instead.
❑ Open DreamWeaver and, using the Help facility, answer the following questions:
❑ What is the purpose of the Property Inspector? (Do not cut and paste the answer, instead try to understand what you can do there and answer in your own words!)
.............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................
❑ What can you do with the Insert Bar? (Do not cut and paste the answer, instead try to understand what you can do there and answer in your own words!)
......................................................................................................................................................
❑ What can you do in the Document window? (Do not cut and paste the answer, instead try to understand what you can do there and answer in your own words!)
..............................................................................................................................................................................