Sunday, October 21, 2012

HTML Tips for beginners: (e-mail reponse)

For starters, here are a few links for new bloggers from my past posts.
  • Bloggers Etiquette : a post about the Do's and Don'ts about blogging and self-promotion
  • Blogging Tips: a post about the start of designing your blog, simple do's and don'ts regarding layout, font, and gaining followers.
  • Building Your Blog 1: a post for the new blogger, how to add GFC and how to add labels/links at the top of the page.
Designing your blog can be easy. Easier then you think it is, you just need the right tools and some creativity. That or you need some mad cash to get someone else to do the design work for you. 

Programs:
Adobe Photoshop is my favorite program to use, it has so many different functions and can really help you create some awesome graphics but I wouldn't recommend it to the beginner. Why? Photoshop costs money. Yes you can get a trial version for 30 days, but I would save that for later when you actually know what the heck you are doing because you just might spend half of those days trying to figure out what's what. Instead, try using Gimp. When I didn't have Photoshop installed on my computer I used Gimp, it is like Photoshop and it's free. If you learn the basics of Gimp, you can probably get the general idea of the basics of Photoshop and you can download the trial version and have a bit more to explore.

If you aren't looking for something too complicated and just need some basic cropping Windows computers should already have Paint installed. At times, Paint can be faster and easier to use but unfortunately it is very basic and not for someone who wants to go further into design.

Images:
Since I don't really use images from other people, I don't know of many sites that offer free images. I do know that iStock photo has tons of images, but don't try to steal them, they are all watermarked with there logo and they do cost money, most of them are generally very low priced.

Photobucket is a great site to upload images to when you need them for your side bar or even for your post. Photobucket is a free website, all you have to do is register. When you upload your images to Photobucket they provide you with several links. The main link/code you will use is the "Direct Link" code which can be found when you scroll over your image and a little menu opens. All you have to do is click the link and it should copy it to your clipboard for you.

Basic image code:

This code is the very basic Image code. It will display your image exactly as it is, so if it is going on your sidebar, be sure it is the correct width.
<img src="DIRECT LINK CODE GOES HERE">

If you want to change the width and height of an image, you can use this code to do so. This code can be tricky because if you don't use the proper proportions it can distort your image. If your image is perfectly square (say an Instagram image) this code will work easily.

<img src="DIRECT LINK CODE" width="104 (adjust this number )" height="142 (adjust this number)">


Fonts:
You can find so many cool FREE fonts on the web. All you have to do is go to the site, download them, and install them into your computer. 

Here's how:
  1. After downloading the font, navigate to the folder it was downloaded to on your comptuer. Usually you would have a "Downloads" folder. If that is hard to find simply search for it on your computers search bar. You can search "Downloads" to find the folder or type the font name you downloaded and it should pull up the folder. If you search the font name, right click it and it will bring up a menu, look for "Open File Location" and that will pull up the folder so you know where it is for next time.
     
  2. Once you have the file which should be a Zipped Folder, right click it and press "Extract all" this should only take a few seconds and it should open up the extracted files. You will no longer need the Zipped Folder so you can delete it just make sure you delete the right one.
  3. When the folder containing the extracted files is open, click on the "TrueTypeFontFile" the icon should be a white paper with an 'A' on it. Click that and it will open up your font file, once that is opened click the button that says "Install" and begin the installation. If you downloaded multiple fonts, you might want to install them before you get to work, sometimes your computer won't register that you have installed new fonts and you may have to restart your computer, so to save you time, install everything and then restart your computer.
  4. Your new fonts should be ready to use. If they aren't showing up, just restart your computer.

Here are some FREE font websites:

Here is the basic coding for adjusting the size and color of your font, you can find the color codes on a Web Color Chart found on these websites.

<font size="5px">TEXT</font>
<font color="ff0099">TEXT</font>


When editing the code always make sure that it you aren't removing something you shouldn't because it will mess up the code completely. If your code is messing up, you might want to check to make sure that both Quotation ( " " ) marks are entered

Sources and tutorials:
JUST GOOGLE IT. But really, just Google it. Whenever I don't know something, I Google it. No matter what it is about. I am sure you have Googled plenty of things before. So what would be the difference with design tips?
Whenever I Google something blog related I always think of key words. I try not to type too much in the search bars so Google doesn't pull up things I don't care about. Also, when Googling a question, always add "Blogger" to the end. This will help pull up other articles about design regarding Blogger. The last thing you want to do is get a code for WordPress that doesn't even apply to Blogger.

Another way to get some tutorials is to go to YouTube, just like Google you can search YouTube and come up with tutorials on how to use Photoshop, Gimp and other programs. YouTube is a great source to find tutorials that are FREE.

How to use Photoshop: YouTube Tutorials
How to use Photoshop: AdobeTv Tutorials

W3Schools Online Web Tutorials is a really good website that will take you straight to what you want to know.

Now I am going to share some basic codes with you.

1.This code will make pretty much anything 'Center', whether it be in a post or an image on your side bar.

<center>TEXT or IMAGE CODE GOES HERE</center>

2.This code if for adding 'break's in your page. It's like when you type a paragraph and press 'ENTER' but it will add spaces in between images and fonts. The more <br> you enter, the more space you will have between images or text.

<br>

3. This code is for making text into links. So if you wanted to leave your website name in a comment with out showing the url, you would want to use this code.

 <a href="URL">I am Pisces (Whatever words you want to use for the link)</a>

for example, I would use:
<a href="www.iampiscesw.com">I AM PISCES<a/>

and it would appear

4. This code is for turning an image into a link. See the images on the right hand side bar at the very top? Those images can be clicked on and it will take you to a blog post.


<a href="LINK"><img src="DIRECT LINK CODE/URL WHERE YOUR IMAGE IS LOCATED"></a>

for example, I would use

<a href="www.iampiscesw.com"><img src="http://i1244.photobucket.com/albums/gg566/iampiscesw/postdivider.jpg"></a>

and it would appear as




5. This code will change the size of your font as well as the color of your font.

<font size="#" font color="COLOR CODE">TEXT</font>

for example, I would use:

<font size="6" font color="ff0099">I AM PISCES</font> 

This specific code would make my font size 6 and make it a bright Magenta color

I AM PISCES


Adding your codes into blogger:
You should by now know how to 'Add a Gadget' to your blog. If you don't, refer to the link at the top of the post "Building Your Blog". Once you know how to Add a Gadget, here is what you will need to do to use the HTML codes on your page.

Click 'Add a Gadget' on either of your side bars and scroll down till you see the gadget 'HTML/JAVASCRIPT' Once you have found it, click the + to add it to your side bar, it will pop open a window and there you can start to add your HTML codes.

Once you learn these codes and use them for a while they will just stick to you, and will be come easy to remember. If you are still having trouble, I cannot stress this enough, Just Google your question, no matter how silly it may sound or be, Google can help you find and learn anything. 
If you decide to use Gimp, or Photoshop, I suggest learning the program by trying to use the program through trial and error. The best way to learn is to actually go "hands on" and learn from your mistakes. If you follow a tutorial, don't just watch the video, open the program and do what the tutorial is showing you. 
Practice makes perfect.

That is all for this post and I hope I have helped. Composing these types of posts really takes some time and can often be hard coming from someone who has forgotten what it's like to read a code and not understand a bit of what it means. I may have not explained some things well enough but it is mainly because I have learned and remembered these codes so it's hard to relate to someone who doesn't. It's like trying to forget how to write letters and remember what you felt like when you were in the 1st grade trying to write your name.

If you have any further questions feel free to comment below. Also, I am taking suggestions for the next post it can be anything Blog related but PLEASE be specific in what you would like to see. I have thought about a design series but I would prefer specific topics/question. Saying you want to learn how to design is very general and honestly It makes me not know where to start and will probably just turn into a ramble and unorganized post. (kind of like this one)

Please refer to the post below for any additional help on blogging.

IF YOU HAVE ENJOYED THIS POST PLEASE +1 THIS POST ON GOOGLE THANKS!

25 comments:

  1. wow, you're so dedicated in helping other people! :) very helpful and informative post! xx

    Gia @ Lovely Serendipity

    ReplyDelete
  2. This is exactly what I needed! I'll be studying this intently. Thanks!

    ReplyDelete
  3. It is so sweet of you to do these posts! As someone who started blogging with practically no knowledge of html, I know that posts like these are truly gems!

    x Ellie @ Ellalogy 

    ReplyDelete
  4. Hola Sherry!
    OMG! You are a God-sent! Thank you so much for this post....funny how YOU and God knew I need this! God is truly good and You. Are. Awesome! I appreciate your love and support! I already am a loyal GFC reader and am glad I am! Thanks!

    ~SimplyyMayra :)
    www.simplyymayra.com

    ReplyDelete
  5. thank you so much for this helpful post!

    ReplyDelete
  6. I love how you post about this kind of stuff. I love photoshop. I took a digital photography class a few years ago and it's all we used haha.

    ReplyDelete
  7. you are amazing! I just did an online htlm/css and blogger course and comparing what you did with what i have learned, you did an awesome job!!nicely explained and clear!!way to go girl!!
    i'll think about some question you could answer

    xo Bea =)

    ReplyDelete
  8. Very helpful post indeed - will be returning again to read this!! X Am following now. X

    ReplyDelete
  9. saw you on GFC blog hop and i am your newest follower! check me out at http://lovelyarmywife.blogspot.com when u get a chance!

    have a great weekend!

    ps. Great tips by the way!

    ReplyDelete
  10. Thank you so much for all the info, I'm jotting it down as we speak! I'm a new follower. If ya get a chance check me out @ http://diaryofabfmama.blogspot.com

    ~Danielle~

    ReplyDelete
  11. Love this collection of the most used HTML! I would love to see an HTML code for a Contact form that forwards inquiries to your email? I haven't been able to find an HTML code to edit myself, so instead I've been using Wukoo. Let me know if you have the HTML code, I'd love to see that "how to" in one of your upcoming posts!

    ReplyDelete
  12. Go Sherry! Lots of blogging karma heading your way no doubt :)

    ReplyDelete
  13. New follower from the Monday Mingle! I love all this information you have shared! I'm also a pisces :) Have a fab night!
    xo,
    Karen
    www.themaxells.blogspot.com

    ReplyDelete
  14. Great tip missy! I probably need to read up on HTML for Dummies!
    I can't wait for summer holidays to come!!

    xoxo
    Thia

    ReplyDelete
  15. wow this is right on the money. what a great tip for beginners like me. I may have missed it but i have a question. How do you link back to your previous blog post? Meaning to direct your readers to you previous post that you might have mention in your recent post?

    xo
    Sam
    http://fabulouspetite.blogspot.com

    ReplyDelete
  16. BTW i followed you too on the blog hop follower and friends party. hopefully you check out my latest post.

    xo
    Sam
    http://fabulouspetite.blogspot.com

    ReplyDelete
  17. Great tips thanks! New follower from Mom's Monday Mingle party. Great blog cannot wait to see more. Would love if you could come visit/follow me.

    Thanks
    Nichole
    www.pinkieforpink.com

    ReplyDelete
  18. I feel like I need a one-on-one lesson with you, Sherry! haha
    You have SO MUCH knowledge about blogging. You've mentioned a few bits and pieces before but it would be cool if you dedicated a post just to how YOU got the swing of things on here because for people like me, it's reassuring to know that we all have to take baby steps before we start to walk :)
    As always your blogging tips are absolutely phenomenal!
    ,Liz x

    ReplyDelete
  19. I feel like we should bow to the queen. I have been somewhat searching for blogging tips like these for quite some time, but never really found what I was looking for without truly know what it was I was looking for. And you have managed to hit the nail on the head. Great post. Great info. You have a new follower for sure.

    Ballistic Gypsy <--- let's see if I did that right...

    ReplyDelete
  20. Hello! I'm visiting from Tami's GFC Hop! I'm not really a new blogger, but I'm always reading posts other bloggers write because I've found many useful things I never would've thought about on my own! Thanks for sharing!

    Helen
    Blue Eyed Beauty Blog

    ReplyDelete
  21. Thanks for posting this info. I was wondering you could email me because I have a question about another HTML code. It's the drop down menu code. I'm having trouble with it and was wondering if you would be able to assit me. leisure@navywif33.com
    Thanks in advance!

    ReplyDelete
  22. Talk about or Provide your information, designs, recognizable, 3d designs, performs of art, images, etc., earn money, and get used worldwide. Sign-up via e-mail or your group team group group group group media problem here: http://www.ehuub.com/login by selecting category "GRAPHICS, DESIGN, AND MULTIMEDIA", thank you!

    ReplyDelete