Path Home About State Agency Divisions Systems Design and Computer Services Resources Presentations HTML & CSS Basics
Jump to navigation

HTML & CSS Basics

Business in the front, party in the back

Introduction

  • HTML vs. CSS
    • HTML for content (AKA business)
    • CSS for style and layout (AKA party)

 

For Which It Stands

  • HyperText Markup Language
  • What is it?
    • A language for marking up content to share over the internet.
    • Close relative to XML
    • Follows a hierarchical format

 

How Did We Get Here?

  • History
    • created by physicist, Sir Tim Berners-Lee from CERN, in late 80s/early 90s
    • Wrote HTML specification and first browser
    • Beginning of World Wide Web
  • Versions
    • HTML 2.0 circa 1995 - IETF standard
    • HTML 3.2 circa 1997 - Dropped mathematical formulas
    • HTML 4.0 circa 1998 - 3 variations: strict, transitional, and frameset
    • HTML 4.01 circa 1999 - Same 3 variations
    • XHTML circa 2000 - Reformulation of HTML 4.01.  Other versions include: 1.1, 2.0, and 5.
    • HTML 5 - Working draft as of 2008

 

Parts of the Whole

  • Tags
    • Mark-up in the form of <tag>, </tag>, or <tag />
  • Elements
    • Objects such as paragraphs, images, etc. as generally defined by a pair of tags (start and end tags), various attributes, and the content between the tag pair.
  • Attributes
    • Attributes of elements, such as name, title, width, etc.  They're in the form of <tag attribute="value">.
  • Singletons
    • Tags that do not require an end tag, such as images and line breaks.  They're in the form of <tag />

 

HTML as a Supermodel

  • Document Object Model (DOM)
    • Platform-independent convention for representing and interacting with objects in HTML/XML documents.

 

Can't we all just get along?

  • Validation
    • World Wide Web Consortium (W3C) validator for standards-compliance
    • Checks things like character encoding, case, missing tags, improper organization, etc.
    • Some browsers are good at guessing what invalid HTML is attempting to represent
  • Accessibility
    • Many screen readers rely on standards-compliant HTML

 

Bring It To Life!

  • JavaScript
    • Client-side scripting language based on Java, but is definitely not the same thing as Java.
    • Runs in browsers to interact with web pages via the DOM
    • Conforms to ECMAScript standard, but is not a standard itself.
    • Can easily be "hacked", therefore shouldn't be considered reliable/safe
    • Not implemented in all browsers (including many screen readers) and can be turned off in others

 

Tag, you're it!

  • HTML defines dozens of tags, such as:
    • Text
    • Images
    • Hyperlinks
    • Forms
    • ...

 

In The Beginning...

    <!DOCTYPE html>
    <html>Gooey Center</html>
  • Doctype
    • Declares which version of HTML the web page is using.
    • Must be first element in HTML document
    • Many different forms depending on version of HTML in use.
  • HTML
    • Element that tells the browser that everything nested within is the HTML document
    • Takes the form of <html> and </html>

 

Dive in Head First

  • Head - Element declaring the HTML header.  It encompasses the tags below.
  • Title - The web page's title
  • Meta - For metadata such as character encoding, keywords, etc.
  • Script - For defining JavaScript code or other client-side scripts
  • Style - For defining internal CSS styles
  • Link - For defining links to resources such as external JavaScript or CSS files.

 

Body Building

    <body onload="doMagic()">
    Content</body>
  • Body
    • Declares the HTML body/content element
    • Sometimes used with the onload attribute to execute some JavaScript once the page has loaded.

 

Text Messages

  • Headings - Declares the text contained within as a heading. Headings/subheadings range from <h1> to <h6>
  • Paragraph - Declares the text contained within as a paragraph.  Tag is in the form of <p>
  • Line break - Starts a new line.  Tag is in the form of <br />
  • Font - Declares a specific font around some text.  This element has been deprecated.

 

HTML: Characters Welcome

  • Non-breaking space (&nbsp;)
  • Ampersand (&amp;)
  • Less than (&lt;) and greater than (&gt;)
  • Quotes (&quot;) and Apostrophes (&apos;)

 

Worth a 1000 Words

  • Image
    • Declares a graphic
    • The 3 most widely supported graphic formats are GIF, JPEG, and PNG.
    • Used with the alt attribute to provide an accessible description of the graphic
    • Used with the src attribute to define the URL of the graphic.
    • Tag is in the form of <img src="url" alt="My graphic"/>

 

Anchors Away!

  • Anchors (<a>)
    • Take two forms: Hyperlinks and Page Anchors
    • Hyperlinks use the href attribute to define the URL that is being linked to.  Hyperlinks can enclose virtually any other element.
    • Hyperlinks can also set a target attribute to have the link open in a new window or tab.
    • Page anchors use the name attribute to describe the section of the page, so it can be linked to.
    • Tag is in the form of <a href="url#section"> and </a>, or <a name="section" />

 

Form and Function

  • Form
    • Methods include: get, post, put, and delete.
      • The get method is designed to request information from a web server.
      • The post method is designed to send data to a web server so it can take some action.
      • The put and delete methods are obscure and rarely used in modern times.
    • The action attribute is set to tell the browser which URL to submit the form to.
    • The enctype attribute is most commonly used when the form is submitting a file.
    • Tag takes the form of <form action="url" method="post"> and </form>

 

Fields of Dreams

  • Form Fields
    • Text boxes
    • Check boxes
    • Radio buttons
    • Hidden fields
    • Drop-down boxes
    • Multi-line text boxes
    • file
    • Submit buttons

 

One-liners

  • Text boxes
    • Input Type: Text
    • Input Type: Password
  • Use the name attribute to name the variable that is submitted in the request.
  • Default the value using the value attribute.
  • Tag takes the form of <input type="text" name="name" value="Text" />

 

Check yourself before you wreck yourself

  • Input Type: Checkbox
    • Used to select multiple (0 or more) options.
    • Use the checked attribute to default the checkbox as selected.
    • Use a common name attribute to group checkboxes.
    • Use the value attribute to set the value of an individual checkbox.
    • Tags are in the form of <input type="checkbox" name="group1" value="value1" checked="checked" />

 

Radio Station

  • Input Type: Radio
    • Used to select a single (0 or 1) option within a group of options.
    • Use the checked attribute to default the radio button as selected.
    • Use a common name attribute to group the radio buttons.
    • Use the value attribute to set the value of an individual radio button.
    • Tags are in the form of <input type="radio" name="group1" value="value1" checked="checked" />

 

Hide and Seek

  • Input Type: Hidden
    • Used to carry previous values forward to next form submission
    • Use the value attribute to set the value of the hidden field
    • Use the name attribute to name the variable that is submitted.
    • Tags are in the form of <input type="hidden" name="name" value="value" />

 

Highly Selective

  • Select
    • The select element creates a drop-down box used to select one of several options.
    • Use the name attribute to name the variable that is submitted.
  • Option
    • Nested within a select element to define options
    • Use the value attribute to set the value of the option.
    • Use the selected attribute to default an option as selected.
    • The content within the option element is the text displayed in the drop-down box
  • Tags take the form of <select name="name"><option value="value1" selected="selected">Value 1</option></select>

 

Area 51

  • Textarea
    • For fields that need multiple lines of text.
    • Use the name attribute to name the variable that is submitted.
    • Use the rows attribute to set how many lines are shown at one time.
    • Use the cols attribute to set how many character columns are shown at one time.
    • The content of the element defaults the value of the field.
    • Tags take the form of <textarea name="name" rows="3" cols="100">Default Text</textarea>

 

This is going in your file!

  • Input type: File
    • Used to submit files
    • Few configuration options for security reasons
    • Use the name attribute to name the variable that is submitted.
    • Tags take the form of <input type="file" name="name" />

 

Submarine mission

  • Input Type: Submit
    • Creates a button used to submit the form
    • Use the name attribute to name the variable that is submitted.
    • Use the value attribute to set the value of the button
    • Tags take the form of <input type="submit" name="name" value="value" />

 

Table for 3

  • Data vs. Layout
  • Tags Include:
    • Rows
    • Headings
    • Cells
  • Table tags take the form of <table> and </table>

 

Row, row, row your boat

    <tr></tr>
  • tr
    • Declares a table row.
    • Includes table headings and cells

 

Set Heading Due South

  • th
    • Declares a table heading cell
    • By default, bolds and center aligns cell contents
    • Tags take the form of <th>Heading Text</th>

 

Cell Block TD

  • td
    • Declares a table cell
    • Use the colspan attribute to set how many columns the cell spans across.
    • Use the rowspan attribute to set how many rows the cell spans across.
    • Tags take the form of <td>Cell Content</td>

 

It's all semantics

  • thead
    • Specifies a group of rows as table heading rows.
  • tbody
    • Specifies a group of rows as the table body.

 

Spanning the Divide

  • span
    • Undefined tag used to group elements using an inline layout (by default)
  • div
    • Undefined tag used to group elements using a block layout (by default)

 

Check the Label

  • Label
    • Used to set a label for a form field
    • For accessibility
    • Use the for attribute to specify the id of the field this element is labeling.
    • Tags take the form of <label for="field1">Label Text</label>

 

Enlisted

  • Lists
    • Ordered Lists (<ol>) - Used for numbered lists
    • Unordered Lists (<ul>) - Used for bulletted lists
  • List items (<li>) - Used to declare an individual list item, which can include nested lists.
  • Tags take the form of <ul><li>List Item Text</li></ul>

 

No comment

    I plead the 5th
  • <!-- comment -->
    • Used to add comments within the HTML.
    • Contents aren't rendered in the browser.

 

I Was Framed!

  • frame and iframe
    • Used to load other web pages within the current one.
    • iframe renders the other page inline.
    • Should be avoided for usability and accessibility reasons.

 

The Next Generation

  • HTML5
    • Adds tags such as canvas to partially replace functionality found in Adobe Flash.

 

Attribution

  • id - Sets the unique identifier of a specific element.  ID cannot be reused within an HTML document.
  • name - Sets the name of an element.  It can be reused, but should be done so sparingly.
  • title - Sets the alternate text of an element.  Used for setting tool-tips and for accessibility.
  • onclick - Used to execute some JavaScript when the element is clicked.
  • style - Used to set custom styles on the element.  This should be avoided.  Use style sheets instead.
  • class - Used to set the class of element, mostly for styling purposes.

 

Any Requests?

 

Time for some exercise

 

In Style

  • Cascading Style Sheets (CSS)
    • Used to control style and layout of web pages in a modular fashion to improve accessibility, flexibility, and control.
    • Styles are inherited by child elements (AKA cascading effect)
    • Started circa 1994 and has progressed to a CSS 3 Working Draft.

 

Multiple Personalities

  • Multiple style sheets can be used for:
    • Different themes (see: www.csszengarden.com)
    • Different platforms (i.e. PC browsers, mobile browsers, printing, screen readers, etc.)
  • Responsive web is a buzzword for the automatic selection of an appropriate style sheet based on screen resolution.

 

Reference Section

    img.art { }
  • Elements can be referred to by:
    • Tag (ex: img)
    • Class (ex: .heading)
    • ID (ex: #field4)
    • Attribute (ex: [title])

 

Master of all you survey

  • CSS can control the following:
    • Colors
    • Links
    • Sizes
    • Visuals
    • Layout

 

In Living Color

  • Colors:
    • Color names like: green
    • Red-Green-Blue (RGB) value like: rgb(0,255,0)
    • Hexidecimal RGB values like: #00FF00
  • Coloring Options:
    • Text color (color: red)
    • Background color (background-color: blue)

 

Deja Vu

    Have I been there before?
  • The following individual link states can be styled:
    • Unvisited link (a:link)
    • Visited link (a:visited)
    • Moused-over link (a:hover)
    • Clicked link (a:active)

 

Size Matters

  • Size Units:
    • Pixels (px)
    • Points (pt)
    • Percent (%)
    • Em (em)
  • Sizes:
    • Fonts (font-size)
    • Width
    • Height

 

Superficial

  • The following visuals can be styled:
    • Background images (image, placement, repeating, etc.)
    • Fonts (as well as things such as underlining, italicizing, bolding, etc.)
    • Bullet shapes
    • Borders
    • Opacity and visibility

 

Play Picasso

  • Layouts can be affected by:
    • Block vs. inline
    • Visible vs. display
    • Positioning (absolute, relative, etc.)
    • Margins and padding
    • Floating and text alignment
    • Z-Index (think: 3D)
    • Overflow (hidden, scrolling, etc.)

 

Two-a-days

Jump to content