Thursday, 27 August 2015

A beginner’s guide to putting pictures onto your website via an html post.

Subtitled: Saving a multi-voice poem using “Print Screen” command: Part 3.

This has been a long and difficult road but hopefully it will be easier for you. I encountered “a few” difficulties doing what I thought would be easy.

The most helpful web editors doing this were Microsoft Expression Web 4 (which is available on free download and has no time limit on usage –so the experts say-no matter what is says when downloaded). I also used a different web editor for the first time. Alley Code is a new web editor I had never tried before. It was available on free download.  It worked well. Both web editors correctly showed the two page poem Roadblock on Design mode and on Preview mode.

I spent a lot of time trying to get the html for two Print Screen Command pictures to work properly in the html editors of Blogger and WordPress.


Firstly –as a beginner in html- I was not sure what happened when you went to Insert on your web editor to insert your two pictures. I had thought that the code was a representation of the picture. Then I thought perhaps the code linked to the picture which had been somehow saved in the Web editor and would Post to my website along with the html. Neither was right. When you go to Insert and find the picture file you are looking for, in our case a picture file but it could be any image file, you insert an identifying code into the html - from the picture. And this can be used to trace it later.

Please put a space between your two pictures in the html-to stop them appearing side by side rather than one above the other (use paragraph tabs for instance). The two files should be in the Body part of your html one above the other.

You need to have your two picture files already in the Media gallery of your website. It is easy to add picture files to most website picture galleries. Although I had both pictures there, when I Posted the html into the html editor on my site it did not work. I don’t think the html “found” the pictures properly (on the WordPress Post it showed an icon and the alternative text where the picture should have been). So, on, I went to the Picture gallery (I selected insert media and it took me to the Gallery). I clicked on each of the files one by one. For each file I selected it and made sure I had the image set to the right size. For the first file I clicked it (it shows a tick when it is selected) and went to Inspect Element. I then copied the identification part of the image (the src bit). It is in a box labeled URL. I put this in instead of the identifier script I had already in my web editor (the identifying bit between the quote marks). Make sure you replace one bit with exactly the same bit  of code (the identifying bit).  I then did the same for the second bit of src image code. I then Published this and it worked. So, you should be able to see a Roadblock poem added to my site via a Microsoft Expression Web 4 editor (that is how I have titled it). It looks clear and is the right size. Again, I tried books, and help sites and Googling for help but I had to stumble my way through it.

You can also see the URL and set sizes of pictures on by going to Media and then to Media Library and double clicking a file.



Also on Blogger-when trying to Post the html code I had made up- the pictures did not show. Only an icon and the alternative text. So I went to insert Media and then, From this blog. I then clicked to select the picture. A tick mark appears when selected. When you have selected a picture, you must pick Extra Large picture from the options of size that you are given. Right click and from the options choose: Inspect Element. (I could not see a URL option). You will see a lot of text highlighted that describes picture size and details. Choose to Copy this code. This is the entire code necessary for your picture to be identified and published at the correct size. Delete all the image code for each picture (in your web editor) and replace it with the appropriate code you have gained from each of the pictures on Blogger picture Gallery. You can insert this code either directly into the html on your Post where that picture should be. Or copy it and paste into your web editor (which is preferable if you want to add text and make changes). The code for the Blogger picture seems to be a hyperlink rather than just a link (but it does work). I now have the Roadblock two page poem on my Blogger website. It is slightly too small to see clearly.


To summarise: How to place your images into a Post for Blogger and You have your images already in your Media Gallery. Make sure they are the right size (by selecting and changing if required). Copy the URL or identifying code for the pictures you want to use. This can be placed directly into the website’s html editor at the right point in your code. Or can be placed at the right point in your code in your web editor.


Of the two methods of placing your print screen pictures onto your site as a Post, you may think that the method where you simply post it in from your Media Gallery is the simplest. I didn’t always get that working though-sometimes the Post placed the pictures side by side rather than one on top of the other. However, if you can Post your print screen pictures as part of an html Post then you have learnt a lot about html. Also, you can add bits of text and other links as well. If you can do it, please try the web editor method (both methods were compared in my last Post).


Within the angle brackets your image will have the identifier: img src=“yourpicturefilenamehere.png” If you are using a format other than PNG then it will be a different format at the end.

You will also have to (in your web editor) give a short alternate description of the image. And also a long more detailed one in case it does not show. Your web editor will ask you for it when you Insert your picture file.

src means source.

img means: image.

html means: hyper text markup language

Links allow users to e.g. click their way from page to page within a website.

A hyperlink is a text or an image you can click on, and jump to another document.


Always be tidy and use a separate folder in My Documents for when you are using the screen shot command. It keeps everything together. But all web files that you have prepared in your web editor and are ready to be opened by your browser (e.g. Google Chrome) should be saved in your My Websites Folder (I read this in a help forum but I am able to open web files from other folders). It saves automatically to there when I click on Save Web Files. Make sure you always Save with the correct format in Save As Type (e.g. Save As Type in Microsoft Expression Web 4 automatically saves as Web Pages for me). Do not save a web page as text.


In the last post I gave a link to a site which said that Alt and Print Screen allows you to copy and paste the active screen instead of everything on the screen. Please try it, but it didn’t work for me. Here is another site that says it should work:


I eventually added the two print screen pictures to Publisher. This is a text and picture editor. I saved this as Rich Text and it seems to have worked ok. Memory used up was about 5 mega bytes.


And also, in one Post I was worried about print screen pictures added from html Posts maybe using up a lot of memory. Well they don’t.


No comments:

Post a comment