Scribd
Upload
99 views

08 - Adding Images and Links - AddingImagesAndLinks PDF

The document discusses how to add images and links to web pages using HTML. It explains that images can be added using the <img> tag, which requires a src attribute and optionally can include a width. Links between pages are created using the <a> tag, which requires an href attribute to specify the URL. It also notes that making web pages look good involves understanding HTML at an advanced level and using design tools to overcome challenges from mobile screens and interactivity.

Uploaded by

Dr Phil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
99 views

08 - Adding Images and Links - AddingImagesAndLinks PDF

The document discusses how to add images and links to web pages using HTML. It explains that images can be added using the <img> tag, which requires a src attribute and optionally can include a width. Links between pages are created using the <a> tag, which requires an href attribute to specify the URL. It also notes that making web pages look good involves understanding HTML at an advanced level and using design tools to overcome challenges from mobile screens and interactivity.

Uploaded by

Dr Phil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Building a Web Page with HTML

Adding Images and Links


Image and Multimedia Tags
• Web pages can include images, video, audio
• Different kinds of tags
Image and Multimedia Tags
• Image tag:
<img src=“http://xyzw--png” width=“75%”/>
<img src=“http://bit.ly/firstimageurl” />
Image and Multimedia Tags
• Image tag:
<img src=“http://xyzw--png” width=“75%”/>
<img src=“http://bit.ly/firstimageurl” />
• Options: extra information
Image and Multimedia Tags
• Image tag:
<img src=“http://xyzw--png” width=“75%”/>
<img src=“http://bit.ly/firstimageurl” />
• Options: extra information
• Some required
Image and Multimedia Tags
• Image tag:
<img src=“http://xyzw--png” width=“75%”/>
<img src=“http://bit.ly/firstimageurl” />
• Options: extra information
• Some required
• No end tag, src required, width optional
Image and Multimedia Tags
• Image tag:
<img src=“http://xyzw--png” width=“75%”/>
<img src=“http://bit.ly/firstimageurl” />
• Options: extra information
• Some required
• No end tag, src required, width optional
Image and Multimedia Tags
• Image tag:
<img src=“http://xyzw--png” width=“75%”/>
<img src=“http://bit.ly/firstimageurl” />
• Options: extra information
• Some required
• No end tag, src required, width optional
Image and Multimedia Tags
• Image tag:
<img src=“http://xyzw--png” width=“75%”/>
<img src=“http://bit.ly/firstimageurl” />
• Options: extra information
• Some required
• No end tag, src required, width optional
• height=
• CSS later
Linking Pages Together
<h1>Where to learn HTML?</h1>
<p>
There are many sites that will serve as …
<p>
Mozilla provides
<a href="https://developer.mozilla.org/en-US/Learn/HTML">
a resource for learning
</a> HTML.

• anchor tag
• href attribute
• clickable text!
Linking Pages Together
<h1>Where to learn HTML?</h1>
<p>
There are many sites that will serve as …
<p>
Mozilla provides
<a href="https://developer.mozilla.org/en-US/Learn/HTML">
a resource for learning
</a> HTML.

• anchor tag
• href attribute
• clickable text!
Linking Pages Together
<h1>Where to learn HTML?</h1>
<p>
There are many sites that will serve as …
<p>
Mozilla provides
<a href="https://developer.mozilla.org/en-US/Learn/HTML">
a resource for learning
</a> HTML.

• anchor tag
• href attribute
• clickable text!
Linking Pages Together
<h1>Where to learn HTML?</h1>
<p>
There are many sites that will serve as …
<p>
Mozilla provides
<a href="https://developer.mozilla.org/en-US/Learn/HTML">
a resource for learning
</a> HTML.

• anchor tag
• href attribute
• clickable text!
Creating Web Resources
• Making a web page look good isn’t easy
• Designers understand HTML very well
• Designers know how to use tools

Toolbox by Tanemori/CC-by2.1
Creating Web Resources
• Making a web page look good isn’t easy
• Designers understand HTML very well
• Designers know how to use tools
• You are learning the basics, a foundation
Creating Web Resources
• Making a web page look good isn’t easy
• Designers understand HTML very well
• Designers know how to use tools
• You are learning the basics, a foundation
• Mobile can make this a challenge
• Interactivity makes this a challenge
Creating Web Resources
• Making a web page look good isn’t easy
• Designers understand HTML very well
• Designers know how to use tools
• You are learning the basics, a foundation
• Mobile can make this a challenge
• Interactivity makes this a challenge

Let’s get started!

You might also like