week2 - J & C Consultants

Download Report

Transcript week2 - J & C Consultants 

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