{"id":32809,"date":"2016-08-05T01:54:21","date_gmt":"2016-08-05T01:54:21","guid":{"rendered":"http:\/\/rkenny.org\/?p=32809"},"modified":"2016-08-23T12:22:44","modified_gmt":"2016-08-23T12:22:44","slug":"eme-6207-html-primer","status":"publish","type":"post","link":"https:\/\/emeclasses.org\/?p=32809","title":{"rendered":"EME 6207 &#8211; Tech Ed: HTML Primer"},"content":{"rendered":"<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#004d4d;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#008080;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">Textbook Reference(s):<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\"><\/p>\n<p><span style=\"color: #800000;\"><strong>Chpt 2: 26-33<\/strong><\/span><\/div><\/div>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div>\n<h3>The Basics<\/h3>\n<p>The basic coding structure beneath all Web pages is based on hypertext mark-up language (HTML). It as gone through several changes over the years but the basics are relatively the same. This lesson is simply to introduce you to some of the fundamentals. You are not expected to become experts in this but simply become introduced to the concept. The next lesson on How Browsers work will begin to tie it all together.<br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div><br \/>\nTo get started, let&#8217;s take a look at a video (approx 15 minutes) I created to introduce the basics of the concepts behind HTML and XHTML, which as you will see is an interim step to HTML5 (which we will introduce in a later in this module:<br \/>\n[one_third].[\/one_third][one_third]<script type='text\/javascript' src='https:\/\/emeclasses.org\/wp-content\/plugins\/hana-flv-player\/flowplayer3\/example\/flowplayer-3.2.6.min.js'><\/script>\n<div >\n<div id='hana_flv_flow3_1' style='display:block;width:400px;height:320px;background-color:#555555;color:#ffffff;padding:0' title=\"*Video:html and xhtml overview\"><\/div>\n<\/div>\n\n<script  type='text\/javascript'>\nif (typeof g_hanaFlash !== 'undefined' && !g_hanaFlash){\n    jQuery('#hana_flv_flow3_1').css( 'padding', '5px' );\n\tjQuery('#hana_flv_flow3_1').html(\"<span class='inactive_message' style='display:block'>Sorry, your browser does not support Flash Video Player<\/span> *Video:html and xhtml overview\");\n}else{\t\t\t\n\t\tflowplayer('hana_flv_flow3_1', { src: 'https:\/\/emeclasses.org\/wp-content\/plugins\/hana-flv-player\/flowplayer3\/flowplayer-3.2.7.swf', wmode: 'transparent' }, { \n\n\t\t\tcanvas: { backgroundColor: '#000000', backgroundGradient: 'none',},\n    \t\tclip:  { \n    \t\t\turl: 'http:\/\/rkenny.org\/6207\/html_primer.flv',\n        \t\tscaling: 'scale', autoPlay: false, autoBuffering: true \n\t\t\t\t   , onFinish : function () { this.seek(0); }  \n\n\t        }\n\n\t\t});\n}\n<\/script>[\/one_third][one_third_last]..[\/one_third_last]<\/p>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div>\n<h3>HTML Syntax Review (In case you simply cannot get enough!)<\/h3>\n<p>I could spell out here a step by step guide to HTML coding but w3Schools has done that for us, so no need to reinvent the wheel. Their tutorial is a cookbook approach with a try it activity for each chapter, as well as a self-test. You are sort of on you honor here but there is an activity at the end of this module, so it may behoove you to review these materials:<\/p>\n<p><a href=\"http:\/\/www.w3schools.com\/html\/\" target=\"_blank\">HTML Basics<\/a><br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div><\/p>\n<h3>In case you are a visual learner, here are a couple of YouTube videos that further review the basics:<\/h3>\n<p>(<strong>This one is a bit dated but does show much of what is still a part of current html coding<\/strong>)<br \/>\n<div class=\"su-youtube su-u-responsive-media-yes\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/v4oN4DuR7YU?autohide=2&amp;autoplay=0&amp;mute=0&amp;controls=1&amp;fs=1&amp;loop=0&amp;modestbranding=0&amp;rel=1&amp;showinfo=1&amp;theme=dark&amp;wmode=&amp;playsinline=0\" frameborder=\"0\" allowfullscreen allow=\"autoplay; encrypted-media; picture-in-picture\" title=\"\"><\/iframe><\/div><br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div><br \/>\n(<strong>This is the second (of four) in the basics videos that began with the above<\/strong>)<br \/>\n<div class=\"su-youtube su-u-responsive-media-yes\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/b2BRS90baOY?autohide=2&amp;autoplay=0&amp;mute=0&amp;controls=1&amp;fs=1&amp;loop=0&amp;modestbranding=0&amp;rel=1&amp;showinfo=1&amp;theme=dark&amp;wmode=&amp;playsinline=0\" frameborder=\"0\" allowfullscreen allow=\"autoplay; encrypted-media; picture-in-picture\" title=\"\"><\/iframe><\/div><br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div><br \/>\nIn essence, HTML is a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Markup_language\" target=\"_blank\"><strong>markup language<\/strong><\/a>. You may or may not know it but ALL formatted text (even a Word document) has underlying coding that creates the bold, italics, indents, etc.<\/p>\n<h3>Just as an example, take a look at this seemingly simple letter:<\/h3>\n<span class=\"su-lightbox\" data-mfp-src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2014\/11\/doc-let.jpg\" data-mfp-type=\"iframe\" data-mobile=\"yes\"><a href=\"https:\/\/emeclasses.org\" class=\"su-button su-button-style-default\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:5px\" target=\"_self\"><span style=\"color:#FFFFFF;padding:0px 16px;font-size:13px;line-height:26px;border-color:#6cadf4;border-radius:5px;text-shadow:none\">  Click to see the letter<\/span><\/a><\/span>\n<h3>Here is what that same letter looks like under the skins:<\/h3>\n<span class=\"su-lightbox\" data-mfp-src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2014\/11\/doc-code.jpg\" data-mfp-type=\"iframe\" data-mobile=\"yes\"><a href=\"https:\/\/emeclasses.org\" class=\"su-button su-button-style-default\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:5px\" target=\"_self\"><span style=\"color:#FFFFFF;padding:0px 16px;font-size:13px;line-height:26px;border-color:#6cadf4;border-radius:5px;text-shadow:none\">  Click to see the coding behind the letter<\/span><\/a><\/span>\n<h3>So, all HTML does is to tell a browser how to format that text.<\/h3>\n<p>Well that is not exactly true. HTML also helps with context of the words a little bit but that is left to another set of coding syntax called <a href=\"http:\/\/www.w3schools.com\/xml\/default.asp\" target=\"_blank\"><strong>xml<\/strong><\/a>.<br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div><\/p>\n<h3>\u00a0Formatting\/Characteristics (Use this as a Check Sheet)<\/h3>\n<p>HTML is <a href=\"http:\/\/en.wikipedia.org\/wiki\/ASCII\" target=\"_blank\"><strong>standard (ASCII) text <\/strong><\/a> with embedded format codes. In other words there is no underlying format.. it is text only. that is why you cannot use Word or other document processor to create HTML code. You must use a text editor like Notepad on the PC or Sublime Text\u00a0on a Mac.<\/p>\n<ul>\n<li>HTML uses paired tags (they are set off by opening and closing &lt;&gt; brackets).<\/li>\n<li>If you have an opening tag (like &lt;h3&gt;) you must also have a closing tag (i.e.&lt;\/h3&gt;).<\/li>\n<\/ul>\n<h3>Some basic rules:<\/h3>\n<p>Sometimes the opening and closing tags are specified as one single tag:<\/p>\n<ul>\n<li>For example,The &lt;hr\/&gt; tag means enter a horizontal rule on the page.<\/li>\n<li>the &lt;br\/&gt; tag means a line break.<\/li>\n<\/ul>\n<p>Tags can identify elements or format the structure of document.<\/p>\n<ul>\n<li>&lt;strong&gt;\u00a0<strong>bold<\/strong> &lt;\/strong&gt;\u00a0<em><br \/>\n<\/em><\/li>\n<li>&lt;em&gt;<em> italics<\/em>&lt;\/em&gt;<\/li>\n<li><em>&lt;<\/em>u&gt; <span style=\"text-decoration: underline;\">underlining<\/span>&lt;\/u&gt; , etc.<\/li>\n<\/ul>\n<h3>Document Structuring<\/h3>\n<h4>Titles in HTML<\/h4>\n<p>Titles appear in the title bar of the page. Ever notice when you open a page on the tab at the top there is a title?\u00a0The title bar may say &#8220;Untitled Document&#8221;\u00a0 that is because no titles were specified.<\/p>\n<h4>Headings in HTML<\/h4>\n<p>Headings of different weights are used to introduce sections<\/p>\n<h2>&lt;h2&gt; &lt;\/h2&gt; tag<\/h2>\n<p>is larger than<\/p>\n<h3>&lt;h3&gt; &lt;\/h3&gt; tag<\/h3>\n<p>which is bigger than<\/p>\n<h4>&lt;h4&gt; &lt;\/h4&gt; tag<\/h4>\n<p>Nested headings are especially important in HTML as they are used to define sections of the text. \u00a0You shouldn&#8217;t start a section with an h2 if you have not already used an h1.<\/p>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div>\n<h4>Text in HTML<\/h4>\n<ul>\n<li>simple text is enclosed in paragraph <code>&lt;p&gt;&lt;\/p&gt;<\/code> tags<\/li>\n<li>break &lt;br&gt; tags help to format lines<\/li>\n<li>font faces and other attributes may be specified. You can go from the simple to more complex<\/li>\n<li>font size may be numbered using absolute values between 1 and 7<\/li>\n<li>font size may be sized relatively using +<em>n<\/em> or &#8211;<em>n<\/em> (where <em>n<\/em> is <span style=\"color: #000000;\">some integer<\/span>)<\/li>\n<\/ul>\n<h4>Color<\/h4>\n<ul>\n<li>\u00a0Simply specifying &#8216;Red&#8217; is browser\u2019s way of mapping to one of a 256-color indexed Red Green Blue palette of colors. A <a href=\"http:\/\/en.wikipedia.org\/wiki\/Web_colors\" target=\"_blank\"><strong>\u2018web-safe\u2019 color<\/strong> <\/a>is one of a special palette of 256 others (originally designated by Netscape) that are consistently represented, regardless of platform<\/li>\n<li>You may also get very specific by coding a set in what is called hexadecimal coding. For example to <span style=\"color: #ff0000;\">make this red<\/span> I coded <strong><span style=\"color: #ff0000;\">make this red<\/span><\/strong><\/li>\n<\/ul>\n<p><strong>The hexadecimal numbers represent a reference to a chart that is recognized by all Web Browsers:<\/strong><\/p>\n\n<!-- iframe plugin v.6.0 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"100%\" height=\"480\" src=\"http:\/\/www.webmonkey.com\/2010\/02\/color_charts\/\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>To see how this works, click on the image below in various spots to change the color. The notice how the hex reference changes in the dialog box below it.<\/p>\n\n<!-- iframe plugin v.6.0 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"100%\" height=\"480\" src=\"http:\/\/www.2createawebsite.com\/build\/hex-colors.html#colorgenerator\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<h4>Lists<\/h4>\n<ol>\n<li>ordered lists (automatically numbered) Coding is &lt;ol&gt; for an ordered list. The numbered list is generated by the &lt;li&gt; &lt;\/li&gt; tags surrounding each line item. Then you close it with an &lt;\/o&gt; tag. \u00a0Ordered lists should be used when order of the elements is important.<\/li>\n<\/ol>\n<pre>&lt;ol&gt;\r\n  &lt;li&gt;Wake up&lt;\/li&gt;\r\n  &lt;li&gt;Eat Breakfast&lt;\/li&gt;\r\n  &lt;li&gt;Brush Teeth&lt;\/li&gt;\r\n&lt;\/ol&gt;<\/pre>\n<ul>\n<li>Unordered lists (bullet points). Coding is &lt;ul&gt; for unordered list. Each bullet is also generated by the the &lt;li&gt; &lt;\/li&gt; tags surrounding each line item. Then you close the list with a &lt;\/ul&gt; tag. \u00a0Unordered lists should be used when order is not important<\/li>\n<\/ul>\n<pre>&lt;ul&gt;\r\n  &lt;li&gt;Banana&lt;\/li&gt;\r\n  &lt;li&gt;Orange&lt;\/li&gt;\r\n  &lt;li&gt;Apple&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/pre>\n<h4>\u00a0Inline Graphics<\/h4>\n<ul>\n<li>Images that are placed on the page along with text and other elements. There is a special set of codes you must use to specify the image and where it is located.<\/li>\n<li>Web pages are restricted to accept only certain image file formats (.gif, .jpg, and .png)<\/li>\n<li>The html document must be able to reach to image file for it to be embedded in the document. \u00a0The image file is really merged with the document like when you add an image to a word document.<\/li>\n<li>The image tag uses html\u00a0properties to define when the image is located in relation to the html document. \u00a0In the below example, the property is <code>src<\/code> and it is defined as <code>myImage.jpg<\/code>. \u00a0The double quotes are mandatory.<\/li>\n<\/ul>\n<pre>&lt;img src=\"myImage.jpg\"&gt;<\/pre>\n<h4>Hyperlinks<\/h4>\n<ul>\n<li>Hyperlinks are references to other elements: pages, images, resources, etc.<\/li>\n<li>They cause an automatic request for linked element. The hyper link for this page is <a href=\"http:\/\/rkenny.org\">The text you place here is highlighted on the page and made linkable.<\/a><\/li>\n<li>There are of course tons and tons more but this is enough for our purposes. The intent here is to introduce you to the concept and have you do a couple for fun.<\/li>\n<li>The hyperlink tag is more traditionally refered to as an anchor or <code>&lt;a&gt;&lt;\/a&gt;<\/code> and uses the <code>href<\/code> property<\/li>\n<\/ul>\n<pre>&lt;a href=\"http:\/\/google.com\"&gt;Click here to go to google&lt;\/a&gt;<\/pre>\n<h3><a href=\"http:\/\/www.w3.org\/MarkUp\/Guide\/\" target=\"_blank\">Ok.. ok.. One Last review: Dave Raggett&#8217;s Intro to HTML Basics<\/a><\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div>\n<h3>What is HTML 5.0?<\/h3>\n<p>HTML 5.0 now the HTML Standard. Again, I could provide a detailed explanation but w3.org has already done that. Note that standards upgrades are often 7-8 year projects. Therefore, when you first hear about them, it may seem like it will never take place. This first link explains the whole process and even provides a chronology with details of every revision of the standards as it progresses along the 7-8 yr cycle.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/html5-diff\/\" target=\"_blank\">HTML 5.0 Differences from HTML 4.0<\/a><\/li>\n<li><a href=\"http:\/\/www.smashingmagazine.com\/2009\/07\/16\/html5-and-the-future-of-the-web\/\" target=\"_blank\">HTML 5 and the Future of the Web<\/a><\/li>\n<\/ul>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div>\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#0033cc;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#3366ff;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">Do This!<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\"><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2013\/06\/dothis.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-37098\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2013\/06\/dothis.gif\" alt=\"dothis\" width=\"60\" height=\"48\" \/><\/a><\/p>\n<p>To make sure you understand the basics of HTML, let&#8217;s do an activity.<\/p>\n<ol>\n<li>On your computer, open up the text editor (either Notepad on a PC or an open source text editor on the Mac such as <a href=\"https:\/\/www.sublimetext.com\/\"><b>Sublime Text<\/b><\/a>). TextEdit on the Mac is not really a good text editor because it saves in Microsoft RTF format by default, even if you save it as an html. IN SHORT, DO NOT USE WORD, PAGES, WORDPAD, TEXTEDIT, OR ANY OTHER WORD PROCESSOR, AS IT WILL ADD PROPRIETARY, INTERNAL FORMATTING WHEN YOU SAVE THE FILE, REGARDLESS OF THE FILE EXTENSION YOU CHOOSE. \u00a0This formatting is almost the same as html.<\/li>\n<li>Replicate using html code what is displayed in the iframe below. Save it as a .html document (override the .txt extension that is automatically added as default). Alternatively you can create the code then <a href=\"http:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_intro\"><strong>copy\/paste it on the w3c schools.net try it page.<\/strong><\/a><\/li>\n<li>When done, open the file inside a browser (File, Open or simply drop the file on the browser window). See if your manually created Web page looks like the sample.<\/li>\n<li>You are on your honor here. Post on Canvas (in the Drop Box found under the Assignments Menu Tabs) a confirmation by answering the one question survey indicating you were successful in recreating the page.<\/li>\n<\/ol>\n<p><div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div><\/p>\n<h3>Here is the example page that you need to replicate as a Web page using HTML:<\/h3>\n<p>[pdf http:\/\/rkenny.org\/6207\/html.pdf]<\/div><\/div>\n<p><div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:4px;border-color:#0d2ad3\"><\/div><br \/>\nWhen you are done, go to the <a href=\"\/?p=32812\">lesson on How Browsers Work<\/a> and create a small site using a Visual Line editor (VLE)&#8230;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Basics The basic coding structure beneath all Web pages is based on hypertext mark-up language (HTML). It as gone through several changes over the years but the basics are relatively the same. This lesson is simply to introduce you to some of the fundamentals. You are not expected to become experts in this but [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[96],"tags":[],"class_list":["post-32809","post","type-post","status-publish","format-standard","hentry","category-tech-ed-6207"],"_links":{"self":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/32809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32809"}],"version-history":[{"count":8,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/32809\/revisions"}],"predecessor-version":[{"id":46035,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/32809\/revisions\/46035"}],"wp:attachment":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=32809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=32809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}