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.
WORDPRESS.COM
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 WordPress.com, 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 WordPress.com by going to Media
and then to Media Library and double clicking a file.
BLOGGER
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 WordPress.com
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).
Glossary:
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.
PS
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: https://en.wikipedia.org/wiki/Print_screen
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.
