Adding Links and Pictures Looking at Links Links

  • Slides: 12
Download presentation
Adding Links and Pictures

Adding Links and Pictures

Looking at Links • Links allow you to navigate a website.

Looking at Links • Links allow you to navigate a website.

Dissecting a Uniform Resource Locator (URL) Example: http: //www. bcps. org/calendars/2009_2010. html The file

Dissecting a Uniform Resource Locator (URL) Example: http: //www. bcps. org/calendars/2009_2010. html The file we are viewing on the web is 2009_2010. html and it is located in the calendars folder.

The Parts of a Web ADDRESS DOMAIN PROTOCOL FILE DIRECTORY File: Domain: Directory: The

The Parts of a Web ADDRESS DOMAIN PROTOCOL FILE DIRECTORY File: Domain: Directory: The Name actual A folder of webpage the where computer(s) the stored webpage aswhere a is Protocol: Format for transferring data the stored HTML webpage file (it devices. is(case-sensitive) is stored. sensitive) between (HTTP Hyper. Text Transfer Protocol)

Another Example We are going to create a link to Google: <a href =

Another Example We are going to create a link to Google: <a href = “http: //www. google. com”> Google </a>

Label the parts of a link Web address – inside of double quotes “

Label the parts of a link Web address – inside of double quotes “ ” Anchor Tag – used to create a link Ending tag Text to appear on your website

Another Example We are going to create a link to Facebook: <a href =

Another Example We are going to create a link to Facebook: <a href = “http: //www. facebook. com” > Facebook </a>

What about pictures? 1. Find a picture, Right-click and “Save as…” in the same

What about pictures? 1. Find a picture, Right-click and “Save as…” in the same folder as your website (My Documents). RIGHT CLICK ON PICTURE

IMG Tags 2. Insert the following code inside of the <body> … </body> tags

IMG Tags 2. Insert the following code inside of the <body> … </body> tags of your HTML document <img src = “file. Name”> (type the file name exactly, and include the file extension)

File Extension • The suffix of a file that indicates the file’s format (.

File Extension • The suffix of a file that indicates the file’s format (. doc = Word Document) Examples: . jpg, . gif, . png

On Your own q. Open your website from last class. q. Find 5 different

On Your own q. Open your website from last class. q. Find 5 different movie/music artist websites online and put the links in your website. q. Insert an image from one of the movies/artists into your website