Popular Code Snippets

To help get you started on coding your online portfolio, here are code snippets from some of the most common and popular HTML and CSS features.

Adding a Patterned Background

To add a patterned background to your website, you first need make sure that the image you want is stored within your website’s image folder. Next, open your main CSS file. You will need to go the body part of your CSS. If you are using the annotated CSS from the Arachne templates, you can Ctrl+F for Body Text/Copywriting to get there quickly. You will see something like:

	
	body {
	   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	   font-size: 14px;
	   line-height: 1.2em;
	   color: #161515;
	   /*background-color: #ffffff;*/
	   background-image: url("../img/retina_wood.png");
	   background-repeat: repeat;
	}

The lines background-color and background-image refer to your background. If you want a solid color for your background, use background-color. The hexadecimal code you see is one way to specify white. You can also use an RGB value. If you want a very generic color, such as white, you can also just type white.

The next line is show you can add an image to your background by citing its location in your directory. Here, a seamless wood image is used. If the image is small, like the patterns you find in Freebies. You may also want to tell the CSS code to repeat the image.

Customizing the Appearance of Your Images

HTML puts your image on the web, but CSS manages how it presents itself! Here is a brief commentary on the CSS attributes:

	
	img {
	   margin: 0px;
	   width: 100%;
	   height: auto;
	   max-width: 100%;
	   vertical-align: middle;
	   border: 0px solid #d4cdbb;
	   -ms-interpolation-mode: bicubic;
	
	   opacity: 0.4; 
	   /* Changes transparency of your images. On a scale of 0.0 to 1.0; lower numbers are less visible. */
							
	   filter:alpha(opacity=40); 
	   /* Transparency edits for IE8 and earlier. On a scale of 0 to 100; lower numbers are less visible. */
	}

The CSS select img means “this part of the CSS is for styling all images in your HTML.” This section is therefore your default settings. How is here the code breaks down:

  • margin refers to the spacing around the outside of your image. You probably want a margin of a couple of pixels so that your text does not touch the edges of your image.
  • width and height you want to leave the same as here. It is best to specify only one dimension of the two, here width at 100% of the original image size. max-width prevents blurry images by limiting the resizing of the image.
  • vertical-align places your image in the vertical center of a section.
  • border is where, of course, you can add borders. The first part (0px) specifics border-width. The higher the pixel count, the thicker it is. The next part specifies the style of your border. solid is typical, but you can also add dotted or dashed borders, too. The last part is hexadecimal code for a color. You can also name a call using RGB values.
  • Finally, the last lines are an example of image effects. A lower opacity, for example, makes images more see-through.

You can customize the appearance particular images by naming them in the HTML and calling them by name in CSS. In HTML, simply add a class inside your img tags, like class="red_border", if your new settings will apply to multiple images on the same web page. In CSS, you would add img .red_border {. If you want to customize the appearance of exactly one image, you should use an id. In HTML, add an id inside your img tags (like id="profile_image). Then, in your CSS, add #profile_image { ... }.

Adding Music Files

You can also add music files to showcase in your portfolio. This code will show you how to both link and embed two different music files to ensure cross-browser compatibility. It is best to use both file formats as shown, since each web browser has its own preference and your portfolio should address them all.

The two music file formats are MP3 (.mpeg) and Ogg (.ogg), a sort of universal music format. You may need to convert your music into each of these formats. Please note that many songs purchased from iTunes come in the MP4 (.m4a) format and may need conversion as well.

Once your song is ready to use in both the MP3 and Ogg formats, create a new folder, “music,” in your directory. Place your music files inside.

Open the HTML file where you want to display your music and add the following code:

	
	<audio controls><!-- HTML tag for audio files-->
	   <source src="song.mp3" type="audio/mpeg" /> 
	   <source src="song.ogg" type="audio/ogg" />
	
	<embed height="100" width="200" src="song.mp3" /><!-- this creates a small music player-->
	   </audio>

A small music player will appear on your webpage. Adding the attribute “controls” to your audio tags lets users play, pause, seek, and adjust the volume. You can also add the attribute “autoplay,” if you want the audio to begin playing automatically, as soon as the user enters the page. Another attribute is “loop” which allows the music to automatically restart playing when it is finished. The user must still click play to begin though. If you want to customize the appearance of the music player, you will need to find the appropriate JavaScript.

Users cannot download the music, however, unless you link the audio control inside <a href="#"> tags. Please do not allow users to download any copyrighted content besides your very own work.

Embedding Videos

Your online portfolio is not restricted to just text and images. You can add videos! You can do this by linking to a video you have already uploaded to YouTube. Copy the code below and fill in the blanks with the title and web link to your video:

	
	<iframe="420" height="345" 
	   src="http://www.youtube.com/embed/XGSy3_Czz8k">
	   <!--you will need to delete the "watch?v=" from the YouTube link-->
	<iframe>

The iframe creates window to the YouTube video on your website. You want to use the same dimensions here to maintain the proper aspect ratio of the video, or else the video could be cropped or distorted.

You can also embed a YouTube video into your code. Rather than creating a window into a third-party web page, embedding stores the video means the video is stored within your very web page. Here is what that looks like:

	
	<embed
	   width="420" 
	   height="345"
	   src="http://www.youtube.com/v/XGSy3_Czz8k"
	   type="application/x-shockwave-flash">
	</embed>

Notice that here, you must specify a media player in order for it play on your website. YouTube uses Flash’s Shockwave player, so cite that.

Adding New Fonts with @font-face

The @font-face code is a relatively new invention which allows web developers to display any font they wish on their websites. Previously, they could only choose from a short list of standard “web-safe” fonts, which greatly limited design options. The new @font-face code allows web browsers to display even unsafe fonts by embedding that font file within that website’s code. When a user accesses that website, their computer downloads the font file as it downloads the rest of the website. Thus, the user can now see the font correctly.

However, we warn users that fonts are often considered intellectual property. Many fonts are subject to copyright or require payment for use. Even if you have the font installed on your computer, embedding it within your website’s code may violate copyright. Please check that your font allows free use and requires no payment. Users also have the option of using freeware fonts open to the public at no cost. Please refer to our Helpful Links page for free font websites.

The first step of adding @font-face is locating your main CSS file. If you are using one of our downloadable templates, this will be your bootstrap.css file. Click anywhere, and type:

	
	@font-face {
	   font-family: “YourFontName”; Georgia, Times, serif; 
	      <-------- remember to provide basic, web-safe alternates, including  
	      visually similar font families as well as a generic serif or sans-serif mention
	   src: url("../img/YourFontName.ttf"); 
	      <------------------ be sure to upload this to your web server too!
	}

This stores your font in the code. The first time, call your font whatever is easiest to remember. But in the src line, you must go to your Control Panel ► Fonts and type it exactly as you see it there if your font comes locally on your computer. Alternatively, you can use an hyperlink reference to free fonts website like those mentioned in our Helpful Links.

To apply your font, use it like this in your CSS code for the h1, h2, h3, or body:

	
	h1,
	h2 {
	   margin: 10px 0;
	   font-family: "YourFontName", serif;
	   font-weight: bold;
	   line-height: 1; /* may need tweaking depending on font */
	   color: #2E2633; /* I changed color here */
	   text-rendering: optimizelegibility;
	}
						
	/* changes ALL body copy */
	body {           
	   font-family: "Verdana", Arial, sans-serif;
	   font-size: 14px;
	   line-height: 20px;
	}

To change the fonts of specific places in your body copy, you will first need to add attributes. The simplest way to do is adding a class, like in this example:

	
	<h3 class="infrastructure_header">Introduction to Infrastructure</h3>
	   <p class="infrastructure_body">Our national framework is literally crumbling beneath our feet.</p>

You can name the class whatever you like, just no spaces. Remember that classes appears multiple times on the same time, like paragraphs, and ids appear once. To call a class in the CSS code, type .name{ … } To call an id in CSS code, type #name{ … }

Other examples:

	
	.infrastructure_header {
	   font-family: "FontLogic", Arial, sans-serif;
	   font-size: 16px;
	   line-height: 10px; 
	   /* Notice that the line-height is 10 and the font-size is 16. 
	   * If the text spans multiple lines--which can load differently 
	   * on every computer--they will overlap!
   	   */
	}
				
	.infrastructure_body {
	   font-family: "Calibri", Arial, sans-serif;
	   font-size: 18px;
	   line-height: 25px;
	   text-align: justify;
	}