|
This is a short section for users of the Notepad feature of
makeupalley.com,
written by Colleen (MUA username josephine9999).
Note: since this primer was written, there is now a drag and drop style HTML
editor for the Notepad feature. This primer covers only the original HTML editing box.
Most frequently asked questions
Here are some popular questions from the MUA Tech Board. :)
How do you put a link to a picture inside your post?
This used to be rather complicated, now it is easy.
First of all, the image has to be on a Web server. You can't link to a pic on
your hard drive or anyplace other than a Web server.
Once it's up, you need to get the URL to the picture itself. This is a URL that ends in a picture format extension: .jpg, .jpeg, .gif, .png or .bmp.
If the URL you have ends in .htm or .html, you're not getting the URL to the picture.
I generally get the pic URL by right-clicking the image and choosing Properties.
One of the properties is the full URL to the image.
Simply copy and paste this URL into the message body. That's it! When you publish
the post, you should be able to see the picture embedded inside it.
Note: it has been well-said that "hotlinking," or linking directly to a picture that's
on a server or account that isn't yours, is wrong. This is particularly true if you're hotlinking
a picture from a smaller site, because smaller sites can't afford to pay for extra
bandwidth, nor can they pay people to manage their images.
My advice is to avoid hotlinking entirely. If you have a server, take the time to host the image yourself.
You can also host the image from photo sites that allow a certain amount of hotlinking such as
Photobucket or
Flickr.
You can use your MUA picture account to host images as well. If you want to do this, upload the picture
(see How do I use an image in my Notepad? if you're unfamiliar with how to do this).
Once it's up, go to My Pictures in your user account. Copy the URL in the Notepad Link box. Paste the
URL inside the message body of your post...now delete everything except the exact URL to the picture, as follows:
Before:
<img src='http://img.makeupalley.com/6/0/1/8/403101.jpeg'>
After:
http://img.makeupalley.com/6/0/1/8/403101.jpeg
How do I make the hearts? ♥
♥
Type the above in the subject line of your post.
Top
How do I change my Notepad?
Log in and go to Member Center. Click on My Notepad. You will get an
editing box with an Update button underneath it.
If your Notepad won't update, try using a different browser. IE is
a better candidate than Netscape.
In fact, while you're at it, open two browser windows. One will have the
Notepad editing box in it. In the other one, do a member search and click
on your own name. Click to open your Notepad for viewing.
When you've finished working in the Notepad editing box and click Update, you can view
whatever you just did by refreshing the other window.
Top
What is HTML?
HTML stands for Hyper Text Markup Language. It's a computer language,
but not in the conventional sense of the term. The only thing HTML "does,"
most of the time, is control how Web pages look. That means colors, fonts,
placement of images and text, etc.
If you're brand-new to HTML, it'll look daunting at first. Upon closer
inspection though, you will see that all HTML is written in "tags"--a word
or several words enclosed in angle brackets < >. And
most of it is the same tags, used over and over again.
Here are some tags to get you familiar with how they look:
<br />
<span style="font-family:arial,helvetica,san-serif"> </span>
<body style="background-color: #9966ff"> </body>
HTML is also fairly flexible. You can use single or double quotes inside
the tags (just make sure they match) and upper or lower case keywords. Oftentimes
the code works even if you forget to "close" some of your tags.
What does it mean to close a tag? You will note that the SPAN and BODY tags
in the above example, have a "closing tag" after them.
<span style="font-family:arial,helvetica,sans-serif;color:red">
means that all text written after the "opening" span tag will be red, and have the font face
Arial, Helvetica or sans-serif.
Why all three fonts? The person viewing your Notepad, may have Arial installed in her
computer, or she may not. If she doesn't, the next font that gets tried is Helvetica.
If neither of these pans out, the Notepad will be rendered using sans-serif.
</span> means to "turn off" the red,
Arial, Helvetica or sans-serif font. Likewise,
<body style="background-color: #9966ff"> tells the
browser to make the body of the HTML page a bright blue (the same color as the background
of this page).
</body> means the body of the page is
finished.
Do close your tags. It's a good habit, and will save you a lot of
pain later on.
Top
Why does the Notepad look different depending on how you view it?
You will notice that your Notepad looks different when viewed by clicking
your Notepad under a member search, than it does if you view it through
a swap item.
The short answer is that the swap item view converts every time you hit
the enter key inside the editing box, into
<br /> tags, for you. The current Notepad view
doesn't.
It's not difficult to work around. If you set up your Notepad before there
was a Notepad view (i.e. your Notepad was always viewed through a swap item),
you will need to go into the editing box and delete the places you hit the enter key
(sometimes it's not obvious where they are, keep playing with it).
Every time you want the text or graphic to start on a new line, add a
<br /> tag. (Literally, copy and paste
<br /> where you want the new line to begin.)
If you want a new paragraph, there are two ways of doing it. You can put two
<br /> tags together:
<br /><br />start your paragraph text and graphics
here...
Or you can enclose the paragraph:
<p>paragraph text and graphics go here</p>
What's the difference? Sometimes these can be used interchangeably.
You will need to use the
<p> </p>
tags when changing the alignment of the paragraph, as follows:
<p align="center">center-aligned paragraph -- text and graphics go here</p>
center-aligned paragraph -- text and graphics go here
<p align="right">right-aligned paragraph -- text and graphics go here</p>
right-aligned paragraph -- text and graphics go here
<p align="left">left-aligned paragraph -- text and graphics go here</p>
left-aligned paragraph -- text and graphics go here
Note: align="left" is the default value for paragraphs. You won't normally need to specify
align="left" for paragraphs.
If you are writing lots of text, sometimes it's just plain easier to use the
<p> </p>
tags. And when you get into
using style sheets, you'll find other uses for them.
Top
Why are my HTML codes showing in a swap item view, while they don't
show in a Notepad view?
It happened to me too. :) It's the same problem as
Why does the Notepad look different depending on how you view it?
above.
You need to go back into the editing box and delete out any places you may have hit
the enter key inside your tags. Again it may not be obvious, but find the codes that
showed in your swap pad view.
Top
How do I make a hypertext link?
Here is the code for a basic link:
<a href="http://www.domain.com/page.html">
To have the link open into a new browser window:
<a href="http://www.domain.com/page.html" target="_blank">
There is a difference
between target="blank" and target="_blank".
target="_blank" will pop open a new browser window each time you click the link.
Click it ten times and you'll get ten new browser windows.
target="blank" or target="name" or target="foo" or what have you, will open a new browser window
only once. Each time you click the link after that, the link gets opened into
that same one new browser window.
Top
How do I link to another part of the same page?
A hypertext link can also link to a particular section in an HTML page.
To do this, you first need to "mark" the section on the HTML page that you want
to jump to. Do this by placing a "name" tag at the beginning of the section:
<a name="section_start"></a>
You may name your sections whatever you please by using letters, numbers, and the
underscore character. Here are some examples:
<a name="a"></a>
<a name="b"></a>
<a name="c"></a>
<a name="1"></a>
<a name="2"></a>
<a name="3"></a>
<a name="index_start"></a>
<a name="top"></a>
<a name="table_of_contents"></a>
...and so forth. Pick names that make sense to you and are useful.
Now make the hypertext link to jump to the section:
<a href="#section_start">
This link works if it is on the same HTML page as the "name" code. If you
are placing the link anywhere else, stick the #name at the end of a
regular hypertext link:
<a href="page.html#section_start">
<a href="http://www.domain.com/page.html#section_start">
Top
How do I change the background color?
The easiest way to do this is to use an HTML table. You can set the background
color of the table, and everything on your Notepad will have this same background
color.
The code for specifying the background color has changed somewhat. Instead of using
bgcolor, we are to use the style attribute.
bgcolor still works but if you are writing new code, you might as
well use the newer way of doing it.
<table width="100%" style="background-color:yellow"><tr><td>
all of your text and images go here...
</td></tr></table>
|
all of your text and images go here...
|
Literally copy and paste the top three tags and put them at the very top of the editing
box. Copy and paste the last three tags at the very bottom of the editing box. Everything
else goes between the two sets of tags.
Suppose you don't want a yellow background? You can use:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
Or you can use hex codes:
<table width="100%" style="background-color:#ff99cc"><tr><td>
all of your text and images go here...
</td></tr></table>
|
all of your text and images go here...
|
Don't forget to include the # in front of the code numbers.
I put up a cheat sheet of colors and fonts to get you
started. Browsers began with 16 color names and 216 different hex codes. If you stick
with these original colors, you'll know that your pages will render perfectly across all
browsers.
However, there are many more color names and hex codes than the originals. How do you
know if they'll work across all browsers?
What I do is keep some older browsers on my PC. Microsoft is lousy about archiving their
older browsers...the last time I looked on their site, all I could find was IE 5.x...but
Netscape is wonderful at keeping most of their versions available. I have Netscape 4.51
and IE 4.0 on my PC. If a color works on these dinosaurs, it should work on anything newer.
Another way is to do a Google search for color names/hex codes and examine what you
find. It should say somewhere which version of Netscape/IE the names/codes are good
for. Imo, as long as what you have is compatible with Netscape 4.x and IE 4.x, you should
be in good shape. Browsers older than that are next to impossible to use anyway.
Top
What about fonts?
Again, there is a newer way of using fonts. The <font> tag is no longer being
used. It has been replaced by font-family, font-size, and color.
font-family
How do you use font-family? You make a list of fonts, usually three. I like to pick
a font that works on most PC's, one that works on most Mac's, and the last one should be
either "serif" or "sans-serif."
The items in the list of fonts should be separated by commas. If one of your font names
has spaces in it, like Times New Roman, you must enclose it inside quotation marks.
Since I use double quotation marks inside my tags, I use single quotation marks
to enclose my font names.
Here is how to set a font for your entire Notepad by putting it inside a set of table
tags:
<table width="100%"><tr><td style="font-family:Garamond,Palatino,serif; color:blue; font-size:16pt">
all of your text and images go here...
</td></tr></table>
Copy and paste the first three tags at the very top of your editing box;
copy and paste the last three tags at the very bottom of the editing box.
|
all of your text and images go here...
|
You can combine the background color and the font:
<table width="100%" style="background-color:#FFCCCC"><tr><td style="font-family:Garamond,Palatino,serif; color:blue; font-size:16pt">
all of your text and images go here...
</td></tr></table>
The entire Notepad will have a pink background and all of the text will be blue:
|
all of your text and images go here...
|
Or you can specify the font for a section of text:
<span style="font-family:'Times New Roman',Times,serif; color:olive; font-size:25pt">
text goes here...
</span>
gives you:
text goes here...
Here is a link that I found helpful while looking for font families:
CSS and font-family.
Here you get to see exactly which fonts are installed in your computer.
Here are some sample font families.
<span style="font-family:Garamond,Palatino,serif; font-size:16pt">
<span style="font-family:'arial black',helvetica,sans-serif; font-size:16pt">
<span style="font-family:'book antiqua',geneva,serif; font-size:16pt">
<span style="font-family:'comic sans ms',helvetica,sans-serif; font-size:16pt">
<span style="font-family:'courier new',courier,monospace; font-size:16pt">
<span style="font-family:impact,helvetica,sans-serif; font-size:16pt">
<span style="font-family:'news gothic mt',helvetica,sans-serif; font-size:16pt">
<span style="font-family:tahoma,helvetica,sans-serif; font-size:16pt">
<span style="font-family:'times new roman',times,serif; font-size:16pt">
<span style="font-family:verdana,helvetica,sans-serif; font-size:16pt">
font-size
font-size can be set using either pt or px.
<span style="font-size:10px">
<span style="font-size:20px">
<span style="font-size:40px">
<span style="font-size:12pt">
<span style="font-size:16pt">
<span style="font-size:20pt">
color
color can be color names or hex codes.
<span style="color:purple">
<span style="color:teal">
<span style="color:navy">
<span style="color:#cc3333">
<span style="color:#B22222">
<span style="color:#104E8B">
More font and color info can be found on the
cheat sheet of colors and fonts.
Top
Formatting text...
|
<center>text and images go here</center>
|
text and images go here
|
|
<strong>bold text</strong>
|
bold text
|
|
<em>italicized text</em>
|
italicized text
|
|
<big>big text</big>
|
big text
|
|
<big><big>really big text</big></big>
|
really big text
|
|
<small>small text</small>
|
small text
|
|
<strong><em>bold italicized text</em></strong>
|
bold italicized text
|
All font formatting tags can be combined. Just remember to
close them all off! I generally close them in the "nested" style as above;
it's easier to keep track of what's been closed.
Top
How do I use an image in my Notepad?
The first thing you'll need to do is store your image on a server.
Which server? MUA itself gives you a rather generous amount of server space along
with your MUA account. You can use this space if you like.
Other servers might include the free webspace your ISP typically gives you with
your Internet account, or if you have your own server by all means use that
(see Send the Page for more about
FTP'ing).
Free web hosts like Geocities balk if you try to "hot link" images stored on their
servers. I think there's a way to do it but here the inner techie has to jump out.
You can "hot link" to images stored on other people's servers but again it is nicer
to host the image yourself.
If you're doing the MUA thing, it's really cool. Just log in and go to Member Center.
Click on My Pictures. They give you a little form. Hit the "browse" button and find your
image file on your hard drive. Select it, then hit "upload."
Depending on the file size of your image, and your Internet connection speed, it can
take a few seconds or longer to upload the image. Just be patient and wait
for it to finish.
Then (and this is the cool part)--they give you a box called "Notepad Link."
Copy everything that's inside the box and paste it inside your Notepad editing window.
It's too cool.
Top
Placing an image on the Notepad
Once you have your image on a server (see How do I use an image in my Notepad?),
all you need to do is "point" to your image using code in your Notepad editing
window.
<IMG SRC='/account/pics/3/6/36018-1.jpg' width="500" HEIGHT="380">
For an image hosted on your own server:
<IMG SRC="http://www.yourdomain.com/yourimage.jpg" width="50" HEIGHT="20">
You'll need the exact path to your image.
Technically, you can place images without specifying the width and height, but the
page will load more quickly if you do. Width and height are in pixels. If you open an
image by itself inside Netscape (right-click the image and choose View Image), it will
say in the title bar what the dimensions are.
I'm not sure if IE does this...anyhow, if you open the image inside any graphics
program (even the lowly Microsoft Paint) you can find out.
Top
How do I use an image as a background?
Again, you need to have the image you want to use stored on a server
(see How do I use an image in my Notepad?).
You may now link to it from your Notepad editing window:
<table width="100%" style="background-image:url(account/pics/3/6/36018-1.jpg)"><tr><td>
all of your text and images go here...
</td></tr></table>
If you're using an image hosted on your own server:
<table width="100%" style="background-image:url(http://www.yourdomain.com/yourimage.gif)"><tr><td>
all of your text and images go here...
</td></tr></table>
Top
How do I put pictures in my user account (photo gallery feature)?
MUA allows users to upload images into their user account. These images may
be viewed and searched by the MUA community.
Currently, images must be in the jpg or jpeg format, and 100 KB or less in size.
This information is at the bottom of the image upload screen, so check there before
uploading to see if there's any change.
If you get a message that your picture is not in the jpg/jpeg format, and you're sure
that it is, check to see if it's bigger than 100 KB.
Most image upload features have a file size limit. This is the amount
of space your picture file will occupy on the MUA server. It is different from the physical
dimensions (width and height) of the picture.
File size is typically measured in kilobytes (KB) or megabytes (MB). Very small images
can be measured in bytes.
The file size reflects the amount of data that is in the picture. So, complex, high-quality
pictures, and pictures with large physical dimensions,
tend to have large file sizes. Simpler or low-quality pictures, and pictures with smaller
physical dimensions, tend to have smaller file sizes.
Changing the physical dimensions of an image.
Sometimes you can reduce the file size of an image to what you want, by simply resizing
the image. You can do this in Adobe Photoshop, other graphics programs,
or a photo-processing program such as the ones that typically come with a digital camera
or scanner (some printers come with this as well).
Here is a link to a free one, if you don't already have one:
irfanview
You can use Microsoft Paint to reduce the dimensions also. Make sure you save the
finished image as a jpg, if it isn't one already. When you go to "Save As...",
choose "jpg" from the drop-down list box of file types.
Anyhow--no matter what you're doing--the first step is to save a copy of the
original image.
You can work on the copy so if anything weird happens, you still have the original!
Open the copy inside your graphics program of choice. Look for the option to resize
the image.
In my Photoshop it's under Image on the menu,
then Image Size. Look for the option to "constrain proportions." That way, you need
only reduce the width or height of the pic. The other dimension is
automatically scaled for you.
In my Microsoft Paint (Windows 98), it is under Image on the menu, then Stretch/Skew. If you "stretch"
the image say, 60% by 60%, you will end up with a smaller picture.
In my Kodak Pictures Now software, the option to resize comes when you are actually saving
the image. You have a choice of six different preset sizes.
Reducing the quality of an image. The other way to reduce the file
size, is to save the image as a lower-quality image.
Sometimes this is called "compressing" the image. The more you compress the image,
the lower the quality and the smaller the file size.
What is meant by image quality? If you zoom in on an image closely enough, you will
be able to see the actual pixels (tiny colored squares) that make up the image.
Compressing saves only some of these pixels. Remember, the more complex the image--the
more pixels it has of different colors--the bigger the file size. Compression simply
reduces the amount of color variation in a pic by replacing different-colored pixels
with same-colored pixels.
If you compress the picture too much, it will look too grainy. It takes some
experimentation to find a balance between the physical dimensions and the quality
of images.
In my Photoshop, I go to File on the menu, then Save For Web.
Save for Web lets you choose between jpg, gif and png. It also shows you how the
image will look at different levels of compression.
In my Kodak Pictures Now software, the option to compress comes when you are actually
saving the picture (same as changing the dimensions). You get a choice of Low, Medium,
High and Best quality. Obviously Best creates the most complex image and also has the
largest file size.
Once you have a pic that looks good to you and falls within the file size limit,
save it and upload it to the MUA server.
Uploading the image. Log into MUA and go to Member Center on the menu.
Click My Pictures on the menu on the left-hand side of the screen.
Scroll down to the upload box at the bottom of the screen. Click the Browse button
to find and select the image file on your hard drive.
Click the Upload button and wait until the pic has been uploaded.
A final note. If you are deleting and uploading pictures, sometimes
you will continue to see the pictures you just deleted, rather than the new ones you
just uploaded.
That is because your browser has "cached" the old pictures. Try emptying out your
browser cache and refreshing the pic page.
Top
In conclusion...
The Notepad is a really wonderful feature. Take good care of
your Notepad; be sure to close all of your tags and use the proper
tags in the first place.
Notepads can express the personality of the MUA'er, be useful in describing
swap items, be informative, be entertaining...the possibilities are endless.
A big thanks to Hara and Elky for incorporating this unique feature.
Top
|