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

HTML5 Why Learn HTML?  Learning the basics of HTML is akin to learning how to add, subtract, multiply, divide numbers, even though we have access to calculators. Without understanding how numbers work, we have no scope of making any meaningful use of numbers.  Likewise, it is essential to have a basic understanding of the underlying language of the Web (HTML) and Internet.  My expectation is that you will become aware of basic HTML, not that you will become proficient (unless you already are) in the space of a few days. So dive and try.

HTML5  Tools of the trade:  A free online HTML editor like the ones below  Your favorite browser like Firefox or Safari or Chrome or Opera to view your masterpiece Avoid Internet Explorer (Once you have mastered the basics, then you can save your work on simple editor like Notepad or TextEdit as.txt and then.html Instructions for saving at the end of this presentation) HTML Basics

HTML5 Important: Read through the entire set of slides before starting

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 HTML 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 HTML always begin with. The browser ignores all text inside a comment

HTML5 Let’s Get Started: the Basic Tags  Open this free HTML editor:  Copy and paste the following code on the left column, then click on “See Result”:... this is the title on your website.... This is your first webpage... the body of your text goes here... Dr. Nazli Hardy

HTML5 The Basic Tags  You should see this:

HTML5 Basic HTML  In HTML, text is marked up with elements delimited by tags that are names contained in pairs of angle brackets  Every HTML document contains a start tag and an end tag  Comments in HTML always begin with. The browser ignores all text inside a comment  Every HTML 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 Practicing HTML  For the following sets of HTML code presented in the following slides, copy, paste onto the online HTML editor and see the result  Each slide builds on the next slide, so if you are having trouble with one slide, go back to the previous one  Once you start feeling confident, you can make some changes to the content within the tags  Like learning any new language, there is no alternative to trying out and practicing. I have taught several programming classes over the years, and this has been my tried and tested advise to my students. And also, try not to become frustrated. If you need a break, remove yourself from the computer, take a moment before starting again Partially adapted from Computer Security: Principles & Practices, Stallings, Lawrie

HTML5 The Basic Tags: paragraphs EDW 647 this is a tag for a paragraph notice the comments do not show up

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 EDW 647 Links and Things this is our very first website This is a link to my favorite news site Use your own favorite site instead of bbc

HTML5 URL of an Image  In order to grab the URL of an image, right click on the image and clicl on “Copy image URLl” CSCI 415 Millersville University Dr. Nazli Hardy

HTML5 The Basic Tags: creating links, adding an image EDW 647 Links and Things this is our very first website This is Lancaster Again use your own links and images

HTML5 The Basic Tags: creating line break, links, adding a linked image EDW 647 Links and Things this is our very first website This is Lancaster.

HTML5 Important Note  Sometimes when you are copying and pasting from one program to another (e.g. PowerPoint to another program), the “quotation marks” do not translate well.  I suggest you retype the quotation marks on the HTML editor, in case you are having any problems Millersville University Dr. Nazli Hardy

HTML5 The Basic Tags: creating line breaks, links, adding an image, bold, italics EDW 647 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 EDW 647 Links and Things this is our very first website This is Lancaster CSCI Millersville University Nazli Hardy, Associate Professor.

HTML5 Background Color EDW 647. Links and Things this is our very first website This is Lancaster CSCI Millersville University Nazli Hardy, Associate Professor For colors, visit this website:

HTML5 Color  To choose any color, use this useful website and copy and paste the 6 alphanumeric values CSCI 415 Millersville University Dr. Nazli Hardy

HTML5 Font Size and Color EDW 647 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 EDW 647 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 EDW 647 Lists – Unordered and Ordered. mangoes coconut lychees. coconut lychees mangoess

HTML5 Lists: Indented EDW 647 Lists - Indented mangoes coconut Hawaiian Tanzanian lychees notice the advantage to indenting the code

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

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

HTML5 To Save Your Work …  Since this is an online course, we have been using an online editor to help us through the exercise.  At this point, it is important to know how to save your work. Follow the directions below (there are screenshots in the next slides) 1.Create a new folder. Call it EDW647 2.Open NotePad or TextEdit (do not use NotePad++ or Word or any other program because we need to use the simplest of programs) 3.Copy and paste the HTML code 4.Save the text files as YourName.txt (e.g. Nazli.txt) in your EDW647 folder 5.Then save the same text files again. This time as YourName.html (Note” the pull down menu should indicate “All Files”) 6.Open your EDW647 folder and click on the YourName.html document 7.You should be able to see your webpage 8.As long as you do not close either the NotePad/TextEdit or the browser window, you can make changes to your text document and simply reload the browser window to see the changes

HTML5 To Save Your Work … Millersville University Dr. Nazli Hardy

HTML5

HTML5 Opening Your Webpage  Double click on the browser icon

HTML5 Additional Material  The following slides contain additional material for to try beyond this class. Millersville University Dr. Nazli Hardy

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 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   