Build A Successful Web Site » HTML Tutorials

Adobe Lightroom HTML Gallery Tutorial (Part 3)

admin — Mon, 05 Jul 2010 13:12:33 +0000

Now all we have left to do is create the HTML pages for your images. If you have already downloaded my adobe gallery, start by saving “template.html” with the name of your first photo “myfirstphoto.html”. Then, begin editing the script as outlined below.

Site Title

My Photographs

Web Photo Gallery created by Buildasuccessfulwebsite.com.

Previous –>

Index

idth=”300″ and the “margin-left” (above to :152px; –>
class=”previewFullImage preview”
id=”previewImage”
alt=”compact disc”
height=”301″ width=”450″
onclick=”var node=parentNode.parentNode.parentNode.parentNode; if( node.click ) { return node.click(); } else { return true; }”>

class=”textColor” id=”metadata.contactInfo.value”>Contact Name

When you are done creating the first page go to the next until all your pages are edited. If you would like to add some text below the image, download this file and change it as necessary.

The final product should look something like this:

Adobe Lightroom Photography Gallery

Adobe Lightroom HTML Gallery Tutorial (Part 2)

admin — Sun, 04 Jul 2010 01:39:05 +0000

Assuming your read my previous post, I will begin this tutorial by showing you how to link to your images and CSS pages. Open your favorite HTML editor and get ready to start copying and pasting. If you own Adobe Lightroom, you can export your files and change your index.html file. You should change it to “your main web site keyword”, for example “photographs.html” if you do not want it to be the index file for your web site. The index.html file is your home page file if you use SBI! (Site Build It!).

Let’s begin by creating an HTML file and editing the head section. What you can do is either download adobe lightroom gallery and edit the photography.html file in your favorite HTML editor, or copy and paste the HTML in this tutorial into your html editor and edit from there. My comments will not appear when you open the HTML with a browser. They look like this: . You do not have to delete them if you do not wish to.

After you have downloaded the necessary files, begin by changing photography.html. If your gallery contains pencil drawings, you may wish to rename it pencil-drawings.html.

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ >

<meta name=“description” content=“Lighroom Photography Gallery”

<meta name=“keywords” content=“photography,software,photos,digital darkroom,gallery,image,photographer,adobe,photoshop,lightroom” />
<meta name=“generator” content=“Adobe Photoshop Lightroom” >

<title>Lighroom Photography Gallerytitle>

cellColor=”#949494″;

script>
<script type=“text/javascript” src=”support-files/live_update.js“>
script>

head>

<h1 onclick=“clickTarget( this, ‘metadata.siteTitle.value’ );” id=“metadata.siteTitle.value” class=“textColor”>Site Titleh1>

div>

<h1 onclick=“clickTarget( this, ‘metadata.groupTitle.value’ );” id=“metadata.groupTitle.value” class=“textColor”>My Photographsh1>

<p onclick=“clickTarget( this, ‘metadata.groupDescription.value’ );” id=“metadata.groupDescription.value” class=“textColor”>Web Photo Gallery created by Buildasuccessfulwebsite.comp>

div>

if your photo is portrait you will have this:

. If you have a lot of portrait images you may want to increase the number of pixels slightly. –>

div>

a> div>

<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID66F73CF7-53DA-4EA5-A114-4B1DD7BC9B35_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’baby.html’”>

div>

a> div>

<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID46C15679-2928-43ED-8952-3718B29C1A37_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’movement.html’”>

div>

a> div>

<div class=“thumbnail borderTopLeft borderRight” onmouseover=“window.gridOn( this.parentNode, ‘IDCF067BE9-376C-4C1A-B497-80A66C52689F_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’girl.html’”>

div>

a> div>

div>

<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘IDFB258F45-F244-46F9-950A-3B5B69A388A1_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’ball.html’”>

div>

a> div>

<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID0D17AE79-5375-4226-8159-E9042839C15F_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’geranium.html’”>

div>

a> div>

<div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘IDD6C9D900-3B45-4ECF-A2F1-84A8916D432B_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’glass-house.html’”>

div>

a> div>

<div class=“thumbnail borderTopLeft borderRight” onmouseover=“window.gridOn( this.parentNode, ‘ID19F46BF5-0AEB-4119-932C-54BE48CB6843_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’hibiscus.html’”>

div>

a> div>

div>

<div class=“thumbnail borderTopLeft borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘IDDAB52CF3-56BC-4C58-864C-B701C90C0F48_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’interlock.html’”>

div>

a> div>

<div class=“thumbnail borderTopLeft borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘ID9E643A64-2D90-4811-9BAB-32EB01FDC02A_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’lilac.html’”>

div>

a> div>

div>

a> div>

<div class=“thumbnail borderTopLeft borderRight borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘ID1D5BBD45-7CA4-49B7-BB72-BF85722727C7_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’hook.html’”>

div>
div>
div>
<div class=“clear”>
div>
<div class=“pagination”>
<ul>
<li class=“current textColor”>1li>

<li class=“previous textColor”> Previous li>

<li class=“next textColor”> <a class=“paginationLinks” href=”#“>Nexta> li>

ul>

div>

<div id=“contact”>

<a href=”mailto:user@domain“> <span

class=“textColor” id=“metadata.contactInfo.value”>Contact Namespan>

div>

<div class=“clear”>
div>
div>

body>
html>

The modified Adobe Lightroom Gallery makes:

Your images search engine friendly
Your content search engine friendly
Your web site galleries receive more traffic!

In the next tutorial you will learn how to add search engine friendly pages with the large images you created in the first Adobe Lightroom Tutorial.

Lighroom Photography Gallery

Site Title

My Photographs

Web Photo Gallery created by Buildasuccessfulwebsite.com

if your photo is portrait you will have this:

. If you have a lot of portrait images you may want to increase the number of pixels slightly. –>

class=”textColor” id=”metadata.contactInfo.value”>Contact Name

Adobe Lightroom Gallery Template Tutorial

admin — Wed, 28 Apr 2010 00:33:36 +0000

Welcome to to the Adobe Lightroom HTML gallery template tutorial for SBI! users. If you are an SBI! owner, and want to spruce up your web site with a nice HTML gallery from Adobe, you will soon realize that it will not work. However, I will show you in this tutorial how to change that by modifying the code to make it work.

Lets have a look at what your gallery will look like first before we get to work. It will be a bit of work to create, so you may as well know what you are getting yourself into!

Adobe Lightroom HTML Gallery Template (without modifications)

The Structure

First things first. Before we start modifying the code, you need to understand how to set up your SBI files so that you can upload them to the SBI server.

1. Create a folder in your My Documents (for windows) folder, or elsewhere on your computer, and name it image-files.

2. Create a folder in your My Documents (for windows) folder, or elsewhere on your computer, and name it support-files.

3. Size all your landscape photos so that they are 450 px by 327 px and all your portrait photos so that they are 338 px by 450 px (see examples below).

4. Save these photos to your image-files folder with names that describe the photo. For example girl-pencil-drawing.jpg

5. Next we need the thumbnails saved into image-files folder. The landscape thumbnails need to be 130 px by 87 px, and the portrait ones need to be 87 px by 137 px.

Once you are finished and have each image file both in a large (flower.jpg) and small format (flower-thumb.jpg) in your image-files folder, add these files to your folders.

Now you are all ready to modify the HTML pages.

I will explain that in my next tutorial…

No related posts.

HTML Head Setup

admin — Sat, 06 Mar 2010 00:59:02 +0000

In this tutorial I will explain how to set up your HTML head section. To begin let’s look at some of the code we will use. The red section is the code I want to draw your attention to because it is the code that search engines will use to index your site.

Pencil Drawings

The first section is your title section. It is between the two tags . This is the title of the page you are working on that will appear in a tab once your site is loaded by an internet browser. And, once your site is indexed, it will be used as the link for your page in a Google, Yahoo, or Bing search. The title you choose is very important. It must be researched because it must be able to bring traffic to your web site. I used Google Adwords Keyword Research Tool to look for a good keyword for this page. I ended up with HTML head as my major keyword. That is why I chose to name this page HTML Head Setup.

Your description has to fit with your title and your keywords. You will notice in the example the title is pencil drawings, and so the description also contains the words pencil drawings. Your description must contain your exact keyword at least once, and maybe even twice.

The HTML head section of your site MUST contain keywords. They are the words that are naturally sprinkled throughout the content of your web page. For example, if your keywords are pencil drawings, then you MUST use the words pencil drawings every once in awhile throughout the the page. Not graphite sketches, or something close to the keyword. The EXACT keyword or keywords must be used. In every paragraph, try to use the keyword(s) at least once.

Adding this tells search engines the subject of the page (kind of like your title) and the language of the page.

The last two tags tell the robots to index the page. This information you can also include in the sitemap xml document for your web site. If you choose to not have your web page indexed, add “no follow” instead of “index”.

That`s all there is too it. Research your keywords and add them throughout your HTML head section. In time, your will find out that search engines are directing more and more visitors to your web site!

HTML Tags Reference

admin — Fri, 19 Feb 2010 01:29:56 +0000

Here is a list I have put together of tags you will most likely use in your HTML web page. If you are new to hypertext markup language, bookmarking this page would be a good idea.

Most commonly used HTML tags:

| Comment in your HTML code.
| Defines an anchor. You use this to create a hyperlink.

| Makes your text bold.

| Defines your document’s body section.

| Creates a line break.

<br clear=”all” /> Creates a line break below all pictures and text above it.

| Clears only to the right.

| Clears only to the left.

| Creates a divider section.

| Makes your text italicized.

| Defines your document’s head section.

| List item.

| Use these tags in the body of your HTML.

| Creates a line break

| Makes your text bold (I would use this tag).

| Creates an unordered list.

Special tags:

| It creates a Server Side Include. The HTML it refers to is often a just a piece of a HTML document that was cut out. Every time you paste this code into your document the cut out HTML will appear on your page. This is handy for web site headers and footers. All you have to do every time you change your navigation bar is update the html contained in the Server Side Include. Some web servers need a .shtml extension. Others work with a .html extension. Still others need the entire file named “my-file.shtml” for the server side includes to work properly. Some web servers do not allow server side includes.
To be continued

HTML Tags

admin — Wed, 17 Feb 2010 00:59:49 +0000

Ready to tackle some HTML (Hypertext Markup Language)? Before you start, you may want to grab a coffee to keep you awake. This HTML tags tutorial will take you awhile to get through. There is a lot we have to cover. By the end of the tutorial should be able to write out your first HTML page, without a program!

Here we go.

What are HTML Tags?

HTML is composed of a series of HTML tags. These tags tell an internet browser how to display your web page. There are so many HTML tags you will have to learn, that by the end of this tutorial you may feel overwhelmed. That is why, if you need to get away for a bit, I have broken down this tutorial into manageable chunks. To each chunk I have given a heading.

Let me begin by showing you a very simple HTML tag that you will most likely use a lot. This tag is a divider tag

. Every HTML tag has a beginning and an end. The visible text or elements inside divider will be placed in between the two tags.

Some sources will tell you that a break tag
in your HTML does not need an end tag. The same goes for the paragraph tag

. Although it works to write
for every break, a better way to write it is
. And although every time you write

a new paragraph will be displayed, a better way to write it is with a closing tag after the paragraph

Example:

This is a proper way to write a HTML paragraph

Get into the habit of always starting AND ending all your HTML tags.

HTML tags never to be written using uppercase letters. Again, it will work, however with XHTML it will not. Again, learn to do it the right way. If your start writing your tags like this

it will be hard to get rid of the habit later.

QUICK SUMMARY:

1. All HTML is written using HTML tags.
2. Always end the tags you start.
3. Always use lowercase letters.

The 2 Major Sections to a Web Page.

The 2 major parts or sections to a web page. There the head section and the body section. Their tags look like this: and .

The Head Section

The head section contains all the information and meta data a web browser will need in order to properly display the body section. This information is also used by search engine robots and spiders. Some information you will find there is your web page keywords, description, title, and how may times a robot should visit.

The last part of the head section often provides hyperlink references to other pages it will need to display the page correctly. For example, perhaps you have a CSS (Cascading Style Sheet), or some JS Javascript used in a widget on your web site.

The Body Section

The body section contains the content of your web page. Within the content you will refer most often to the images you have stored on your web server and the cascading style sheet(s) you have made for your web site (you will learn how to create a cascading style sheet in another tutorial). You may also refer to other web pages and content stored on other web servers.

QUICK SUMMARY

1. There are two main sections to your web page, the head and body.
2. The head section contains information and meta data for search engines and your web browser.
3. The body section of your web page contains the content of your web page.

HTML Elements

On the very top of every HTML page you will see something like this:

Now what does that all mean? The following is a large quote from Wikipedia. I think it provides a more detailed answer than I can come up with. If you can not make heads or tails out of it, do not worry. It is not terribly important. However, for those of you who may find it interesting, and want to understand every HTML tag you are going to use, I included it as part of this HTML tutorial.

Beginning of quote ”

Element standards

HTML elements are defined in a series of freely-available open standards issued since 1995, initially by the IETF and subsequently by the W3C.

Since the early 1990s, manufacturers of user agents (e.g. web browsers) have often developed their own elements, some of which have been adopted in later standards. Other user agents may not recognise non-standard elements, and they may be ignored or displayed improperly.

In 1998, XML (a simplified form of SGML) introduced mechanisms to allow anyone to develop their own elements and incorporate them in XHTML documents, for use with XML-aware user agents.[2]

Subsequently, HTML 4.01 was rewritten in an XML-compatible form, XHTML 1.0 (eXtensible HTML). The elements in each are identical, and in most cases valid XHTML 1.0 documents will be valid or nearly-valid HTML 4.01 documents. This article mainly focuses on real HTML, unless noted otherwise; however, it remains applicable to XHTML. (See HTML for a discussion of the minor differences between the two).

Since the first version of HTML, several elements have become outmoded, and are deprecated in later standards, or do not appear at all, in which case they are invalid (and will be found invalid, and perhaps not displayed, by validating user agents).[3]

At present, the status of elements is complicated by the existence of three types of HTML 4.01 / XHTML 1.0 DTD:

Transitional, which contain deprecated elements, but which were intended to provide a transitional period during which authors could update their practices;
Frameset, which are versions of the Transitional DTDs which also allow authors to write frameset documents;
Strict, which is the up-to date (as at 1999) form of HTML.

The first Standard (HTML 2.0) contained four deprecated elements, one of which was invalid in HTML 3.2. All four are invalid in HTML 4.01 Transitional, which also deprecated a further ten elements. All of these, plus two others, are invalid in HTML 4.01 Strict. While the frame elements are still current in the sense of being present in the Transitional and Frameset DTDs, there are no plans to preserve them in future standards, as their function has been largely replaced, and they are highly problematic for user accessibility.

(Strictly speaking, the most recent XHTML standard, XHTML 1.1 (2001), does not include frames at all; it is approximately equivalent to XHTML 1.0 Strict, but also includes the Ruby markup module.)[4]

A common source of confusion is the loose use of deprecated to refer to both deprecated and invalid status, and to elements which are expected to be formally deprecated in future.
” end of quote.

A Simple Web Page

Let’s look at simple web page.

Untitled Document

This is my first paragraph

That is all there is to it. You have a web page. Copy and paste the code to your favorite HTML editor and preview it in an internet browser. If you open it with Dreamweaver CS4 it will look like this:

All you should see are what you placed in your body section:

This is my first paragraph.

Let me explain the code you just used. Before I do this I will show you how you can add comments to HTML without it actually appearing on a web page in a browser. No one will see them unless they view the source files.

To add a comment you have to add these two HTML tags:

The words, “here is a comment” will not appear in your page. I am going to add comments to the HTML of your page so that you know what each part means.

Here the same page again, except this time there are comments included in the HTML script.

Untitled Document

This is my first paragraph

And that is all. Now you know how to create a HTML page.

It may be time for you to grab another coffee or quit for the day. You choose. Keep following our site updates. My next tutorial will teach you how to include some more HTML tags to your page to make it look slightly more interesting!

QUICK SUMMARY

1. You should know how to create a simple HTML page.
2. You should know the most important parts of every HTML page and what they mean.
3. You should know how to add comments to your HTML.

No related posts.

How to Center an Image

admin — Sat, 06 Feb 2010 23:14:35 +0000

Now that you know how to add a image to your web site, let me show you how to center the image. There are two ways in which you may do this.

The first way is to open a new

tag

Then add the following code:

and close the

tag with this <’/div>.

Now your code will look like this:

That’s all! Your image should look like this:

How to Add an Image to Your Web Site

How to Add an Image to Your Web Site

admin — Sat, 06 Feb 2010 21:13:49 +0000

Learn how to add an image to your web site. The code may look confusing at first, but it is not too hard to figure out. Here is a sample:

Okay so the first part tells the browser that it is an image (img) and where to find it (src). Then the source is surrounded by quotation marks. In this case the source of the image I choose for this tutorial was taken from 2bdrawing.com. If you copy this: http://www.2bdrawing.com/image-files/audi-r8-thumb.jpg and paste into your web site browser you will open the file as well.

The alt tag (alt=”pencil drawings”) is again surrounded by quotation marks. Adding the tag helps search engines find your pictures and place them on their image searches. The more you add the better. Images are a great way direct traffic to your web site.

It is also a good practice to add the width and height of the image you add to your web site. In order to know how big your image is, right click on it and select Properties. There is should tell you the number of pixels. If the number is bigger than 1000, use a image editor to downsize the picture. Large pictures take forever to load.

That is it! Here is the image:

No related posts.