k1738770-blog

[k1738770-blog]

How to add images and videos in HTML

I have used both photographs, videos and motion graphics on my website. I learned how to add elements via w3schools and youtube. 

Videos: 

To add videos to your website you have to use the <video> element. The video you want to add must be saved within your Site-Root file. 

<video width="900" height ="500"> <source src="Britain.mp4" type="video/mp4"> </video>

My video was called Britain.mp4. You should always include width and height, otherwise, the page might flicker while the video loads. 

At first, I tried to upload my video as a .mov file, but it didn’t work. W3schools specifies that .mp4 is the recommended format. 

This way of uploading a video, lets you add multiple sources, for the same file. The browser will use the first recognized format. This helps you make sure that almost any browser will be able to show your content. 

There are multiple attributes you can add to your video element. I wanted my video to loop and play automatically. Therefore I added two tags to my code: 

<video width="900" height ="500" autoplay loop> <source src="Britain.mp4" type="video/mp4"> </video>

You can also mute your film, or add video controls if you want to. 

Images: 

To add images you have to use the <img> tag. The image tag is special because it’s empty, and it doesn’t close. 

<img src="en6.JPG" alt="3 for 1" width="900" height="590">

This is a classic <img> tag. The source (src) can be used to add your own file (saved in Site Root), or an image URL. You decide the width and height of an image in the same way as with a video. 

I also chose to save my logo and headlines as .JPG files, and added them to my website in the same way. 

[k1738770-blog]

Photography: Kingston

Some more content for my website. This time I wanted to explore Kingston. 

[k1738770-blog]

Photography: London

I’ve been exploring London to make some content for my Website. These images fall into the category of Documentary photographic work. I tried do document the atmosphere on the trains and tubes. 

As I was sitting in a café a group of men started working on the road outside my window. They didn’t realize that I was photographing them before after a while. 

[k1738770-blog]

Motion Graphics made in After Effects. 

[k1738770-blog]

After Effects: Logo

I made this animation using After Effects. The thought is to add this at the end of my videos / short films. 

I really enjoy working in After Effects, and i am currently making an animation that i want to put on the first page of my website. 

[k1738770-blog]

Hjartesmil - inspirational website

Hjartesmil is a personal blog and professional website written by Mariell Øyre. She is a Norwegian freelance photographer and writer. I have decided to use her design as part of my inspiration for my own website. Not only because the website provides some of the same content that i have in mind, but also because i like her clean but pretty design. 

It is easy to navigate through her pages, and the font is easy to read. The design is clean and delicat without being boring. Her portfolio is very inspiring, and set up in a way that makes it easy to scroll through all of her photographs. It also gives you the chance to have a closer look at the photos you like the most. 

There are no unnecessary aspects on the website. The photographs are big and of good quality and i really like the menu at the top of the page. All the buttons come with a scroll-down panel. I am trying to do something similar with my portfolio page, and i want my website to be as simple, professional and pretty as this one. 

[k1738770-blog]

Review Exercise

Week     Multimedia MD5002- add to blog

Name and KU number: Caroline Simonsen / K1738770.

Theme of website:

1. What language do you use to structure your website? - HTML, which is short for Hypertext Markup Language.

2. What code do you use to style your website? - CSS, which is short for cascading style sheet.

Have a look at http://www.w3schools.com/tags/default.asp

To answer

1. When is the the tag <div> used in the html page? - <div> is used when you want to define a section in a document.

2. What does the tag <li> mean? - <li> defines a list item.           How do you close this tag? - You close the <li> tag by adding a </li> tag at the end.

3. What does the tag <ul> means? - The <ul> tag means unlisted item or unordered list.

How do you close this tag? - You close the <ul> tag by adding a </ul> tag at the end.

4. What does the tag <nav> means? - The <nav> tag defines a navigation link. How do you close a <nav>? - You close the <nav> tag by adding a </nav> tag at the end.

5. What does the tag <a href=</a> do? - The <a href=</a> specifies the URL-links destination. If the href= attribute is not present, the <a> tag is not a hyperlink. 

6. If you find the id selector for a wrapper  <div id="wrapper"> </div> in your html page. Where will you find this to style you wrapper?

{

#wrapper {    

width: 1010px;        

margin: 64px auto;  

border: #000 1px

solid;

}

7. In your own words, what is the equivalent of a wrapper in a website? - A wrapper is an element that encloses one or several elements. For instance, it can enclose a headline and a paragraph. You can use a wrapper for cosmetic or semantic reasons.

 3- CSS syntax

Write an example of each: (you used all of them in the exercise about the river Thames)

3 main selectors:

Tag: every example will be affected in the same tag

P { font-size: 45.00 %; color: #FFFFFF; font-family: Calibri, Arial, sans-serif; }

class: you give it a name-class selector can be used as many times as possible

.universityname { font-size: 100%; color: #0000FF font-family: sans-serif; }

HTML-CODE The students are attending several classes a week at <span class = “universityname”> Kingston University </span>.

 id: you give it a name. It can only be used ONCE. #wrapper { width: 800px; background-color: #FFFFFF; border: 3px solid #000000; margin: 10px auto; text-align: right; }

 4.  If you did the exercise last week consisting of creating a template for a website (1)-with the navigation bar (2 )and link of index page to the style page, go to your index page (index.html) in your exercise and write in this form the code for linking the index.html page to the style page. You’ll find it inside the <head> </head> and starts <link href="

5. SAVE IMAGES: Image Optimisation: what resolution do you need to                         save your images for the web?

- 72 PPI

6. What text editor are you using to code your website? Are there any                         other text editors?

- I am using Dreamweaver. Yes, Dreamweaver is a unix text editor, but you can also use a Windows editor such as Notepad or Wordpad. Macintosh does their own text editors: Textedit and Textwrangler.

 7. What is the purpose of a wireframe?

- A wireframe is a visual guide to how you want your website to look once it´s done. It is used for the purpose of arranging elements to get an idea of the functionality and layout of the site. You can create a digital wireframe, or simply draw one with a pencil.

 8. How would you design the navigation on your website in a simple                              chart?

 9. What is the purpose of a mood board?

- The purpose of a mood board is to collect different things that inspire you and put them together to have an idea of what your next project is going to look like. You can think of it as a first draft of your project. You collect things that inspire you: pictures, fonts and even websites you like, and put them together, to see which colours match, and what styles work for the website you have in mind.

 10. What software can help you to choose the colour combination for               your website?

- Adobe Kuler.

11. Why is important to have an organised Siteroot and what do you put                      inside this folder?

- It is important to have an organised Siteroot so that all your work is linked together. The CSS won´t affect your HTML if they are not both saved in the same folder on your computer/portable hard-drive.

12. Who is Tim Berners-Lee?

- Sir Timothy John Berners-Lee is the inventor of the World Wide Web (WWW). He is also the director of the World Wide Web Consortium.

13. What is the World Wide Web Consortium (W3C)?

- The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.

14. List seven design principles.

- Web for all. - Web on everything. - Vision. - Web for rich interaction. - Web of data and services. - Web of trust.

 15. What other online sources are there to help you learning html and              CSS?

- www.w3.org, www.w3schools.com, www.youtube.com, www.Lynda.com, www.codeacademy.com

 16- What books have you found useful?

- “HTML in easy steps” and “HTML5 and CSS3 for dummies”.

[k1738770-blog]

Creating a website

To know HTML and CSS is just one part of creating a website. It is just as important to think about how to write for the web. For instance: the websites scannability, accuracy, currency and site-structure. 

When it comes to your content, it is important to make sure that all of it comes from accurate and reliable sources. You should think like a accomplished journalist. 

It is also important to think about things as easy as your font. You may think that you can choose any font available, and that it is good to be creative, but when it comes to the web - there are fonts that work better than others. The Sans-serif fonts are much easier to reed on a screen, and should be used for the web. This makes it easier for the reader to understand what you are writing, and we always want it to be easy to read, understand and navigate on our website. 

To make your content as accessiable as possible, it is wise to write in chunked texts. Long paragraphs are hard to follow when you are reading of a screen, and might make your readers skip what you have been writing. Bullet lists also work well on the web. 

When it comes to organizing your website, this should always be done in the most logical way possible. There should always be a way to get back to the home/main-page. Each page should be set up the same way, and it should be clear that the different pages are connected. - Don´t change the design completely from one page to another.  - Put the home/return-button at the same place on all your pages. 

Before you start designing and planning your own website, you should have a look at websites you like, and reflect over why you like them. Which colours does it use? Which font? How is the site structured? 

You should also explore websites you find difficult to understand or navigate through, and think about what makes them complex and confusing. Make sure you don´t make the same mistakes as the web-designers of these pages did. 

[k1738770-blog]

HTML & CSS 2

During the first 4-5 weeks of Multi Media - Productions i have learned a lot about HTML and CSS. 

- Linking the content and the design together - 

When you want to start a new project in Dreamweaver, it is important that you save your files the right way, to make sure your HTML and CSS will work together. 

To do this, you have to create a new folder on your computer / portable hard drive. Name this folder Siteroot_1. Save all your files for your website in this folder. 

Start by creating an HTML file in dreamweaver. Save this file within your Siteroot_1 folder and name it index.html. 

In Dreamweaver, create a new file in the same project. This time, you are creating a CSS file. Name the CSS file style.css, and save it within your Siteroot_1 folder. 

You have now linked your HTML and CSS together. 

- 

[k1738770-blog]

Proposal

Website proposal

-

Multimedia-productions

-

Caroline Simonsen 

 Aims for the website 

I have chosen to create a creative, experimental website. The aim is to present my own creative work, such as photographs, videos and writing. I want it to be my own professional homepage with contact details, information and an online portfolio. The website will contain my work, but also a more casual blog where I can share daily thoughts and things that inspires me.

The purpose of the website

The purpose of the site is to show my work to the world, and make it easier for people to contact me. Through the blog I want to inspire and share my thoughts on things and topics I find interesting. It should be easy to navigate between the different pages, and the technical quality of the content should be high.

Inspiration

My inspiration comes from different so-called digital influencers. Bloggers that have turned in to journalists, photographers, fashionistas and writers. The influencers use their websites to inspire through text, photo and video. Several of them have become their own brand, making money by advertising for products they like, speaking at conferences, and learning the older generation about social media. One of these influencers is Anniken Jorgensen:  http://annijor.no. Her website is clean, classic, simple and straightforward. Another example is Rosie: http://www.thelondoner.me. I like both of these websites, but I would love to add pages for my photos and videos.

Target audience

I think my target audience is girls from the age of 15 to the age of 30-35, that have some of the same interests as me. This group will enjoy the blog the most. When it comes to the rest of the content, anyone who are interested in photography should be able to enjoy the website. People who are interested in documentary photography and video, or interested in hiring a freelance photographer. The blog will also contain interviews with people I find interesting, as I am studying photography. 

General content

The general content will be: * Photographs. * Videos. * Texts / own thoughts. * Online portfolio. * Contact information. * General information about me and my work.

Site structure

I want the structure of the site to be hierarchal. The main page should consist of a photo/photos and links to the other sections of the website. For instance: Blog, Photography (portfolio consisting of different themed photography sections), Videography, About/contact and maybe even a magazine section for interviews and feature stories.  

Mood Board 

[k1738770-blog]

HTML & CSS

I have never understood anything about the coding of websites. I've had several blogs, but I have never designed one myself. After Thursdays lesson I am now able to understand just a tiny bit of what it's about. HTML is a language, and a very interesting one at that. For instance, I have learned that HTML is your content, the things you want to put on your website: Links, banners and pages. CSS however, is the style. The design of your website.

It takes a lot of time to make a complete website, but you can have a lot of fun doing it. It looks complicated, and I guess it is, but when you understand the language, you understand the coding. Your entire page can look completely wrong, even if you've only missed a simple sing or one letter. I've learned that if something is typed wrong in your programme, the letters will turn read, to give you a heads up.

Your HTML and CSS decides the position of your element, the size, the color and the function. You can add almost anything: a film, a photograph or a link to  a website of your choice. Your only limit is your creativity.

I haven't decided what the content of my website will be. I am thinking about a page about football, or a page about photography. Once I've decided, i'll start to think about the function and look of my page.