HTML Help

COP 3813 – Intro to ��Internet Computing

Topic 3 – Basic HTML 5

BASIC CONCEPTS

Spring 2015 Intro to Internet Compu3ng 2

How the web works

•  Internet (and its predecessors)•  Internet vs. Web•  TCP/IP•  HTTP•  HTML•  ISP•  DNS•  URLs


How the web works•  Client-Side Scripting versus Server-Side Scripting •  World Wide Web Consortium (W3C) •  Web 2.0: Going Social•  The web programmer's expected skills:– HTML– CSS–  JavaScript (and jQuery)–  PHP– MySQL– XML– AJAX


Web pages

•  Plain text•  (Broken) HTML•  (Strict) (X)HTML•  HTML5•  HTML5 + CSS

•  HTML5 + CSS + JavaScript•  HTML5 + CSS + JavaScript + jQuery


Static

Rich

HTML5 ��(AND ITS PREDECESSORS)��


Before HTML5…

•  HTML (frozen at 4.01)•  XHTML (XML version of HTML)– Transitional – Strict

•  Early work on XHTML 2.0•  Opera: Web Forms 2.0•  WHATWG (Web Hypertext Application

Technology Working Group)•  2009: W3C shifts from XHTML 2.0 to HTML5

Spring 2015 7 Intro to Internet Compu3ng

Philosophies behind HTML5

•  Design principles– Compatibility•  If HTML5 features are not supported, the behavior must

degrade gracefully

•  The name of the game is evolution not revolution

– Utility•  Priority of Constituencies.

•  And as priorities go, “the user is king.”

•  Users >> authors >> implementers (browsers) >> specifiers (W3C/WHATWG) >> theoretical purity


Philosophies behind HTML5

•  Design principles (cont’d)–  Interoperability•  The HTML5 mantra?

–  “Simple is better. Simplify wherever possible.”

– Universal Access•  3 concepts:

–  Accessibility: support for users with disabilities [Web Accessibility Initiative (WAI) Accessible Rich Internet Applications (ARIA)]

– Media Independence: HTML5 functionality should work across all different devices and platforms if at all possible.

–  Support for all world languages.


HTML5 highlights

•  More descriptive markups•  Multimedia with less reliance on plug-ins•  Better web-based apps without third-party

technologies•  Cross-document messaging

•  Web Sockets (persistent connection to server)•  Client-side storage•  Better interfaces•  Improved accessibilitySpring 2015 Intro to Internet Compu3ng 10

Styling HTML5 with CSS

•  CSS stands for Cascading Style Sheets•  Styles define how to display HTML elements•  Styles were added to HTML 4.0 to solve a

problem•  External Style Sheets can save a lot of work

•  External Style Sheets are stored in CSS files•  CSS enforce separation between presentation and

content•  Let’s take a walk in the garden…


Take-home message

•  Keep content (structured and marked up with proper HTML5 tags), ��presentation (styled with CSS style sheets), and interactive behavior (scripted with JavaScript) ��separate!


ANATOMY OF A WEB PAGE ��(USING HTML5 TAGS AND DESIGN PRINCIPLES)��


Book examples

•  This section uses examples from the book:"HTML and CSS: Design and Build Websites", ��by Jon Duckett

(available at http://www.htmlandcssbook.com/ )


Understanding structure•  Many web pages act like

electronic versions of these documents.

•  In all kinds of documents, structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document.

•  So, in order to learn how to write web pages, it is very important to understand how to structure documents.


15 STRUCTURE

Think about the stories you read in a newspaper: for each story, there will be a headline, some text, and possibly some images. If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved. Structure helps readers understand the stories in the newspaper.

The structure is very similar when a news story is viewed online (although it may also feature audio or video). This is illustrated on the right with a copy of a newspaper alongside the corresponding article on its website.

Now think about a very different type of document — an insurance form. Insurance forms often have headings for different sections, and each section contains a list of questions with areas for you to fill in details or checkboxes to tick. Again, the structure is very similar online.

16STRUCTURE

Structure in MS Word

•  Styles– How many of us actually use it (properly)?


17 STRUCTURE

The use of headings and subheadings in any document often reflects a hierarchy of information. For example, a document might start with a large heading, followed by an introduction or the most important information.

This might be expanded upon under subheadings lower down on the page. When using a word processor to create a document, we separate out the text to give it structure. Each topic might have a new paragraph, and each section can have a heading to describe what it covers.

On the right, you can see a simple document in Microsoft Word. The different styles for the document, such as different levels of heading, are shown in the drop down box. If you regularly use Word, you might have also used the formatting toolbar or palette to do this.

18STRUCTURE

Structure in HTML

http://www.htmlandcssbook.com/code-samples/chapter-01/example.html


kSTRUCTURE 20STRUCTURE19 STRUCTURE

On the previous page you saw how structure was added to a Word document to make it easier to understand. We use structure in the same way when writing web pages.

In the browser window you can see a web page that features exactly the same content as the Word document you met on the page 18. To describe the structure of a web page, we add code to the words we want to appear on the page.

You can see the HTML code for this page below. Don't worry about what the code means yet. We start to look at it in more detail on the next page. Note that the HTML code is in blue, and the text you see on screen is in black.

<html> <body> <h1>This is the Main Heading</h1> <p>This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.</p> <h2>This is a Sub-Heading</h2> <p>Many long articles have sub-headings to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).</p> <h2>Another Sub-Heading</h2> <p>Here you can see another sub-heading.</p> </body></html>

The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements. Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags.

Structure in HTML

•  HTML uses elements to describe the structure of pages.

•  Each element has an opening tag and a closing tag.

•  Tags act like containers.


A closer look at tags


23 STRUCTURE 24STRUCTURE

The characters in the brackets indicate the tag's purpose.

For example, in the tags above the p stands for paragraph.

The closing tag has a forward slash after the the < symbol.

The terms "tag" and "element" are often used interchangeably.

Strictly speaking, however, an element comprises the opening

tag and the closing tag and any content that lies between them.

Attributes

•  Attributes provide additional information about the contents of an element. – They appear on the opening tag of the element and

are made up of two parts: a name and a value, separated by an equals sign.


25 STRUCTURE 26STRUCTURE

The attribute name indicates what kind of extra information you are supplying about the element's content. It should be written in lowercase.

The value is the information or setting for the attribute. It should be placed in double quotes. Different attributes can have different values.

Here an attribute called lang is used to indicate the language used in this element. The value of this attribute on this page specifies it is in US English.

Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

<p lang="en-us">Paragraph in English</p>

The majority of attributes canonly be used on certain elements, although a few attributes (such as lang) can appear on any element.

Most attribute values are either pre-defined or follow a stipulated format. We will look at the permitted values as we introduce each new attribute.

The value of the lang attributeis an abbreviated way of specifying which language isused inside the element thatall browsers understand.

HTML5 allows you to use uppercase attribute names and omit the quotemarks, but this is not recommended.

<p lang="fr">Paragraphe en Français</p>

Body, head and title


http://www.htmlandcssbook.com/code-samples/chapter-01/body-head-title.html

Hands-on•  Let’s create our first HTML5 page!– Choose your favorite editor (even Notepad or vi

should do J)– Start from an empty page– Add DOCTYPE– Add html, head, and body tags– Add meta and title (under head)– Add a p (under body)– Save– Display in browser– View source


View source and developer tools


35 STRUCTURE

When the web was first taking off, one of the most common ways to learn about HTML and discover new tips and techniques was to look at the source code that made up web pages.

These days there are many more books and online tutorials that teach HTML, but you can still look at the code that a web server sends to you. To try this out for yourself, simply go to the sample code for this chapter, at www.htmlandcssbook.com/view-source/ and click on the link called "View Source."

Once you have opened this page, you can look for the View menu in your browser, and select the option that says Source or View source. (The title changes depending on what browser you are using.)

You should see a new window appear, and it will contain the source code that was used to create this page.

You can see this result in the photograph on the right. The page you see is the window at the top; the code is below.

At first this code might look complicated but don't be discouraged. By the time you have finished the next chapter of this book, you will be able to understand it.

All of the examples for this book are on the website, and you can use this simple technique on any of the example pages to see how they work.

You can also download all of the code for this book from the same website by clicking on the "Download" link.

36STRUCTURE

New HTML5 sectioning elements


New sectioning elements


New sectioning elements in action


Code: Example3_4.html + html5.css

BASIC HTML��


Outline

•  Text•  Lists•  Links•  Images •  Tables


Markup (the 'M' in HTML)

•  Structural markup– Headings, paragraphs, divs, etc.

•  Semantic markup– Emphasis, quotations, abbreviations, etc.


Text•  Headings <h1>…<h6>

–  http://www.htmlandcssbook.com/code-samples/chapter-02/headings.html

•  Paragraphs <p>–  http://www.htmlandcssbook.com/code-samples/chapter-02/paragraphs.html

•  Bold <b>–  http://www.htmlandcssbook.com/code-samples/chapter-02/bold.html

•  Italic <i>–  http://www.htmlandcssbook.com/code-samples/chapter-02/italic.html


Text•  Line breaks <br />–  http://www.htmlandcssbook.com/code-samples/chapter-02/line-

breaks.html

•  Horizontal rules <hr />–  http://www.htmlandcssbook.com/code-samples/chapter-02/

horizontal-rules.html

•  What about white space?–  http://www.htmlandcssbook.com/code-samples/chapter-02/

white-space.html


Text

•  Superscript <sup> and subscript <sub>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

superscript-and-subscript.html

•  Strong <strong>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

strong.html

•  Emphasis <em>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

emphasis.html


Text

•  Quotations– <blockquote>– <q>

–  http://www.htmlandcssbook.com/code-samples/chapter-02/quotations.html


Text

•  Abbreviations and acronyms <abbr>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

abbreviations.html

•  Citations <cite>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

citations.html

•  Definitions <dfn>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

definitions.html


Text•  Author details <address>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

address.html

•  Insert <ins> and delete <del>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

insert-and-delete.html

•  Strikethrough <s>–  http://www.htmlandcssbook.com/code-samples/chapter-02/

strikethrough.html


Text

•  Complete example–  http://www.htmlandcssbook.com/code-samples/chapter-02/example.html


Lists

•  Numbered (ordered) lists <ol> and <li>–  http://www.htmlandcssbook.com/code-samples/chapter-03/ordered-

lists.html

•  Bullet (unordered) lists <ul> and <li>–  http://www.htmlandcssbook.com/code-samples/chapter-03/unordered-

lists.html

•  Definition lists <dl>, <dt>, and <dd>–  http://www.htmlandcssbook.com/code-samples/chapter-03/definition-

lists.html


Lists

•  Nested lists–  http://www.htmlandcssbook.com/code-samples/chapter-03/nested-lists.html

•  Complete example–  http://www.htmlandcssbook.com/code-samples/chapter-03/example.html


(Hyper) Links

•  "Links are the defining feature of the web because they allow you to move from one web page to another – enabling the very idea of browsing (or surfing)."


Links

•  Links to other sites– Absolute

•  http://www.htmlandcssbook.com/code-samples/chapter-04/linking-to-other-sites.html

•  Links between pages on the same site– Relative

http://www.htmlandcssbook.com/code-samples/chapter-04/linking-to-other-pages.html


Links•  Links within pages (anchors) (e.g., #top)

–  http://www.htmlandcssbook.com/code-samples/chapter-04/linking-to-a-specific-part.html

•  Opening links in a new window/tab (target="_blank")–  http://www.htmlandcssbook.com/code-samples/chapter-04/opening-

links-in-a-new-window.html

•  Email links (mailto:)–  http://www.htmlandcssbook.com/code-samples/chapter-04/email-

links.html


Links

•  Complete example


http://www.htmlandcssbook.com/code-samples/chapter-04/example.html

Images

•  Choosing images–  Images should:•  Be relevant

•  Convey information•  Convey the right mood

•  Be instantly recognizable•  Fit the color palette

– Where to search?•  http://search.creativecommons.org/

– Don't miss! http://www.htmlandcssbook.com/extras/choosing-images-for-your-site/


Images

•  Storing images– Separate folder (images) w/ possible subfolders– Try to keep the same location throughout the

development of your site


Images

•  Adding images to pages– The <img> tag and its attributes:•  src•  alt•  title•  height•  width

– Where to place them?– How to align them?•  Hint: do not use the align attribute


Images

•  3 rules for creating images– Save images in the right format– Save images at the right size

– Measure images in pixels

•  Tools to edit and save images– Photoshop– GIMP

– Pixelmator– PaintShop Pro– etc.


Images

•  Online tutorial on image resizing and saving:– http://www.htmlandcssbook.com/extras/resizing-and-

saving-images-for-the-web/

•  Choosing the right format:–  JP(E)G– GIF

– PNG– others


Images

•  Optimizing images for the web– Size and AR issues– Cropping

– Resolution (think pixels, not dpi)– Tutorials on changing image dimensions (Photoshop

and GIMP): http://www.htmlandcssbook.com/extras/image-dimensions/


Images•  What about vector images and SVG?– Check:

•  http://www.w3.org/Graphics/SVG/ •  http://commons.wikimedia.org/wiki/Help:SVG •  http://inkscape.org/

•  What about transparency?– Hints and best practices

•  http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

•  http://sixrevisions.com/web_design/web-designers-guide-to-png-image-format/

–  Beware of IE 6•  http://www.htmlandcssbook.com/extras/transparent-pngs-in-ie6/


Images

•  Animated GIFs


Images

•  HTML5 <figure> and <figcaption>–  http://www.htmlandcssbook.com/code-samples/chapter-05/figure-and-figure-caption.html


Images

•  Complete example–  http://www.htmlandcssbook.com/

code-samples/chapter-05/example.html


Tables

•  When to use tables– Data that can be neatly organized in a grid–  "Layout helper"


Tables•  How to create tables– Basic table structure•  <table>, <tr>, <td>

– Table headings•  <th>

– Spanning columns•  The colspan attribute

– Spanning rows•  The rowspan attribute

– Long tables•  <thead>, <tbody>, and <tfoot>


Tables

•  Old code– Width & spacing– Border & background

•  Examples: http://www.htmlandcssbook.com/code-samples/chapter-06/


HTML Help

Documents

Transcript of HTML Help