Download presentation
Presentation is loading. Please wait.
1
Web Authoring with Dreamweaver
2
Unit Objectives Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute, javascript Be able to use tags: html, head, body, title, p, img, a Build a simple web page containing text, images and links Build a simple website comprising at least five linked pages
3
Client/Server Architecture
4
HTTP Client issues a request to the server i.e. the user types a web address into the browser address bar and presses “Enter”. Server retrieves the html file from its hard disk Server sends the html back to the client Client’s browser displays the html as a web page 1 2 3 4
5
Definitions 1 Client: Server: HTTP:
6
HTML Consists only of text No pictures, no text formatting (e.g. bold, underline), no colour Tags used to “mark up” the content of the document E.g. if you want something to appear bold in the browser you wrap it in bold tags like this E.g. if you want something to appear bold in the browser you wrap it in bold tags like this
7
Sample HTML Document <html><head><title> My first webpage </title></head><body><p> Welcome to my webpage! <p/></body></html>
8
Task 1 1.Open notepad and copy this html into it 2.Save it as index.html 3.Then open it with your browser <html><head><title> My first webpage </title></head><body><p> Welcome to my webpage! <p/></body></html>
9
More HTML <body><p> Welcome to my webpage! <p/> </body>
10
Task 2 1.Get an image from the internet, name it “myphoto.jpg”, and put it in the same folder as your index.html file 2.Insert IMG tag into your page and reload it using the refresh button in your browser <body><p> Welcome to my webpage! <p/> </body>
11
Yet More HTML <p> Click here to go to Google </p>
12
Task 3 1.Put this code in the body of your html page 2.Refresh your browser and try out the link <p> Click here to go to Google </p>
13
Task 4 1.Save a new copy of your page and edit the copy to create a new html page with A different title Different text A different photo A different link 2.Use the internet to find out what the ALT attribute of the IMG tag is and why it is important always to include it.
14
Task 4 1.Save a new copy of your page and edit the copy to create a new html page with A different title Different text A different photo A different link 2.Use the internet to find out what the ALT attribute of the IMG tag is and why it is important always to include it.
15
Homework Type out the html code that will produce this page Note: You need to include the title You can assume the image is called tim.jpg and is in the same folder as the html page itself Email the html code to me
Similar presentations
