How to Add a Drop Cap

•February 6, 2017 • Leave a Comment

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 htmlcolorcodes.com 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.

screen-shot-2017-02-01-at-1-27-46-pm

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 https://en.wikipedia.org/wiki/Font_family_(HTML). 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.

screen-shot-2017-02-02-at-2-14-48-pm

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.

screen-shot-2017-02-02-at-2-21-58-pm

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  http://htmlcolorcodes.com/color-names/. 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.

screen-shot-2017-02-06-at-8-43-25-am

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

screen-shot-2017-02-06-at-8-50-02-am

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.)

tutorial1
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!

www-gifcreator-me_egdynk

 

 

Adding background image

•February 6, 2017 • Leave a Comment

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: https://i0.wp.com/geekdad.com/wp-content/uploads/2014/02/TheEcho-spaceman.jpg?ssl=1%22%20alt=%22https://geekdad.com/2014/02/the-echo/

Step 2: Add this URL to the body part and write as <body background=“https://i0.wp.com/geekdad.com/wp-content/uploads/2014/02/TheEcho-spaceman.jpg?ssl=1%22%20alt=%22https://geekdad.com/2014/02/the-echo/“>

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- http://www.composingdigitalmedia.org/s17_dmtp/webs/jik//Navigation.html

screen-shot-2017-02-04-at-11-57-28-pm

screen-shot-2017-02-05-at-12-00-11-am

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.

screen-shot-2017-02-05-at-12-16-23-am

Here is our basic list:

 screen-shot-2017-02-04-at-10-37-06-pm

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

screen-shot-2017-02-05-at-12-12-34-am

Our list with links:

screen-shot-2017-02-04-at-10-11-08-pm

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:

screen-shot-2017-02-05-at-12-22-39-am

The font of our list is now Arial:

screen-shot-2017-02-04-at-10-48-29-pm

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.

screen-shot-2017-02-05-at-12-22-07-am

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

screen-shot-2017-02-04-at-11-05-09-pm

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

screen-shot-2017-02-05-at-12-25-07-am

It will look like this:

screen-shot-2017-02-04-at-11-38-27-pm

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. 

screen-shot-2017-02-05-at-12-26-06-am

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

screen-shot-2017-02-04-at-11-50-51-pm

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. 

screen-shot-2017-02-04-at-11-56-42-pm

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

screen-shot-2017-02-04-at-11-57-28-pm

screen-shot-2017-02-05-at-12-00-11-am

Here is our final code:

screen-shot-2017-02-05-at-12-28-19-am

See how the final navigation bar here – http://www.composingdigitalmedia.org/s17_dmtp/webs/jik//Navigation.html

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. 

 

Basic Editing Functions on Adobe Premiere Pro

•April 13, 2014 • 5 Comments

I’m making this tutorial to help familiarize users with the basic layout and functionality of the editing software found on Adobe Premiere Pro to enable them to start their projects sooner and have a general understanding of where to start with their videos. You want to start this process by importing your video clips into Adobe, going from the menu options File –> Import –> Select your clips, and press Open.

Image

Next, to actually start trimming your clips, you can use one of two methods – the razor blade or the time trimming element. Either one is a fine option, though with the razor you are completely cutting some of your film out of the movie whereas with the time trimmer, you can slide it back out and the edits you made are more quickly recoverable. So with the razor blade, you move the time indicator to the spot where you want to cut your film.

Image

Then select the razor blade tool:

Image

And then simply click where the red line is to split the clip in two. Image

You can then further edit or delete a small moment in the clips, or merely delete an entire half, it’s up to you and what you’re doing. To use the time editor, you should keep your cursor on the “Selection Tool” that looks like an arrow and is the top option on the list of mouse functionalities.

Image

Then, you want to move to the edge of the clip you’re trying to edit and move the editor back however far you want so that the clip stops. As shown:

Image

There you go, your clip is edited and you can slide it back the other way to recover your footage.

 

Adding Transitions:

Transitions can be a very useful way to create an obvious “transition” between your clips so that the video doesn’t stutter awkwardly when you’re changing your shot. To add them into your video, simply go to the effects menu on Premiere Pro.

Image

Select the style of transition you want, then pick it up and drag it over to the start or end of the clip that you want to add the transition to.

Image

The transparent purple indicates your transition and the amount of time it will take to complete.

 

There you have it, three very basic but very essential editing functions within Adobe Premiere Pro. Comment below if you have any questions or comments!