Lesson 8 - Links & Images
LEARN
Today's Agenda
- Hyperlinks
- Images
- Project 3
Daily Reading
- Read 2.1 HTML document structure
- Follow Reading Schedule
The New Literacy
- Web-based communication is a new capability
- Businesses require skill in professional communication
- Technology skill is not enough
HTML Page Template
- Create your own page template
- Use mine as a model Sample Page Template
- View the source code in the browser (Ctrl-U in Firefox)
- As you learn new things update your template
HTML Validator
- Validate your pages to check our HTML
- HTML Validator
- Point to your page and it will check it
- Bookmark this page in your Toolbar
Hyperlink
- Anchor is used to add a hyperlink to a page
- Requires two parts
- Link text
- Page URL
- When clicked the web browser is reset to the new page
<a href="new_page.html">Link Text</a>
a
- "a" is for anchor
<a href="new_page.html">Link Text</a>
Anchor href
- The URL is set by the href attribute
<a href="new_page.html">Link Text</a>
Anchor Inner Text (link text)
- The Link Text is inside the a tag
- Study this example
<a href="new_page.html">Link Text</a>
Anchor target
- The target attribute can bring up a new tab
<a href="new_page.html" target="_new">Link Text</a>
Image
- Images can be embedded in a page
- When the page is loaded in the browser the images are all fetched from the server
img
- Images are added with the "img" element
<img src="logo.png" alt="Logo">
Image src
- src attribute tells where to get the image
<img src="logo.png" alt="Logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
Image alt
- Alt text is displayed until the image is loaded.
- It is also used by search engines to identify images.
<img src="logo.png" alt="Logo">
Image width
- Images can be display at a specific size
- This image takes 80% of the view width
<img src="logo.png" alt="Logo" width="80%">
- This image takes 500 pixels of the view width
<img src="logo.png" alt="Logo" width="500">
BUILD
Add an image from the internet
- Create a page with an image tag
- Copy and paste the URL to an image you find.
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
Add a local image
- Download an image to your local computer
- Hook up this image into your page
<img src="logo.png" alt="Logo">
Finish Project 3
- Create a profile page "bacs200/profile.html".
- Include a selfie.
- Add the bear logo by finding it on the UNC website.
- Validate your page