WebDesign: Backgrounds and Gradients (W11-P2) [VID]

Given what we’ve already covered, to change the background of a web page or section of a web page, is pretty straight forward. For example see the CSS code below.

div {
      background-color: #000000;
}

The above code would change the background to what color?

You could add a background image with the following CSS code.

div {
      background-image: url(“fish.jpg”);
}

To do a gradient background a little more of a challenge, but is doable.

A gradient background, for example, can change colors as the background goes down the web page or section of a web page. For example:

(Source: Wikipedia)

But, how do you do that? What does the actual CSS code look like?

Let’s look at one the simpler gradients, the linear gradients.



If you are curious and you want to take your gradients to the next level, I’d recommend the Ultimate CSS Gradient Generator.


Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: Typography (W11-P1) [VID]

Typography is an important aspect of web design.  It relates to the idea of graphic design that we covered earlier.

Typography is “the style, arrangement, or appearance of typeset matter” (Merriam-Webster Dictionary) or put differently "the style or appearance of text” (GCFLearnFree).

Let's dig into typography a little more.  What are the important aspects of typography?



Note how leading (rhymes with wedding) and tracking mentioned here in a general discussion about typography.  How leading and tracking controlled in CSS?  What does the textbook say on this?




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: Floating Elements (W8-P2)

In CSS there are three main ways of positioning content/elements in CSS. You can use floats, in-line blocks and unique positioning.

Let's take a look at floats. And, we'll look at clearing too.



If you liked that visual explanation, you might also see "CSS Float and Clear Explained - How does CSS float and clear work?"


Now with that floating explanation in mind, let's shift over to actually doing some floating of elements, actually messing with some code. Check the following video and use the HTML and CSS code in the video comments and pop that into the web development tool we used last week.  And, then mess around with the code.




If you are curious and want to learn more about floating, I'd recommend "CSS Floats and Clears Explained" from DevTips.



Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: Intro to Positioning (W8-P1)

One way to learn a new concept is to relate it to something you already know.
One way to learn about positioning in CSS is to relate it to word wrapping in Microsoft Word.

In Microsoft Word (or other word processors), if you have a image in your document, you can have the words wrap around the image.



Similarly, you can have words wrap around a text box.



Word wrapping in Word is similar to the concept of floating in CSS.
We'll look a floating in CSS next, but first, let's make another point about the value of MS Word in Web Design.

If at this point in your website design, you've only sketched out your planned site by hand, you can now start to put the content and the design into a Word document. I'd suggest using a table in Word to continue your design in Word.



Try it. Set up your table. Insert your content (text and images). Do some word wrapping. Start in landscape orientation. Use the table to align and position parts of the page. Use color. At the end of the process, turn off borders of table cells to see what your page will look like.



Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: HTML Tags vs. Elements vs. Attributes (W7-P3)

Before we may have used the terms tags and elements synonymously.

However, we can now make a clear distinction among tags, elements and something called attributes.

We can and should make these distinctions when we are using HTML code like the following.

<p class="para1"> Welcome to the Fish Web Site. Everything you want to know about fish is in this web site. </p>

<img class="imagec" src="barracuda.jpg">

The above comes from some HTML code we played with in a recent post.

Read the following and note the definitions and distinctions among tags, elements and attributes.

• HTML tags vs. elements vs. attributes

After reading the page linked to above, we should be above to identify the elements, the tags and the attributes in the above HTML code.  Some questions: How many elements do we have above?  How many attributes are there in the img element?  Does the img element have a closing tag?

Also, based on the code we worked with recently, what is the purpose of the class attribute?  What does the class attribute have to do with the CSS code?  How are they linked?




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: The Box Model and Web Design (W7-P2)

box model: a web design concept in which "every element on a page is a rectangular box and may have width, height, padding, borders, and margins... There are several properties that determine the size of that box. Each part of the box model corresponds to a CSS property: width, height, padding, border, and margin."

CSS Tutorial for Beginners - 17 - CSS Box Model Part 1


Next parts of video series on box model

• CSS Tutorial for Beginners - 18 - CSS Box Model Part 2
• CSS Tutorial for Beginners - 19 - CSS Box Model Part 3
• CSS Tutorial for Beginners - 19 - CSS Box Model Part 4

Online HTML, CSS & JavaScript Editor

• CSS Deck

The CSS Desk site can be used to try out the HTML and CSS code.  The HTML and CSS code is in the comments section of each of the videos.  Copy and paste the code in to the CSS Desk site and play around with the code.  Get a good sense of what each line of code does.


Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: CSS and Graphic Design (W7-P1)

A well designed web site is not just some CSS code and hexadecimal numbers.

There are some important graphic design principles to keep in mind when designing a web site.

Graphic design: "the art or profession of visual communication that combines images, words, and ideas to convey information to an audience, especially to produce a specific effect"(Dictionary.com).

Watch the video below and make special note on proximity, white space, alignment, contrast and repetition.  The text from the video can be found on this GCF page.

 What do each terms mean and how do they help create a better website?


Beginning Graphic Design: Layout & Composition




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: CSS and Colors (W6-P3)

There are four primary ways to represent colors within CSS:
1) keywords, 2) hexadecimal notation, 3) RGB values and 4) HSL values.

For example, the following CSS code would turn the background maroon for the parts of the HTML code using the paragraph selector. In this case the color keyword is used (i.e. maroon).

p {
background: maroon;
}

For example, the following CSS code would turn the background maroon for the parts of the HTML code using the paragraph selector. In this case the hexadecimal number is used (i.e. maroon).

p {
background: #800000;
}

Color is an important part of graphic design and thus is an important part of website design. Watch the video below and make special note of definitions for color theory, primary colors, secondary colors, the color wheel, hue, saturation, value, 4 main color schemes (monochromatic, analogous, complementary and triadic).  The definitions for the above terms are on GCF's page for the instructional video.


Beginning Graphic Design: Color


A color wheel is "an abstract illustrative organization of color hues around a circle that shows relationships between primary colors, secondary colors, tertiary colors etc"(Wikipedia).


Also, if you are interested, here is a link to the Adobe Color/Kuler site mentioned previously. This a good site to get a hands-on feel for color theory, color schemes and color values (RGB and hexadecimal).  Adobe Color works best on a laptop or desktop.




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: CSS, Separation and Selectors (W6-P2)

What is the purpose of CSS?  Why we need a HTML file and a CSS file in web design.

"CSS is designed primarily to enable the separation of document content from document presentation, including aspects such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content" (Wikipedia).

The CSS file/document that describes the layout of a web document looks like the  code on the right.

The key statement in CSS are selectors. With selectors you are "selecting"/indicating which part of the HTML code you want to change the appearance of.  You then give specific instructions on what those changes are.  You indicate what and then say how.

There are three kinds of selectors in CSS: (1) type selectors, (2) class selectors, and (3) ID selectors.

For example, in the CSS code above, h1 is a type selector. This part of the CSS code tells the web browser how to display the heading 1 content found in the HTML code. The web browser would look through the HTML code for all h1 type selectors and apply the presentational style to the content in h1 element. It, for example, tells the browser to display the heading 1 content with an orange background and white letters.

In this example, the content in the HTML file is separated from the presentational style information which in the CSS file.

Why separate the content from the style? Why have separate documents (one HTML and one CSS)?




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

WebDesign: Cascades and CSS (W6-P1)

What is a cascade, anyway?

Casacade: "a small waterfall, typically one of several that fall in stages down a steep rocky slope" (Google).



Or perhaps you've seen one of the water cascades in some business office with sheets of water coming down.












What is CSS and what purpose of CSS?



Cascading Style Sheets (CSS): "a style sheet language used to describe the presentational semantics of a document written in the markup language HTML" (from the above instructional video).

Cascading Style Sheets (CSS): "a style sheet language used for describing the presentation of a document written in a markup language" (Wikipedia).

What is the difference between these two definitions? Which is better?



If you are interested and like the above video, I'd recommend DevTips' CSS Basics playlist.

In the above video clip, they turned of CSS to illustrate what it does.  If you are interested and are using newer version of Microsoft Explorer in Windows 10, see these instructions for how to turn-off CSS on whatever website you visit. Maybe start with Google home page or Apple's site . Instructions for other browsers can usually be found online, if you are interested.




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.