HTML5 and CSS3 Part 3: Creating an Image Gallery and Uploading to the Internet 2
Websites can be created by using one of many programming languages (e.g., HTML, JSP, PHP,ASP, ASP.NET, or Perl). Among those languages, HTML is the most basic text-based languagethat has been used in web design since 1989. HTML consists of two parts: 1) content that will bedisplayed in a web browser, and 2) markup or tags, which are encoded information that aregenerally hidden from web page viewers. This three-part handout will help users create a basicwebsite using fundamental HTML knowledge that they can build on with more advancedtechniques. This final part builds upon the website that was created in the first and secondhandouts. It covers creating an image gallery and image thumbnails, including the final processof uploading the website to the Internet.
Downloading the Data Files
This handout includes sample data files that can be used for hands-on practice. The data files arestored in a self-extracting archive. The archive must be downloaded and executed in order toextract the data files.
Creating an Image Gallery
An image gallery is an effective way to share photographs and images with friends, families, co-workers, etc. In an image gallery, thumbnails are used to represent the full size images whichwill be displayed when the thumbnails are clicked. Thumbnails are used to reduce the load timeof a web page.
Creating a New Page for the Image Gallery
In this lesson, a new page is created using the template file that was created in the HTML5 andCSS3 Part 2 handout. This new page will serve as an image gallery page.To create a new page from the template file:1.
. In the ITS Training Program computer labs, click the
, point to
, and select
menu and select
dialog box opens.3.
Navigate to the data files folder, select the
and then click the
menu and select
dialog box opens.5.
NOTE: Make sure to save the file in the same directory that contains the
To add a header to the new page, add the word
between the opening
tag and the closing