Need to understand how html files work

git
html

#1

I am new to creating html files through R markdown. As part of an assignment, I'm expected to commit this file to a repo on Github. I did that successfully, but on Github, all I see is strange code. Is this normal? How will my actual output be viewed properly?

Nancy


#2

Are you just nvigating to your repo on GitHub and clicking on the HTML file there? If so, I'd expect that you're looking at the HTML source—the contents of the file as plain text. Depending on whether you wrote the HTML file yourself or a program output it automatically, it could either be very readable or not readable at all :sweat_smile:

If you want to see the rendered HTML page, like any regular one, you could turn on GitHub Pages for your repo. GitHub Pages will host HTML files on an address similar to (but not the same as) your repo's address, so visitors can see what the HTML page is supposed to look like.

If that sounds like what you're going for, head over here to see how you can turn it on for your repo (choose Project site and Start from scratch) :slightly_smiling_face:


#3

I created the html using knitr. I wish there was a way to include the graphics on Github, but I will try out Github Pages tomorrow if that's what's generally done. Thanks!

Nancy


#4

No worries! There shouldn't be a problem using images and other external files; you can push them to GitHub along with your knitted output. For example, this is what my website's repo looks like on GitHub:

I keep my images in the assets folder. If I click on index.html, I can see it that file plain text form:

(Mine has some weird stuff in it, but that's the sort of window you'll get). But if you go to where the repo is hosted (which in my case is my website domain, rensa.co, but in your case will be another address), index.html will be rendered, including any graphics:

The catch is that your image paths (locations) in index.html should be relative: if the image files are in the same folder as index.html, they'll just be filename.jpg or whatever, whereas if they're in a subfolder, like images, they should be something like images/filename.jpg.

Since you didn't write the HTML yourself, that might be a bit hard to check, but if you look at index.html on GitHub (as above) or open it up in a code editor, you can search for HTML image tags, which look like:

<img src="images/pic1.jpg">

If the src attribute in them starts at the root of your computer, like ~/rensa/Code/myproject/images/pic1.jpg, you might have a problem. But if they're just like images/pic1.jpg, and the files are in the right place, it should all work out when you push to GitHub and turn on GitHub Pages :slightly_smiling_face:


#5

If you want to understand what the HTML code means, the Mozilla Developer Network is a great resource. They even have a guide for Getting started with HTML.


#6

Thank you Nathan. It's about time I check out what html is all about. In the meantime I just told Jim
I discovered that the files I was concerned about were indeed pushed to Github after all in spite of the

error messages RSTudio was giving me, and sure enough, there was the output I was looking for.

Nancy