CSCI 446 Unit #1

Preparation:

After this week I will assume everyone is comfortable with HTML and has some basic familiarity with CSS (we'll do more of both, especially CSS, in the next few assignments). For those who took CSCI 445, this unit should be pretty easy. If you are new to web programming, however, please be sure to spend enough time to feel confident.

We will use the tutorials on W3Schools to learn basic HTML and CSS. Topics are listed below as Read (concepts to understand), Skim (easy material, just get an idea) or Skip (some topics are obsolete, some we'll read later). For many of the topics I have included a list of concepts you should be sure to understand. This list is quite lengthy, so you might want to read a few, get started on the programming assignment, then alternate reading topics and working on the program.

HTML

Walk through the basic HTML tutorials. NOTE: I suggest using Chrome to view these tutorials (for some reason, the navigation sidebar doesn't always show up in FF on my machine).

• Read HTML Introduction through HTML Links. Be sure to understand:
• Structure of an HTML document
• Purpose of DOCTYPE and lang attribute
• How to edit and view HTML pages
• Why headings are important (think search engines)
• HTML inline styles are used infrequently - why?
• Use of <strong> vs <b> and <em> vs <i>
• Why the alt attribute is important for images
• Read HTML Blocks.
• Is <div> a block or inline element?
• Is <span> a block or inline element?
• Why do we need both types of elements?
• Skip HTML Classes and HTML JavaScript for now.
• Skip HTML IFrames (mostly obsolete).
• Skim HTML File Paths and HTML Head.
• Skip HTML Layout and HTML Responsive for now.
• Skim HTML Computer Code through HTML Symbols.
• Read HTML Charset.
• Be sure to specify charset in your html files, it can save headaches later (e.g., when displaying raison d'être)
• Read HTML URL Encoding . This is good general knowledge.
• Skim HTML XHTML
• Take a look at HTML vs XHTML vs HTML5 to get an idea of the evolution of HTML.

CSS

Walk through the basic CSS tutorials.

• Read CSS Introduction. Be sure to click on the stylesheets to see how the same content can look very different using CSS.
• Read HTML Classes and CSS Syntax.
• The "syntax" is very simple, but understanding selectors is very important (and can be tricky at times)
• Hint! To ensure I'm specifying the selector correctly, I often do a "dummy" style like setting the color or background-color red. That's easy to see, and if it doesn't change then I know my selector syntax is not correct (especially useful for descendant selectors).
• What's the difference between an id and a class, in syntax?
• What's the difference between an id and a class, in purpose?
• What's the difference between .class and p.class?
• True or False: comments are possible in CSS, but it's so easy to read and understand how the code is working that comments are really unneccessary. [A response of "true" will result in lynching by your colleagues :-) ]
• Read CSS How To.
• What are the 3 ways to insert CSS? Which is generally preferred? Why?
• Skim CSS Colors, CSS Background and CSS Borders.
• How many different ways can color be specified?
• What elements can have color applied to them?
• What are some options for page backgrounds?
• What are some options for borders?
• Read CSS Margins through CSS Box Model. Run some of the "Try it" examples.
• What are the options for specifying the margin?
• When might you use auto for a margin?
• What is margin collapse?
• What's the difference between padding and margin?
• What does box-sizing do?
• Be sure to understand the Box Model
• Skim CSS Outline and CSS Text.
• What is text-decoration: none; often used for?
• What are some other options for modifying the appearance of text?
• Read CSS Fonts.
• What's a generic font family?
• What are the options for specifying font size?
• Which option is recommended by W3C? Why?
• Read an opinion about pixels: Pixels Are Dead: Why You Should Stop Using Pixels In CSS
• Many of us are more familiar with pixels. I found this site to be helpful: http://pxtoem.com/
• Skim CSS Icons.
• Read CSS Links. Be sure to understand link states
• Skim CSS Lists and CSS Tables.
• Read CSS Display and CSS Max-Width.
• Some of this was covered in HTML Block
• What's the difference between display:none and visiblity: hidden?
• Skip CSS Position and CSS Overflow for now.
• Read CSS Float.
• Run the examples to see how float works.
• Previously float was used extensively for page layout. But read: Does Flexbox make Floats obsolete?
• Skip CSS Inline-block to CSS Opacity.
• Read CSS Navigation Bar and CSS Tooltips.