Chapter 4 links
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

Chapter 4 Links PowerPoint PPT Presentation


  • 112 Views
  • Uploaded on
  • Presentation posted in: General

Chapter 4 Links. Creating links between pages Linking to other sites Email links. Linkisms. Links from one website to another Links from one page to another on the same website Links from one part of a web page to another part of the same page

Download Presentation

Chapter 4 Links

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Chapter 4 links

Chapter 4 Links

Creating links between pages

Linking to other sites

Email links


Linkisms

Linkisms

  • Links from one website to another

  • Links from one page to another on the same website

  • Links from one part of a web page to another part of the same page

  • Links that open in a new browser window

  • Links that start up your email program and address a new

  • email to someone


Writing links

Writing Links

  • Links are created using the <a> element. Users can click on anything between the opening <a> tag and the closing </a> tag. You specify which page you want to link to using the hrefattribute

  • .


Linking to other sites

Linking to Other Sites


Links to other sites

Links to other sites


Linking to other pages on the same site

Linking to Other Pageson the Same Site


Linking to other pages on the same site1

Linking to Other Pageson the Same Site


Directory structure

Directory Structure


Relative urls

Relative URLs

  • Relative URLs can be used when linking to pages within your own website. They provide a shorthand way of telling the browser where to find your files.

  • Same Folder <a href="reviews.html">Reviews</a>

  • Child Folder <a href="music/listings.html">Listings</a>

  • GrandchildFolder <a href="movies/dvd/reviews.html”> Reviews</a>

  • Parent Folder <a href="../index.html">Home</a>

  • GrandParentFolder <a href="../../index.html">Home</a>


Email links

Email Links

  • <a href="mailto:[email protected]">Email Jon</a>


Opening links in a new window

Opening Links ina New Window


Opening links in a new window1

Opening Links ina New Window


Linking to a specific part of the same page

Linking to a SpecificPart of the Same Page


Linking to a specific part of another page

Linking to a SpecificPart of Another Page


Example links

Example links


Summary

Summary

  • Links are created using the <a> element

  • The <a> element uses the hrefattribute to indicate the page you are linking to.

  • If you are linking to a page within your own site, it is best to use relative links rather than qualified URLs.

  • You can create links to open email programs with an email address in the "to" field

  • You can use the id attribute to target elements within a page that can be linked to.


Chapter 5 images

Chapter 5 Images

  • How to add images to pages

  • Choosing the right format

  • Optimizing images for the web


Images

Images

  • Include an image in your web pages using HTML

  • Pick which image format to use

  • Show an image at the right size

  • Optimize an image for use on the web to make pages load faster

  • You can also use CSS to include images in your pages using the background-image property, which you will meet on pages 413-420.


Images1

Images

  • Images should

  • Stock photos

  • www.istockphoto.com

  • www.gettyimages.com

  • www.veer.com

  • www.sxc.hu

  • www.fotolia.com

  • Online extra


Storing images on your si te

Storing Images onYour Si te

  • If you are building a site from scratch, it is good practice to create folder for all of the images the site uses.


Adding images

Adding Images

  • <img>

  • Src

  • Alt

  • title


Height width of images

Height & Widthof Images


Where to place images in your code

Where to Place Imagesin Your Code


Where to place images in your code1

Where to Place Imagesin Your Code


Four rules for creating images

Four Rules forCreating Images

  • Save images in the right format

  • Save images at the right size

  • Use the correct resolution

  • Use the correct format RGB not CMYK


Tools to edit save images

Tools to Edit& Save Images

  • Adobe Photoshop

  • Other Software

  • Adobe Fireworks

  • Pixelmator

  • PaintShop Pro

  • Paint.net


Image dimensions

Image Dimensions

  • REDUCING IMAGE SIZE

  • INCREASING IMAGE SIZE

  • CHANGING SHAPE


Cropping images

Cropping Images

  • PORTRAIT

  • LANDSCAPE


Image resolution

Image Resolution

  • Images created for the web should be saved at a resolution of 72 ppi. The higher the resolution of the image, the larger the size of the file.

  • JPGs, GIFs, and PNGs belong to a type of image format known as bitmap.


Vector images

Vector Images

  • Vector images differ from bitmap images and are resolution-independent. Vector images are commonly created in programs such as Adobe Illustrator.


Animated gifs

Animated GIFs

  • Animated GIFs show several frames of an image in sequence and therefore can be used to create simple animations.


Transparency

Transparency

  • Transparent GIF

  • PNG


Examining images on the web

Examining Imageson the Web

  • Checking the Size of Images

  • Downloading Images


Html 5 figure and figure caption

HTML 5: Figure andFigure Caption


Html 5 figure and figure caption1

HTML 5: Figure andFigure Caption


Summary1

Summary

  • The <img> element is used to add images to a web page.

  • You must always specify a srcattribute to indicate the source of an image and an alt attribute to describe the content of an image.

  • You should save images at the size you will be using them on the web page and in the appropriate format.

  • Photographs are best saved as JPEGs; illustrations or logos that use flat colors are better saved as GIFs.


  • Login