HTML5 Overview of Lecture  Why learn XHTML?  Good Programming Practices  Basic HTML Tags  Headings  Creating Links  Adding an Image  Linking Through an Image  HR and Other Special Characters  Background Color  Fonts, Color, Size  Lists  Unordered  Ordered  Indented/ Nested  Definitional  Tables

HTML5 2  Tools of the trade:  A free online HTMl editor (as an introduction) AND  A simple editor like Notepad or TextEdit AND save the document as.txt and then.htm  Your favorite browser like Firefox or Safari or Chrome or Opera To view your masterpiece XHTML Basics a free online HTML editor and another one

HTML5 Tips for Good Programming  Whitespaces for readability  Assign filenames to documents that describe their functionality.  This practice can help you identify documents faster  It also helps people who want to link to a page, by giving them an easy-to- remember name.  For example, if you are writing an XHTML document that contains product information, you might want to call it products.html

HTML5 Tips for Good Programming  Indenting nested elements emphasizes a document’s structure and promotes readability.  Place comments throughout your markup.  Comments help other programmers understand the markup, assist in debugging and list useful information that you do not want the browser to render.  Comments also help you understand your own markup when you revisit a document to modify or update it in the future.  Remember comments in XHTML always begin with. The browser ignores all text inside a comment

HTML5 The Basic Tags... the title on your website the body of your text goes here... Save as ____.txt (any simple editor will do) and _____.html a free online HTML editor and another one

HTML5 Basic XHTML  In XHTML, text is marked up with elements delimited by tags that are names contained in pairs of angle brackets  Every XHTML document contains a start tag and an end tag  Comments in XHTML always begin with. The browser ignores all text inside a comment  Every XHTML document contains a head element which generally contains:  A head and a title element  A body element  head element  is not rendered in the display window  the title appears as the browser ‘tab’

HTML5 The Basic Tags - paragraphs CSCI 101 this is our very first website

HTML5 The Basic Tags - headings... the title on your website... This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 this is our very first website

HTML5 The Basic Tags – creating links CSCI 101 Links and Things this is our very first website This is a link to my favorite news site

HTML5 The Basic Tags – creating links, adding an image CSCI 101 Links and Things this is our very first website This is Lancaster

HTML5 The Basic Tags – creating links, adding an image CSCI 101 Links and Things this is our very first website This is Lancaster

HTML5 The Basic Tags – creating links, adding an image, bold, italics CSCI 101 Links and Things this is our very first website This is Lancaster CSCI Millersville University

HTML5 The Basic Tags – adding a horizontal line and an link CSCI 101 Links and Things this is our very first website This is Lancaster CSCI Millersville University Nazli Hardy, Associate Professor

HTML5 View Source Code  Right click or through browser menu  Useful for:  Viewing nesting structure  Immediate access to comments  Recovering code if you lose the _______.txt file

HTML5 Special Characters  XHTML provides special characters or entity references (in the form & code ; ) for representing characters that cannot be rendered otherwise  if x  What is the problem here?  if x &lt 10 then increment x by 1  This website is a good reference to the symbols: e.g. &copy &amp

HTML5 Special Characters Makes the 2 superscript Makes the 1 subscript Creates a strikethrough effect Emphasizes text Inserts the special symbols < and ¼ Partially adapted from adapted from “Internet & World Wide Web: How to Program”, Deitel & Deitel

HTML5 Background Color CSCI 101 Links and Things this is our very first website This is Lancaster CSCI Millersville University Nazli Hardy, Associate Professor

HTML5 Font Size and Color CSCI 101 Font Size and Color Font size 4, blue color Font size 5, green color Font size 2, yellow color Standard font size, red color

HTML5 Font Face CSCI 101 Font Face font face Comic Sans MS (size and color are the default) font face Courier, size 2 (color is default) font face Helvetica, alternatively Arial, color: dark green (size is default) Standard size, red color (font is default)

HTML5 Lists – Unordered and Ordered CSCI 101 Lists – Unordered and Ordered mangoes coconut lychees coconut lychees mangoess

HTML5 Lists - Indented CSCI 101 Lists - Indented mangoes coconut Hawaiian Tanzanian lychees notice the advantage to indenting the code

HTML5 Lists - Definitional CSCI 101 Lists - Definitional circumspect: adj. heedful of potential consequences desktop: (computer science, n.) figurative term for the area of the screen in graphical user interfaces against which icons and windows appear (other, n.) the top of your table or working area

HTML5 Tables  always start with the table tag:  row tags:  data tags:  heading tags:  end with the pair table tag

HTML5 Tables CSCI 101 Tables Favorite Cities Country City Language France Cannes French Zimbabwe Victoria Falls English/ Shona

HTML5 W3C XHTML Validation Service  Programming web-based applications can be complex, and XHTML documents must be written correctly to ensure that browsers process them properly  Most current browsers attempt to render XHTML documents even if they are invalid. This often leads to unexpected and possibly undesirable results.  Use a validation service, such as the W3C MarkUp Validation Service, to confirm that an XHTML document is syntactically correct.  World Wide Web Consortium (W3C) provides a validation service for checking a document’s syntax 

HTML5 More  Look through your book for further HTML details  The Internet is filled with great resources. Review the links below for background color and font size, type and color   

HTML5 Brief Intro to this week’s lab … on mashups  Mashup: aggregate content or functionality from existing websites to create a new and more informative page on a certain category of information.  Consolidates data, links, images into a one-stop-shop information portal.  Should be value-added than the original sites from which info is being pulled.  In preparation for the lab: Think about what you want your mashup to be … some examples  your passion  something./ some place about which you would like to learn  academic  professional  make some notes, draw a general outline