Last Seen Blogs
Text
DT228 Web Dev Blog Lab 4
For the fourth lab assignment for Web Dev, we were asked to create a website for a fictional garden centre called McCarthy’s Garden Centre. The assignment was a way of seeing if we were able to put the skills learned in the previous weeks to use. The website consisted of a series of paragraphs wrapping around images of flowers. The CSS display property, inline-block, was used to create the wrapping effect. Additional images were added to make the page more presentable. The finished page ended up looking like this:
While the skills used to make this site had been previously explained to us, there was one new piece of information that was gained in completing this assignment.
We were taught how to correctly create folders for our Web Dev work. The lecturer explained to us how to store the correct file types in the correct folder locations and how to refer back to these files using the “../” function.
This allows for a much more organised and faster way of creating web sites.
0 notes
Text
DT228 Web Dev Blog Lab 2
For the second lab we were asked to create two separate websites. The first of these sites was to be an information site for new students to DIT. I made the site using the same skills that had been taught to me in the previous weeks in our Web Dev lectures. In the brief we were required to use a certain amount off tags in the creation of the page.
The DIT info site consisted of four pages: a home page, an about page, a page about the modules and finally a page that gives students their first year timetables.
I used a variety of tags in the creation of the page. A new tag that was used for the first time was the video tag. This enabled me to embed a video on my DIT homepage.
This was also the first time that I incorporated an external style sheet to be used to style the markup used.
For the second part of the lab work, we were asked to create a website that gave a description of the Web and the history of the Internet.
I followed a similar pattern in making this website. I used the same mark up as before but styled the site differently.
I found this particular lab work very helpful in getting a better understanding of web development and the use of HTML and CSS.
0 notes
Text
DT228 Web Dev Blog Lab 1
As part of the Computer Science (DT228) undergraduate degree course, students are required to do a module in Web Development.
The module is taught by Jonathan McCarthy, and consists of lectures and labs.
I will be using this blog to document the lab work that I do for the web dev module.
Our first lab assignment involved the creation of a simple website for a vegetable wholesalers. Since we had spent the first few lectures covering basic HTML tags, this seemed like a good opening lab assignment.
We were given a screen shot of the desired end product and provided with images that would be used in the creation of the site.
We were required to use Notepad ++ to create the website. We were also asked to create a Mozilla Thimble account and create an identical copy of the site on Thimble as well.
As this was our first lab assignment, Jonathan had laid out a step by step guide on how to recreate his website in the lab notes.
I started out by adding a background image in the body tags. This gave the page a clean eggshell tone. Afterwards a banner image was added to the page. I personally experienced some difficulty in this step, as the image would only display to 80% of the page width. I quickly resolved this with the following solution:
<img src="VegLogo.jpg" alt="Site Header" style="width:100%;"/>
To finish the site adequately, I had to use numerous other tags including the <h1> tag, the <p> tag, and the <hr> tag. These allowed me to add a heading , a paragraph and a horizontal line break to the page.
I was then required to add a table featuring a selection of images. This table stood under a large paragraph of text and over another large paragraph of text. The text was copied over from www.lipsum.com.
Doing this allowed the student to get better acquainted with the <table>, <tr> and <td> tags.
We were then asked to make the text in the paragraph look more appealing by using the <b>, <i> and <u> tags to make text bold, make text italic and underline text.
We were then asked to make two more pages for this site in a similar fashion. We were recommended to use different images from the first page to differentiate the pages.
Once the site had been made I linked the three pages together using a nav bar and the <a>tag.
As a final part of the assignment, I copied over my code to my Thimble account and the site was published. I experienced one slight complication with the Thimble code. I was unaware that Thimble is case sensitive and was having difficulty in adding a page. Once Jonathan explained that Thimble was case sensitive the problem was quickly resolved.
Here is a link to my finished work:
https://thimbleprojects.org/c17763725/319600
0 notes
