Friday, August 31, 2012

HTML What?

               If you were on my site sometime late Sunday into Monday, you would have said "what happened?  It looks messed up."  That's because it got messed up, by me.  Keep reading. 

               If you read my blog post on how to create a drop down menu, which you can find here, you will have learned that is where I started learning about HTML.

               HTML stands for HyperText Markup Language.  It is the code that programmers use to create pages or to send emails on the internet.  Everything on a site, the text, graphics are all tagged with codes that tells the browser how to display those elements.

               In order to create the drop down menu, I needed to place the code for it in my blogger template, and I needed to add this code to my layout so I could have the tabs that say "Home", "Recipes", etc.

              Every time I would add a new post to the site, I would have to add more HTML code to the layout HTML so it would show up in the drop down menu.  I was quickly realizing that I was running out of room for these drop downs.  They were getting into the posts, and pretty soon they would become unclickable.

               I decided that I needed to find a new way to have people navigate my site that would be "neater".  I realized since the recipes were getting out of hand that I should consolidate them into appetizers, main dishes, etc.

              I figured out how to do that.  I just needed to add a "pages" element to my blog.  Then I would place each recipe in a group in a page.  I ended up with 7 pages.  Now all I had to do was add the new code in my layout HTML.

              I am doing this at 8:30 at night after the kids were in bed.

              I added the new code one element at a time into the layout HTML.  All was fine until I got to the 3rd element.  For some reason, blogger was not saving my new code even though I pushed save.  Now my fonts were screwed up with one of the tabs, and there was a huge rectangle around my menu, when it should have been just covering my tabs.

              So this is me late last night.  "AHHHHHHHHHHHH!  What happened to my pretty layout!  What have I done!"

              I was slightly stressed and very tired.  I knew I needed to fix it though.  I would not rest until I accomplished the fix at least.  I kept going back to the code and tried to re-edit it.  It wouldn't save no matter what.

               Okay, so I learned 2 things.  First, that I needed to follow my own advice, and back up your blog.  Second, I was so glad that I had created a practice blog that is visible to no one but me, that is a copy of my actual live blog.

               I realized I could save things.  The correct code was in the practice blog.  I would just have to copy it, and place it into my actual blog.  I needed to delete the whole HTML in my layout in my real blog.

               First, I wanted to create all the pages with my recipe consolidation and write the new HTML for the new tabs and make sure it worked in the practice blog.  Whew! No way was I going to mess up my actual blog more than it already was.  So it's probably 10 at night now, and I am clicking away with the mouse as my husband is watching football. 

              Once I tried my new pages in my practice blog and that the links were working with the posts, I typed the new code in the layout.  I held my breath as I went to view the blog, and low and behold, success!  I had the correct HTML code now.  I just needed to retype every new page and manually put the links in, in my live blog.  It's probably 11 at night now.  My husband is asleep by now.

             Now the scary part.  I needed to delete my drop down menu.  Yes, I had a little trepidation in doing this, but I knew I needed to do this for the fix.  I clicked delete for that element in my layout.   I then went to my practice blogs layout HTML, and copied it.  I then pasted the code into my new gadget for HTML.  (Which is the place where my menu goes).  I saved it and hurray, my menu was back and it was perfect with the new tabs all working!

               So 3 and 1/2 after my initial debacle, things were pretty and improved.  I achieved what I wanted.  They always say you can't go forward without going back a little bit.

              I also fixed the Internet Explorer glitch that wouldn't allow all the drop down tabs to appear in front of the posts.  Just another simple HTML code that was actually there in my HTML code.  Just needed more of that code copied and pasted, and pasted again.

              So now you know, how my new drop down menu came to be.  Yes, it was a hare-raising ride, but in the end, at midnight actually, I felt like I had conquered something.

No comments:

Post a Comment