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: content  example: This is a paragraph  most whitespace in HTML is ignored or collapsed to a single space  for this course we will use a newer version called HTML5

This shows in the browser title line page contents Tags  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.   the header describes the page  displays in the first line of the browser  the body contains the page's contents   The page is saved with a.html extension

 block elements contain an entire large region of content examples:  paragraphs,  unordered lists,  headers  the browser places a margin of whitespace between block elements for separation  inline elements affect a small amount of content examples: Emphasized text Strong text Definition term A piece of computer code  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 Bold and italic  How about this Bold and italic

 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   Our Class   Self closing   Basic Tags  … 

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

 tag is the title of the web page  Chapter 2: HTML Basics  placed within the tags of the page  displayed in the web browser's title bar and when bookmarking the page

 paragraphs of text (one of the block tags) 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.  placed within the body tags of the page  must be lower case and have both an opening and closing tag  w3c examples w3c examples

 Headings:,...,  headings separate major areas of the page (they are block tags) ACT102 Web Page Development Department of Computer Science On-Line Section 40  Each header tag gets smaller or may be styled by the programmer

  creates a horizontal line to visually separate sections of a page (blocks) First paragraph Second paragraph  Is self closing with /> 

 some tags can contain additional information called attributes syntax: content syntax:  Example with content: Next page  Example without content;

  used to link to other cites, or "anchor“ pages within a site (inline) Search Google Lecture Notes.  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

  inserts a graphical image into the page (inline)  syntax  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  if placed in an a anchor, the image becomes a link  title attribute is an optional tooltip (on ANY element)

  forces a line break in the middle of a block element (inline) The paragraph was too long. So I put a line brake here. The line break adds readability to your content., Please use them where they will do the most good!  Warning: Don't over-use (guideline: >= 2 in a row is bad)  tags should not be used to separate paragraphs or used multiple times in a row to create spacing

 : emphasized text (usually rendered in italic)  : strongly emphasized text (usually rendered in bold) HTML is really, REALLY fun!

  text placed between the two tags is ignored by the browser <!-- My web page, by Suzy Student ACT102 SECTION 40 FALL > ACT courses are a lot of fun!  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

HTML is really, REALLY lots of fun!  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.

 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

 First Item  ul represents a bulleted list of items (block)  li represents a single item within the list (block) No Reading No Studing Big problem!

 a list can contain other lists: Simpsons: Homer Marge Family Guy: Peter Lois  The list displayed in IE  the browser contains a default list of bullet images

 ol represents a numbered list of items (block) RIAA business model: Sue customers ??? Profit!  viewed in IE we can make lists with letters or Roman numerals using CSS (later)

term to be defined definition of term Start tag: required, End tag: optional Dweeb young excitable person who may mature into a Nerd or Geek Hacker a clever programmer Nerd technically bright but socially inept person

  a lengthy quotation (block) As Lincoln said in his famous Gettysburg Address: 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.

  a short quotation (inline) Quoth the Raven, Nevermore.  Why not just write the following? Quoth the Raven, "Nevermore."  We don't use " marks for two reasons:  HTML shouldn't contain literal quotation mark characters; they should be written as "  using allows us to apply CSS styles to quotations (seen later)

 a way of representing Unicode characters within a web page  Complete list of HTML entitiesHTML entities Character(s)Entity <>< > é è ñé è ñ ™ ©™ © π δ Δπ δ Δ ИИ “ &" &

<p> <a href=" Search Google for Marty </a> </p> The above code produces:

 Final Exam Midterm  content that should be considered deleted or added to the document (inline) Final Exam Midterm is on Aug 29 Apr 17.

 an abbreviation, acronym, or slang term (inline) Safe divers always remember to check their SCUBA gear.

 a short section of computer code (usually shown in a fixed-width font) The ul and ol tags make lists.

 a large section of pre-formatted text (block) Steve Jobs speaks loudly reality distortion Apple fans bow down  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 name="description" content="Authors' web site for Building Java Programs." />  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