Workshop – HTML & PHP

At today’s workshop we continued to create more features for our webpage. We were asked to design a navigation bar. We learnt how to make an unorder list. We would then create a link for the different tabs in order for it to become interactive. After that we were introduced to Filezilla which is a FTP software designed to export webpage designs on to the web.

Finally we turned our HTML files into PHP  in order to make the webpage more versatile.

Below are screenshots of what I did.

Screen Shot 2014-11-24 at 16.00.09

Screen Shot 2014-11-24 at 16.00.14

The two screenshot above shows how I created the navigation bar from last weeks workshop using HTML and CSS. I started of unorder listing them on HTML before moving on to CSS to customise the text.

Screen Shot 2014-11-24 at 16.00.29The screenshot above shows the outcome of my navigation bar. I was able to divide the “home” “about” and “contact” and use the hover tag to allow them to react when the mouse hovers over them. Making them a hyperlink.

Screen Shot 2014-11-24 at 16.00.32The screenshot above shows what happens when I click on one of the hyperlinks. It shows that the link works however the navigation bar is no longer there and therefore I am unable to navigate myself back to the homepage. This leads on to the next task we then did in order to make the navigation bar accessible on different pages.

Screen Shot 2014-11-24 at 16.44.53

Screen Shot 2014-11-24 at 16.45.52

The two screenshot above shows how we changed the HTML file into a PHP file. We created an entirely new PHP file which would hold all the navigation tags. We then changed all of the HTML files into PHP files. This will allow the navigation bar to be visible in all tabs.

Screen Shot 2014-11-24 at 16.44.39

The screenshot above shows the outcome after changing the HTML file into a PHP. The URL also shows how we used Filezilla to export the webpage on the web.

Overall I found this workshop to be very helpful in further understanding how HTML, CSS and PHP works. It allowed me to get a better idea of how webpages are put together and then exported using FTP software’s like Filezilla. I was able to see how PHP coding works similar to the Javascript coding we did previously on Processing. I also learnt how to create a navigation bar using unorder listing which will beneficial for me in the future.

I was pleased with my approach to the workshop as I was able to go through with it quite easily and achieve the learning objectives.

Advertisements

Workshop – CSS 2

At today’s workshop we looked further into CSS using the software Brackets. We were assigned to a mini task. This task involved creating a homepage of a website using HTML and CSS.

Below are screenshots of how I created my homepage using different expressions:

Screen Shot 2014-11-17 at 16.54.03

Screen Shot 2014-11-17 at 16.54.00

The screenshot demonstrates how I was able to create my own, container, box, title and insert the sample images that were provided. All of which was done using HTML. From there I was able to add expressions to the generic block elements (div) on CSS. It allowed me to customise the style of my box, layout of the page, font colour, font size, background, background colour and image hover.

Below is the screenshot of the outcome of my homepage design.

Screen Shot 2014-11-17 at 16.53.51

Overall I was very satisfied with the outcome of my homepage. I was able to demonstrate my understanding of how CSS and HTML works. The task did take a bit of time to finish but that could be due to the lack of practise I have has with HTML and CSS. I feel that this workshop has been very helpful in further developing my knowledge on HTML and CSS. It has allowed me to get a better understanding and idea of how to create a webpage and will be very useful for future references.