Exercise 13: CSS 101

CSS is an acronym for Cascading Style Sheet. This coding style is very similar to HTML, however the effects are translated differently. These CSS files define the look and layout of an HTML page. CSS define many features of the HTML such as borders, margins, fonts, sizes, etc. As this site puts it “HTML is used to structure content. CSS is used for formatting structured content”. HTML was created to simply structure text on a page, CSS developed to then format said structure. One CSS file has the power to control the structure of many files or documents. The beauty of CSS is that they can apply to many documents. Instead of writing, or copying the background colour to every single web page, you can create a single CSS file which will add the formatting to the pages you define it to. CSS files are in the format of “example.css” and can be linked to HTML pages inside the coding.

CSS works well with HTML because the coding is very similar.

HTML: <body bgcolor=”FF0000″>

CSS: body {background-color: #FF0000;>

This coding produces the same thing.

CSS coding is in the structure of

selector {property: value;}

Coding with CSS will have this shape:

body {

    background-color: #FF0000;


Properties will stack up below the background-color for example if more modification is required. Linking the CSS file to your HTML code is the same concept as linking a file or image to your HTML page:



<title>My document</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />


When something needs to be formatted and it is in a group of elements, you would use the CLASS and ID system. For example, using CLASS would be to change the colour of the title for different paragraphs. If you wanted paragraph 1 and 3 to have a red title, but paragraph 2 to have a blue title, you would changes the CLASS of paragraphs 1 and 2 to red, while paragraph 2 to blue. Then all you would need to do is link the CLASS CSS formatting to the appropriate coding. This example is showing that the CLASS whitewine will change the colour of the text to a yellow-orange, where the class redwine will change the colour of the test to a dark red.

Example – HTML page:

<p>Grapes for white wine:</p>


<li><a href=”ri.htm”>Riesling</a></li>

<li><a href=”ch.htm”>Chardonnay</a></li>

<li><a href=”pb.htm”>Pinot Blanc</a></li>


<p>Grapes for red wine:</p>


<li><a href=”cs.htm”>Cabernet Sauvignon</a></li>

<li><a href=”me.htm”>Merlot</a></li>

<li><a href=”pn.htm”>Pinot Noir</a></li>


CSS File:

a {
color: blue;

a.whitewine {
color: #FFBB00;

a.redwine {
color: #800000;

Now, the ID system would be to change the formatting of some elements already inside other elements. Giving something an ID will give it a unique property because every ID is different.

Example – HTML:


<li ID=”A1-1″>30</li>

<li ID=”A1-2″>50</li>

<li ID=”A1-3″>200</li>









It is ideal to use external style when editing an entire websites or multiple pages. If you have multiple styles, it could be easily changed by changing the link to the style.

Uses the <link> tag to link to the sheet style.

If you want to change the font colour of your website, instead of going to each page and changing it. Make the change in one spot and it will change the all the pages.


It is ideal for editing a single page.

Define style by using the <style> tag.

If you want to change a specific paragraph to a different font colour on that single page.


This style applies to the specific HTML element it is in.

If you want to change a specific part of the page like the font colour,size, bold, italicized etc.

The box model is essentially the borders and margins that a web page has. It consists of four different parts, margin, border, padding and content. The margin is the transparent area around the border. The border is the area around the padding and is affected by the background colour. The padding is the area around the content and is also affected by the background colour. The content is where the text, images or videos appear. The box model is what gives the web page a specific layout. For example, Youtube has a specific spacing (margins and borders) along the edges of the content as well as padding between the video, comments, and recommended videos.

Floating refers to the movement of the image. This movement refers strictly to moving the image right or left, and not up or down.

For example, {float:right} or {float:left} would be the key to floating an image so the side.

A positioning happens after you float the image, referring it where to float to.

For example, {position:absolute; right: 40px; top: 40px}

By grouping (nesting) files, you make the code simpler for yourself and for organization. In style sheets, the style is maintained throughout,

h1 { color : red ; } h1 { color : #660066 ; }

h2 { color : red ; } OR h2 { color : #660066 ; }

p { color : red ; } p { color : #660066 ; }

but by grouping them, the code becomes much simpler, and enhancing

h1, h2, p { color : red ; } OR h1, h2, p { color : #660066 ; }

Through examples, explain how to align elements.
There are different ways to align elements; one is by using floating and positioning properties to guide that element to a specific location. Another way to use the margins to be points of reference to where the element will be placed.
Example for aligning an element by using the positioning property
Example for aligning an element by using the margins as a point of reference

A navigation bar is created using a list of link with <ul> and <il> elements/tags.

Firstly, open the code with <ul>.

For every link you want use this code:

<li><a hred=”example.asp”>Example</a></li>

Open and close each link with <li> and </li>

List as many links as you want, with Example being replaced by your link and your title.

Close the code with </ul>



<li><a href=”home.asp”>Home</a></li>

<li><a href=”archives.asp”>Past Articles </a></li>

<li><a href=”search.asp”>Search </a></li>

<li><a href=”about.asp”>About</a></li>


The code for an image gallery is a combination of other simpler codes.

You open with <html>, <head>, <style> and use your divider image that separates text from photos, and photos from photos. This file name can be called div.img

The margins, padding, border, height, float, and text align should all be applied next. Opening and closing with { , }.

Close with </style>, </head>.

Open a <body> element. (This is where you photos with go, using the specifications used above.)

An example of a code for one image would be:

<div class=”img”>

<a target=”_blank” href=”example_one.htm”>

<img src=”example_one.jpg” alt=”EXAMPLE”

width=”110” height=”90”>


<div class=”desc”>DESCRIPTION GOES HERE</div>

Use as many of those codes for however many images you have.

Close the entire code with </body> and </html>.


“CSS Box Model”. w3schools. np.nd. 13 Nov 13. <http://www.w3schools.com/css/css_boxmodel.asp>

“CSS Group and Nesting Selectors”. w3schools. 20 Nov 13. <http://www.w3schools.com/css/css_syntax.asp>

“CSS Horizontal Align”. w3schools. 20 Nov 2013. <http://www.w3schools.com/css/css_align.asp&gt;

“Lesson 7: Identification and Grouping of Elements (class and Id).” Free Tutorials on HTML, CSS and PHP. N.p., n.d. Web. 10 Nov. 2013. <http://html.net/tutorials/css/lesson7.php>.

“Most CSS Floats Can Be Replaced With Relative And Absolute Positioning” Ben Nadel. 2 Oct, 2013. <http://www.bennadel.com/blog/2541-Most-CSS-Floats-Can-Be-Replaced-With-Relative-And-Absolute-Positioning.htm>

“Which Stylesheet Type to Use and When?” HTML Basic Tutor. np. nd.13 Nov 13. <http://www.htmlbasictutor.ca/stylesheet-type.htm>


Exercise 12: HTML 5 – 101

The difference between a website and a web page is quite simple. A website is a collection of web pages all under a similar domain. A web page is a unique page which is located on the web, under the collection of the website.

To create a web page, you will need to use HTML or HTML 5 coding. There are many elements which constitute HTML to format a web page.

Simply put, HTML is divided into two sections, the HEADER and the BODY. The HEADER consists of elements which have functions on a web page, but they are not visually displayed. Whereas the BODY contains elements of what can be seen on the web page. Coding inside of the BODY create format to the page, such examples are:

<p> creates a new paragraph

<br> breaks the link, moving elements down the page

<strong> creates bold text

To write an HTML tage, it must always have an opening tag at the beginning of the element ( <strong> ) and a closing one at the end ( </strong). There are some exceptions, such as inserting an image into a web page, this tag is singular, and does not require a closing tag. If tags did not close, the HTML reader would not be able to distinguish where an element starts or stops. A DOCTYPE tells the file reader what kind of file it is reading, an HTML file has the code HTML as it’s DOCTYPE.

The h1 tag determines Page Header titles and other significant text which will be displayed on the browser tag, and not simply on the page itself.

Having images on a webpage can be done two ways, either from a folder within the website, or linked from an external website.

Folder, the tag used would look like <img src=”image.png”>

External, the tag used would look like <img src=”http://answerguy.com/wp-content/uploads/2012/12/h1-and-influency-in-search-engine-optimization.gif“>

HTML 5 is the language makeup of the web. It is the text based language which can be read by web browsers where it translates it into the web pages we know today in Web 2.0. HTML 5 was developed alongside with the development of the internet. This coding stage allows for more complex applications and coding to be implemented into a website. Also, HTML 5 was developed to support cross-platform files.

FTP stands for File Transfer Protocol. It is used to transfer files from a local host to a web host on the internet, for example. Website developers would normally work offline on their computer, and then FTP their files onto the website host server, where they will then be read to format the website.

HTTP stands for HyperText Transfer Protocol. This is the language which web pages are read by web browsers on the internet. The browser interprets the HTML coding using HTTP to formulate the web page itself.



Curee, Brian. “Webpage vs. Website; What’s the Difference?” Sonline MEDIA. N.p., n.d. Web. 7 Nov. 2013. <http://sonlinemedia.com/webpage-vs-website-whats-the-difference/>.

“File Transfer Protocol.” Wikipedia. Wikimedia Foundation, 13 Nov. 2013. Web. 7 Nov. 2013. <http://en.wikipedia.org/wiki/File_Transfer_Protocol&gt;.

“Glossary of Common Web Design Terms.” H2i Online. N.p., n.d. Web. 7 Nov. 2013. <http://www.h2ionline.com/web-design-glossary.html&gt;.

“HTML5.” Wikipedia. Wikimedia Foundation, 11 July 2013. Web. 7 Nov. 2013. <http://en.wikipedia.org/wiki/HTML5&gt;.

Lloyd, Ian. “Basic Structure of a Web Page.” HTML Elements | Learn HTML. Sitepoint, n.d. Web. 7 Nov. 2013. <http://reference.sitepoint.com/html/page-structure>.

“What Is HTTP?” Webopedia. Quinstreet Enterprise, n.d. Web. 7 Nov. 2013. <http://www.webopedia.com/TERM/H/HTTP.html&gt;.

Exercise 11: HTML 5 – 102

The optimal formats for web images would be JPEG, PNG, GIF, BMP, and PSD.

JPEG is good for keeping the file small, while losing a bit of information, reducing the quality a little bit. This format comes in 3 kinds, Baseline, recognized by all browsers. Baseline Optimized, this optimizes the colour for compression, recognized by most current web browsers. Progressive, this is where the image loads using a block like appearance. It pixelates until the final form is attained.

PNG is great because it has a small file size and does not lose quality or information. This file format is also good because it supports transparency, unlike JPEG.

GIF is a simple file format for images with limited colours. This format always reduces the amount of colours to 256. Resulting in loss of information and quality, however reducing the file size tremendously. This format is often used for web animations, buttons, banners, and other simple shapes where image quality is not the prime focus.

BMP is a format which is very large in file and does not lose any quality or information.

PSD are Photoshop files which contain all the information of an image (layers, masks, blending, etc). This format is not recognized to be displayed in a web browser. But they can be exported to any of the file formats above for previewing.

Optimizing images for web means it needs to go through a compression stage, where you will have a readable image file. Lossy compression is a saved imaged that is not exactly the original image, only noticeable by zooming in, as the data will only compress the image pixels at a 100% zoom view.

Lossless compression is the original image that takes up more memory as the image can be seen at high definition view, being able to be seen when zoomed in. This takes up more memory because the more spaces of data filled the more memory it will acquire.

When optimizing images for the web, there are many formats that are available yet few can be read on the web; JPEG, GIF and PNG files are examples. JPEG (.jpg) is a lossy compression, but is better for pictures with contrast and range of color.

GIF (.gif) seperates the data into every pixel allowing the user to examine the image from a zoomed in scale. GIF is also referred to as a series of pictures, created to appear as a looping video clip. PNG (.png), a greater color-depth along with takes up less memory, while it compresses a more defined photograph than .gif. It contains

There are many techniques focusing on different aspects of a website which can optimize website loading speed. First off, to reduce the size of images will greatly increase the load speed of the website. Perhaps an image which does not focus on quality should be in GIF (256 colours) format, instead of BMP (large file size). Also, when uploading an image to your website, upload the desired size for the image. Having an image load at 500×500 pixels which will then be displayed at 250×250 pixels will slow the loading speed. Reduce the size of the image before using it to upload. Also, enabling caches for your website can greatly increase loading time for your web page. Caches is information temporarily stored in the browser which will allow pages to load faster because it already has something to load. Using CSS (cascading style sheets) can allow pages to load faster. It has been tested that having a smaller amount of larger CSS files will load faster than many little CSS files.

Images are easily added to CSS or HTML through the use of the <img> tag. That means there is no opening and closing tag, and everything with between the two brackets. Find the simplified URL of the photo you desire, and insert into between the brackets with the img on the far left.  You can find these URLS easier by right clicking any photo and clicking “Copy Image Address.”


<img src=”smiley.gif” alt=”Smiley face”>

To add a YouTube video to your website, simply go to the desired video. Once on the page, click on the ‘Share’ button below the video. You will then have several options to choose from, select the “Embed” option and you will see HTML coding. Select the entire code and copy it. Then go to your coding for your web page and paste in the code to the desired location on the page. you may change the dimensions of the video by altering some of the code. If you look before, you will be width=”xxx” height=”xxx”. You may change these dimensions to those any you like.

Example of YouTube embed code:

To optimize videos for the web, the videos should use the appropriate codec, it should be short (12-30minutes), and small in dimension. Videos can be 320×240 pixels minimum, however if the dimensions are any smaller, it would become difficult to view. If viewers have high speed connection, larger video dimensions can be offered. With larger video dimension, you must use a data rate formula to maintain the quality of the video.

Data Rate= (frames per second) X (movie width) X (movie height) divided by 29000

To maintain quality, up the data rate in proportion to the image size. Remember that doubling image size (320×240 to 640×480) requires a 4X (not 2X) increase in data rate.

The video should be short rather than a 90minute movie because incorporating the video onto a webpage can take a while to upload. It can also take a while for it to load for the audience. To keep videos short, delete unnecessary scenes that are not essential to your topic.  After editing, experiment with different codecs and find which one creates the smallest acceptable file.

There are multiple ways to incorporate a video on to your webpage. One of the most popular ways, is via Youtube. Simply upload your video onto YouTube, grab your embed code and paste the code into your html code. The second method is inline video; this is similar to linking original pages to your website. Start by locating the video on your computer then link it using the html code:  <img=”video.avi”> Another option is using plug ins.

Sound/audio can be incorporated through MP3 files and the use of the <audio> and <audiocontrol> tags. These however are not excepted by internet explorer, but is by many other popular web browsers such as Chrome. You would need the open with <audio> and insert a <source src=”(audio file name)”type=audio(file type)”> for the file you would like. And close off with <Audio Control>



Maintain a theme throughout


Make your point clear to the viewer

Exaggerate/exceed color or fonts

Choose a color scheme visually appealing

Fill content strictly with images

Set up an easy navigation system

Fill page with too much text

Choose nice fonts and text is easily readable.

Forget to cite your sources

Make a blog on a topic you are passionate about too

Make a blog that bores you

The most common screen resolution is 1024 x 768, therefore you should optimize your webpage to that resolution. However,screen sizes vary and your webpage should be able to use a variety of resolutions such as 800 x 600 or 1280 x 1024 etc. Liquid layouts should be used, liquid layouts stretches to the user’s window.

When designing for mobiles, web pages should be kept simple. Web pages on mobile devices have a limited amount of space and resolution for content. If the web page is overcrowded with content, it makes the functionality difficult. Keep in mind people download and use your mobile apps/web page because they need info on-the-go, the user should be able to access what they’re looking for with minimum taps, swipes, and attention required.


Chastain, Sue. “Which Graphics File Format Is Best To Use When?” About.com Graphics Software. About.com, n.d. Web. 10 Nov. 2013. <http://graphicssoft.about.com/od/graphicformats/f/summary.htm>.

Nela, Dunato. “Optimizing Images for Web.” inObscuro. 2012.


Sharma, Raman. “5 Easy & Effective Tricks To Make Your Website Load Faster.” All Useful Info. Disqus, n.d. Web. 10 Nov. 2013. <http://allusefulinfo.com/5-easy-effective-tricks-to-make-your-website-load-faster/>.

“HTML Images”.w3schools. np.nd. Web. 13 Nov 13.


Clark, Scott. “How To Add a YouTube Video to Your Web Site.” HTML Goodies. Developer.com, n.d. Web. 10 Nov. 2013.


“Web Video Optimization tips” Website Optimization. np. 29 Jun 07. Web. 13 Nov 13. <http://www.websiteoptimization.com/speed/tweak/video/>

“HTML5 Audio”. w3schools. np.nd. Web. 13 Nov 13.

Stone, John. “20 Do’s and Don’ts of Effective Web Design.” Web Design Ledger

RSS. <http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design>

Shaun Anderson.”Best Screen Resolution to Design Websites”. Hobo Web. 13 Nov 13.


Oleg Lola. “10 Tips for Designing a Mobile-friendly Website”. Sitepoint. 13 Nov 13.


Essay Assignment: Rough Draft

Jetpacks, flying cars, and robots ruling the world will be the world of tomorrow. This may sound like your typical science fiction notion where technology overtakes humanity, however, how far off are we from that future? New media retains its place within social culture, it is a form of communication which combines elements from any field and applies it to contemporary life. More specifically, social media has become a virtual space for information. Content is being mass produced by millions every hour of every day. This method of researching information between users can have its perks, as well as its downfalls. New media can be dissected into two forms, arts and sciences. Arts and science seem so tightly wound together that they are almost the same thing. The approach to either field can be similar or completely opposite at times. That is why defining new media today is such a challenge. This is because it is an ever changing concept which may reshape it’s form at any time. This essay will challenge the concept of ‘new media’ and analyze its prospective outcomes for the future. Where different aspects of social and cultural norms are tested against their traditional ways, as well as the evolution these norms must go through in response to the advancement of thinking and technology.

To start, the article by Ben Aslinger and Nina B. Huntemann entitled “Digital media studies futures” is the perfect beginning step into the topic of what new media may be like in the future. This article discusses many questions which arise when addressing the future of media studies. While media in the past has been seen as a particular technology or medium (film or radio for example), media is now evolving into more of an experience, rather than a medium (Aslinger, 9). Because the technologies and methodologies in regards to media are developing rapidly, it would be irrelevant to define any new media as a single medium. One of the greatest debates for the futures of media studies is its relation to academia. In the past, scholars would approach topics with solely a theoretical approach, using case studies. However, because media studies is forever changing, this practice must be changed in order to create a beneficial future for media studies. Aslinger highlights how scholars would learn a specific media, however it would then become obsolete before they complete their studies (Aslinger, 11). In addition, scholars in the past were also taught to direct their focus on a few topics rather than a variety. This style of learning needs to change in order to accommodate the vast expansion of media studies (Aslinger, 12). Studying a single discipline is not acceptable anymore, scholars need to become interdisciplinary thinkers. In short, the old ways of learning simply won’t cut it when it comes to media studies. The collaboration of multifaceted thinkers are now in high demand.

Next we have the article ““Envisioning Nanotechnology: New Media and Future-oriented Stakeholder Dialogue”, where Cynthia Selin and Rebecca Hudson focus on how to deal with the future of possible technologies, in this case, nanotechnology. Even though it applies to this specific field, the questions, concerns, and methodologies addressing the application of preparing for and visualizing the future is relatable to all disciplines. On that note, it can be safe to say that nanotechnology will be a dominant technology of the future because of it’s application, size, and functionality. The entire approach is through the project titled “NanoFutures” where it is a website designed to spark debate, dialogue, and discussion regarding the possible futures of nanotechnology (Selin, 174). The article states that collaboration and participation from external sources (such as non professionals) is extremely beneficial in the development of any field. Where people generate their own respective responses which may give some more insight than if simply professionals were working amongst themselves. Also, technologies are not limited in being shaped by functionality, they can be designed with success through social values. To visualize the future, according to Cynthia and Rebecca, a constructive method would be to come up with many plausible scenarios and see what the impact may be to certain audiences. When it comes to technology, it appears that the future of it may rest on “themes of of human identity, enhancement, and biology” (Selin, 175). NanoFutures posted several possible future technologies on their website (such as a scanner implanted in the body to monitor protein levels to then report if any possible diseases will develop), and the public was able to discuss it. The responses from these users were able to generate dialogues regarding the ethics, costs, applications, and much more without leaving it strictly to the professionals (Selin, 177). It appears to be that the future of technology advancement is deviating from the norms of having a single professional, to the collectiveness of the public. Where the idea of open sourcing technology for advancement can lead to a greater accomplishment than leaving it to be done by a few professionals in the field. Thinking outside the box is the new black.

Analyzing technological advancements cannot be done without looking on the social impact these technologies may have on different cultures. B.K. Ravi, author of “New Media, Culture and Society” evaluates the relations between various forms of media and their impact on different cultures. While this article mainly focuses on statistics relating to India’s development with the media world, the concept of media is challenged as a whole. Because of mobility and the internet, information can be accessed across the entire globe. This results in the convergence of many cultures into one dominant cyberculture (Ravi, 486). As with any reaction, the consequences can be that of positive or negative, depending how you look at it. While information becomes centralized into the virtual space of the web, societies and cultures are beginning to witness a decentralization of commercialization, technology, and control (Ravi, 484). The article has a great way to explain this, where current humans, homo-sapiens, will eventually evolve into “robo-sapiens” (Ravi, 485). Where the controversy behind the advancement of technologies and media is, will technology in time turn against us? That being said, who or what has done the damage (if it so happens) to culture? Would it be the technology itself, or the humans who developed that technology? Can we even blame anyone anymore? The continuous growth of internet participation gives identity a whole new meaning. New media is literally destroying unique identities, where anyone can be anyone posting anything to the world. This article ends on a pessimistic note, suggesting the future of new media might not be as beneficial as we expect. Where giving power to the people, or the anonymous people in specific, will not result in constructive technological and social advancement. The newly anticipated collaboration generation would eventually collapse on itself.

The article “Working the Twittersphere” by Dawn R. Gilpin outlines the application of Twitter in it’s place of the social media realm. More specifically, how Twitter relates to the controversy behind professional and personal online identities. The popularity of this social network allows many perks and shortcomings to arise. Such as professionals using this micro-blogging platform to network themselves with other social media users. With the help of the semantic property of the internet, using Twitter allows the gathering of information to then be analyzed in order to determine Twitter’s influence in the online world (Gilpin, 235). Twitter is unique among the social networks because any user can interact with another. The more Twitter is being used, the more information and resources which can be shared amongst users. The use of social media is difficult to place when discussing topics such as online identity. The article addresses the situation where the line between professional and personal identity is blurred (Gilpin, 233). When it comes to The Guardian’s debate on online identities, it seems to be well fought out. There are many cases which can be used to strengthen both sides. It really comes down to the individual user. Having an authentic online profile can relate the person from the online world to the offline world (Krotoski, Guardian). Which may grant said person jobs and other experiences. That being said, if something can be traced back to their name which may compromise their integrity, that would ruin their reputation online. That is where anonymity comes into play. Allowing users to create, share, and edit with the online community allows them to make faults without being personally blamed. Unfortunately, the internet is very commercialized and having a flow of anonymous users does not generate as much revenue as does a sea of identifiable and traceable users. In relation to authentic online identities, governments could have the solution with proper online IDs. This would lower fraud, and boost the economy online. One minor detail, most users trust their banks for personal information and not their government. Having a government deal with online identities would give it structure and security (Krotoski, Guardian). Perhaps having an agreement between website owners and the government can be achieved. We should not forget that the internet is global and government policies and agendas vary depending on the nation and culture.

These articles above all deal with the possible future and impact new media may have on the world. One looks at the development of technology as open-source, where the public is in control over it’s application. Whereas on the other hand, another evaluates that new media itself will develop into something humans will not have control over. Which may incidentally be true, if you were to really analyze the nanotechnology futures. Most of the plausible technologies addressed in the article by Selin deal with control over human resources with the help of artificial intelligence. The other article would define this as technological advancement which we are no longer able to keep up with. However, each article addresses the issue of the person, the individual. Because these media technologies are developed by us, we do have control over their function for the time being. That being said, it is our responsibility to produce technology that will achieve a responsible and constructive future. Giving power to the people, allowing the public to collaborate with visions and possibilities for the future have time and time again proven beneficial towards the advancement of technologies.


Works Cited:

Aslinger, Ben, and Nina B. Huntemann. “Digital Media Studies Futures.” Media, Culture
& Society 35.1 (2013): 9-12. Sage Publications. Web. 15 Oct. 2013.
Gilpin, Dawn R. (2011). Working the Twittersphere: Microblogging as a Professional
identity Construction in Papacharissi, Zizi (2011). A Networked Self. Identity, Community, and Culture on Social Network Sites.
Krotoski, Aleks. “Online Identity: Is Authenticity or Anonymity More Important?” The
Guardian. Guardian News and Media, 8 Oct. 2013. Web. 12 Nov. 2013.
Ravi, B. K. “New Media, Culture and Society.” Academic Research International 2.2
(2012): 479-94. ProQuest. Web. 29 Oct. 2013.
Selin, Cynthia, and Rebecca Hudson. “Envisioning Nanotechnology: New Media and
Future-oriented Stakeholder Dialogue.” Technology in Society 32.3 (2010):
173-82. ScienceDirect. Web. 19 Oct. 2013.

Exercise 10: MLA Styles


Author Lastname, Firstname. Title of Book. Place of Publication: Publisher, Year. Medium.

Grenfell, Wilfred Thomason. Adrift on an Ice Pan. St. John’s: Creative, 1992. Print.


Author Lastname, Firstname. “Title of Article.” Name of Journal Volume. Issue (Year): Pages. Medium.

Cox, Gordon. “A Newfoundland Christmas Caroling Tradition.” Folk Music Journal 3.3 (1977): 242-60. Print.

Websites/pages and blogs

Entire Website:

Editor, Author or compiler name. Name of website. Version number. Name of institution/ organization of the site, date of creation. Medium. Date of access.

A page on a website:

“Title” Name of site. Publishing date. Medium. Date of access.

*Write np, if you cannot find the publisher name

*Write in nd, if you cannot find the publishing date.


Editor, Author or compiler name. “Title of post”. Name of site. Version number. Name of institution/ organization. Medium. Date of access.

* If author(s)’s names are not found, use the screen name.

If there are more than one author, include the other author(s)’s name in brackets.


Title of Film, Series (If available), Creator/Filmmaker/Corportation, Important Individuals (Writers, Producers aside from lead directors), Key Performers (Lead Actors), Studio followed by the release date, Format in which you watched it (DVD, YouTube), Distributor (if a DVD), Distribution/Release Date


Speaker’s name. “Title of speech”. Name of meeting/organization. Location. Date. Type of presentation.

* Types of presentation: Address, lecture, keynotes, guest lecture, conference presentation.


Grenfell, Wilfred Thomason. Adrift on an Ice Pan. St. John’s: Creative, 1992. Print.

Cox, Gordon. “A Newfoundland Christmas Caroling Tradition.” Folk Music Journal 3.3

(1977): 242-60. Print.

“MLA Work Cited: Electronic sources (Web publications)” Purdue Owl. 14 Dec 2012.

Web. 02 Nov 2013.

“MLA Work Cited: Other common sources” Purdue Owl. 24 Jun 2013. Web. 02 Nov