About the landing page for htteepee.com


Steps to create the landing page for htteepee.com on a mac.

Get the image layed up on screen the way you want it.

Shift-cmd-4 to pull up the image selection crosshairs.  Swipe around your selection.

Tap the ENTER key to save the selection to an image file on the desktop, default name is Picture 1.jpg.

Rename Picture 1.jpg to something more meaningful, like htteepee-homepage.jpg.

Save the text of the existing landing page (most likely index.html) as a document with an .html extension on to your local machine.  

Open the file in your favorite browser to see what you have and what you want to change.  The file was named htteepee-lp-original.html in this case.

w3schools.com for instructions on using the html image tag.  

Copy the image file into the same folder as the htteepee-lp-original.html file.  This is so you don’t have to worry about paths.

In this case include the image on the page using <img src=”htteepee-homepage.jpg” alt=”htteepee image” width=”738″ height=”458″  />.  The width and height in this case are set to exactly match the image attributes on the local machine.  Get info->CMD+i on a mac to discover this information.

Open the local file in your favorite browser again, this time the image should be loaded onto the page.  View the page at different zoom levels, and vary the page width and height to the maximum extent possible to get an idea of how the image may move around on the screen.  

TIP:  Be mindful that screen sizes of mobile devices are an increasingly important proposition in html layouts.

When satisfied on the layout locally, upload the image and the edited document into the root of the htdocs.  For a home/landing page the name of the file likely should remain set to index.html as it was in this case.