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!
