WebDesign: iFrames (or Inserting Other HTML) (W12-P5) [VID]

What are inline frames or iframes?

They are another a way of inserting or embedding "another HTML page within the current page. This is done using an inline frame, or iframe element. The iframe element accepts the URL of another HTML page within the src attribute value; this causes the content from the embedded HTML page to be displayed on the current page" (Howe).

You can use iframes to insert (or embed) YouTube videos* and Google maps into a web page.

How do you insert external html into a web page using iframes?



* Note that you don’t have to do this “by hand”. YouTube can simplify the process and generate the iframe code for you. This is how I insert videos into this blog. Check out this video for how to embed YouTube videos into your web page.




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: Inserting Video (W12-P4) [VID]

Simply put the video element allows for the inclusion of video in a web page.

Attributes

• src attribute: like the src attribute for images and audio
• poster attribute: an attribute within a video element that "allows us to specify an image, in the form of a URL, to be shown before a video is played.
• Other common attributes in element
• "autoplay, controls, loop, and preload."

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: Inserting Audio (W12-P3) [VID]

To insert audio into a web page, you use the audio element (in HTML5).

The audio element, like the image element, which allows for the inclusion of audio in a web page.

• src attribute (for audio): an attribute within the the audio element that indicates the location of the audio file to be played.
• Other common attributes in audio element are autoplay, controls, loop, and preload.

What does this look like in some actual coding? How do you insert audio exactly?





If you are curious, for more info see the W3schools audio page. Especially see the green “Try It Yourself” buttons and try it yourself 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.

WebDesign: Inserting Images (W12-P2) [VID]

To insert images (graphics, photographs, etc.) into a web page, you use the <img> element.

A "<img>" element is an inline element used to display an image. It is "is a self-containing, or empty, element, which means that it doesn't wrap any other content and it exists as a single tag” (Howe).

There are also some key attributes to be used within the element.

• src attribute: an attribute within the the element that indicates the location of the image file to be displayed.
• alt attribute: an attribute within the element that describes the content of the image. It is the alternative text.
• height and width attributes: attributes within the element that control the size of the image. May also appear within CSS.

Now, let's take a look at how this is done in the coding.



Let’s continue with special attention to resizing an image.




If you are curious, for more info see the W3schools image page. Especially see the green “Try It Yourself” buttons and try it yourself 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.

WebDesign: Multimedia and the Web (W12-P1) [VID]

What is multimedia?



Multimedia is “communication of information using multiple mediums such as text, animation, graphics, video, sound and interaction.”

Another example of multimedia is the web. Think of the sites you visit that contain a mixture of text, animations, graphics, videos, audio and interactive features.  Multimedia!


Common Media Formats

When inserting multimedia into a website it is helpful know something about the common media formats.

Common image formats and characteristics

• JPG (.jpg) is a very common format. Default format used on most cameras.
• PNG (.png) is a format that allows for high quality photos, but has a larger file size.
• GIF (.gif) is a low quality format and is not highly recommended, except when you really have to have that animated GIF.

Common audio formats and characteristics

• AAC (.aac) is the audio format default format for in iTunes. “Plays well on Apple computers, but not in web browsers.”
• MP3 (.mp3) is an audio format that “is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.”

Common video formats and characteristics

• MPEG (.mpg, .mpeg) is a video format that was the “first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4).”
• AVI (.avi) is a video format that is “commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.”
• MPEG-4 (.mp4) is a video format that is “commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube.”

If you are curious, for more info see, W3schools page “HTML Multimedia”. The media format quotes above are from this site.



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

WebDesign: Hyperlinks and Email Links (W4-P2)

One of the first things that a web design student wants to learn is how to put links into their pages.

O.K., let take care of that.



If you are interested, I'd recommend the EJMedia series of videos on HTML. They are some of the better HTML instructional videos on YouTube.



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: Webpage Structure (W4-P1) Sp18

Shay Howe, author of Learn to Code HTML & CSS, covers the basic structure (and related elements) for websites.

It may be helpful to think about the structure of a web page like the layout of a newspaper.  Compare this to Figure 2.5 in Howe.

HTML5 includes new semantic elements that provide structure to a web page.

• <header> -- "Defines a header for a document or section" (w3schools)
• <nav> -- "Defines navigation links"
• <article> -- "Defines an article"
• <section> -- "Defines a section in a document"
• <aside> -- "Defines content aside from the page content"
• <footer> -- "Defines a footer for a document or section"

A good reference source for these elements and others is w3schools.com's HTML Element Reference page.

Note: Shay refers to elements, while w3schools refers to tags.  For the difference between the elements and tags, see Johansson.    We'll follow the more accurate description of Johansson.


If you are interested, below is a video covering the above semantics elements.



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.

More Secrets of Academic Success: Mnemonics and How to Use Them Sp18

Earlier I shared a variety of secrets to academic success (methods of studying, etc.) and I suggested learning tools like Quizlet.

Below is a continuation of that same conversation.

A mnemonic is "any learning technique that aids in information retention" (Wikipedia).
Mnemonic is pronounced like 'knee-monic' (think: a demon with really big knee caps).

There are several mnemonics or memory tricks that can help when learning new material.  The first video below defines and explains six tricks (acronyms, acrostics, the PEG system, image mnemonics, chunking and memory maps).



So, according to the video:

• acronyms: "word or term is created from the first letter of each item to be remembered.
• acrostics: "a complete sentence or series of words in which the first letter of each word stands for something to be remembered."
• PEG system: "is useful for remembering numbers - uses key words which are represented by numbers."
• image mnemonics: "the information to be recalled is constructed in the form of a picture that enhances memory."
• chunking: "involves grouping individual pieces of information together in a way that makes them easier to remember."
• mind map: "a visual pattern that can create a framework for improved recall."

Now, the last video covers the memory palace technique (my favorite).



How could you use the above memory tricks to learn course material or anything else you need to learn?

Study smarter, not harder.

If you are curious, you can find more information about mnemonics on YouTube and Google.

I'd especially suggest these two YouTube videos:

• Memory Champion Teaches You How to Memorize Anything
• How To Study Better - Best Study Techniques

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: Tearing Apart a Website (W3-P2) [VID] Sp18

You can learn how something works by following instructions on how to compose or build that something.  For example, you could follow a step-by-step set of instructions on how to build a radio from a radio kit.

You can also learn how something works by tearing it apart, figuring out how the pieces work,  and then putting it back together.   For example, with regards to a radio, see a little of the video below.




What does this have to do with learn how to design a website?

In the image below on the left you see a website as it looks to a person viewing it in their web browser.

On the right you see the code the web designer wrote to tell the browser what to show and how to show it.

Your task is to tear apart the code on the right and figure out how it works.  Tear it into pieces and figure out what each piece does. For example, line 1 of the HTML code does what, you think?  Do this based on your reading and the code presented below.

Notice that above image is a hypertext image.  Click on it.  See where it takes you.

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: Berners-Lee and the World-Wide Web (W3-P1) [VID] Sp18

Let’s pick up where we left off last time.  Let’s learn about the beginnings of the World-Wide Web.  This, in turn, will lead us nicely into understanding how to design a website.

The World Wide Web: Crash Course

We’ll first get an introduction to the World-Wide Web and then learn how Berners-Lee fits into the story.

The world wide web  “... is not the same thing as the Internet even though people often use the two terms interchangeably.  The world wide web runs on top of the Internet in the same way that Skype, Minecraft or Instagram do.  The Internet is the underlying plumbing that carries the data for all these different applications and the world wide web is the biggest of them all, a huge distributed application running on millions of servers worldwide accessed using a special program called a web browser.”

Another way to put this: The Internet is the hardware.  The web is software.  [This is not a definition.  It is just a point to make a distinction between the Internet and the Web.]

Hyperlinks: “ text or images that you can click and they jump you to another page.“

Hyperlinks were first conceptualized by Vannevar Bush in 1945, but not implemented on the Internet until 1990.

“Hypertext web pages are the most common type of hypertext document.  Today they're retrieved and rendered by web browsers…”

“Each hypertext page needs a unique address on the web this is specified by a Uniform Resource locator or URL…”

The URL for hyperlink above is https://en.wikipedia.org/wiki/Hyperlink.  It is the address for where the browser will take you when you click on the hyperlink.

Web browser:  “the application on your computer that lets you talk of all of these web servers browsers not only request pages of media but also render the content that's being returned.”

“The first web browser and web server was written by now Sir Tim Berners-Lee … at the time he was working at CERN in Switzerland.  To pull this feat off he simultaneously created several of the fundamental web standards we discussed today URLs, HTML and HTTP …”