{"id":22,"date":"2020-08-01T14:09:57","date_gmt":"2020-08-01T18:09:57","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/chapter\/tutorial-1-%e2%80%a2-getting-started\/"},"modified":"2021-07-23T15:10:19","modified_gmt":"2021-07-23T19:10:19","slug":"tutorial-1-getting-started","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/chapter\/tutorial-1-getting-started\/","title":{"raw":"Tutorial 1 \u2022 Getting Started","rendered":"Tutorial 1 \u2022 Getting Started"},"content":{"raw":"<div class=\"tutorial-1-\u2022-getting-started\">\r\n<h1>Page Layout for the Web<\/h1>\r\nWeb pages differ from print pages in that the designer never knows what computer, device, operating system, monitor, screen, browser, or window size the reader will be using. The page size is determined by the user\u2019s browser window, so you can only control:\r\n<ul>\r\n \t<li>order of page elements (tags)<\/li>\r\n \t<li>tag width and height<\/li>\r\n \t<li>spacing around the tag (margin or padding)<\/li>\r\n \t<li>text wrap (\u201cfloat\u201d)<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_55\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page.jpg\" alt=\"\" width=\"1024\" height=\"723\" class=\"wp-image-55 size-full\" \/><\/a> Web page with positioning characteristics outlined.[\/caption]\r\n<h2>Tags<\/h2>\r\n<strong>HTML.<\/strong> Web pages are described in the hypertext markup language (HTML) and styled using cascading style sheets (CSS). Page elements like paragraphs, headings, and images are specified in tags, enclosed in less-than and greater-than symbols, such as opening &lt;p&gt; and closing &lt;\/p&gt;, for paragraph. The tags are similar to highlighting, by telling where the highlight color should start and where it should end.\r\n\r\n&nbsp;\r\n<table style=\"border-collapse: collapse;width: 67%;margin: 0 auto\" border=\"0\">\r\n<tbody>\r\n<tr style=\"background: whitesmoke\">\r\n<th colspan=\"2\">Commonly Used HTML Tags<\/th>\r\n<\/tr>\r\n<tr>\r\n<th style=\"width: 40%\">tag<\/th>\r\n<th style=\"width: 60%\">meaning<\/th>\r\n<\/tr>\r\n<tr>\r\n<td><strong>&lt;p&gt;&lt;\/p&gt;<\/strong><\/td>\r\n<td>paragraph<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>&lt;h1&gt;&lt;\/h1&gt; to &lt;h6&gt;<\/strong><\/td>\r\n<td>heading, h1 largest and h6 smallest<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>&lt;img \/&gt;<\/strong><\/td>\r\n<td>image (self-closing)<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>&lt;div&gt;&lt;\/div&gt;<\/strong><\/td>\r\n<td>division, used to create a text or picture box or to group items<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>&lt;ul&gt;&lt;\/ul&gt;<\/strong><\/td>\r\n<td>unordered list (bullet points, each point is a &lt;li&gt;&lt;\/li&gt;\r\nNote: &lt;ul&gt; and &lt;li&gt; are sometimes used to create menus)<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>&lt;ol&gt;&lt;\/ol&gt;<\/strong><\/td>\r\n<td>ordered list (numbered items, each is &lt;li&gt;&lt;\/li&gt;)<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n&nbsp;\r\n\r\n<strong>CSS.<\/strong> Styles can be specified directly in the tag (\u201clocal\u201d or \u201cinline\u201d styles), in the head of the document (\u201cglobal\u201d or \u201cembedded\u201d styles), or in a separate, linked file of type .css (\u201ccascading style sheet\u201d). \u201cCSS\u201d has two meanings: (1) the hierarchy of local\/global\/css and (2) a file type of .css. Styles can include size (width, height), spacing (margin, padding), font, color, background, and many other characteristics.\r\n\r\n<strong>Inline and Block-Level Tags.<\/strong> \u201cInline\u201d describes tags that flow one after the other, like characters in a word or words in a paragraph. Example: &lt;img&gt; tag. \u201cBlock-level\u201d refers to tags that have an automatic \u201cparagraph return\u201d after them, so subsequent tags go to separate lines. Examples: &lt;p&gt;, &lt;h1&gt;, &lt;li&gt;, &lt;div&gt;.\r\n\r\n<strong>W3Schools Reference.<\/strong> The site <a href=\"http:\/\/www.w3schools.com\" target=\"_blank\" rel=\"noopener noreferrer\">W3 Schools\u00a0<em>[New Window]<\/em><\/a>\u00a0is a handy reference for HTML tags, CSS styles, and lots of other information about the web. If you are not sure how to create a specific look, try searching the site. Example: You want to create a drop-shadow around an image. Searching for \u201cdrop shadow\u201d will lead to an explanation of the \u201cbox-shadow\u201d and \u201ctext-shadow\u201d styles. Also try searching the web for \u201cCSS drop shadow\u201d; the first entry will probably be from W3Schools.\r\n\r\n[caption id=\"attachment_56\" align=\"aligncenter\" width=\"907\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css-907x1024.jpg\" alt=\"\" width=\"907\" height=\"1024\" class=\"wp-image-56 size-large\" \/><\/a> Tags and styles used to create a simple web page with a heading (h1), three paragraphs (p), an image (img) with text wrap (float), and drop-cap.[\/caption]\r\n<h2>Writing Code in Dreamweaver<\/h2>\r\nAlthough web sites can be created with automated web design sites and content management systems, creative designers and developers manually write HTML and CSS code to get the greatest flexibility in creative designs. Several free HTML editors are available, including SublimeText, Atom, and Brackets. In class we demonstrate in Adobe Dreamweaver because the program\u2019s code hints and built-in browser preview simplify page creation.\r\n\r\nThe authors recommend setting up Dreamweaver in vertical \u201cSplit\u201d view, with the code on the left and the preview on the right.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_338\" align=\"aligncenter\" width=\"928\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined-1024x534.jpg\" alt=\"Adobe Dreamweaver screen\" width=\"928\" height=\"484\" class=\"wp-image-338\" \/><\/a> Adobe Dreamweaver set up with HTML\/CSS code on the left and built-in browser preview on the right, as shown in the View menu (top right).[\/caption]\r\n\r\n&nbsp;\r\n<div style=\"width: 100%;background: azure;margin: 12px auto;border: 1px dotted lightblue;padding: 12px\">\r\n<h2 class=\"import-ListBullet\">Let\u2019s Create a Web Page<\/h2>\r\n<ol>\r\n \t<li class=\"import-ListBullet\">Open the file \u201cgreywolf_START.html\u201d in Dreamweaver and Save As \u201cgreywolf.html.\u201d<\/li>\r\n \t<li class=\"import-ListBullet\">Insert and center Header image: images\/_DSC0067_1004.jpg<\/li>\r\n \t<li class=\"import-ListBullet\">Link to Home (index.html) and The Grey Wolf (greywolf.html) using \"a href\" tags (e.g., &lt;a href=\"index.html\"&gt;Home&lt;\/a&gt;).<\/li>\r\n \t<li class=\"import-ListBullet\">Make \u201cThe Grey Wolf\u201d into a <em>heading<\/em> &lt;h1...h6&gt;, where h1 is the biggest.<\/li>\r\n \t<li class=\"import-ListBullet\">Designate each paragraph with a &lt;p&gt; tag (opening and closing tags).<\/li>\r\n \t<li class=\"import-ListBullet\">Add a <em>local<\/em> or <em>inline<\/em> style to the first &lt;p&gt; tag and select a font you would like to use (e.g., &lt;p style=\"font-family: Georgia;\"&gt;<\/li>\r\n \t<li class=\"import-ListBullet\">Inside the &lt;head&gt; tag, add <em>global<\/em> or <em>embedded<\/em> opening and closing &lt;style&gt; tags. Inside the tags, write selectors for the tags, and style specifications in braces {}. E.g., p {font-family: Georgia;}.<\/li>\r\n \t<li class=\"import-ListBullet\">Insert image \"_DSC0061.jpg\" in front of paragraph, float left with 20px margin.<\/li>\r\n \t<li class=\"import-ListBullet\">Indent the text block left and right.<\/li>\r\n \t<li class=\"import-ListBullet\">Choose and measure light RGB colours from the image, and colour the header and body.<\/li>\r\n<\/ol>\r\n<p class=\"import-ListBullet\" style=\"text-align: center;margin-left: 18pt;text-indent: 18pt\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1.png\" width=\"429.12px\" height=\"437.76px\" alt=\"image\" \/><\/p>\r\n\r\n<\/div>\r\n&nbsp;\r\n<table style=\"margin: 0 auto;line-height: 1.4em\">\r\n<tbody>\r\n<tr style=\"background: whitesmoke\">\r\n<th colspan=\"2\">Some Useful Styles<\/th>\r\n<\/tr>\r\n<tr>\r\n<th width=\"30%\">style<\/th>\r\n<th width=\"70%\">description<\/th>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td style=\"vertical-align: top\">margin: 0 auto;<\/td>\r\n<td style=\"vertical-align: top\">center an item (tag must be block-level and browser must know width in pixels or %)<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"vertical-align: top\">margin: 0 12px 6px 0;<\/td>\r\n<td style=\"vertical-align: top\">margin puts space around objects, numbers go clockwise\u2014top, right, bottom, left<\/td>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td style=\"vertical-align: top\">padding: 0 12px 6px 0;<\/td>\r\n<td style=\"vertical-align: top\">padding adds space from inside the object, whereas margin is space outside the object. E.g., if a tag has background: yellow, padding will expand the yellow color, while margin will not.<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"vertical-align: top\">text-align: center;<\/td>\r\n<td style=\"vertical-align: top\">centers text or anything inside &lt;p&gt; paragraph tags<\/td>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td style=\"vertical-align: top\">font styles<\/td>\r\n<td style=\"vertical-align: top\">\u2022 font-family: Helvetica;\r\n\u2022 font-size: 12pt;\r\n\u2022 font-style: italic;\r\n\u2022 font-weight: bold;\r\n\u2022 line-height: 1.2em;\r\n\u2022 color: dimgray;<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"vertical-align: top\">max-width: 100%;<\/td>\r\n<td style=\"vertical-align: top\">scales items to 100% of window width for \u201cresponsive design\u201d<\/td>\r\n<\/tr>\r\n<tr style=\"background: whitesmoke\">\r\n<td style=\"vertical-align: top\">color: colorname;\r\ncolor: rgb(127,127,127);\r\ncolor: rgba(127,127,127,0.5);<\/td>\r\n<td style=\"vertical-align: top\">\u2022 specify color by name\r\n\u2022 specify by RGB (red, green, and blue values, 0\u2013255), or\r\n\u2022 specify by RGBA (A is opacity, 0\u20131.00, i.e., 0 is transparent and 1.00 is opaque.)<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"vertical-align: top\">body {\r\nwidth: 80%;\r\nmargin: 0 10% 0 10%;\r\n}<\/td>\r\n<td style=\"vertical-align: top\">centers the body and puts at 10% margin around it<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<strong>How to center a tag.<\/strong> A common question is how to center something in a page or within another tag. The \"margin: auto;\" style can be used to center a block-level tag, that is, a tag with a built-in paragraph return, and of known width. These include most text tags (p, h1\u2026h6, ul, ol) but not the img tag, which is inline. To center an image with margin: auto, the image tag must first be styled to \"display: block.\"\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_297\" align=\"aligncenter\" width=\"1024\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p.jpg\"><img style=\"border: 1px solid gray\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p.jpg\" alt=\"\" width=\"1024\" height=\"264\" class=\"size-full wp-image-297\" \/><\/a> Block-level tag\u00a0of known width (256px) centered with the \"margin: auto;\" style. All three of the styles do the same thing. \"Block-level\" means that the paragraph tag has an automatic carriage return at the end, whereas an image tag would not and would need to be set to \"display: block;\" before it could be centered with the auto margin. Alternatively it could be placed inside a paragraph tag set to \"text-align: center;.\"[\/caption]\r\n\r\n<div class=\"tutorial-1-\u2022-getting-started\">\r\n<div style=\"width: 100%;background: azure;margin: 12px auto;border: 1px dotted lightblue;padding: 12px\">\r\n<h2>Organizing Files<\/h2>\r\n<ol>\r\n \t<li><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2.png\" width=\"256\" height=\"279\" alt=\"Screen capture of the root folder organization\" class=\"alignright\" \/>Make a \u201cgold master\u201d folder on your desktop, such as \u201csite,\u201d and place final files in it.<\/li>\r\n \t<li>Place the required .html, .css, and image files for your site into the folder.<\/li>\r\n \t<li>Follow naming conventions for convenience:\r\n<ul>\r\n \t<li>Use all lowercase letters.<\/li>\r\n \t<li>No spaces in file or folder names \u2014 use hyphen (-) or underscore (_) to separate words.<\/li>\r\n \t<li>No absolute links to images, .css, .js, or other files (e.g., \u201cfile\/\/\/MacintoshHD\/images\/image.jpg\u201d) in your documents.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Make sure your home page is called \u201cindex.html\u201d so the file will load automatically when the folder is entered.<\/li>\r\n \t<li>If placing image, .css, and other files in folders, be sure to cite the folder name in the link. E.g., \u201cimages\/image1.jpg\u201d<\/li>\r\n \t<li>If placing .html files in a folder, remember you will have to go up one directory level to get to the index file and other folders. Use \u201c..\/\u201d before the folder name.<\/li>\r\n \t<li>Test the files to make sure all links work and there are no missing images.<\/li>\r\n \t<li>Don\u2019t rename any files after organizing the folder.<\/li>\r\n \t<li>Upload the files to the STW &gt; public_html folder.<\/li>\r\n \t<li>Right-click the folder and set permissions to \u201c755\u201d so the public can read and execute future JavaScript but not write to your files.<\/li>\r\n \t<li>Test your site from a browser to be sure your files can be read from the web.<\/li>\r\n<\/ol>\r\n<table style=\"background: white\">\r\n<tbody>\r\n<tr>\r\n<td style=\"vertical-align: top\"><strong style=\"text-align: initial;font-size: 1em\">FileZilla Settings for File Upload to the Server<\/strong>\r\n\r\nHost: stw.ryerson.ca\r\n\r\nPort: 22\r\n\r\nUser: your short ID (see my.ryerson.ca &gt; Manage My Online Resources &gt; Update Owner Information)\r\n\r\nPassword: same as for my.ryerson.ca<\/td>\r\n<td><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6.png\" alt=\"\" width=\"312\" height=\"464\" class=\"aligncenter wp-image-27 size-full\" \/><\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h2>Submitting Assignments on the Server to D2L<\/h2>\r\n<ol>\r\n \t<li>Place your project on the student web server (STW) and record the link.<\/li>\r\n \t<li>To submit and assignment on D2L, you have to give D2L a file, so you can:\r\n<ul>\r\n \t<li>Create an HTML file with a link to your STW server, and submit this HTML file to D2L.\r\nExample: &lt;a href=\u201chttp:\/\/stw.ryerson.ca\/~r3adams\/challenge1\u201d&gt;Challenge 1&lt;\/a&gt;<\/li>\r\n \t<li>Give D2L a \u201cdummy file\u201d (such as a screen capture of your project), then write the link in the Comments section.<\/li>\r\n \t<li>If all else fails (not preferred), compress your \u201csite\u201d folder with the project and upload the resulting .zip file to D2L.<\/li>\r\n \t<li>Please <strong>refrain from emailing<\/strong> files to the instructors or TAs, as this causes the files to get separated from the D2L assignment and your project will not get marked.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ol>\r\n<\/div>\r\n<h1>Troubleshooting<\/h1>\r\nBelow are three common errors encountered when attempting to view a web page on the server.\r\n\r\n<strong>\u201cNot Found.\u201d<\/strong> The browser cannot find the page you are looking for. Check for:\r\n<ul>\r\n \t<li>If the page(s) is\/are in a folder, include the folder name in URL.<\/li>\r\n \t<li>Make sure the first file is named \u201cindex.html\u201d (do not capitalize the \u201cI\u201d in \u201cindex\u2019).<\/li>\r\n \t<li>Don't put any spaces in any of the file names, as this confuses the server. If necessary, separate words with hyphens or underscores.<\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\n<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4.png\" alt=\"Example of Not Found page\" width=\"687\" height=\"283\" class=\"aligncenter wp-image-25 size-full\" \/><\/a>\r\n\r\n<strong>\u201cForbidden.\u201d<\/strong> Permissions have not been set to enable the public to see your files.\r\n<ul>\r\n \t<li>In FileZilla, right-click &gt; Set Permissions as shown in the screen capture, i.e., set Public permissions to \"Read\" and \"Execute\" (JavaScript).<\/li>\r\n<\/ul>\r\n<table style=\"border-collapse: collapse;width: 80%;margin: 0 auto;text-align: center\" border=\"0\">\r\n<tbody>\r\n<tr style=\"text-align: center\">\r\n<td style=\"width: 60%\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5.png\" alt=\"\" width=\"595\" height=\"260\" class=\"aligncenter size-full wp-image-26\" \/><\/a><\/td>\r\n<td style=\"width: 40%\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6.png\" width=\"212\" height=\"auto\" alt=\"image\" class=\"aligncenter\" \/><\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 60%\" colspan=\"2\"><em>Set File Permissions to allow the public to view your files and interact with any Javascript they contain.<\/em><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n&nbsp;\r\n\r\n<strong>Missing Photo.<\/strong> The path to the photo has not been properly described in the &lt;img&gt; tag.\r\n<ul>\r\n \t<li>If you put images in a folder, specify the folder name in the image link, e.g., &lt;img src=\"folder\/image.jpg\"&gt;.<\/li>\r\n \t<li>Be sure photos are not set with absolute links, which will default in Dreamweaver if you haven't saved your HTML document before importing images, e.g., file:\/\/\/MacHD\/Users\/richardadams\/Desktop\/image.jpg. Instead, set image links to be relative, e.g., image.jpg or folder\/image.jpg.<\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\n[caption id=\"attachment_168\" align=\"aligncenter\" width=\"512\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image.png\" alt=\"\" width=\"512\" height=\"auto\" class=\"wp-image-168 size-full\" style=\"border: 1px solid gray\" \/><\/a> Missing photo is indicated by the small blue icon below the title.[\/caption]\r\n\r\n<\/div>","rendered":"<div class=\"tutorial-1-\u2022-getting-started\">\n<h1>Page Layout for the Web<\/h1>\n<p>Web pages differ from print pages in that the designer never knows what computer, device, operating system, monitor, screen, browser, or window size the reader will be using. The page size is determined by the user\u2019s browser window, so you can only control:<\/p>\n<ul>\n<li>order of page elements (tags)<\/li>\n<li>tag width and height<\/li>\n<li>spacing around the tag (margin or padding)<\/li>\n<li>text wrap (\u201cfloat\u201d)<\/li>\n<\/ul>\n<figure id=\"attachment_55\" aria-describedby=\"caption-attachment-55\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page.jpg\" alt=\"\" width=\"1024\" height=\"723\" class=\"wp-image-55 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page-300x212.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page-768x542.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page-65x46.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page-225x159.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-page-350x247.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-55\" class=\"wp-caption-text\">Web page with positioning characteristics outlined.<\/figcaption><\/figure>\n<h2>Tags<\/h2>\n<p><strong>HTML.<\/strong> Web pages are described in the hypertext markup language (HTML) and styled using cascading style sheets (CSS). Page elements like paragraphs, headings, and images are specified in tags, enclosed in less-than and greater-than symbols, such as opening &lt;p&gt; and closing &lt;\/p&gt;, for paragraph. The tags are similar to highlighting, by telling where the highlight color should start and where it should end.<\/p>\n<p>&nbsp;<\/p>\n<table style=\"border-collapse: collapse;width: 67%;margin: 0 auto\">\n<tbody>\n<tr style=\"background: whitesmoke\">\n<th colspan=\"2\">Commonly Used HTML Tags<\/th>\n<\/tr>\n<tr>\n<th style=\"width: 40%\">tag<\/th>\n<th style=\"width: 60%\">meaning<\/th>\n<\/tr>\n<tr>\n<td><strong>&lt;p&gt;&lt;\/p&gt;<\/strong><\/td>\n<td>paragraph<\/td>\n<\/tr>\n<tr>\n<td><strong>&lt;h1&gt;&lt;\/h1&gt; to &lt;h6&gt;<\/strong><\/td>\n<td>heading, h1 largest and h6 smallest<\/td>\n<\/tr>\n<tr>\n<td><strong>&lt;img \/&gt;<\/strong><\/td>\n<td>image (self-closing)<\/td>\n<\/tr>\n<tr>\n<td><strong>&lt;div&gt;&lt;\/div&gt;<\/strong><\/td>\n<td>division, used to create a text or picture box or to group items<\/td>\n<\/tr>\n<tr>\n<td><strong>&lt;ul&gt;&lt;\/ul&gt;<\/strong><\/td>\n<td>unordered list (bullet points, each point is a &lt;li&gt;&lt;\/li&gt;<br \/>\nNote: &lt;ul&gt; and &lt;li&gt; are sometimes used to create menus)<\/td>\n<\/tr>\n<tr>\n<td><strong>&lt;ol&gt;&lt;\/ol&gt;<\/strong><\/td>\n<td>ordered list (numbered items, each is &lt;li&gt;&lt;\/li&gt;)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><strong>CSS.<\/strong> Styles can be specified directly in the tag (\u201clocal\u201d or \u201cinline\u201d styles), in the head of the document (\u201cglobal\u201d or \u201cembedded\u201d styles), or in a separate, linked file of type .css (\u201ccascading style sheet\u201d). \u201cCSS\u201d has two meanings: (1) the hierarchy of local\/global\/css and (2) a file type of .css. Styles can include size (width, height), spacing (margin, padding), font, color, background, and many other characteristics.<\/p>\n<p><strong>Inline and Block-Level Tags.<\/strong> \u201cInline\u201d describes tags that flow one after the other, like characters in a word or words in a paragraph. Example: &lt;img&gt; tag. \u201cBlock-level\u201d refers to tags that have an automatic \u201cparagraph return\u201d after them, so subsequent tags go to separate lines. Examples: &lt;p&gt;, &lt;h1&gt;, &lt;li&gt;, &lt;div&gt;.<\/p>\n<p><strong>W3Schools Reference.<\/strong> The site <a href=\"http:\/\/www.w3schools.com\" target=\"_blank\" rel=\"noopener noreferrer\">W3 Schools\u00a0<em>[New Window]<\/em><\/a>\u00a0is a handy reference for HTML tags, CSS styles, and lots of other information about the web. If you are not sure how to create a specific look, try searching the site. Example: You want to create a drop-shadow around an image. Searching for \u201cdrop shadow\u201d will lead to an explanation of the \u201cbox-shadow\u201d and \u201ctext-shadow\u201d styles. Also try searching the web for \u201cCSS drop shadow\u201d; the first entry will probably be from W3Schools.<\/p>\n<figure id=\"attachment_56\" aria-describedby=\"caption-attachment-56\" style=\"width: 907px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css-907x1024.jpg\" alt=\"\" width=\"907\" height=\"1024\" class=\"wp-image-56 size-large\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css-907x1024.jpg 907w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css-266x300.jpg 266w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css-768x867.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css-65x73.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css-225x254.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css-350x395.jpg 350w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/web-css.jpg 1024w\" sizes=\"auto, (max-width: 907px) 100vw, 907px\" \/><\/a><figcaption id=\"caption-attachment-56\" class=\"wp-caption-text\">Tags and styles used to create a simple web page with a heading (h1), three paragraphs (p), an image (img) with text wrap (float), and drop-cap.<\/figcaption><\/figure>\n<h2>Writing Code in Dreamweaver<\/h2>\n<p>Although web sites can be created with automated web design sites and content management systems, creative designers and developers manually write HTML and CSS code to get the greatest flexibility in creative designs. Several free HTML editors are available, including SublimeText, Atom, and Brackets. In class we demonstrate in Adobe Dreamweaver because the program\u2019s code hints and built-in browser preview simplify page creation.<\/p>\n<p>The authors recommend setting up Dreamweaver in vertical \u201cSplit\u201d view, with the code on the left and the preview on the right.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_338\" aria-describedby=\"caption-attachment-338\" style=\"width: 928px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined-1024x534.jpg\" alt=\"Adobe Dreamweaver screen\" width=\"928\" height=\"484\" class=\"wp-image-338\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined-1024x534.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined-300x156.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined-768x401.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined-65x34.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined-225x117.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined-350x183.jpg 350w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_Start_Combined.jpg 1536w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/a><figcaption id=\"caption-attachment-338\" class=\"wp-caption-text\">Adobe Dreamweaver set up with HTML\/CSS code on the left and built-in browser preview on the right, as shown in the View menu (top right).<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<div style=\"width: 100%;background: azure;margin: 12px auto;border: 1px dotted lightblue;padding: 12px\">\n<h2 class=\"import-ListBullet\">Let\u2019s Create a Web Page<\/h2>\n<ol>\n<li class=\"import-ListBullet\">Open the file \u201cgreywolf_START.html\u201d in Dreamweaver and Save As \u201cgreywolf.html.\u201d<\/li>\n<li class=\"import-ListBullet\">Insert and center Header image: images\/_DSC0067_1004.jpg<\/li>\n<li class=\"import-ListBullet\">Link to Home (index.html) and The Grey Wolf (greywolf.html) using &#8220;a href&#8221; tags (e.g., &lt;a href=&#8221;index.html&#8221;&gt;Home&lt;\/a&gt;).<\/li>\n<li class=\"import-ListBullet\">Make \u201cThe Grey Wolf\u201d into a <em>heading<\/em> &lt;h1&#8230;h6&gt;, where h1 is the biggest.<\/li>\n<li class=\"import-ListBullet\">Designate each paragraph with a &lt;p&gt; tag (opening and closing tags).<\/li>\n<li class=\"import-ListBullet\">Add a <em>local<\/em> or <em>inline<\/em> style to the first &lt;p&gt; tag and select a font you would like to use (e.g., &lt;p style=&#8221;font-family: Georgia;&#8221;&gt;<\/li>\n<li class=\"import-ListBullet\">Inside the &lt;head&gt; tag, add <em>global<\/em> or <em>embedded<\/em> opening and closing &lt;style&gt; tags. Inside the tags, write selectors for the tags, and style specifications in braces {}. E.g., p {font-family: Georgia;}.<\/li>\n<li class=\"import-ListBullet\">Insert image &#8220;_DSC0061.jpg&#8221; in front of paragraph, float left with 20px margin.<\/li>\n<li class=\"import-ListBullet\">Indent the text block left and right.<\/li>\n<li class=\"import-ListBullet\">Choose and measure light RGB colours from the image, and colour the header and body.<\/li>\n<\/ol>\n<p class=\"import-ListBullet\" style=\"text-align: center;margin-left: 18pt;text-indent: 18pt\"><img decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image1.png\" width=\"429.12px\" height=\"437.76px\" alt=\"image\" \/><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<table style=\"margin: 0 auto;line-height: 1.4em\">\n<tbody>\n<tr style=\"background: whitesmoke\">\n<th colspan=\"2\">Some Useful Styles<\/th>\n<\/tr>\n<tr>\n<th style=\"width: 30%;\">style<\/th>\n<th style=\"width: 70%;\">description<\/th>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td style=\"vertical-align: top\">margin: 0 auto;<\/td>\n<td style=\"vertical-align: top\">center an item (tag must be block-level and browser must know width in pixels or %)<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top\">margin: 0 12px 6px 0;<\/td>\n<td style=\"vertical-align: top\">margin puts space around objects, numbers go clockwise\u2014top, right, bottom, left<\/td>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td style=\"vertical-align: top\">padding: 0 12px 6px 0;<\/td>\n<td style=\"vertical-align: top\">padding adds space from inside the object, whereas margin is space outside the object. E.g., if a tag has background: yellow, padding will expand the yellow color, while margin will not.<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top\">text-align: center;<\/td>\n<td style=\"vertical-align: top\">centers text or anything inside &lt;p&gt; paragraph tags<\/td>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td style=\"vertical-align: top\">font styles<\/td>\n<td style=\"vertical-align: top\">\u2022 font-family: Helvetica;<br \/>\n\u2022 font-size: 12pt;<br \/>\n\u2022 font-style: italic;<br \/>\n\u2022 font-weight: bold;<br \/>\n\u2022 line-height: 1.2em;<br \/>\n\u2022 color: dimgray;<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top\">max-width: 100%;<\/td>\n<td style=\"vertical-align: top\">scales items to 100% of window width for \u201cresponsive design\u201d<\/td>\n<\/tr>\n<tr style=\"background: whitesmoke\">\n<td style=\"vertical-align: top\">color: colorname;<br \/>\ncolor: rgb(127,127,127);<br \/>\ncolor: rgba(127,127,127,0.5);<\/td>\n<td style=\"vertical-align: top\">\u2022 specify color by name<br \/>\n\u2022 specify by RGB (red, green, and blue values, 0\u2013255), or<br \/>\n\u2022 specify by RGBA (A is opacity, 0\u20131.00, i.e., 0 is transparent and 1.00 is opaque.)<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top\">body {<br \/>\nwidth: 80%;<br \/>\nmargin: 0 10% 0 10%;<br \/>\n}<\/td>\n<td style=\"vertical-align: top\">centers the body and puts at 10% margin around it<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><strong>How to center a tag.<\/strong> A common question is how to center something in a page or within another tag. The &#8220;margin: auto;&#8221; style can be used to center a block-level tag, that is, a tag with a built-in paragraph return, and of known width. These include most text tags (p, h1\u2026h6, ul, ol) but not the img tag, which is inline. To center an image with margin: auto, the image tag must first be styled to &#8220;display: block.&#8221;<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_297\" aria-describedby=\"caption-attachment-297\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"border: 1px solid gray\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p.jpg\" alt=\"\" width=\"1024\" height=\"264\" class=\"size-full wp-image-297\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p-300x77.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p-768x198.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p-65x17.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p-225x58.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/DW-W_centered-p-350x90.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-297\" class=\"wp-caption-text\">Block-level tag\u00a0of known width (256px) centered with the &#8220;margin: auto;&#8221; style. All three of the styles do the same thing. &#8220;Block-level&#8221; means that the paragraph tag has an automatic carriage return at the end, whereas an image tag would not and would need to be set to &#8220;display: block;&#8221; before it could be centered with the auto margin. Alternatively it could be placed inside a paragraph tag set to &#8220;text-align: center;.&#8221;<\/figcaption><\/figure>\n<div class=\"tutorial-1-\u2022-getting-started\">\n<div style=\"width: 100%;background: azure;margin: 12px auto;border: 1px dotted lightblue;padding: 12px\">\n<h2>Organizing Files<\/h2>\n<ol>\n<li><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image2.png\" width=\"256\" height=\"279\" alt=\"Screen capture of the root folder organization\" class=\"alignright\" \/>Make a \u201cgold master\u201d folder on your desktop, such as \u201csite,\u201d and place final files in it.<\/li>\n<li>Place the required .html, .css, and image files for your site into the folder.<\/li>\n<li>Follow naming conventions for convenience:\n<ul>\n<li>Use all lowercase letters.<\/li>\n<li>No spaces in file or folder names \u2014 use hyphen (-) or underscore (_) to separate words.<\/li>\n<li>No absolute links to images, .css, .js, or other files (e.g., \u201cfile\/\/\/MacintoshHD\/images\/image.jpg\u201d) in your documents.<\/li>\n<\/ul>\n<\/li>\n<li>Make sure your home page is called \u201cindex.html\u201d so the file will load automatically when the folder is entered.<\/li>\n<li>If placing image, .css, and other files in folders, be sure to cite the folder name in the link. E.g., \u201cimages\/image1.jpg\u201d<\/li>\n<li>If placing .html files in a folder, remember you will have to go up one directory level to get to the index file and other folders. Use \u201c..\/\u201d before the folder name.<\/li>\n<li>Test the files to make sure all links work and there are no missing images.<\/li>\n<li>Don\u2019t rename any files after organizing the folder.<\/li>\n<li>Upload the files to the STW &gt; public_html folder.<\/li>\n<li>Right-click the folder and set permissions to \u201c755\u201d so the public can read and execute future JavaScript but not write to your files.<\/li>\n<li>Test your site from a browser to be sure your files can be read from the web.<\/li>\n<\/ol>\n<table style=\"background: white\">\n<tbody>\n<tr>\n<td style=\"vertical-align: top\"><strong style=\"text-align: initial;font-size: 1em\">FileZilla Settings for File Upload to the Server<\/strong><\/p>\n<p>Host: stw.ryerson.ca<\/p>\n<p>Port: 22<\/p>\n<p>User: your short ID (see my.ryerson.ca &gt; Manage My Online Resources &gt; Update Owner Information)<\/p>\n<p>Password: same as for my.ryerson.ca<\/td>\n<td><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6.png\" alt=\"\" width=\"312\" height=\"464\" class=\"aligncenter wp-image-27 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6.png 312w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6-202x300.png 202w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6-65x97.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6-225x335.png 225w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Submitting Assignments on the Server to D2L<\/h2>\n<ol>\n<li>Place your project on the student web server (STW) and record the link.<\/li>\n<li>To submit and assignment on D2L, you have to give D2L a file, so you can:\n<ul>\n<li>Create an HTML file with a link to your STW server, and submit this HTML file to D2L.<br \/>\nExample: &lt;a href=\u201chttp:\/\/stw.ryerson.ca\/~r3adams\/challenge1\u201d&gt;Challenge 1&lt;\/a&gt;<\/li>\n<li>Give D2L a \u201cdummy file\u201d (such as a screen capture of your project), then write the link in the Comments section.<\/li>\n<li>If all else fails (not preferred), compress your \u201csite\u201d folder with the project and upload the resulting .zip file to D2L.<\/li>\n<li>Please <strong>refrain from emailing<\/strong> files to the instructors or TAs, as this causes the files to get separated from the D2L assignment and your project will not get marked.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/div>\n<h1>Troubleshooting<\/h1>\n<p>Below are three common errors encountered when attempting to view a web page on the server.<\/p>\n<p><strong>\u201cNot Found.\u201d<\/strong> The browser cannot find the page you are looking for. Check for:<\/p>\n<ul>\n<li>If the page(s) is\/are in a folder, include the folder name in URL.<\/li>\n<li>Make sure the first file is named \u201cindex.html\u201d (do not capitalize the \u201cI\u201d in \u201cindex\u2019).<\/li>\n<li>Don&#8217;t put any spaces in any of the file names, as this confuses the server. If necessary, separate words with hyphens or underscores.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4.png\" alt=\"Example of Not Found page\" width=\"687\" height=\"283\" class=\"aligncenter wp-image-25 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4.png 687w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4-300x124.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4-65x27.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4-225x93.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image4-350x144.png 350w\" sizes=\"auto, (max-width: 687px) 100vw, 687px\" \/><\/a><\/p>\n<p><strong>\u201cForbidden.\u201d<\/strong> Permissions have not been set to enable the public to see your files.<\/p>\n<ul>\n<li>In FileZilla, right-click &gt; Set Permissions as shown in the screen capture, i.e., set Public permissions to &#8220;Read&#8221; and &#8220;Execute&#8221; (JavaScript).<\/li>\n<\/ul>\n<table style=\"border-collapse: collapse;width: 80%;margin: 0 auto;text-align: center\">\n<tbody>\n<tr style=\"text-align: center\">\n<td style=\"width: 60%\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5.png\" alt=\"\" width=\"595\" height=\"260\" class=\"aligncenter size-full wp-image-26\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5.png 595w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5-300x131.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5-65x28.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5-225x98.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image5-350x153.png 350w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" \/><\/a><\/td>\n<td style=\"width: 40%\"><img decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/image6.png\" width=\"212\" height=\"auto\" alt=\"image\" class=\"aligncenter\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 60%\" colspan=\"2\"><em>Set File Permissions to allow the public to view your files and interact with any Javascript they contain.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><strong>Missing Photo.<\/strong> The path to the photo has not been properly described in the &lt;img&gt; tag.<\/p>\n<ul>\n<li>If you put images in a folder, specify the folder name in the image link, e.g., &lt;img src=&#8221;folder\/image.jpg&#8221;&gt;.<\/li>\n<li>Be sure photos are not set with absolute links, which will default in Dreamweaver if you haven&#8217;t saved your HTML document before importing images, e.g., file:\/\/\/MacHD\/Users\/richardadams\/Desktop\/image.jpg. Instead, set image links to be relative, e.g., image.jpg or folder\/image.jpg.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_168\" aria-describedby=\"caption-attachment-168\" style=\"width: 512px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image.png\"><img decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image.png\" alt=\"\" width=\"512\" height=\"auto\" class=\"wp-image-168 size-full\" style=\"border: 1px solid gray\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image.png 400w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image-300x211.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image-65x46.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image-225x158.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-content\/uploads\/sites\/133\/2020\/08\/missing-image-350x246.png 350w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/a><figcaption id=\"caption-attachment-168\" class=\"wp-caption-text\">Missing photo is indicated by the small blue icon below the title.<\/figcaption><\/figure>\n<\/div>\n","protected":false},"author":6,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-22","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":51,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/22\/revisions"}],"predecessor-version":[{"id":393,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/22\/revisions\/393"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/22\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapter-type?post=22"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/contributor?post=22"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/license?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}