Tuesday, 9 September 2014
Image Optimization
#cat{background-color:#ccooo; /*red*/
width: 400px;
height: 200px;
}
div{ background-image: url (images/cat.jpg);
width: 400px;
heigh: 200px;
}
<img src="images/cat.jpg"/>
Video Embedding
On youtube the embed code is accessed by clicking share then embed
<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/8EBwwXTURxc?rel=0" frameborder="0" allowfullscreen></iframe>
Sample Website Text
Excerpt sourced from: http://www.smashingmagazine.com/2012/10/30/why-should-web-design-be-profession/By Andy Rutledge
Why Should Web Design be a Profession?
When one goes to the professional, one expects to invest in his expertise. This investment requires no great leap of faith, as it is supported by a trust acknowledged among the general populace and duly warranted by the traditions of the profession. The standards and practices of an individual professional in the fields of, say, law, medicine, or aviation seldom present any great challenge to their clients’ preconceptions. Strict standards and regimented practices are the baseline assumption for all involved. Moreover, the results of those relationships generally support the ideal.Unless we’re referring to the design profession.
In which case, you can discount all of that. Design, by comparison to other professions, is an odd and disappointing institution. While design exists as a profession in name at one end of the institutional spectrum, it also exists as a commoditized technical service industry at the other. And this is not necessarily a bad thing; it’s a construct of the market. It’s appropriate only within a very narrow context and far narrower than is generally assumed. But as I’ll argue in detail later, both designers and the public benefit from this commodity service aspect to the industry.The problem with this situation is that there is no definitive guide for potential clients, detailing the differences between the commodity designers/agencies and the professional designers/agencies. To make matters worse, many who claim to be design professionals lack any understanding of the term and, therefore, erroneously claim it. As a result, those paying for a designer’s expertise often don’t know whether they’re working with a professional or a nonprofessional until some matter of vital import in the midst of a project makes it abundantly clear. At that point, the entire community of designers either triumphs or fails in the eyes of some very important people: those who need our responsible expertise and have gone to the trouble to pay for it.
You see, the uncompromising standards of design professionalism are highly constraining, expensive, and sometimes even off putting. Yet for the sake of our reputations and our clients’ fortunes they are our industry’s most essential traits. Therefore, the constraints of professionalism must be embraced and the costs paid. I submit to you that the design profession is an imperative.
Here is my starting to use CSS coding:
*{
margin:0;
border:0;
padding:0;
}
a{
text-decoration:none;
font-size:18pt;
}
body{
background-color:black;
font-family:Tahoma, Geneva, san-serif;
}
#container{
width:960px;
background-color:#F801E7;
}
#banner{
width:960px;
height:200px;
background-color:white;
}
#logo{
width:500px;
height:110px;
}
#book{
}
#menu{
background-color:grey;
height:45px;
}
#menulist{
list-style-type:none;
}
.menuitem{
display:inline;
Margin-left:15px;
}
*{
margin:0;
border:0;
padding:0;
}
a{
text-decoration:none;
font-size:18pt;
}
body{
background-color:black;
font-family:Tahoma, Geneva, san-serif;
}
#container{
width:960px;
background-color:#F801E7;
}
#banner{
width:960px;
height:200px;
background-color:white;
}
#logo{
width:500px;
height:110px;
}
#book{
}
#menu{
background-color:grey;
height:45px;
}
#menulist{
list-style-type:none;
}
.menuitem{
display:inline;
Margin-left:15px;
}
Having a go at HTML coding:
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"><!--containerOpen-->
<div id="banner"><!--bannerOpen-->
<div id="logo"><!--logoOpen-->
<img src="images/logo.gif" />
</div><!--logoClose-->
<div id="book"><!--bookOpen-->
<a href="https://google.com">BOOK NOW</a>
</div><!--bookClose-->
</div>
<div id="menu"><!--menuOpen-->
<ul id="menulist">
<li class="menuitem"><a href="index.html">HOME</a></li>
<li class="menuitem"><a href="index.html">PROGRAMME</a></li>
<li class="menuitem"><a href="index.html">BOOK NOW</a></li>
<li class="menuitem"><a href="index.html">REVIEWS</a></li>
</ul>
</div><!--menuClose-->
<div id="bigdancer">
<div id="mainimage">
<img src="images/mainimage.jpg"/>
</div><!--mainimage-->
<div id="heading">
<h1>This Season its all about the Dance</h1>
</div><!--heading-->
</div><!--bigdancer-->
<div id="content"><!--3images-->
<div id="image1">
<img src="images/image01.jpg"/>
<p> This is some text about the dance shown in the picture above. This is some text about the dance shown in the picture above. <a href="https://google.com">More</a></p>
</div><!--image1-->
<div id="image2">
<img src="images/image02.jpg"/>
<p> This is some text about the dance shown in the picture above. This is some text about the dance shown in the picture above. <a href="https://google.com">More</a></p>
</div><!--image2-->
<div id="image3">
<img src="images/image03.jpg"/>
<p> This is some text about the dance shown in the picture above. This is some text about the dance shown in the picture above. <a href="https://google.com">More</a></p>
</div><!--image3-->
</div><!--content-->
<div id="links">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="index.html">About</a> </li>
<li><a href="index.html">Contrast</a> </li>
<li><a href="index.html">Proramme</a> </li>
<li><a href="index.html">Dance</a> </li>
<li><a href="index.html">Music</a> </li>
<li><a href="index.html">Book Now</a> </li>
<li><a href="index.html">Deals</a> </li>
<li><a href="index.html">Group Bookings</a> </li>
<li><a href="index.html">Reviews</a> </li>
</ul>
<ul>
<li><a href="https://linkedin.com"><img src="images/linkedin_alt.jpg"/></a> </li>
<li><a href="https://twitter.com"><img src="images/twitter_alt.jpg"/></a> </li>
<li><a href="https://youtube.com"><img src="images/youtube.jpg"/></a> </li>
<li><a href="https://facebook.com"><img src="images/facebook_alt.jpg"/></a> </li>
</ul>
<div id="name">
<p> ©2013 Philippa Berry Smith </p>
</div><!--name-->
</div><!--links-->
</div><!--containerClose-->
</body>
</html>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"><!--containerOpen-->
<div id="banner"><!--bannerOpen-->
<div id="logo"><!--logoOpen-->
<img src="images/logo.gif" />
</div><!--logoClose-->
<div id="book"><!--bookOpen-->
<a href="https://google.com">BOOK NOW</a>
</div><!--bookClose-->
</div>
<div id="menu"><!--menuOpen-->
<ul id="menulist">
<li class="menuitem"><a href="index.html">HOME</a></li>
<li class="menuitem"><a href="index.html">PROGRAMME</a></li>
<li class="menuitem"><a href="index.html">BOOK NOW</a></li>
<li class="menuitem"><a href="index.html">REVIEWS</a></li>
</ul>
</div><!--menuClose-->
<div id="bigdancer">
<div id="mainimage">
<img src="images/mainimage.jpg"/>
</div><!--mainimage-->
<div id="heading">
<h1>This Season its all about the Dance</h1>
</div><!--heading-->
</div><!--bigdancer-->
<div id="content"><!--3images-->
<div id="image1">
<img src="images/image01.jpg"/>
<p> This is some text about the dance shown in the picture above. This is some text about the dance shown in the picture above. <a href="https://google.com">More</a></p>
</div><!--image1-->
<div id="image2">
<img src="images/image02.jpg"/>
<p> This is some text about the dance shown in the picture above. This is some text about the dance shown in the picture above. <a href="https://google.com">More</a></p>
</div><!--image2-->
<div id="image3">
<img src="images/image03.jpg"/>
<p> This is some text about the dance shown in the picture above. This is some text about the dance shown in the picture above. <a href="https://google.com">More</a></p>
</div><!--image3-->
</div><!--content-->
<div id="links">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="index.html">About</a> </li>
<li><a href="index.html">Contrast</a> </li>
<li><a href="index.html">Proramme</a> </li>
<li><a href="index.html">Dance</a> </li>
<li><a href="index.html">Music</a> </li>
<li><a href="index.html">Book Now</a> </li>
<li><a href="index.html">Deals</a> </li>
<li><a href="index.html">Group Bookings</a> </li>
<li><a href="index.html">Reviews</a> </li>
</ul>
<ul>
<li><a href="https://linkedin.com"><img src="images/linkedin_alt.jpg"/></a> </li>
<li><a href="https://twitter.com"><img src="images/twitter_alt.jpg"/></a> </li>
<li><a href="https://youtube.com"><img src="images/youtube.jpg"/></a> </li>
<li><a href="https://facebook.com"><img src="images/facebook_alt.jpg"/></a> </li>
</ul>
<div id="name">
<p> ©2013 Philippa Berry Smith </p>
</div><!--name-->
</div><!--links-->
</div><!--containerClose-->
</body>
</html>
Monday, 8 September 2014
Classes we have done so far in web media 1
Week 1 - Introduction
Week 2 - HTML Basics + Social Media
Week 3 - More HTML, and Marking up a design
Week 4 - CSS Introduction
Week 5 - Interface Design
Week 6 - Slicing and Image Optimization
Week 7 - Simple Menu, Video Embedding
I am slowly working my way through these worksheets as been unwell for three weeks
Week 1 - Introduction
Week 2 - HTML Basics + Social Media
Week 3 - More HTML, and Marking up a design
Week 4 - CSS Introduction
Week 5 - Interface Design
Week 6 - Slicing and Image Optimization
Week 7 - Simple Menu, Video Embedding
I am slowly working my way through these worksheets as been unwell for three weeks
Subscribe to:
Comments (Atom)