Selected Topics

 

 

Purpose:

This page will serve as a space for HTML and CSS topics that require more attention than we have time for in class.

Target Blank

This is a really simple to do. And because I'm running short of time, it is straight outta Mozilla.

target definition
Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe). The following keywords have special meanings for where to load the URL:
  • _self: the current browsing context. (Default)
  • _blank: usually a new tab, but users can configure browsers to open a new window instead.
  • _parent: the parent browsing context of the current one. If no parent, behaves as _self.
  • _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.
<a href="http://nowhere.com" target="_blank">Click Here</a>

Layered Shadows & More

 

Earlier I showed some modern ways to do shadows, but did not get a chance to discuss. The demo is below. Also

  • My demo page from Chapter 6
    -Notice shadow boxes on left side
    -Notice hover over boxes
    -Notice America

SPECIAL NOTE:

Difference between blur & spread values:

https://medium.com

Bottom line is that spread acts like a complement to X&Y.

 
body {background-color: whitesmoke }

div { 
	background-color: #fff; 
	height: 200px; 
	width: 200px; 
 box-shadow: 0px 3px  4px 0px rgba(0, 0, 0, 0.2);
}

div:hover {
  box-shadow: 0px 3px  10px 0px rgba(0, 0, 0, 0.2);
}
	   
	   


.usa {
    font-family: ____________; 
    font-size: ____________; 
    color: ____________; 
    letter-spacing: ____________;
    text-shadow: 3px 3px 0px #ffffff, 6px 6px 0px rgba(200,0,0, 0.85);
}

Thumbnail Links

 

A thumbnail is used to display a smaller version of an image, thereby saving bandwidth. Often the thumbnail is configured as an image hyperlink which displays the larger image when the image is clicked.

 

It is important to have two versions of the image -- both small and large--so that bandwidth is not compromised. It may not make a difference if there is only one or two images on the page and you are seeking simply to save space on a page. However, if there is a gallery of images the loadtime can be slowed.

 

Here is an example code:

<a href="large.jpg"><img src="small.jpg" alt="pic"></a> 

Let's try a simulated example in codepen.io.

 

Proper Screenshots

Screens can be captured for a variety of reasons. However, when a web designer takes a screenshot to showcase a page or part of a page, the designer should be careful to:

1) select a meaningful part

2) resize if necessary to be sure that the print and images are crisp.

 

Take a look at these examples:

 

Responsive Web Design

More info coming soon

 

Box-Sizing

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with width: 25%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container. 

See more at: Mozilla Dev

Favicons

Short for “Favorite Icon”, a favicon is a tiny graphic that you see in the tabs in your browser and in your bookmarks of webpages. Among other things, it helps to give your brand a face. It displays as a square around the size of 24x24px.

 

There are many free programs that allow you to create your own logo. Examples are Adobe Spark and Canva. To save on time, however, let's obtain a free logo with your the first letter of your name from a vector graphics website.

  • Go to https://www.vecteezy.com
  • Search for "letter __", as in "letter M"
    Filter for free
  • Click the desired logo and choose Free Download
  • Unzip, then open the .eps or png version of the file in a photo editor.
  • Crop to a 1:1 ratio.
  • Resize image to 200x200px.

  • Then insert on your homepage (assignment page) using the code below.
    (This will be counted as an assignment, graded separately from your flexbox page. Due ____)

 

Examples of famous favicons are shown below:

screenshot

Facts about favicons

  • A square image often seen on tabs of a web page.
  • Extension usually is .ico. However, it can be .png.
  • Displays in the browser address bar, tab, or favorites/bookmarks list.
  • Configure with a link tag as shown:
<link rel="icon" href="favicon.ico" type="image/x-icon">

 

 

CSS Animation

Animation Practice

* We will start with a very brief overview on a slide presentation.

* Then come back and unzip THIS FOLDER. Save it in your 115 folder.

 

Special Underlines

Remember that underlines should only be used for hyperlinks. Otherwise, it might confuse users into thinking that it's a link. You might be interested, however, in some fancy underlines for special purposes.

www.digitalocean.com/community/tutorials/css-text-decoration

 

 

 

Web Design Resources

This is a list of recommended websites and other resources that you can explore to enhance your experience in the class. This list is occasionally updated.

Link

 

 

 

Multimedia

Adding multimedia topic was presented in both classes as Fresh Take presentations. For additional references, see Chapter 11.

 

 

 

Slide Shows

Slideshows and image galleries are great ways to show multiple images. Howevever, there is an example of a gallery in Chapter 6. Then it is improved in Chapter 11
(You can open chapter6/6.9/ or chapter11/11.7/).

 

If you are interested in using any of these (or if you find your own) and want me to help customize them, I will be more than happy to do so.

Beyond the Basics:

The fancier and more interactive slideshows usually require more frontend development languages such as JavaScript. However, by doing the basic exercise from this text book, you have strong insights into how they work. Until you get a chance to learn JavaScript, you can also find free sources online. These are two that I recommend:

  1. http://www.123-slideshow.com

    This is a point-n-click online slideshow. It's not really fancy either, but it goes a few steps above the one in Chapter 11, and will further your understanding of how it works when you see the underlying code.
    Here are some quick steps to make a 4-picture slide show.
    1. set size to 400x300
    2. Upload pictures from Chapter6/starter folder. Use photo1, 2, 3 & 4 jpg
      For each pic, choose Upload, then Take Selection
    3. click red button "Next Step"
    4. Customize by editing your choices
    5. Download and unzip.

      I don't know if it's fair or not, but you can even delete its logo from the code.

  2. TIP for Visual studio and Notepad++ users: If you have code that's all clumped together without line breaks, you can search for a character such as ";" and replace it with a new blank line "\nl". Click Replace All to see the magic!"
    find&replace

  3. https://wowslider.com/demos.html
    I purchased this a few years ago and still use it for some websites. It has a free version, which places a small credit stamp at bottom of slides.

  4. W3Schools has a few that are not as fancy, but the good thing is that they are highly customizable. Both contain "readable" JavaScript.
    1. www.w3schools.com/w3css/w3css_slideshow.asp
    2. www.w3schools.com/howto/howto_js_slideshow.asp

Dropdown Menus

 

More information

Chrome Development tools

We never got around to this, but there is a free course at udemy.com. It's:

https://www.udemy.com/course/chrome-devtools-web-developers-tutorial

I took the 1.5 hours course and it's really cool to see what you can do with the dev tools.

 

These tools do a range of things-- from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. (...excerpt from Mozilla page.)

 

 

 

Subtle Borders

Try These

 

Don't Worry, Be Happy

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.


Hell Raisin River

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Blame it on staring at the moon


Belies Bliss

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.