Adding a GIF to Your Website

•February 6, 2017 • 1 Comment

Although adding a gif to your website may not be crucial it is still a fun way to spice up your website. Gifs create a relatable aspect to any sort of communication. Adding a gif could further engage a viewer of your website and add some cute flourish.

Adding a gif is not complicated. There are two easy ways that one can add a gif into their HTML5. The website Giphy provides hundreds and hundreds of great gifs on their website. To make using their gifs easier they provide a link to use specifically for HTML5.

Adding a GIF from personal folder. 

  • Step 1:  You can find a gif almost anywhere, when you come across one that you like and think is useful for the future save it into a folder and make sure to save it as a Graphics Interchangeable Format (GIF)screen-shot-2017-02-06-at-12-58-58-pm
  • Step 2: The code for adding a gif is similar to adding an image. Simply write a line of code that looks similar to inserting a photo. Instead of adding “photo.jpg” make sure you add “movingpicture.gif”. The code would be <img src=”movingpicture.gif”>screen-shot-2017-02-06-at-1-05-05-pm
  • Step3: Once you’ve added your gif you can then start playing around with it and add height and width like you would for an image.

Adding a GIF from Giphy.

  • Step  1: Giphy makes using their GIFs incredibly easy. Once you find the GIF you want to use scroll to the bottom of the GIF and you will find a ‘share’ tab. Next to that tab there is an ‘advanced’ tab. In the ‘Advanced’ tab there is a list of links. Select the HTML5 link and copy it. screen-shot-2017-02-06-at-12-55-50-pm
  • A sign will flash at the top of the screen saying ‘Copied to Your Clipboard’. You can now add it to your website. The coding for this would be <iframe src=”GIF URL”> and then again add height and width to your specifications. The iframe tag is used to display your gif in your website. Since it comes from the website, Giphy, the iframe tag allows you to use the source url to display the gif. Screen Shot 2017-02-06 at 1.11.22 PM.pngAnd thats all there is to it! Have fun!

How to Add a Drop Cap

•February 6, 2017 • Comments Off on How to Add a Drop Cap

Do you want to look fancy in HTML but you’ve only just started learning how to code and the cool, complicated stuff is too intimidating? If you’re a sucker for a good drop cap here’s what you want to do to add this feature to your site:

  1. Open DreamWeaver
  2. To add a drop cap to the first letter of a paragraph, first make sure to code the <style> tagscreen-shot-2017-02-06-at-10-47-51-am
  3. Then on a new line, type p::first-letter {
  4. Start a new line, and if you would like the drop cap to be a different color, add color:, then look up the color code for the shade you want to use on the website
  5. Start a new line again to manage the size of the drop cap with the font-size: tagscreen-shot-2017-02-06-at-10-49-15-am
  6. Then type your paragraph on a new line below and voila! You’ve successfully added a drop cap!screen-shot-2017-02-06-at-10-49-46-am

HTML DIY Tutorial: How to Make a Cover Page (How to Make a Clickable Full-Page Image)

•February 6, 2017 • 5 Comments

Your website is a journey, a process, an exploration. If what you’re looking for is to slow down the pace, to set the tone before a viewer dives into your site, perhaps a cover page is the introduction you need. Essentially what you are going to do is establishing a local link between two webpages in your website—a full-page sized image as your cover page, which will link to your homepage.

  1. Start with a simple, new TextEdit (or whatever plain text editor you prefer) file. Fill in the standard HTML header code, as shown below. In the <head> section, include a title for this webpage, which is what will show up on the tab when it is opened. Create a <body> section. Don’t forget to close all tags.Screen Shot 2017-02-06 at 9.08.55 AM.jpg
  2. To make the initial link is very simple. In the body section, start the <a> tag, which indicates that the information inputted next will be a hyperlink. The href attribute is used to define where the link leads to. There are many ways to reference the destination of your link, this case simply uses the complete URL of the website. The text that serves as the physical part of the link (the part you click) is placed in between the <a> and </a> tags, “Click to Enter,” or whatever you like. Always remember to close every tag!                                                                                       Screen Shot 2017-02-06 at 9.43.44 AM.jpg
  3. Since additional styles are going to be applied to this link, an extra step of assigning an “id” to this link is needed. Simply add the id attribute and give it an id name, I used “bg,” as in background.Screen Shot 2017-02-06 at 4.54.13 PM.jpg
  4. At this point you should have a blue, underlined piece of text, which indicates that it is a hyperlink. Clicking on it should (fingers crossed!) lead to the site that you specified. Screen Shot 2017-02-06 at 4.16.35 PM.jpg
  5. Now it’s time to add the visuals, which will involve some simple CSS. To make a background image that will fill up the entire webpage, apply 100% height and 0 margins to both <body> and <html> in the <style> section (in the <head>).Screen Shot 2017-02-06 at 4.23.05 PM.jpg
  6. Now to establish the features of the background image, make sure to signify that these apply to the “bg” id attribute. Include the URL of the image in single quotes, in parentheses. Set the image to 100% height, and to center and scale the image so that it fits neatly in the screen, copy the code below. Screen Shot 2017-02-06 at 4.25.21 PM.jpg
  7. The screenshot is not very clear, but you can see in the upper left corner that the hyperlink text is now superimposed on top of the background image. Screen Shot 2017-02-06 at 4.29.39 PM.jpg
  8. There are just a couple more steps to clean that up. Hide the text and make the hyperlink the same size as the entire background image by adding these lines of code. This will make sure every corner of the image is clickable, and no stray pieces of content will peek out around the edges of the background image.Screen Shot 2017-02-06 at 4.32.48 PM.jpg
  9. And that’s it for style. Insert the background image into the body by using a <div> tag, mention that it is the “bg” id. All together, your code should look like this:Screen Shot 2017-02-06 at 4.54.39 PM.jpg
  10. And there you go! Your completed, clickable coverpage will now feature whatever image you chose, and it will lead to your homepage, ready to be browsed. Screen Shot 2017-02-06 at 4.39.18 PM.jpgScreen Shot 2017-02-06 at 4.56.56 PM.jpg

How to give your website a little more style

•February 6, 2017 • 6 Comments

Ok, so by this time you must have a basic understanding of HTML. However your website is a bit lacking in…style…

You have something that looks like this on your website, an H2 title in the default Times New Roman fontscreen-shot-2017-02-01-at-1-27-30-pm

and this is what the HTML code looks like in your text edit.


First you must figure out what font you want to change this to, and for that you need to know the font names which you can find here Based on the fonts listed here we want the title to be in the Verdana font.

So you want to go back to your text edit, and change the HTML code so the H2 title will show up on your website in the Verdana font.

The first thing you do is insert the style tag followed by an equal sign.


After that you must define that you are focusing on the font with the font-family tag followed by a semi-colon. After the semi-colon you must insert the font that you want your H2 heading to be in, which in this case is the verdana font.


Then follow the font name with a semi colon and surround the font-family tag and the verdana tag with quotation marks and a less than sign (>).

Once you insert the HTML code into text edit, your H2 title should now look like this.

Screen Shot 2017-02-02 at 2.55.35 PM.png

Now your H2 title is in the verdana font, which is much more appealing than the Times New Roman you had before, but you still want to change it a bit stylistically. You think maybe color ?! Luckily for you it is almost the same method as changing the font.

First you must look up the html color codes which can be found here Based on the color codes listed here we want to change the font color to white, so it’ll stand out more on the website.

So again you want to go to your text edit and change your HTML code in order to get your H2 title to be white.

First you want to add the color tag to identify that is what you are changing style-wise. Follow the color tag with a semicolon.screen-shot-2017-02-06-at-8-43-03-am

After the semicolon insert the name of the color based off of the list above. For this example we are using white, so your HTML code should look something like this.


Once you enter this into your HTML code this is what your H2 title should look like on your website.


The style tag allows you to personalize your website a lot more, and once you have completed the basics (which you have now) you can go even deeper into the stylistic aspects.

Adding a text Marquee Effect to Your Website

•February 6, 2017 • 4 Comments

www-gifcreator-me_egdynkIs your website feeling a little bit bland? Do you need to grab your audiences attention? Or maybe, you want to add a little spice to your site with some moving text? Whatever the case may be, a Marquee tag is the answer to your prayers.

Adding a Text Marquee

  1. Open your Working Code in Dreamweaver.
  2.  Identify the location where you want your marquee text to be within your code. Remember, this will be moving text, so location is important. (You do not want to distract your audience, rather, grab their attention with the marquee text.)

Screen Shot 2017-02-06 at 7.43.06 AM.png
In our case, we will be inserting the marquee tag in between our <h2> and <a> tags on line 12 of Dreamweaver.

3. Copy and paste the following tag into your document.

<marquee>INSERT TEXT HERE</marquee>

Screen Shot 2017-02-06 at 7.50.00 AM.png


4. Optional: You can edit the direction of your marquee text with the following tags.

Right Marquee Direction:

<marquee direction=”right”>INSERT TEXT HERE</marquee>

Up Marquee Direction:

<marquee direction=”up”>INSERT TEXT HERE</marquee>

Down Marquee Direction:

<marquee direction=”down”>INSERT TEXT HERE</marquee>


5. Enjoy your moving text!




Adding background image

•February 6, 2017 • Comments Off on Adding background image

Besides having a solid color as the background of the website, Html also allows users to add image as the background that makes the website look more interesting. Here I want to introduce how to add a background image to the website:

Step 1: Find an Image on the website and copy the URL

Screen Shot 2017-02-06 at 2.34.52 AM.png

so the URL for this image is:

Step 2: Add this URL to the body part and write as <body background=““>

Screen Shot 2017-02-06 at 2.39.56 AM.png

Then the basic background image is built.

Screen Shot 2017-02-06 at 2.41.08 AM.png

Creating a Responsive Navigation Bar

•February 5, 2017 • 7 Comments

By Jigna Kotecha

Why is it really crucial to have an attractive navigation bar for your website?

1. It exists on every single page of a website.

2. It guides the users beyond the homepage.

So, here is the blog to create an engaging horizontal navigation bar that changes background-color and amplifies text on hover.

Click on the link to see what we are trying to create-



Step 1: A navigation bar is the list of pages on a website. So, we will use <ul> and <li> tags to create a list of pages.


Here is our basic list:


Step 2: Now, we will make these list items links that will direct us to other pages on our websites. 


Our list with links:


Step 3: To make the above list more stylish, we’ll use the <style> tag. The <style> tag goes under <head> tag. It is used to add attributes to the existing tags, <ul> and <li> tags in this case. 

We will start by changing the font-family of our unordered list:


The font of our list is now Arial:


Step 4: We will now change the size of the text, align it to center, and remove the bullets. We will also set margin and padding to 0 to make sure that our design remains consistent in all the browsers.


Now, our navigation bar now appears at the center of our web page:


Step 5: To convert our list into a horizontal navigation bar, we will change the display, position, and behavior of our list items.


It will look like this:


Step 6: Since these list items are hyperlinks, we will have to add attributes to <a> tag to remove the underline and change the color of our list items. We will also create space between the list items and wrap the text around each other. 


Here is how our little more attractive nav bar looks like:


Step 7: To make our navigation bar responsive, we will add hover to our list items so that it changes the background color and increases font size when we move the mouse over them. 


When we mouse over the list items, it will look like as below:



Here is our final code:


See how the final navigation bar here –

P.s. Since the code grew longer with each step, it became tougher to enhance the screen. Please click Cmd and + together to increase the size of the web page and view the code better.