Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download week2 - J & C Consultants
Transcript
Week 2 Create your first HTML Page Adding Images to your Web Page Adding Links to your Web PAge Please Visit: http://www.jandcconsultants.com/school/ to download all the PowerPoint Slides for the different weeks HTML Introduction revisited • HTML (HyperText Markup Language) – Definition • Provides a means to describe the structure of text-based information in a document — by denoting certain text as comments (<!– or <comment>), links (<a href=“”>), paragraphs (<p>), lists (<li>), etc. — and to supplement that text with interactive forms, embedded images, and other objects. – Contains 3 Sections: • HTML Tag (<html>) – Both of the Following will be encapsulated under this tag. • Header (<head>) – Takes all of the non-visible information into account like Web Page titles and keywords. • Body (<body>) – All visible content will be present here – To Create an HTML Page: • We will use Dreamweaver CS3 to create Web Page but you can use any text editor to create a Web Page, even Notepad! All you need to do is save it as an .html extension and it needs to be in the format of the page to the right. Create Your First HTML Page irst let’s open up Adobe Dreamweaver CS3 and start New HTML File. • • File -> New… -> HTML File or From the opening screen select “Create New HTML Page” File Save As Choose your folder you want to save it to, if you don’t have a folder create one on the desktop and save it in there as “index.html” Dreamweaver Interface Web Page Images 1. To Insert an Image into a Web Page, you need the following Code to do so: <img src=“mypicture.jpg” alt=“My Picture”> *NOTE: You can also add these other attributes inside the <img> tag: • width=“100” and height=“100”, 100 is the pixel dimensions of your picture . Choose any Picture you want an insert nderneath your text on your Web Page. You may want to search Google Images to find what ou are looking for. HTML Page Linking • To link pages to other pages on your site, you can do it using the full URL(e.g., http://google.com) or you can use the direct file structure (e.g., index.html) • Here is the HTML code to create a link: <a href=“index.html”>My Homepage</a> • This will give you a link that looks like this: My Homepage HTML Linking Continued… • Now in DreamWeaver CS3, create a new HTML file and save them in the same folder: – index2.html • Now create a link to “index2.html” from the file “index.html”: <a href=“index2.html”>Enter My Site</a> • This will give you a link that looks like this: Enter My Site Tutorial (Optional) 1. Now let’ s open up a Web Browser, you can choose either FireFox or Internet Explorer. 2. Once you have your Web Browser open, go to this URL: • http://www.pagetutor.com/html_tutor/lesson01.html 3. Now complete lessons 1-9 on this tutorial. Let me know if you have any questions or when you are finished. Now Its Your Turn! • Challenges – Create 3 Links on Your Homepage (index.html) • Make 1 of them an image link • Make 1 of them to an external Website like Google for example – Create a Back Link on your second page (index2.html) back to your Homepage (index.html) and then test them out to see if they work
