{"id":78,"date":"2014-08-20T10:54:40","date_gmt":"2014-08-20T10:54:40","guid":{"rendered":"http:\/\/art556.com\/?page_id=78"},"modified":"2014-08-20T10:54:40","modified_gmt":"2014-08-20T10:54:40","slug":"intro-to-html5-and-css3","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/topics\/unit-1-fundamentals\/intro-to-html5-and-css3\/","title":{"rendered":"Intro to html5 and css3"},"content":{"rendered":"<p class=\"p1\"><strong>HTML :<\/strong> Hyper Text Markup Language<\/p>\n<ul>\n<li>&lt;!doctype html&gt; tells the browser this is a html5 document.<\/li>\n<li>Tags are used to define elements. They have opening &lt;&gt; and closing &lt;\/&gt; brackets.<\/li>\n<li>The text between &lt;html&gt; and &lt;\/html&gt; defines the beginning and end of the page.<\/li>\n<li>The text between &lt;head&gt; and &lt;\/head&gt; describe properties of the page.<\/li>\n<li>The text between &lt;body&gt; and &lt;\/body&gt; contains the visible page content.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/08\/examplesofBodyTags.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-929\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/08\/examplesofBodyTags-300x202.jpg\" alt=\"\" width=\"300\" height=\"202\" \/><\/a> <a href=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/08\/examplesofHeadTags.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-930\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/08\/examplesofHeadTags-300x211.jpg\" alt=\"\" width=\"300\" height=\"211\" \/><\/a><\/p>\n<h3 class=\"p1\">exercise :<\/h3>\n<ul>\n<li class=\"p2\">Using Dreamweaver, build simple page<br \/>\nwith type.<\/li>\n<li class=\"p2\">Save it in the unit1 folder.<\/li>\n<li class=\"p2\">FTP it to your site.<\/li>\n<li class=\"p2\">View it in a browser.<b>\u00a0<\/b><\/li>\n<\/ul>\n<p class=\"p1\"><strong>Type Defined by HTML<\/strong><br \/>\nMuch like style sheets are used in InDesign, styles are applied to type in web pages with both html and css.<\/p>\n<p class=\"p1\">The text between &lt;h1&gt; and &lt;\/h1&gt; is displayed as a heading<br \/>\nThe text between &lt;p&gt; and &lt;\/p&gt; is displayed as a paragraph<br \/>\nline breaks : &lt;br&gt;<br \/>\nin-line formatting :\u00a0<span class=\"s1\"> bold &lt;b&gt;, ital &lt;i&gt;<\/span><\/p>\n<p class=\"p1\">&lt;p&gt; Once upon a &lt;i&gt;midnight dreary, &lt;\/i&gt; \u00a0<span class=\"s1\">while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore,&#8230;&lt;\/p&gt;<\/span><\/p>\n<p class=\"p2\"><b>Headings defined by HTML are important<\/b><\/p>\n<ul>\n<li>Use HTML headings for headings only. Don\u2019t use headings to make text BIG or bold.<\/li>\n<li>Search engines use your headings to index the structure and content of your web pages.<\/li>\n<li>Headings allow your viewers to\u00a0skim the page.<\/li>\n<li>H1 headings are the most important, followed by H2 headings, then H3 headings, and so on.<\/li>\n<\/ul>\n<h3 class=\"p1\"><b>exercise :<\/b><\/h3>\n<ul>\n<li class=\"p2\">\n<p class=\"p1\">Copy and paste your poem\/lyrics into the &lt;p&gt; section. of the previous exercise.<\/p>\n<\/li>\n<li class=\"p2\">\n<p class=\"p1\"><span style=\"font-size: 1rem;\">Modify the copy with the following tags:<\/span><span class=\"Apple-converted-space\" style=\"font-size: 1rem;\">\u00a0 <\/span><span style=\"font-size: 1rem;\">h1, p, br, b and i<\/span><\/p>\n<\/li>\n<li class=\"p2\">FTP it to your site.<\/li>\n<li class=\"p2\">View it in a browser.<\/li>\n<\/ul>\n<p class=\"p1\"><strong>CSS<\/strong><br \/>\nType styles can be listed inline, internal (in the head) or in an external style sheets. The benefit of external style sheets is that you can make a change on the one style sheet and it will apply to all pages.<\/p>\n<ul>\n<li>External style sheets are saved as\u00a0.css files.<\/li>\n<li>CSS : cascading style sheets<\/li>\n<li>A css rule consists of a selector and declaration block:<\/li>\n<li>h1 { color: blue; font-size: 12px; }<\/li>\n<li>The declaration block is surrounded by brackets.<\/li>\n<li>The declarations are separated by semicolons.<\/li>\n<li>The declarations are composed of properties and values : color is a property and blue is the value.<\/li>\n<\/ul>\n<h3 class=\"p1\"><b>exercise:<\/b><\/h3>\n<ul>\n<li class=\"p2\">Create a cascading style sheet named style.css and save it in the unit_1 folder.<\/li>\n<li class=\"p2\">Link the style sheet to your existing exercise file.<\/li>\n<li class=\"p2\">Add tags for H1, H2 and p<\/li>\n<li class=\"p2\">Add the following declarations to each selector and modify them:<br \/>\ncolor: blue; font-size: 12px; line-height: 18px;<\/li>\n<li class=\"p2\">FTP both the html and css files to your site.<\/li>\n<li class=\"p2\">View the html file in a browser. Modify it until it reads well in your browser.<\/li>\n<\/ul>\n<h4>sample pages<\/h4>\n<p><a href=\"http:\/\/art556.com\/unit1\/basichtml5.html\">basic page in html<\/a><\/p>\n<p><a href=\"http:\/\/art556.com\/unit1\/typedefinedbyHTML.html\">type defined by html<\/a><\/p>\n<p><a href=\"http:\/\/art556.com\/unit1\/inlineCSS.html\">type defined by inline css<\/a><\/p>\n<p><a href=\"http:\/\/art556.com\/unit1\/typedefinedbyCSS.html\">type defined by css internally<\/a><\/p>\n<p><a href=\"http:\/\/art556.com\/unit1\/externalcss.html\">type defined by css externally<\/a><\/p>\n<h4>\u00a0don&#8217;t get it?\u00a0Learn more:<\/h4>\n<p><a href=\"http:\/\/www.w3schools.com\/html\/html_intro.asp\">html<\/a><\/p>\n<p><a href=\"http:\/\/www.w3schools.com\/html\/html_css.asp\">css<\/a><\/p>\n<h4>references<\/h4>\n<p><a href=\"http:\/\/www.w3schools.com\/cssref\/default.asp\">a long list of css properties<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML : Hyper Text Markup Language &lt;!doctype html&gt; tells the browser this is a html5 document. Tags are used to define elements. They have opening &lt;&gt; and closing &lt;\/&gt; brackets. The text between &lt;html&gt; and &lt;\/html&gt; defines the beginning and end of the page. The text between &lt;head&gt; and &lt;\/head&gt; describe properties of the page. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":22,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-78","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":1,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/78\/revisions"}],"predecessor-version":[{"id":1315,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/78\/revisions\/1315"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/22"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}