act102 introduction to web page development. reading chapter 2 basic html web standards more...

ACT102 INTRODUCTION TO WEB PAGE DEVELOPMENT

Reading Chapter 2 Basic HTML

Web Standards

More HTML Elements

describes the content and structure of information on a web page Must be viewed in a browser to see the presentation (appearance on

screen)

surrounds text content with opening and closing tags All tags are in lower case and must contain an opening and closing tag

each tag's name is called an element syntax: <element> content </element>

example: <p>This is a paragraph</p>

most whitespace in HTML is ignored or collapsed to a single space

for this course we will use a newer version called HTML5

<!DOCTYPE html><html> <head>  <title>This shows in the browser title line</title> <meta charset="utf-8" /> <!—self closing--> <meta name="author" content=“Your name" /> <meta name="description" content=“Longer then the title and more information." /> <meta name="keywords" content=“html, css, dom, events, ajax, xml, json, sql, web security, cookie, session" /> <script src="resources/slides.js" type="text/javascript"></script> </head>

<body>page contents

</body> </html>

Tags<!DOCTYPE html> tells the browser to interpret our page's code as HTML5,

the latest/greatest version of the language The DOCTYPE tag is has no closing tag.

<html></html><head></head> the header describes the page<title></title> displays in the first line of the browser<body></body>the body contains the page's contents<!– the content inside these tags are comments and ignored by the browser-->The page is saved with a .html extension

block elements contain an entire large region of content examples:

<p>paragraphs</p>, <ul><li>unordered lists</li></ul>, <h1>headers</h1>

the browser places a margin of whitespace between block elements for separation

inline elements affect a small amount of content examples: <em>Emphasized text</em>

<strong>Strong text</strong><dfn>Definition term</dfn><code>A piece of computer code</code><img src="smiley.gif" alt="Smiley face" height="42" width="42" />

the browser allows many inline elements to appear on the same line

must be nested inside a block element

Block-level element/tag define a complete section or block of text Can contain inline element and block-level element

Inline elements Define the structure of a sequence of characters within a

line may not contain a block-level element may be used within a block

This works<h2><em>Bold and italic</em></h2>

How about this<em><h2>Bold and italic</h2></em>

Partial list of block-level tags p, blockquote, h1 … h6, div, ul, ol, li, span

Partial list of inline tags a (anchor tag), em, strong, img, q (short

quotation)

Required on all pages <!DOCTYPE> <html></html> <head></head> <body></body> Our Class

<title></title> <meta />

Self closing <meta /> <hr /> <img /> <br />

Basic Tags <h1></h1>…<h6></h6> <p></p> <a> </a> <em></em> <strong></strong>

<ul><li></li></ul> <ol><li></li></ol> <!– information --> <code></code> <pre></pre>

<dl></dl> <dt></dt> <dd></dd> <blockquote></

blockquote> <q></q> <del></del> <ins></ins> <abbr></abbr>

ALL OF THE TAGS ON THESE TWO SLIDES WILL BE ON THE FIRST QUIZ!!!!!!!!!!!!

<title></title> tag is the title of the web page

<title>Chapter 2: HTML Basics</title>

placed within the <head></head> tags of the page

displayed in the web browser's title bar and when bookmarking the page

<p></p>paragraphs of text (one of the block tags)

<p>Lady Macbeth fulfills her role among the nobility and is well respected like Macbeth. King Duncan calls her "our honored hostess." She is loving to her husband but at the same time very ambitious, as shown by her immediate determination for Macbeth to be king. This outcome will benefit her and her husband equally. She immediately concludes that "the fastest way" for Macbeth to become king is by murdering King Duncan. </p>

placed within the body tags of the page must be lower case and have both an opening and closing

tag w3c <p></p> examples

Headings: <h1></h1>, ..., <h6></h6> headings separate major areas of the

page (they are block tags)<h1>ACT102 Web Page Development</h1><h2>Department of Computer Science</h2><h3>On-Line Section 40</h3>

Each header tag gets smaller or may be styled by the programmer

<hr /><!– self closing and is not pared --> creates a horizontal line to visually

separate sections of a page (blocks)

<p>First paragraph</p><hr /><p>Second paragraph</p>

Is self closing with /> <!– is not pared -->

some tags can contain additional information called attributes syntax: <element attribute="value" attribute="value"> content </element> syntax: <element attribute="value" attribute="value" />

Example with content: <a href="page2.html">Next page</a>

Example without content; <img src="bunny.jpg" alt="pic from Easter" />

<a></a> used to link to other cites, or "anchor“ pages within a site (inline)

<p>Search <a href="http://www.google.com/">Google</a>

<a href="lectures.html">Lecture Notes</a>.</p>

uses the href attribute to specify the destination URL can be absolute (to another web site) or relative (to another page on this site)

anchors are inline elements; must be placed in a block element such as p or h1

<img /><!– self closing and is not pared --> inserts a graphical image into the page (inline) syntax<img src="images/text.jpg" alt=“Cover of our course textbook" />

src attribute specifies the image URL alt attribute specifies an alternate text for an image, if the image cannot be

displayed HTML5 requires an alt attribute describing the image

More about images<a href="http://www.webstepbook.com/index.shtml/"><img src="images/text.jpg" alt=“Cover of our textbook“

title=“Web Programming Step by Step" /></a>

if placed in an a anchor, the image becomes a link title attribute is an optional tooltip (on ANY element)

<br /> forces a line break in the middle of a block element

(inline)

<p>The paragraph was too long.<br /> So I put a line brake here.</p>

<p>The line break adds readability to your content., <br /> Please use them where they will do the most good!</p>

Warning: Don't over-use <br />(guideline: >= 2 in a row is bad)

<br /> tags should not be used to separate paragraphs or used multiple times in a row to create spacing

<em>: emphasized text (usually rendered in italic)</em>

<strong>: strongly emphasized text (usually rendered in bold)</strong>

<p>HTML is <em>really</em>,<strong>REALLY</strong> fun!

</p>

text placed between the two  tags is ignored by

the browser



<p>ACT courses are  a lot of fun!</p>

PROGRAMMERS may fail to thoroughly comment their pages still useful at top of page for indicating purpose of page can be used to disable code segments for debugging comments cannot be nested and cannot contain a --

characters

<p>HTML is <em> really, <strong> REALLY lots of </strong> </em>fun!</p>

tags must be correctly nested (a closing tag must match the most recently opened tag)

if tags are not matched correctly the browser may render it correctly anyway, but it will not validate

It is important to write proper HTML code and follow proper syntax.

Why use valid HTML and web standards? to mimic more rigid and structured language more interoperable across different web

browsers more likely that our pages will display correctly

in the future can be interchanged with other XML data: SVG

(graphics), MathML, MusicML, etc.

<p><a href="http://validator.w3.org/check/referer"> <img src=“http://www.w3.org/Icons/valid-html20”

alt="Validate" /></a></p>

validator.w3.org

checks your HTML code to make sure it follows the official HTML syntax

more picky than the browser, which may render bad HTML correctly

<ul><li>First Item</li></ul> ul represents a bulleted list of items

(block) li represents a single item within the list

(block)<ul>

<li>No Reading</li><li>No Studing</li><li>Big problem!</li>

</ul>

a list can contain other lists:

<ul><li>Simpsons: <ul> <li>Homer</li> <li>Marge</li> </ul></li><li>Family Guy: <ul> <li>Peter</li> <li>Lois</li> </ul></li>

</ul>

The list displayed in IE

the browser contains a default list of bullet images

ol represents a numbered list of items (block)

<p>RIAA business model:</p><ol>

<li>Sue customers</li>

<li>???</li><li>Profit!</li>

</ol>

viewed in IE

we can make lists with letters or Roman numerals using CSS (later)

<dl>  <dt>term to be defined</dt>

<dd>definition of term</dd></dl>Start tag: required, End tag: optional<dl>

<dt>Dweeb <dd>young excitable person who may mature into a <em>Nerd</em> or <em>Geek</em>

<dt>Hacker <dd>a clever programmer

<dt>Nerd <dd>technically bright but socially inept person

</dl>

<blockquote></blockquote> a lengthy quotation (block)

<p>As Lincoln said in his famous Gettysburg Address:</p><blockquote>

<p>Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and

dedicated to the proposition that all men are created equal.</p></blockquote>

<q></q> a short quotation (inline)

<p>Quoth the Raven, <q>Nevermore.</q></p>

Why not just write the following?<p>Quoth the Raven, "Nevermore."</p>

We don't use " marks for two reasons:HTML shouldn't contain literal quotation mark characters; they should be written as "using <q> allows us to apply CSS styles to quotations (seen later)

a way of representing Unicode characters within a web page

Complete list of HTML entities

Character(s) Entity

<> < >

é è ñ é è ñ

™ © ™ ©

π δ Δ π δ Δ

И И

“ & " &

<p> <a href="http://google.com/search?q=marty&ie=utf-8">

Search Google for Marty </a></p>

The above code produces:

<del>Final Exam</del> <ins>Midterm</ins>

content that should be considered deleted or added to the document (inline)

<p> <del>Final Exam</del> <ins>Midterm</ins> is on <del>Aug 29</del> <ins>Apr 17</ins>.</p>

an abbreviation, acronym, or slang term (inline)

<p>Safe divers always remember to check their<abbr title="Self-Contained Underwater Breathing

Apparatus">SCUBA</abbr> gear.</p>

a short section of computer code (usually shown in a fixed-width font)

<p>The <code>ul</code> and

<code>ol</code>tags make lists.

</p>

a large section of pre-formatted text (block)

<pre> Steve Jobs speaks loudly reality distortion Apple fans bow down</pre>

displayed with exactly the whitespace / line breaks given in the text

shown in a fixed-width font by default

information about your page (for a browser, search engine, etc.)

<meta charset="utf-8" /><meta name="description" content="Authors' web site for Building Java Programs." /><meta name="keywords" content="java, textbook" />

placed in the head section of your HTML page

meta tags often have both the name and content attributes some meta tags use the http-equiv attribute instead of name

the meta tag with charset attribute indicates language/character encodings

using a meta tag Content-Type stops validator "tentatively valid" warnings

A favicon (short for 'favorites icon'), also known as a website icon, a page icon or urlicon, is an icon associated with a particular website or webpage.

Any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the ICO format, other browsers now also support the animated GIF and PNG image formats.

<link rel="shortcut icon" href="images/favicon.png" type="image/png">

<link rel="icon" href="images/favicon.png" type="image/png">

Chapter 2 Quiz due by Friday of week 3 Homework problem due by Friday Week

4

act102 introduction to web page development. reading chapter 2 basic html web standards more...

Documents