Web design basics_06

WEB DESIGN BASICS

01:36 AM 2

01:36 AM 3

Page Jumps Recap

01:36 AM 4

Jump to Top

Write your post;

Switch to the Text Editor;

Add <a id="top"></a> at the beginning of the post;

Add <a href="#top">top</a> at the end of the post.

01:36 AM 5

Variations

Variation in <a href="#top">top</a> will change the name under which your

page jump link will be displayed.

<a href="#top”>Top of the Page</a><a href="#top">Jump to Top</a><a href="#top”>Go Up</a>

01:36 AM 6

Now lets complicate things a bit…

Take a typical Wikipedia page:

Montreal

01:36 AM 7

So how do we do that?

01:36 AM 8

Let’s start by creating a sample page or postContents: Introduction Arguments Conclusion

IntroductionLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

ArgumentsLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

ConclusionLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

01:36 AM 9

Make sure to chose an element for your headings/titles!

01:36 AM 10

This is what your post/page text should look like in the Text Editor:

Contents:<ol>

<li>Introduction</li><li>Arguments</li><li>Conclusion</li>

</ol><h2>Introduction</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

commodo ligula eget dolor. Aenean massa.<h2>Arguments</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

commodo ligula eget dolor. Aenean massa.<h2>Conclusion</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

commodo ligula eget dolor. Aenean massa.

01:36 AM 11

Let’s now modify the elements IDs:

<h2>Introduction</h2> becomes <h2 id="introduction">Introduction</h2>

<h2>Arguments</h2> <h2 id="arguments">Arguments</h2>

<h2>Conclusion</h2> <h2 id="conclusion">Conclusion</h2>

01:36 AM 12

Lastly, link the element IDs to the Content list

01:36 AM 13

Jumping to another page<a

href="http://startingmyownwebpage.wordpress.com/">Go to Home</a>

Broken down:

<a href="address of your page">Display Name of Your Link</a>

01:36 AM 14

The More Tag Command

<!--more-->

01:36 AM 15

Read More

<!--more-->

<!--more But wait, there's more!--><!--more Read More-->

<!--more See Full Post-->

01:36 AM 16

A few Examples

http://startingmyownwebpage.wordpress.com

01:36 AM 17

Excerpts

01:36 AM 18

Themes that support Excerpts

Blix Fauna Flower Power Hemingway Steira Supposedly Clean Sweet Blossoms

01:36 AM 19

Next Page

<!--nextpage-->

Example

01:36 AM 20

Category Pages

01:36 AM 21

Directories

See also: 20 Free Places to Promote Your Website Online

01:36 AM 22

Search Engine Optimization

Include any keywords that people might use to the search for your site in the content you post, especially first paragraphs and headers.

Use the Alternate Text space to describe relevant content using keywords.

Keep the site updated.

01:36 AM 23

Publicize Your Site

E-Signatures, business cards, letterheads

Take advantage of social bookmarking sites, such as Del.icio.us, StumbleUpon, Digg, Reddit, and Pinterest

Take advantage of social media sites, such as Facebook, Twitter, Flickr, LinkedIn, YouTube, Google+

01:36 AM 24

More…

5 Ways to Promote Your Website