This week I faced one of the most challenging modules in my educational career. I dove into coding. This is something that has always scared me because it seemed so complicated and daunting. With my background in Public Relations, most of my undergraduate career involved creative writing and problem solving. I lacked the technical skills to build websites from the ground but always thought that eventually I would have to add that to my repertoire.
One of the most difficult parts of my week was fully understanding what I had to do in order to transfer my code from TextEdit, the word processing app that is built into my Mac. I approached this process in baby-steps. First, I made myself familiar with HTML5 and all of its elements. That part was the most straight-forward. The semantic elements such as <header>, <body> and <img>. Inputting my own content and following the rules of HTML5 was something that I was able to quickly adapt to. If you want to know more about HTML5 and semantics, see my previous blog post. Below is my code looked like in TextEdit when I was finished.
Each document should begin with the document type and the chosen language. It should look something like this:
The next hurdle that I had to tackle was learning how to navigate FileZilla, my chosen File Transport Protocol (FTP) software. This allows me to transfer my files from my computer onto a server. At first, it looks very complicated and overwhelming.
On the right are my local files. Those are all of the files that exist on my computer. The left is where all of the files on my site live. As you can see, I uploaded two documents from my “Website” folder on my computer to my website.
Now, here is where I am struggling the most. When I go to open my HTML on a server, my picture refuses to show up. For the past two days I have been troubleshooting this issue. This is what my site looks like when opened on a browser.
First, I looked at my code to see if I had made a mistake anywhere, but I can’t seem to find an error. Then, I thought about file path. When you have an image that is located inside the same folder as your HTML, then you can simply write <img src “photo.jpg”>. If your file is located in a folder outside of your HTML file, then you would adjust the file path to look something like this, <img src “Images/photo.jpg”>. Since my image is located inside the same folder as my HTML file, this is not the issue. I have tried re-uploading the files to FileZilla with no luck. I will continue to try and sort this issue out, but in the meantime I am stuck trying to find the root of my issue.