How to create a textbox with a scrollbar

•March 2, 2017 • Comments Off on How to create a textbox with a scrollbar

Sometimes on you will need to include a lot of text on your page. This could crowd your page really fast and make the content less readable. One way to solve this problem is to create text boxes with a scrollbar, so that the large amount of text will be concealed unless you hover above the text box and scroll. There’s two ways to achieve this!

  1. The first is using inline style. My code looked something like this:

screen-shot-2017-03-02-at-10-37-59-am

Just make sure you have enough text so that the scrollbar can function.

But of course, you can play with the float, margins, width, height, and positioning of your text box.

2. The second method is using an internal style sheet. Mine looked like this:

screen-shot-2017-03-02-at-10-40-26-am

and the corresponding code later looked like this: screen-shot-2017-03-02-at-10-43-01-am

Once again, you can play with the elements of the text box to yield different visual results, including fonts and colors!

Both of these methods, yielded a page that looked like this:

screen-shot-2017-03-02-at-10-38-35-am

And there you go!

Advertisements

DIY Transparent Hover Effect Over Images

•February 10, 2017 • Comments Off on DIY Transparent Hover Effect Over Images

We live in a world full of aesthetics, so why not work towards making your webpage more aesthetically pleasing, keep reading to learn how to make your images on your webpage have a transparent hover effect.

First let’s put an image on your webpage using the tag. Remember that the tag is empty so it does not need a closing tag

So your code for your image should look like this:

Screen Shot 2017-02-10 at 12.35.05 AM.png

If your image is a url, it should be inserted as

and do not forget to add the height and width as listed above.

Once you’ve finished that your website should look something similar to this…Screen Shot 2017-02-10 at 12.35.26 AM.png

Now that is done, it’s time to add the transparent hover effect. Go back into your coding nests to add this CSS effect

In order to do this we need to alter the opacity of the image, the opacity of the image seen above is at 1. Let’s cut it in half and change the opacity to .5. For a stronger effect go lower the opacity of an image can be altered from 1.0-0.0

Opacity is changed in the under

insert img {

                                                 opacity: 0.5;

                                                   filter: alpha opacity=50; /* For IE8 and earlier */

                                                 }

Your coding should look like this

Screen Shot 2017-02-10 at 1.09.50 AM.png

And your webpage should look like this

Screen Shot 2017-02-10 at 12.58.41 AM.png

Now thats done its time to move on to the final step, the Hover effect.

In img you are going to remain in the <head> under <style> and insert another img{ under the first one 

               img:hover {

                                                 opacity: 1.0;

                                                   filter: alpha opacity=100; /* For IE8 and earlier */

                                                 }

Your coding should look like this

Screen Shot 2017-02-10 at 1.10.48 AM.png

And we’re done! Your webpage should look like this. A realtime video would be perfect to show you the end result in motion. But I have not gotten that far yet. So, try it out yourself!

Screen Shot 2017-02-10 at 1.12.56 AM.pngScreen Shot 2017-02-10 at 1.13.04 AM.png

Have You Designed Your Page Layout?

•February 7, 2017 • Comments Off on Have You Designed Your Page Layout?

When it comes to making a new website, one might hesitate about where to start… The first question that comes to my mind is: How would I arrange my page? Where should I put this, this… and this?

Then I paid attention to some of my favorite Web (home) pages and found some similarities within their page layout/arrangements!

1. If You Love a Concise Homepage: One Large Picture and Smaller Grids Beneath

In many websites, there is a small, concise but clear navigation bar at top of the page, followed by a very large banner picture with several pictures/icons of categories not so equally distributed underneath it.

In this way, your web page is filled in with deliberately selected pictures, instead of boring subtitles.

In the example of Ssense, although the background is white/transparent, the selection of pictures add vivid colors to the overall web page, making the audience relaxed and happy:)).

WechatIMG2.jpeg

Farfetch, a website that shares mutual audiences group with Ssense, looks pretty similar to Ssense, with navigation bar (and alert) on top of the page, followed by the large banner picture. However, in this case, the banner picture is much wider that almost filled in your screen, leaving less space and attention to other pictorial contents. I guess this depends on how much you want your audiences’ attention to be distributed.

wechatimg4

Such type of layout seems to be widely used in fashion clothing websites. The concise arrangement creates a sense of “high-endness” to the viewers.

2. For a Concise Homepage, You Can Also Try a Full Screen Photo.

fresh-one-page-designs-36

This is the LinkedIn Monitor Page in 2014. Although this page no longer exists… I found this picture online and really enjoyed it.

I think this could be widely used in our class projects. The full screen pictorial creates whatever atmosphere for the viewers without distracting the viewers from the highly concentrated words in the middle. We can introduce our project ideas in this homepage and let the viewer have an idea just at the first glance without further movements.

3.For More Informative Pages, It Might Be Nice to Have Grids Equally Distributed.

The example is Farfetch’s editorial page. It wants the audiences to pay (almost) equal attention to different topics and pick their interests.

 

WechatIMG5.jpeg

4. Even More Informative…

I always enjoyed reading articles on the New York Times website. With the newspaper-like layout, their webpages are just as informative as they could be.

WechatIMG4.jpeg

This page is also distributed by grids. However, each grid is filled out by headlines and smaller briefs. The font usage is also deliberate crucial in terms of highlighting specific words that might interest you, “Journalism that matters” for instance. The super small pictures attached to the small columns just seem like an icon here. However, they definitely add some colors and vividness into the page.

 

 

Continue reading ‘Have You Designed Your Page Layout?’

Add Style and Links to Your Web Page

•February 7, 2017 • Comments Off on Add Style and Links to Your Web Page

Interactive media and videos are an important part of online and digital media. In blogs and websites, when customers start clicking through things that interest them, they are brought to other web pages that relate to the things they like, and that is how you can find yourself spending hours “surfing the web.” Here are some steps for creating a visually pleasing, interactive web page.

Step 1: Background Color 

It is important to have a visually pleasing web page! You can do this in a couple of ways. I like to start off with the background color of my page. To do this you can use this outline:

<body style=”background-color:color;”>

Luckily, the W3 schools has aScreen Shot 2017-02-06 at 9.34.07 PM.png list of references for the different colors that you can make the background. For example, if you want a dark fuschia- type color, you can use the tag”darkorchid”. screen-shot-2017-02-06-at-9-30-43-pm

There are a large variety of colors to chose from such as powder blue, cyan, misty rose, and more!

Step 2: Inserting Pictures

Pictures are one of the best ways to catch an audience’s attention! Inserting pictures is *pretty* easy. In order to insert a picture, you  must use the layout : <img src=”url” alt=”some_text” style=”width:width;height:height;”>.

For example, if I was making a website about how to plan the perfect party, and I wanted to add a picture of some cake inspirations, I could use this layout in order to insert the pictures of the different kinds of cakes…

screen-shot-2017-02-06-at-11-05-35-pmscreen-shot-2017-02-06-at-11-05-50-pm

Step 3: Hyperlinks

By adding hyperlinks, a person can actually interact with the web page- and expand their web surfing antics! For example, if someone was looking at the cake options, and decided that they wanted to learn how to make it, they could click on the link and find out how to make the cake! To learn how to add the hyperlink, lets take a look at the unicorn cake as an example. Adding a link is actually extremely easy and can be done so using the <a> tag. The layout for this tag would be <a href=”url“>link text</a>. So, if I wanted to add a hyper link TO the picture, I would use this:

<a href=”default.asp”>
<img src=”url” alt=”othername” style=”width: height: ;”>
</a>

screen-shot-2017-02-07-at-12-55-27-amScreen Shot 2017-02-07 at 12.55.48 AM.png

So there you go! Now you can continue to play around and make your own visually attractive and interactive web page!

I am still struggling at this whole computer savvy thing but I hope you enjoy this little tutorial 🙂

How to photos make photos the same size and line up- in one shot!

•February 7, 2017 • 3 Comments

Style….. just style.

So, I was having trouble with the layout of my website. The photos that I found on the internet were all different sizes, shapes, and jumbled all over the place.

I went to pay James a visit during his office hours on the 7th floor earlier last week, and he showed me the ropes about HTML and CSS.

My problem: 

screen-shot-2017-02-06-at-5-46-16-pm

Screen Shot 2017-02-06 at 5.46.28 PM.png

So with the help of James, I learn a little about about STYLE!

Inside of the <head>, you insert a <style> and inside you put a “img { width:50%; Height:50%; text-align:left; }

These simple tags inside the <head> tag determine the size and alignment of your photos. this saves you a lot of time between you don’t have to individually change all of the setting of the photos.

In other words, “the percentages represent all of your images (so if you change it to 45% then all of your images on your site become 45%). The “Text-align:left; determines the position of your photos (if you change it to center, every image on your page will become centered).

screen-shot-2017-02-06-at-5-52-12-pmscreen-shot-2017-02-06-at-5-52-31-pmscreen-shot-2017-02-06-at-5-52-37-pm

So you go back jumbled and disorganized to perfectly aligned and beautiful! See below!!

screen-shot-2017-02-06-at-5-54-05-pmscreen-shot-2017-02-06-at-5-49-54-pm

First and foremost, I will like to thank god, my wife and kids, my parents, and everyone who believed in me.

-Mike

How to add a favicon to your site

•February 6, 2017 • 2 Comments

A favicon is the little icon that shows in the tab of a webpage.

screen-shot-2017-02-06-at-9-15-31-pm

The circled icon is a favicon.

Before you add a favicon to your site, you need find a suitable image. After you find an image you want to use, you need to crop the image into a square because most favicons are 16 by 16 or 32 by 32 pixels large. There are many programs you can use to crop your image but you can use MS Paint for Windows or the preview editor for Mac will do just fine. To make a square selection, simply hold down the shift key while selecting the area of the image to crop.

After you’ve cropped your image, you can either resize it manually or use a service such as favicon generator to resize your image. I use favicon generator because it lets you upload an image and it generates versions of common favicon sizes for you to download. After you have resized or downloaded your image, place the image into your web folder.

Insert the following code into the <head> section of your html document.

<link href=”media/favicon.png” rel=”icon” type=”image/x-icon” />

screen-shot-2017-02-06-at-9-40-16-pm

The line in red displays your site’s favicon.

The link href should refer to the relative file path and name of your icon. In this case, my icon is in a folder named “media” in my web folder and my icon is named “favicon” with the .png file extension. After you specify the location of your icon in the tag, your site should display an icon in the tab of your browser!

 

Creating an Image-Friendly, Interactive Table

•February 6, 2017 • 10 Comments

By Leonard Santos

There are many reasons to have tables on a website; they’re useful for organizing information and they can be great visual guides to conveying a point across. However, I think they can also be used as a fun way to comprehensively compare items, so here’s a guide on how to combine some of the current skills I’ve learned so far to create the most comprehensive tables ever.

Here’s a screengrab of the final product (showcasing three of my favorite modern artists: Carly Rae Jepsen, Lady Gaga, and Beyonce):

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

As you can see, not only did I have to make a table, but I also had to put images within it and links! This is especially helpful when creating visual comparisons between different items and providing quick access to additional information found on other links.

Step 1: Let’s begin first by creating the actual table part of the table. An HTML table is defined using a <table> tag (which is super shocking), with each table row defined by the <tr> tag. If we want to make all of the categories I put above, the code should look a little like this:

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

And the site should look like this:

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

Step 2: As you can probably notice, there are no borders on the table, and it looks a lot more than a navigational header than the header for a table. To solve this, we’re going to use the CSS border property in order to get some divisional lines between our headers. Using the <style> tag, make the html look like this:

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

And your site look like this:

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

Step 3: Now that the header is completely finished, it’s time to begin working on the actual contents of the table! To input table data, just continue using the <tr> tag whenever you start working on a new row the <td> tag when you want to put data into the row in question. To clarify, put any words or information you want to include within the table cell between the <td> tags!

To fill in the space for the moment, let’s input all of the data with no images or links (we’ll get to that later, I promise).

At this point, the code should look like this:

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

And the site:Screen Shot 2017-02-06 at 1.52.45 AM.png

Step 4: So here’s where the normal table tutorial ends and we begin adding the fun stuff within the table! Beginning with the photos, we have to use the <img> tag in order to insert images into the table. To do this, simply look up an image that you want to insert and copy the URL of the image down. After that, use src=”url” and just put the url in! Here’s an example of what that would look like in the code:

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

You might notice that it says “width” and “height” in the code. Not surprisingly, those help define the width and height of the image. Here’s what it looks like on the site:

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

Step 5: If we now fill in all of the blanks where it says “Photo”, we can now use that same exact code in the HTML to fill the entire table with code! It can now look like this:

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

And the site looks like this:

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

Step 6: Finally, it’s time to add those links to the end of each row. It’s actually fairly similar to how we put images into the table, but instead of image urls, we’re looking for the urls to these artists websites! In order to do that, we must use the <a> tag. If we use Carly for this example, the specific code would look like this:

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

In this, the <td> tag defines that the link is the cell data, while the <a> tag defines what the link is. The words found outside of the URL, “Official Website”, actually acts as the hyperlink that will take a user straight from the table to website if clicked on.

That section now looks like this:

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

And if we apply it to the entire table, here’s the final code:

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

And here’s your final product!

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

As you can see, you’ve taken what could’ve been a normal, boring text-ridden table and have made an image friendly, interactive source of information instead!

And that’s it! Best of luck with your table making, and try to listen to these great artists if you have the chance!