Convert text and images to a website in HTML

Hi - a client has asked me if I can help them with updating a page on their website.
It’s a pretty simple site and most pages are in HTML. I don’t have any knowledge of it through so is there an easy way for me to copy and paste text and images and have a 3rd party program reorder it in HTML so I can upload it ?
I have ftp access of course.

Thanks
D
DominicIT ConsultantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shaun VermaakTechnical Specialist/DeveloperCommented:
me to copy and paste text and images and have a 3rd party program reorder it in HTML so I can upload it ?
You have to upload images with FTP and reference them with the <IMG> tag. Consider opening a Gig for this -OR- upload a sample page
1
DominicIT ConsultantAuthor Commented:
Hi Shaun. I have attached the HTML page that needs the content , which specifically refers to http://www.qajarfamilyassociation.org/future-events.html. and the word document itself whose contents need to be put onto that page.
I will am happy to hire someone to do this (like yourself) if i could get a rough idea of time it will take.

Thanks
D
QFA-Qajar-Family-Gathering-Announce.docx
future-events-edited.html
0
Shaun VermaakTechnical Specialist/DeveloperCommented:
1) Save Word as HTML
2) Goto https://html-cleaner.com, paste HTML and Click clean. Copy clean code
3) Upload images and copy links to them
4) Within clean code add <IMG> tags to images with links from step 4
5) Copy clean code to main content tag in the current HTML page
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

DominicIT ConsultantAuthor Commented:
Hi Shaun - thanks i will give this a try tmow when i am less jet lagged.
1
David Johnson, CD, MVPOwnerCommented:
Download and install GEP on a computer such as a test computer. Make note of the time when you start the install. We need it to help identify the MSI file.
Go to C:\Windows\Installer\ and locate the MSI file with the date and time stamp matching the time you performed the install. The MSI file should be approximately 30 MB. Note: ..\Installer\ is a hidden folder. If you don't see it in C:\Windows it is because you are browsing and "Hide protected operating system files" is enabled. Type the full path into Windows Explorer or turn off "Hide protected..."
Copy the MSI from C:\Windows\Installer\ to a network share that you will use for deployment. Rename the MSI to something logical such as GoogleEarthProWin.msi
Launch GEP after installation on the test computer and complete the license registration window. Because GEP is now free you do not have to do the online registration process as was done when you had to buy a license. Instead, just enter a legitimate email address in the Username field and "GEPFREE" in the License Key field. Click "Log In" when done.
Recommended if you want a good deployment:
- Enable automatic login
- Enable for all users...
Close GEP
Open Registry Editor (regedit.exe) and navigate to:
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Google\Google Earth Pro
For 32-bit Windows then: HKEY_LOCAL_MACHINE\Software\Google\Google Earth Pro
Optional but recommended. Why? Because users will be users. Add the following reg keys and values to the same key path as above:
Hide the "Deactivate" option from the GEP Help menu:
- Right click on the Google Earth Pro folder and click on New > DWORD Value
- Rename the entry to "DisableDeactivation"
- Right click on the entry and choose Modify...
- Set the "Value data" to 1.
Hide the Username and License Key from the GEP Help>About menu info:
- Right click on the Google Earth Pro folder and click on New > DWORD Value
- Rename the entry to "hideUserData"
- Right click on the entry and choose Modify...
- Set the "Value data" to 1.
Launch GEP and verify that your registry keys are working. You should not be able to Deactivate GEP from the Help menu and you should not be able to see the Username nor License Key from the Help>About Google Earth window.
Go back to Registry Editor and the location HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Google\
(For 32-bit Windows then: HKEY_LOCAL_MACHINE\Software\Google\)
Right click on the Google Earth Pro folder and choose Export. Save the registry file to the same network share location as the MSI for deployment. Give it a logical name so you don't wonder what the heck it is in the future.
Below are commands to silently install Google Earth Pro and the registry file. Use your favorite deployment method from here. I personally like PDQ Deploy. Depending on your deployment method you may or may not need to add paths to the msi file and reg file in the commands below.
Silent install: msiexec.exe /i "GoogleEarthProWin.msi" ALLUSERS=1 /qn /norestart /log install.log

Silent Registry file install: regedit.exe /s "GoogleEarthPro715.reg"

Resources:
Kudos to boats2000 for his deployment tip. It showed me how to get my hands on that damn msi!
ITninja: http://www.itninja.com/software/google/earth-pro/7-pro
0
Shaun VermaakTechnical Specialist/DeveloperCommented:
@David: Wrong question?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you want something to look a little nicer, you may want to consider using a 3rd party app like event brite https://www.eventbrite.com/support/articles/en_US/How_To/how-to-sell-eventbrite-tickets-registrations-on-your-website-using-embeddable-widgets?lg=en_US or https://tockify.com/.  

You may even want to suggest for a site redesign to your client so it will be responsive (look good in a mobile browser).  There are some easy choices to make your own site with squarespace.com, wix,com or weebley.com as well as the wordpress but the first few I mentioned are going to have a lower learning curve. In the end it will make it easier for you to manage the event page and bring the site up to date.
1
DominicIT ConsultantAuthor Commented:
Hi Scott - thanks for your tips. I have actually recommended this to them but there is some politics involved with ownership of website so that will happen some point For now i have been appointed to do updates, though by profession this is not my thing. I have not come across Event Brite before so i will check it out.

@Shaun - This HTML cleaner site was a life saver, i am nearly there. The text is in , though i am struggling with pinpointing images and the sizes they need to be, i will work it out.
The thing i am wrestling with is the background page colour , its too dark and i cannot find where to change that. Is it somewhere in the code on the page? just a question of finding the palette number and changing it?

Thanks for your help so far...
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This is why the site really needs to be refreshed :)  The color you are wrestling with is in the future-events.css lines 5 - 14.
#imCellStyleGraphics_1 {position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;/* background-color: #C00000; */}
#imCellStyleGraphicsC_1 {position: absolute;top: 55px;bottom: 55px;left: 80px;right: 80px;background: #C00000 url('../images/29.png') repeat center center;}
#imCellStyleGraphicsB_1 { position: absolute; bottom: 0; left: 80px; right: 80px; height: 55px; background: #C00000 url('../images/29_b.png') repeat-x center bottom;}
#imCellStyleGraphicsBL_1 { position: absolute; bottom: 0; left: 0; width: 80px; height: 55px; background: #C00000 url('../images/29_bl.png') repeat left bottom;}
#imCellStyleGraphicsBR_1 { position: absolute; bottom: 0; right: 0; width: 80px; height: 55px; background: #C00000 url('../images/29_br.png') repeat right bottom;}
#imCellStyleGraphicsL_1 { position: absolute; top: 55px; bottom: 55px; left: 0; width: 80px; background: #C00000 url('../images/29_l.png') repeat-y left center;}
#imCellStyleGraphicsR_1 { position: absolute; top: 55px; bottom: 55px; right: 0; width: 80px; background: #C00000 url('../images/29_r.png') repeat-y right center;}
#imCellStyleGraphicsT_1 { position: absolute; top: 0; left: 80px; right: 80px; height: 55px; background: #C00000 url('../images/29_t.png') repeat-x center top;}
#imCellStyleGraphicsTL_1 { position: absolute; top: 0; left: 0; width: 80px; height: 55px; background: #C00000 url('../images/29_tl.png') repeat left top;}
#imCellStyleGraphicsTR_1 {position: absolute;top: 0;right: 0;width: 80px;height: 55px;background: #C00000 url('../images/29_tr.png') repeat right top;}

Open in new window


This site may have been started in an old version of fireworks or photoshop and sliced up the images for the background.  My suggestion is to get rid of those background images and place a border, radius and background color on #imCellStyleGraphics_1.

Play with
#imCellStyleGraphics_1 {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    /* background-color: #C00000; */
    background-color: #d8d8d8;
    color: #000;
    border-radius: 10px;
    border-width: 3px;
    border-color: #C00000;
    border-style: solid;
}

Open in new window

Then in the child divs with imCellStyleGraphicsTR_1 etc, remove those ID's to remove the style. Of for saftey, just put an X in front of each #imCellStyleGraphicsTR_1 like <div id="imCellStyleGraphicsTR_1">  becomes div id="XimCellStyleGraphicsTR_1">. That will take the styleing away but allow you to quickly go back be removing the X.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>  struggling with pinpointing images and the sizes they need to be

Take a screen shot of the the page and save it. Now import the screenshot into photoshop or the free online image editor https://pixlr.com/editor/ or any photo editor that can handle layers.  Once imported, add a new layer on top of the background and import your photo into that layer. You can now size the image you need while seeing it 'live' in your site's background.  Once done, save the entire thing so you can go back.  Then Save As to a new file, remove the background layer, crop the image to the size of your image you want for your site, then save/export the image as a jpg.  Now you can bring your image to your site and it should the correct size without having to size it in css which is the best option.

Otherwise, you can size an image with your css, but it if it is a large image, it is not recommended because you are only sizing it visually and not the the physical size.  <img src="path_to_images/myImage.jpg"> becomes <img class="myImage" src="path_to_images/myImage.jpg">. Then create a class in your stylesheet for myImage and set the width.
.myImage{
    width:100px;
}

Open in new window

Or you can use <img src="path_to_images/myImage.jpg" width="100">

It is best to not use inline like directly above. One reason is if you redesign your site, you will have to physically edit all that code vs just changing the css in one spot.
0
DominicIT ConsultantAuthor Commented:
Hi Scott - Thanks for all of this. So much of what you have written is way above my paygrade, the last time i wrote code was on a VIC20 in 1987. I was hoping to edit the HTML code on that specific page in order to get the desired results. I guess i could alter the colour of the text if i cant change the colour of the background? I will not be getting into CSS , if it's its beyond the limits of HTML then i will eventually explain this to the client and see where they want to go from there. Eventually they will need someone to inherit this on a professional basis even if the site is simple.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
> I was hoping to edit the HTML code on that specific page
Everything I wrote can be done on that page.

For your own sanity, leave it as is.  It looks like the site may have been done in the late 90's or early 2000's. It will be cumbersome to get right. It would be faster to just recreate the site as I suggested then fixing this one.

Explain to your client that it would be less expensive in the long run to update the site to a modern format that can also be viewed on a phone.
0
DominicIT ConsultantAuthor Commented:
Thanks for your help - the HTML clean site was a godsend. I havent worked out how to insert pics yet and may post another question about this.

D
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.