{"id":4515,"date":"2023-11-24T10:39:52","date_gmt":"2023-11-24T10:39:52","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=4515"},"modified":"2024-01-11T11:08:18","modified_gmt":"2024-01-11T11:08:18","slug":"helloworld","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/","title":{"rendered":"helloWorld"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"640\" data-attachment-id=\"146\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/concretepoetry\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" data-orig-size=\"617,640\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"concretePoetry\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" alt=\"\" class=\"wp-image-146\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg 617w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-289x300.jpg 289w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-300x311.jpg 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\">3 | concrete poetry<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"289\" data-attachment-id=\"3817\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/helloworld\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/helloworld.png\" data-orig-size=\"289,289\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"helloworld\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/helloworld.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/helloworld.png\" alt=\"\" class=\"wp-image-3817\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/helloworld.png 289w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/helloworld-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/helloworld-100x100.png 100w\" sizes=\"auto, (max-width: 289px) 100vw, 289px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>helloWorld<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f10b663e907\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f10b663e907\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Say_hello_to_the_sample_site\" >Say hello to the sample site<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Materiality_of_the_web\" >Materiality of the web<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Metaphors_of_a_page\" >Metaphors of a page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Code_has_materiality\" >Code has materiality<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Breaking_the_rules\" >Breaking the rules<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#ASCII_art\" >ASCII art<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Hackers_and_painters\" >Hackers and painters<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Hello_HTML\" >Hello HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Your_first_hand-coded_web_page\" >Your first hand-coded web page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Writing_tags_in_a_text_editor\" >Writing tags in a text editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Viewing_in_a_browser\" >Viewing in a browser<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Hello_Dreamweaver\" >Hello Dreamweaver<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Setting_up_the_Split_View\" >Setting up the Split View<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Toggle_Design_and_Live\" >Toggle Design and Live<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#More_HTML\" >More HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Modifying_a_file\" >Modifying a file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Adding_hyperlink_tags\" >Adding hyperlink tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Adding_image_tags\" >Adding image tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Creating_structural_emphasis_for_type\" >Creating structural emphasis for type<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Header_tag\" >Header tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Strong_and_emphasis_tags\" >Strong and emphasis tags<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Hello_CSS\" >Hello CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#%E2%80%9CForm_follows_function%E2%80%9D\" >&#8220;Form follows function&#8221;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Cascading_style_sheets\" >Cascading style sheets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Three_ways_to_apply_styling\" >Three ways to apply styling<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Inline_CSS\" >Inline CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Internal_CSS\" >Internal CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#External_CSS\" >External CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Selectors\" >Selectors<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Classes\" >Classes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#IDs\" >IDs<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Divs_and_spans\" >Divs and spans<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Applying_styles_in_Dreamweaver\" >Applying styles in Dreamweaver<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Prepare_the_project_for_styles\" >Prepare the project for styles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Choosing_CSS_properties\" >Choosing CSS properties<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Create_and_link_an_external_style_sheet\" >Create and link an external style sheet<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Create_CSS_Page_Properties\" >Create CSS Page Properties<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Moving_the_CSS_to_the_external_sheet\" >Moving the CSS to the external sheet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Create_a_new_Dreamweaver_rule\" >Create a new Dreamweaver rule<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Centering_the_text\" >Centering the text<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Create_a_style_by_hand\" >Create a style by hand<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Creating_links_between_pages\" >Creating links between pages<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Clients_and_Servers\" >Clients and Servers<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Defining_a_site\" >Defining a site<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#Uploading_the_site_to_the_server\" >Uploading the site to the server<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<p class=\"has-text-align-center\"><em><strong><a href=\"https:\/\/williamcromar.com\/code_samples\/helloworld\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the sample site here &gt;<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Say_hello_to_the_sample_site\"><\/span>Say hello to the sample site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Hello World<\/strong> has become a tradition in programming: it&#8217;s the first program you write in a new language. First mentioned in&nbsp;a <a href=\"https:\/\/www.bell-labs.com\/usr\/dmr\/www\/bintro.html\">tutorial to the B programming language<\/a>, it was popularized in a 1978 book introducing&nbsp;<a href=\"http:\/\/en.wikipedia.org\/wiki\/The_C_Programming_Language_(book)\">The C Programming Language<\/a>, in a program that looked like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>main() {\n   printf(\"hello, world\\n\");\n}<\/code><\/pre>\n\n\n\n<p>Since <strong>Hello World<\/strong> has shown up in every programming language, we&#8217;ll honor the tradition in the site you&#8217;ll build in this exercise. Have a look at the sample site to say hello!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"375\" data-attachment-id=\"4556\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/cnc\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg\" data-orig-size=\"500,375\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cnc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg\" alt=\"\" class=\"wp-image-4556\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc-300x225.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Hello World CNC toaster, from&nbsp;<a href=\"https:\/\/www.flickr.com\/photos\/oskay\/472097903\" target=\"_blank\" rel=\"noreferrer noopener\">Wendell Oskay<\/a><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Materiality_of_the_web\"><\/span>Materiality of the web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We think of the web as an immaterial space, yet there is a materiality to the web. When architects use the term materiality, they refer to the concept driving the application of materials in the medium of a building. What are the materials of the web artist?<\/p>\n\n\n\n<p>Code. Metaphor. Infrastructure.<\/p>\n\n\n\n<p>In furniture design, certain surfaces \u2014 wood veneers, upholstery, plastic laminates \u2014 overlay others, becoming a kind of virtual material. A fabric imprinted with wood texture depends on our ability to conflate wood and cloth, as well as means of representation (photography and printing) to create it.<\/p>\n\n\n\n<p>On the web, the overlay of real life (RL) through extended metaphor (buttons, galleries, sites, links, menus), combined with means of representation (screen, projection, dot matrix) operates on much the same principle. <\/p>\n\n\n\n<p>All of that is hosted by a remote server (computers, fiber-optic cables, satellites, cell towers, modems). Unlike most traditional tactile media, the materiality of the web is largely hidden. This is not unlike architectural design, where structure, HVAC, wiring, plumbing, and other systems are mostly tucked inside a formal envelope that responds to a functional need. This might explain why a lot of <a href=\"https:\/\/medium.com\/trinity-mirror-digital\/my-journey-from-architecture-to-ux-design-9f974264569e\">people trained in architecture (like me) find a happy second career home in web design<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Metaphors_of_a_page\"><\/span>Metaphors of a page<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The virtual world is largely built on metaphors relating it to tactile experience. We speak of web &#8220;pages&#8221; and push &#8220;buttons&#8221; with our &#8220;mice.&#8221; Icons represent institutions, activities, abstract concepts, and even emotional states.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"434\" height=\"110\" data-attachment-id=\"4531\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/emoticons_puck_1881\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Emoticons_Puck_1881.png\" data-orig-size=\"434,110\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Emoticons_Puck_1881\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Emoticons_Puck_1881.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Emoticons_Puck_1881.png\" alt=\"\" class=\"wp-image-4531\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Emoticons_Puck_1881.png 434w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Emoticons_Puck_1881-300x76.png 300w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Early example of emoji-like typographic designs. Illustration from British humor magazine Puck in 1881, from Wikimedia Commons<br><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>To better understand the role of metaphor, read the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/webdesign.tutsplus.com\/using-metaphors-in-web-design--webdesign-4752a?_ga=2.162847868.1730210863.1700826671-2122669094.1700826671\" target=\"_blank\" rel=\"noreferrer noopener\">Using Metaphors in Web Design<\/a><\/strong> from<strong> tuts+<\/strong> provides a brief overview of metaphors on the net.<\/li>\n\n\n\n<li>Emotion? Easy. Anyone who texts or emails is familiar with&nbsp;<strong>emoticons<\/strong>, the original text-based versions of which have been neatly referenced at&nbsp;<strong><a href=\"http:\/\/pc.net\/emoticons\/\" target=\"_blank\" rel=\"noreferrer noopener\">PC.net<\/a><\/strong>. The idea of the emoticon has roots ranging from concrete poetry and works of visual humor, seen above, to the famous Smiley by <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Harvey_Ball\" target=\"_blank\" rel=\"noreferrer noopener\">Harvey Ball<\/a><\/strong>. <strong><a href=\"http:\/\/en.wikipedia.org\/wiki\/Scott_Fahlman\" target=\"_blank\" rel=\"noreferrer noopener\">Scott Fahlman<\/a><\/strong> is credited with the first use of a visual metaphor expressing emotion in an online message board.<\/li>\n\n\n\n<li>Various compilations of visual metaphor material exist on the web, including collections of buttons, icons, menus, and others to create a meaningful user interface (UI). Explore just a few here:\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"http:\/\/www.iconarchive.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Icon Archive<\/a><\/strong> has a collection of hundreds of image-based icons.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/designmodo.com\/css3-navigation-menus\/\" target=\"_blank\" rel=\"noreferrer noopener\">Designmodo<\/a><\/strong> free web menu page allows the download of code for tabulated menus (think binder dividers with tabs).&nbsp;<\/li>\n\n\n\n<li><strong><a href=\"http:\/\/www.html.am\/html-codes\/forms\/html-checkbox-code.cfm\" target=\"_blank\" rel=\"noreferrer noopener\">HTML.am<\/a><\/strong> creates easy code for lists, checkboxes, and radio buttons.&nbsp;<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/buttons.verticalresponse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Web Buttons Generator<\/a><\/strong> makes custom code for buttons.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>What would the web look like without metaphor? <strong><a href=\"http:\/\/www.digital-foundations.net\/downloads\/floss\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit this link<\/a><\/strong> and you&#8217;ll see. We call this an <strong>unformatted directory.<\/strong> Looks a lot like a stripped-down folder window on your desktop, doesn&#8217;t it? Would you characterize this as a rich user experience (UX)?&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_has_materiality\"><\/span>Code has materiality<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Code is language. Think of code as a material that hides its materiality. When you view a website, what you see is a seamless graphic interface with text, images, and links, but all online media is constructed from code. Code is a set of instructions. Open any page in a web browser and click on <strong>View &gt; Page Source<\/strong> (or equivalent, depending on your browser) to see the code used to create that page. This code tells the browser how to render the media elements into a seamless interface. We create web pages using the <strong>Hypertext Markup Language (HTML)<\/strong>. We write the code so that the browser, which is called a client, can display the interface we create. In this title, we will explore the basics of this code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Breaking_the_rules\"><\/span>Breaking the rules<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<p>We usually program a website to hide the presence of code in a seamless graphic fa\u00e7ade, but experimental artists often revel in exposing it. The artist group <strong>Jodi<\/strong> (Joan Heemskerk and Dirk Paesmans) works extensively with the materiality of code. In the early moments of the dot com boom, when corporations began to stake out an aesthetic and functional claim online, Jodi hosted a series of confrontational pages. Theirs responded to the corporate attempt to professionalize the aesthetics of online media and undermine the presence of code.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"http:\/\/wwwwwwwww.jodi.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit&nbsp;http:\/\/wwwwwwwww.jodi.org\/&nbsp;\u00bb<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p><strong>Wwwwww.jodi.org<\/strong> looks like random text in the browser, but if you view the source you can see a highly structured plan: a diagram of a nuclear bomb is made with the text of the source code.<\/p>\n\n\n\n<p>Jodi threw a bomb at clean design and offered a reward to anyone aware of a web page\u2019s material to view the source code. They took advantage of the phenomenon that, when code is displayed, it does not account for white space. \u201cForgetting\u201d this basic principle allowed Jodi to make a brilliant visual and conceptual argument for breaking the rules. In the early years of the World Wide Web bandwidth was small and social media was not even a twinkle in Mark Zuckerberg&#8217;s eye. A large amount of communication took place on text-only <strong>listservs<\/strong>, <strong>chat rooms<\/strong>, <strong>multi-user dungeons<\/strong> (MUDs), and<strong> bulletin board servers<\/strong> (BBS). Pages had few images on them because they took too long to download. In the absence of high-resolution images, people found creative ways of drawing with text.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ASCII_art\"><\/span>ASCII art<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Drawings made by arranging the 128 characters that are part of the American Standard Code for Information Interchange are <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/ASCII_art\" target=\"_blank\" rel=\"noreferrer noopener\">ASCII art<\/a><\/strong>. Loosely defined, we create ASCII art (pronounced <em>ASK-ee<\/em>) by using text, usually in the form of figurative drawings. The shapes and densities of the characters are treated purely as formal elements to construct line, form, and shading. As an example, Heath Bunting\u2019s 1998 portrait of early net artist Natalie Bookchin can be seen on his website.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><a href=\"http:\/\/www.irational.org\/heath\/imaging_natalie\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Visit Heath Bunting&#8217;s site &gt;<\/em><\/a><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hackers_and_painters\"><\/span>Hackers and painters<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Paul Graham develops strong parallels and links between the world of the hacker (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Hacker\" target=\"_blank\" rel=\"noreferrer noopener\">in the original sense of the term<\/a>) and the world of the artist in his seminal essay&nbsp;<strong>Hackers and Painters<\/strong>. It&#8217;s a 20-minute read worth every minute.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><em><strong><a href=\"http:\/\/www.paulgraham.com\/hp.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Hackers and Painters \u00bb<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hello_HTML\"><\/span>Hello HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Your_first_hand-coded_web_page\"><\/span>Your first hand-coded web page<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>With the materiality of code in mind, you will construct your first web page created from scratch. Before starting, we cannot stress enough that<em> you must be aware of where your files are saved when you are working on projects that involve code<\/em>. For this chapter, depending on where you are working:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you&#8217;re working on a personal machine, locate the root directory on the SFTP reference page as you assigned it. Dreamweaver will remember this root from the work you did on that page.<\/li>\n\n\n\n<li>If you&#8217;re working on a networked computer lab machine, create a folder on your desktop and name it something logical like <strong>www-local<\/strong>. Because this is a networked machine, you have to redefine the root every time you begin a design session. Visit <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/sftp\/\">SFTP<\/a><\/strong> for reference if needed.<\/li>\n<\/ul>\n\n\n\n<p>Inside the root folder, create another folder called <strong>helloworld<\/strong>. Commit to saving everything that you make from or related to this chapter into the <strong>helloworld<\/strong> folder. Do not make any other sub-folders yet.<\/p>\n\n\n\n<p>Open a text editing application, such as <strong><a href=\"https:\/\/macromates.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Text Mate<\/a><\/strong>. It&#8217;s a free download if you don&#8217;t have it on a personal machine. On a PC, use <strong>Note Pad<\/strong>. You&#8217;ll use it to start writing code from scratch.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Writing_tags_in_a_text_editor\"><\/span>Writing tags in a text editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>In HTML, a <strong>tag<\/strong> &#8220;marks up&#8221; the content of a file, giving instructions regarding the display of content to a browser application reading the document.&nbsp;In your new document, type the opening and closing <strong>HTML tags<\/strong> as seen adjacent.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Every tag must <em>open<\/em> and <em>close<\/em>, so they always come in pairs, with a slash used in the second one to close it. Tags act parenthetically, meaning tags will affect anything we insert between them. The HTML tag tells the browser that it is reading the <strong>Hyper Text Markup Language<\/strong>.<\/p>\n\n\n\n<p>Position your cursor after the opening HTML tag. Hit <strong>Enter<\/strong> and press the<strong> Tab<\/strong> key. While it does not affect the display or functionality of the code, we use tabbing to add visible structure to the code so that it is human-readable. The browser ignores all white spaces and tabs, but code can get quite complex without negative space to help you visually navigate it.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Type in the opening and closing <strong>body tags<\/strong>.&nbsp;The web page will display all content we place inside the body tag.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n   &lt;body&gt;\n\n   &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Now, let&#8217;s add actual content. Inside the body tag, type <strong>Hello World!<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n   &lt;body&gt;\n   Hello World!\n   &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Save the file as <strong>index.html<\/strong>. The word <strong>index<\/strong> always means the home page of a website. Browsers are programmed to find and open any page named <strong>index<\/strong>. Make sure that you add&nbsp;<strong>.html<\/strong>&nbsp;to the end of the file name. The file extension is important. It communicates to the browser that this is a <strong>.html<\/strong> file.<\/p>\n\n\n\n<p><em><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Remember: When saving files for the web, do not use capital letters, spaces, or reserved characters like (! + @ &amp; = ?) Only use a-z, 1-9, -, and _.<\/mark><\/strong><\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Viewing_in_a_browser\"><\/span>Viewing in a browser<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Open a web browser (we used <strong>Chrome<\/strong>), click<strong> File &gt; Open,<\/strong> and navigate to the&nbsp;<strong>index.html<\/strong>&nbsp;file. Notice that <strong>Hello World!<\/strong> is the only visible part of the code. However, you can display the code: go to <strong>View &gt; Developer &gt; View Source<\/strong>, or<strong> right-click<\/strong> in the browser window and select<strong> View Page Source<\/strong> in the contextual dropout menu. Wording and workflow may differ from browser to browser, but all modern browsers have this capability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hello_Dreamweaver\"><\/span>Hello Dreamweaver<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We wrote the Hello World! code above using a text editing program. A text editor is the only application necessary for writing code. Code can be laborious when the content in the browser is more complicated than Hello World! Most artists and designers prefer to use a <strong>WYSIWYG<\/strong> (what you see is what you get, and pronounced &#8220;wizzywig&#8221;) application such as <strong>Dreamweaver<\/strong> to develop code. Dreamweaver can actually &#8220;write&#8221; the code for you, which makes creating the HTML file much easier\u2014although it&#8217;s good to know how to write the code yourself. We&#8217;ll do both.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_up_the_Split_View\"><\/span>Setting up the Split View<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In this exercise, we will modify the file we just made.&nbsp;Open <strong>Dreamweaver<\/strong> from the <strong>Dock<\/strong> or<strong> Applications Folder<\/strong>. In Dreamweaver click <strong>File &gt; Open<\/strong> and navigate to your<strong> index.html<\/strong> file. When it opens, in the upper center of the user interface (UI) select <strong>Split View<\/strong>. Split View displays both the code and the result of the code like a browser. Another way to think about this is that the code view is the instructions to the browser and the design view is the way the media looks in the browser. If the screen splits horizontally, it&#8217;s pretty terrible for writing code. You can switch it to a more useful vertical split by going to the menu <strong>View &gt; Split &gt; Split Vertically<\/strong> and selecting it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4674\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw0223a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0223a.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw0223a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0223a-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0223a-1024x634.png\" alt=\"\" class=\"wp-image-4674\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0223a-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0223a-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0223a-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0223a-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0223a-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>In <strong>Split View<\/strong>, find <strong>Code<\/strong> on one side and <strong>Live<\/strong> on the other.  You can toggle that side between <strong>Live<\/strong> or<strong> Design<\/strong> at the little dropout menu just above the split. Click on&nbsp;Code there, and we only see code. Note the color coding for your markup language. The tags are blue and the text is white.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Toggle_Design_and_Live\"><\/span>Toggle Design and Live<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Click on <strong>Design<\/strong>, and now we can only see the result of the code or a rough idea of what will be displayed in the browser.&nbsp;Toggle to Live, and this shows us a more accurate view of what can be seen in Webkit browsers like Chrome or Safari. Keep this toggled at Live, and select Split View. Notice that the split will contain either Design or Live depending on what&#8217;s toggled.<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Dreamweaver is a WYSIWYG editor because you can change the code by using Dreamweaver pull-down menus and buttons in Design or Live View. <strong>It should rather be called a WYSIWYGMOTT, or What You See Is What You Get Most Of The Time. The Design and Live Views are about 95% accurate. Please don&#8217;t rely on them fully! When designing for the web, always view your work in an actual browser as you design. Most designers view their work in multiple<\/strong> browsers to see if their code adheres to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Cross-browser_compatibility\" target=\"_blank\" rel=\"noreferrer noopener\">cross-browser compatibility<\/a>.<\/mark><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"More_HTML\"><\/span>More HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifying_a_file\"><\/span>Modifying a file<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Back in Split View, in the Live View half, place your cursor at the end of the <strong>Hello World!<\/strong> text. Hit the return key and type <strong>This is my first HTML page<\/strong> or something similar. Save the document using <strong>File &gt; Save<\/strong>. The home page of any website is always named index.html.<\/p>\n\n\n\n<p>Note how Dreamweaver changes the code for you. A <strong>paragraph tag<\/strong> has been added to the code to account for the new paragraph we made by hitting the return key in Live View.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4566\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw0323\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0323.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw0323\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0323-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0323-1024x634.png\" alt=\"\" class=\"wp-image-4566\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0323-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0323-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0323-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0323-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0323-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>The <strong>paragraph tag<\/strong> \u2014&nbsp;<code>&lt;p&gt; &lt;\/p&gt;<\/code>&nbsp;\u2014 is opened and closed around the new line of text. This is an example of <strong>nesting<\/strong>. Nesting occurs when an open and closed tag pair is set inside of another open and closed tag pair. The relationship between where each set opens and closes is important. We structure one fully inside the other so that they never overlap.<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">YES<\/mark><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><code>&lt;html&gt;&lt;p&gt;&lt;\/p&gt;&lt;\/html&gt;<\/code><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><code>&lt;html&gt;&lt;p&gt;&lt;\/html&gt;&lt;\/p&gt;<\/code><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Go back to Dreamweaver and type a new paragraph in Live View:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Hello World is the first exercise you learn in any code or markup language. <\/strong><\/p>\n\n\n\n<p><strong>Save<\/strong> the file and refresh the browser to see the new text displayed on the web page.&nbsp;The browser displays changes to the file when changes have been made to the original file (<strong>File &gt; Save<\/strong>&nbsp;in Dreamweaver) and the browser is refreshed (<strong>Command+R<\/strong> in most browsers).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4564\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw0423\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0423.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw0423\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0423-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0423-1024x634.png\" alt=\"\" class=\"wp-image-4564\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0423-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0423-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0423-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0423-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0423-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_hyperlink_tags\"><\/span>Adding hyperlink tags<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Hyperlinks<\/strong>, often just called links, are a one-click route from one HTML file to another. Links are the simplest form of interactivity on the web.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Open a new web browser tab or window and search for \u201cHello World Collection&#8221; to find this link:&nbsp;<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><a href=\"http:\/\/helloworldcollection.de\/\">http:\/\/helloworldcollection.de\/<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>This site is a massive collection of \u201cHello World!\u201d examples. Copy the link from the browser address bar and return to the <strong>index.html<\/strong> file in Dreamweaver.<\/p>\n\n\n\n<p>Make sure the <strong>Properties Palette<\/strong> is available for the next step. If the Properties Palette is missing, select <strong>Window &gt; Properties<\/strong> or <strong>Window  &gt; Workspace Layout &gt; Default<\/strong>. Dock the Properties Palette at the base of the UI, under the split view, by dragging it over that area and observing a blue line.<\/p>\n\n\n\n<p>In <strong>Live View<\/strong>, select the text fragment <strong>the first exercise you learn <\/strong>by highlighting it with your mouse.&nbsp;Paste the link into the field labeled <strong>Link<\/strong> in the <strong>Properties Palette<\/strong>.&nbsp;Press the<strong> Return<\/strong> key and it will change the selected text from body copy to a hyperlink. This is important: save the file. Remember, without saving the file, viewing the refreshed page in the browser will be disappointing.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Go to the browser and refresh the index.html page. The link should function in the browser. Return to Dreamweaver and inspect the code:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>Hello World is <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;a href=\"\/http:\/\/helloworldcollection.de\/\"&gt;the first exercise you learn&lt;\/a&gt;<\/mark> in any code or markup language.<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>The&nbsp;<code>a<\/code>&nbsp;stands for <strong>anchor<\/strong>.&nbsp;<code>href<\/code>&nbsp;is a <strong>property <\/strong>of the anchor tag, and tells the browser where the hypertext reference points. The <strong>value<\/strong> for that property is inserted after the equal sign =, and inside double-quotes&nbsp;<code>\" \"<\/code>. In this case, the value is the URL. The anchor tag is closed with a slash, or&nbsp;<code>&lt;\/a&gt;<\/code>. Notice that the anchor tag starts just before the word <strong>the<\/strong> and closes just after the word<strong> learn<\/strong>. This part of the sentence becomes the link.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4560\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw0723\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0723.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw0723\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0723-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0723-1024x634.png\" alt=\"\" class=\"wp-image-4560\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0723-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0723-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0723-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0723-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw0723-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_image_tags\"><\/span>Adding image tags<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We will search for a Creative Commons-licensed image to work with. Open a browser window and consult a search engine for the term &#8220;Hello World&#8221; in an image search. Using Google, you can use&nbsp;<strong>Tools &gt; Usage rights &gt; Creative Commons licenses<\/strong>&nbsp;and&nbsp;<strong>Size &gt; Large<\/strong>&nbsp;to narrow the search.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"648\" data-attachment-id=\"4553\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/imagesearch\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/imagesearch.png\" data-orig-size=\"3408,2156\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"imagesearch\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/imagesearch-1024x648.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/imagesearch-1024x648.png\" alt=\"\" class=\"wp-image-4553\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/imagesearch-1024x648.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/imagesearch-300x190.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/imagesearch-768x486.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/imagesearch-1536x972.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/imagesearch-2048x1296.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>We love that image of the CNC machine with a blowtorch! It&#8217;s by Wendell Oskay, licensed for us to reuse with attribution, so we can download a medium size 500 pixel-wide image and use it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"802\" data-attachment-id=\"4555\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dwimagesearch02\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dwimagesearch02.png\" data-orig-size=\"1051,823\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dwimagesearch02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dwimagesearch02-1024x802.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dwimagesearch02-1024x802.png\" alt=\"\" class=\"wp-image-4555\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dwimagesearch02-1024x802.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dwimagesearch02-300x235.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dwimagesearch02-768x601.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dwimagesearch02.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>We renamed the file <strong>cnc.jpg<\/strong>, as seen below. If you&#8217;re on a desktop, you probably see it full-size.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"375\" data-attachment-id=\"4556\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/cnc\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg\" data-orig-size=\"500,375\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cnc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg\" alt=\"\" class=\"wp-image-4556\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc-300x225.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Right-click<\/strong> on the image above and select <strong>Copy Image Address<\/strong> from the contextual dropout (in <strong>Chrome<\/strong>, but other browsers have similar capability).&nbsp;This copies the URL, the path to the location where the image file is saved on the server. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Back in Dreamweaver, type a new paragraph tag&nbsp;<code>&lt;p&gt; &lt;\/p&gt;<\/code>&nbsp;on a new line below your last text, but still inside the&nbsp;<code>&lt;\/body&gt;<\/code>&nbsp;close. Now add an  <strong>image tag<\/strong> like this:&nbsp;<code>&lt;img src=\u201curl\u201d \/&gt;<\/code>. That&nbsp;<code>\/&gt;<\/code>&nbsp;at the end of the image tag is a shorthand signifying a closing tag. Replace <code>\"url\"<\/code> with the URL that you copied from the image above by pasting it in between the double quotes. The code will look like this:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&lt;p&gt;&lt;img src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg\" \/&gt;&lt;\/p&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4562\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw08a23a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw08a23a.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw08a23a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw08a23a-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw08a23a-1024x634.png\" alt=\"\" class=\"wp-image-4562\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw08a23a-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw08a23a-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw08a23a-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw08a23a-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw08a23a-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Save the file and refresh the page in your browser. The image appears on the page, with a paragraph break between it and the link text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_structural_emphasis_for_type\"><\/span>Creating structural emphasis for type<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In Dreamweaver, you will use the interface to add formatting, and you will see the code that the browser sees. Thinking of the browser as a printer (and the web as the paper) can help us understand markup language. You will discover that it is not always the perfect simile, as user interaction varies from the printed page to the web browser. The media environment always affects the audience.<\/p>\n\n\n\n<p>If you have created a document in Microsoft Word, you have used a markup language. The difference between working in Dreamweaver and Word is that you are <strong>aware<\/strong> that you are creating the markup language in the HTML code. In essence, selecting the type and using the <strong>B<\/strong> button in Word to create a bold style is a user interface within the program that informs the printer to markup the selected type. The printer reads the file sent by the program and formats the typography. <\/p>\n\n\n\n<p>But don&#8217;t confuse formatting with styling! HTML is a structural language, not a styling language. Header tags \u2014 <code>&lt;h1&gt;<\/code> through <code>&lt;h6&gt;<\/code> \u2014 provide organization to a text, much like outlining a paper. Headers can even anchor a text: we use headers on this page to create a table of contents that allows quick navigation of a long scroll. Other structural tags include <code>&lt;strong&gt;<\/code> and <code>&lt;em&gt;<\/code>. These help with accessibility by allowing those who use screen readers to understand levels of importance in an author&#8217;s text. Browsers often interpret the strong tag by <strong>bolding<\/strong> type, and the em (short for emphasis) tag by <em>italicizing<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Header_tag\"><\/span>Header tag<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We&#8217;ll use the highest-level header tag \u2014 <code>&lt;h1&gt; &lt;\/h1&gt;<\/code> \u2014 to transform <strong>Hello World!<\/strong> into a headline. First, select the text. Then, insert the tag using the Properties Palette. Find the <strong>Format<\/strong> field and in the dropout menu there select <strong>Heading 1<\/strong>. The code will look like this:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Hello World!&lt;\/h1&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Strong_and_emphasis_tags\"><\/span>Strong and emphasis tags<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Formatting type in Dreamweaver is like formatting type in other Adobe programs. Bold and italic formatting are one click away but notice how Dreamweaver adds the code to the HTML file.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Click on Split View. Make the word <strong>first<\/strong> bold by selecting it and clicking the<strong> B<\/strong> button in the Properties Palette. Dreamweaver will surround the word with the <strong>strong tag<\/strong> \u2014&nbsp;<code>&lt;strong&gt; &lt;\/strong&gt;<\/code>. Now select the word <strong>any<\/strong> and click the <strong><em>I<\/em> <\/strong>button in the Properties Palette. Dreamweaver uses the <strong>emphasis tag<\/strong> \u2014&nbsp;<code>&lt;em&gt; &lt;\/em&gt;<\/code>&nbsp;\u2014to italicize the word. These look like this:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;strong&gt;first&lt;\/strong&gt;\n\n&lt;em&gt;any&lt;\/em&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>The entire block of code should look like this now:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n\t&lt;body&gt;\n\t&lt;h1&gt; Hello World! &lt;\/h1&gt;\n\t&lt;p&gt;This is my &lt;strong&gt;first&lt;\/strong&gt; HTML page.&lt;\/p&gt;\n\t&lt;p&gt;Hello World is &lt;a href=\"http:\/\/helloworldcollection.de\/\"&gt;the first exercise you learn&lt;\/a&gt; in &lt;em&gt;any&lt;\/em&gt; code or markup language. &lt;\/p&gt;\n\t&lt;p&gt;&lt;img src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cnc.jpg\" \/&gt;&lt;\/p&gt;\t\n\t&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>To view the code in a browser, use the phone\/desktop icon at the lower right of the code window. Click on it and it will open a dropout with available browsers to test. We&#8217;re choosing Chrome here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"250\" data-attachment-id=\"4580\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw10ba23\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10ba23.png\" data-orig-size=\"3168,772\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw10ba23\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10ba23-1024x250.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10ba23-1024x250.png\" alt=\"\" class=\"wp-image-4580\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10ba23-1024x250.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10ba23-300x73.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10ba23-768x187.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10ba23-1536x374.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10ba23-2048x499.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>And it should look something like this:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"922\" height=\"1024\" data-attachment-id=\"4581\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw10c23\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23.png\" data-orig-size=\"1648,1830\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw10c23\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23-922x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23-922x1024.png\" alt=\"\" class=\"wp-image-4581\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23-922x1024.png 922w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23-270x300.png 270w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23-768x853.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23-1383x1536.png 1383w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23-300x333.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw10c23.png 1648w\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hello_CSS\"><\/span>Hello CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>But it&#8217;s not much to look at, is it? As a markup language, HTML is solely preoccupied with creating structure. With only headers, strong, and em, combined with a few other structural formatting elements like lists, indents, and blockquotes, it is very limiting. If you want to communicate in a more visually compelling way, you need to add some <code>&lt;style&gt; &lt;\/style&gt;<\/code>!<\/p>\n\n\n\n<p><a href=\"https:\/\/williamcromar.com\/code_samples\/helloworld\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the sample site again<\/a>, and this time take a deep look at the second page, linked out from the first page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%80%9CForm_follows_function%E2%80%9D\"><\/span>&#8220;Form follows function&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Before doing the exercises, visit this introduction to architect Louis Sullivan&#8217;s phrase &#8220;<strong><a href=\"http:\/\/en.wikipedia.org\/wiki\/Form_follows_function\" target=\"_blank\" rel=\"noreferrer noopener\">form follows function<\/a><\/strong>&#8221; used to demonstrate the Modernist invention of the bifurcation of form and content. Then visit <strong><a href=\"http:\/\/www.alistapart.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">A List Apart<\/a><\/strong>, an online magazine that was an early advocate of CSS. Note its high-level design with the more utilitarian, but equally functional, <strong><a href=\"http:\/\/philadelphia.craigslist.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Craig&#8217;s List<\/a><\/strong>. Although not considered as much of a design by most, note how effectively the interface allows an audience to find and understand links. Finally, visit the website <strong><a href=\"https:\/\/www.csszengarden.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Zen Garden<\/a><\/strong> to see visual variations on a common set of content \u2014 which do you like best and why?<\/p>\n\n\n\n<p>So far, in playing with HTML, we left many aesthetic choices out of the exercises and focused on the tools for building code. We can achieve aesthetic goals through code! We need not leave aesthetics out of the conversation, in the spirit of Sullivan&#8217;s &#8220;form follows function.&#8221; Now we will focus on a key concept in web design: keeping the structural markup separate from the code that controls the aesthetics. In other words, we contain content separately from the style applied to it. There are a few reasons for keeping the two separated, namely:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Code is displayed on different browsers, each with different styling information;<\/li>\n\n\n\n<li>For accessibility, there are web standards that rely on this separation;<\/li>\n\n\n\n<li>We can easily easily reuse or modify styles, making the coding effort more efficient.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cascading_style_sheets\"><\/span>Cascading style sheets<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The separation between content and form is realized when an HTML page full of content is connected to a cascading style sheet (CSS) that applies aesthetics by treating the page stylistically. Why &#8220;cascading?&#8221; This describes how styling rules \u201ccascade\u201d down from several sources. CSS has an inherent sense of hierarchy in which styles applied with a higher priority can override rules of a lower priority.<\/p>\n\n\n\n<p>So far we have modified page properties and placed links and images on the HTML page using Dreamweaver. The default font, font size, text color, and background color are all styles that we can modify, as well as the appearance of links such as color, underline, and rollover settings. Certain aesthetic options are limited on the web. For instance, for a web page to load a specific font, the font must be installed on the user&#8217;s computer. If the font is missing the browser will load a different font. Therefore, most web pages are designed using &#8220;system&#8221; or &#8220;web-safe&#8221; fonts (those installed on the computer at the time of purchase), including Helvetica, Arial, Times, Georgia, Verdana, Courier, and Geneva. Here we will begin to separate the content of the page from its formal properties using cascading style sheets (CSS).<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">For all your work in Dreamweaver for this exercise, choose the STANDARD workspace from the pull-down menu in the Application bar.<\/mark><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Three_ways_to_apply_styling\"><\/span>Three ways to apply styling<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>What are the different applications of styling to which we referred above? You can find CSS applied in three different ways, all of which are invoked by applying <code>style<\/code> one way or another:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Inline_CSS\"><\/span>Inline CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>As the name implies, we apply inline CSS right alongside the element we are styling. For example:<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The code looks like: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"color: red; text-decoration:&nbsp;underline;\"&gt;I am red.&lt;\/ p&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The browser presents:<\/p>\n\n\n\n<p> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">I am red.<\/span><\/mark><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>In this instance, <code>style<\/code> acts as an attribute modifying a tag. The attribute starts with <code>style<\/code>, followed by an equals sign \u2014&nbsp;<code>=<\/code> \u2014 and then uses double quotes \u2014&nbsp;<code>\"\"<\/code> \u2014 which contains the value of the attribute. A completed value ends with a semi-colon \u2014 <code>;<\/code> \u2014 and you can pile on many values within one style attribute. <strong>Use inline CSS sparingly!<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Internal_CSS\"><\/span>Internal CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>If you have a style that you want to apply to multiple elements within an HTML document, but you are certain that style will not appear in other HTML documents in the website, you can place your CSS in a hidden part of the HTML document known as the <code>&lt;head&gt;<\/code>, a tag we&#8217;ll explore in the exercises below. Say you want to take the inline style created above and apply it to <em>every<\/em> <code>&lt;p&gt;<\/code> in one HTML document without having to rewrite it every time:<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The code looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  <span style=\"background-color: initial; font-family: inherit; font-size: inherit; color: initial;\">&lt;style&gt;<\/span>\n    p {<code>      color: red;<\/code>      text-decoration:&nbsp;underline;\n    }\n  <span style=\"background-color: initial; font-family: inherit; font-size: inherit; color: initial;\">&lt;\/ style&gt;<\/span>\n&lt;\/ head&gt;\n&lt;body&gt;\n  &lt;p&gt;I am red.&lt;\/ p&gt;\n  &lt;p&gt;I am red, too.&lt;\/ p&gt;\n  &lt;p&gt;Wait, we're also underlined!&lt;\/ p&gt;\n&lt;\/ body&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The browser presents:<\/p>\n\n\n\n<p> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">I am red.<\/span><\/mark><\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">I am red, too.<\/span><\/mark><\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">Wait, we&#8217;re also underlined!<\/span><\/mark><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>In this format, we call the code a CSS rule.<\/p>\n\n\n\n<p>It is characterized by the listing of a tag without the angle brackets, followed by a set of curly brackets \u2014 <code>p { }<\/code>. We place the values inside the curly brackets. But the big difference between this CSS rule and the inline equivalent is that the contents of each <code>&lt;p&gt;<\/code> will show up red and underlined. Where inline CSS is good for a specific case, internal CSS creates a more generally applicable rule.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"External_CSS\"><\/span>External CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>But what if you decide this style is something you&#8217;d like to use on every page of a website \u2014 and you have hundreds of pages on your site? It&#8217;s both inefficient and inflexible to have two lines of code in every HTML document. Instead, we create a CSS document, insert the rule there one time, then <code>&lt;link&gt;<\/code> it in the <code>&lt;head&gt;<\/code> every time we need it:<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The code in the CSS file looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\n  color: red;\n  text-decoration:&nbsp;underline;\n}<\/code><\/pre>\n\n\n\n<p>The code in the HTML file looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;link href=\u201dstyle.css\u201d rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d&gt;\n&lt;\/ head&gt;\n&lt;body&gt;\n  &lt;p&gt;I am red.&lt;\/ p&gt;\n  &lt;p&gt;I am red, too.&lt;\/ p&gt;\n  &lt;p&gt;Wait, we're also underlined!&lt;\/ p&gt;\n&lt;\/ body&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>In every HTML document linked to the CSS, the browser presents:<\/p>\n\n\n\n<p> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">I am red.<\/span><\/mark><\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">I am red, too.<\/span><\/mark><\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">Wait, we&#8217;re also underlined!<\/span><\/mark><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>The advantage of external CSS is clear: write the rule one time, and apply it across <em>the whole site<\/em>. Even better: <em>change the rule one time, and it changes across the whole site!<\/em> If internal CSS is general to a page, external CSS is general to an entire site.<\/p>\n\n\n\n<p>But what if we <em>don&#8217;t<\/em> want <em>all<\/em> our <code>&lt;p&gt;<\/code> tags to be red and underlined? What if we want the flexibility to decide which ones do and which ones don&#8217;t carry the formatting, without reverting to clumsy inline CSS? Can we have our cake and eat it, too?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Selectors\"><\/span>Selectors<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We can modify specific tags by assigning them a <strong>class<\/strong> or an <strong>ID<\/strong>. These are known as <strong>selectors<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Classes\"><\/span>Classes<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>We use a class name to assign a style to any number or kind of HTML tags. Any word that is not reserved for use in code can be used to create a class, and its syntax is recognized by a period placed in front of that word: <code>.class1<\/code>, <code>.anotherclass<\/code>, <code>.anythingyouwish<\/code>&#8230; though it&#8217;s important to customize class names that make contextual sense and are not over-long.<\/p>\n\n\n\n<p>Classes can be added using internal or external CSS. Here, we&#8217;ll add a class from an external sheet:<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The code for a class looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.redtext {\n  color: red;\n  text-decoration:&nbsp;underline;\n}<\/code><\/pre>\n\n\n\n<p>The code in the HTML file looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;link href=\u201dstyle.css\u201d rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d&gt;\n&lt;\/ head&gt;\n&lt;body&gt;\n  &lt;p class=\"redtext\"&gt;I am red.&lt;\/ p&gt;\n  &lt;p&gt;I could be red if I only had some class.&lt;\/ p&gt;\n&lt;\/ body&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The browser presents:<\/p>\n\n\n\n<p> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">I am red.<\/span><\/mark><\/p>\n\n\n\n<p>I could be red if I only had some class.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"IDs\"><\/span>IDs<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>An ID is much more specific. There can only be a single HTML element within a page that receives an ID. The convention adds a hashtag in front of a name: <code>#id1<\/code>, <code>#anotherid<\/code>, <code>#whatever<\/code>&#8230; again, being sensible with context and length.<\/p>\n\n\n\n<p>Here, we&#8217;ll add an ID using internal CSS, though they can also show up on an external sheet:<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The code for an ID looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  <span style=\"background-color: initial; font-family: inherit; font-size: inherit; color: initial;\">&lt;style&gt;<\/span>\n    #textred {<code>      color: red;<\/code>      text-decoration:&nbsp;underline;\n    }\n  <span style=\"background-color: initial; font-family: inherit; font-size: inherit; color: initial;\">&lt;\/ style&gt;<\/span>\n&lt;\/ head&gt;\n&lt;body&gt;\n  &lt;p id=\"textred\"&gt;I am red.&lt;\/ p&gt;\n  &lt;p&gt;I can never be red unless I get a different ID than my buddy here.&lt;\/ p&gt;\n&lt;\/ body&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The browser presents:<\/p>\n\n\n\n<p> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">I am red.<\/span><\/mark><\/p>\n\n\n\n<p>I can never be red unless I get a different ID than my buddy here.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>In these super-simple examples, it&#8217;s not easy to see why you&#8217;d choose between a class and an ID, but there are distinctions that become clearer as your code becomes more complex:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a class for:\n<ul class=\"wp-block-list\">\n<li>Anything you&#8217;d like to see happen in more than one place across several pages in a site.<\/li>\n\n\n\n<li>Anything you&#8217;d like to see happen to more than one kind of HTML tag. For example, our class <code>.redtext<\/code> above could be applied to a specific <code>&lt;p&gt;<\/code> or <code>&lt;h1&gt;<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Use an ID for:\n<ul class=\"wp-block-list\">\n<li>Anything you think will only happen one time on a specific page. For example, positional information using values for <code>width<\/code>, <code>height<\/code>, <code>top<\/code>, or <code>left<\/code> may be relevant only to that page.<\/li>\n\n\n\n<li>Any assignment of a script that affects interactive behavior \u2014 a phenomenon that we&#8217;ll cover in a future exercise.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Now our code is becoming more refined. But what if we want to apply a style <em>only<\/em> to a single word or character <em>within a tag<\/em>? That&#8217;s a high degree of specificity!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Divs_and_spans\"><\/span>Divs and spans<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Divs<\/strong> and <strong>spans<\/strong> are useful for assigning classes and IDs in varying degrees of specificity. <\/p>\n\n\n\n<p>A <code>&lt;div&gt;<\/code> defines a division or a section in an HTML document. It&#8217;s a larger container of sorts, which can then be styled with CSS. A <code>&lt;div&gt;<\/code> can contain other <code>&lt;div&gt;<\/code> tags to create nested relationships. Browsers place a line break after a <code>&lt;div&gt;<\/code> similar to (but not the same as) <code>&lt;p&gt;<\/code>. As such, it is known as a <strong>block element<\/strong>.<\/p>\n\n\n\n<p>A <code>&lt;span&gt;<\/code> is a solution to mark up a small portion of text inside a block element without creating a break. We often see <code>&lt;span&gt;<\/code> tags paired with inline CSS, though they can also be styled with a class or ID attribute.<\/p>\n\n\n\n<p>Let&#8217;s try an external CSS class application:<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The code in the CSS file looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.redtext {\n  color: red;\n  text-decoration:&nbsp;underline;\n}<\/code><\/pre>\n\n\n\n<p>The code in the HTML file looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;link href=\u201dstyle.css\u201d rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d&gt;\n&lt;\/ head&gt;\n&lt;body&gt;\n  &lt;div class=\"redtext\"&gt;I am red.&lt;\/ div&gt;\n  &lt;div&gt;I could be totally &lt;span class=\"redtext\"&gt;red&lt;\/ span&gt; if I only had a little more class.&lt;\/ div&gt;\n&lt;\/ body&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The browser presents:<\/p>\n\n\n\n<p> <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">I am red.<\/span><\/mark><\/p>\n\n\n\n<p>I could be totally <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><span style=\"text-decoration: underline;\">red<\/span><\/mark> if I only had a little more class.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Applying_styles_in_Dreamweaver\"><\/span>Applying styles in Dreamweaver<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that we know where CSS can go, and how selectors can be defined and applied to sections and portions of content, let&#8217;s take that knowledge to Dreamweaver.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prepare_the_project_for_styles\"><\/span>Prepare the project for styles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>First, we&#8217;re going to create a directory hierarchy. Create a folder in the <strong>helloworld<\/strong> folder that already contains our index.html file. Name that folder <strong>subdirectory<\/strong>. Copy the index.html file and place the copy in the <strong>subdirectory<\/strong>. Rename this file, calling it <strong>hello-world.html<\/strong>. Open it in Dreamweaver.<\/p>\n\n\n\n<p>We&#8217;re going to create a block structure now, using the <code>&lt;div&gt;<\/code> tag as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <code>&lt;div&gt;<\/code> around the <em>whole content<\/em>, starting just before <code>&lt;h1&gt;<\/code> and ending with <code>&lt;\/div&gt;<\/code> just after the last <code>&lt;\/p&gt;<\/code>. It helps with legibility to keep those tags on their own lines as you see in the sample file.<\/li>\n\n\n\n<li>Now change every <code>&lt;p&gt;<\/code> to <code>&lt;div&gt;<\/code> and every <code>&lt;\/p&gt;<\/code> to <code>&lt;\/div&gt;<\/code>. Notice how the spacing changes in Live View.<\/li>\n\n\n\n<li>Wrap the <code>&lt;strong&gt;<\/code> and <code>&lt;em&gt;<\/code> tags with <code>&lt;span&gt;<\/code> tags.<\/li>\n\n\n\n<li>Indent the lines as you see illustrated in the sample file.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4618\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css01\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css01.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css01-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css01-1024x634.png\" alt=\"\" class=\"wp-image-4618\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css01-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css01-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css01-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css01-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css01-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choosing_CSS_properties\"><\/span>Choosing CSS properties<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We can now add some CSS properties to these block elements. There are hundreds of CSS properties, from <code>accent-color<\/code> to <code>z-index<\/code>! The best way to learn them is by using them over time, not trying to memorize them all. It&#8217;s like learning a foreign language: you build vocabulary by using vocabulary. Of course, like a language, it helps to have a dictionary handy, so use a CSS properties reference when you&#8217;re just starting. Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>MDN web docs CSS reference<\/strong><\/a> | Mozilla&#8217;s documentation of web languages and scripts is deeply respected in the development community because it&#8217;s comprehensive and respects <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">W3C standards<\/a>.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/cssreference.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">cssreference.io<\/a><\/strong> | A visually oriented reference of many properties, with well-done illustrated and animated examples.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.w3schools.com\/cssref\/index.php\" target=\"_blank\" rel=\"noreferrer noopener\">W3Schools CSS Reference<\/a><\/strong> | W3Schools has a somewhat well-deserved bad rep in the development community. Their name implies affiliation with the W3C (they&#8217;re <em>not<\/em>), and their code samples don&#8217;t always conform to the standard. But: they have a nice sandbox feature that lets you test out code. If you are aware of the liabilities, that feature is very useful.<\/li>\n<\/ul>\n\n\n\n<p>In the rules we&#8217;ll create below, we&#8217;ll use some simpler properties that we know will create interesting styles. Don&#8217;t worry if you feel slightly overwhelmed!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_and_link_an_external_style_sheet\"><\/span>Create and link an external style sheet<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>In the Dreamweaver menu, find <strong>File &gt; New<\/strong>, and in the dialog box that opens, choose <strong>CSS<\/strong> then hit <strong>Create<\/strong>.<\/p>\n\n\n\n<p>This creates a new <strong>.css<\/strong> file. Save it by naming it <strong>hello-styles.css<\/strong> and placing it in the <strong>subdirectory<\/strong> next to <strong>hello-world.html<\/strong>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"685\" data-attachment-id=\"4621\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css02\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css02.png\" data-orig-size=\"2004,1340\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css02-1024x685.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css02-1024x685.png\" alt=\"\" class=\"wp-image-4621\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css02-1024x685.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css02-300x201.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css02-768x514.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css02-1536x1027.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css02.png 2004w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" data-attachment-id=\"4623\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css03\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css03.png\" data-orig-size=\"3304,2012\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css03\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css03-1024x624.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css03-1024x624.png\" alt=\"\" class=\"wp-image-4623\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css03-1024x624.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css03-300x183.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css03-768x468.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css03-1536x935.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css03-2048x1247.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Now we link the CSS document to the HTML document. To do this, the HTML document needs a <code>&lt;head&gt;<\/code> tag. Open the tab for the HTML document and add <code>&lt;head&gt; &lt;\/head&gt;<\/code> between <code>&lt;html&gt;<\/code> and <code>&lt;body&gt;<\/code>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4624\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css04\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css04.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css04\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css04-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css04-1024x634.png\" alt=\"\" class=\"wp-image-4624\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css04-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css04-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css04-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css04-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css04-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Activate the <strong>Properties Palette<\/strong> by placing the cursor somewhere in the content. In the palette, find <strong>Class<\/strong> and click <strong>None<\/strong> to open a dropout menu. Choose <strong>Attach Style Sheet&#8230;<\/strong> here.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"122\" data-attachment-id=\"4627\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css05\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css05.png\" data-orig-size=\"2552,304\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css05\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css05-1024x122.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css05-1024x122.png\" alt=\"\" class=\"wp-image-4627\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css05-1024x122.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css05-300x36.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css05-768x91.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css05-1536x183.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css05-2048x244.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>This action will open a dialog box. Select the <strong>Link<\/strong> radio button, then hit the <strong>Browse&#8230;<\/strong> button and navigate to the <strong>hello-styles.css<\/strong> file in the second dialog box that opens. Select it and hit <strong>Open<\/strong>. After the navigation dialog disappears, select <strong>OK<\/strong> in the first dialog box.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1000\" data-attachment-id=\"4628\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css06\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css06.png\" data-orig-size=\"1694,1655\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css06\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css06-1024x1000.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css06-1024x1000.png\" alt=\"\" class=\"wp-image-4628\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css06-1024x1000.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css06-300x293.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css06-768x750.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css06-1536x1501.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css06.png 1694w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Observe the code Dreamweaver writes for you here. It contains an <strong>href<\/strong> with the file name in the double quotes, along with other properties that help the browser understand what kind of file this is:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link href=\"hello-styles.css\" rel=\"stylesheet\" type=\"text\/css\"&gt;<\/code><\/pre>\n\n\n\n<p>For legibility, indent the lines of code as you see in the sample file.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4629\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css07\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css07.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css07\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css07-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css07-1024x634.png\" alt=\"\" class=\"wp-image-4629\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css07-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css07-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css07-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css07-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css07-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_CSS_Page_Properties\"><\/span>Create CSS Page Properties<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that we have a linked CSS document, we can fill it with style!<\/p>\n\n\n\n<p>Let&#8217;s start with declaring fonts. This is a bit tedious to code by hand, so Dreamweaver has a fairly easy UI for handling this. Activate the <strong>Properties Palette<\/strong> by placing the cursor somewhere in the content. In the palette, find the <strong>Page Properties<\/strong> button and this opens a dialog box.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Under <strong>Appearance (CSS)<\/strong>, find <strong>Page font:<\/strong> and in the first field, click to open a dropout menu. There are lots of font groupings here. Each one is called a <strong>font-family<\/strong>, which consists of a set of fonts that share similar visual properties plus a generic fallback. Here, we choose <strong>Gotham, Helvetica Neue, Helvetica, Arial, sans-serif<\/strong> as the value.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" data-attachment-id=\"4633\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css08a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08a.png\" data-orig-size=\"1610,958\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css08a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08a-1024x609.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08a-1024x609.png\" alt=\"\" class=\"wp-image-4633\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08a-1024x609.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08a-300x179.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08a-768x457.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08a-1536x914.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08a.png 1610w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>A browser will see Gotham first, and attempt to find it in the client machine&#8217;s library. If it doesn&#8217;t see that, it will look for the next one on the list. If none are present, it will display the client&#8217;s default fallback.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>We&#8217;ll continue using this dialog box to style <strong>Links (CSS)<\/strong>. Link styling is particularly laborious to do by hand, so this is a welcome relief. For <strong>Link font:<\/strong> we choose the same font as the page font, and for the various states of links, we set various shades of red. For the <strong>Underline style: <\/strong>we set it to <strong>Show underline only on rollover<\/strong> from among the choices in the dropout menu.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" data-attachment-id=\"4634\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css08b\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08b.png\" data-orig-size=\"1610,958\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css08b\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08b-1024x609.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08b-1024x609.png\" alt=\"\" class=\"wp-image-4634\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08b-1024x609.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08b-300x179.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08b-768x457.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08b-1536x914.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css08b.png 1610w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Notice the welcome changes in Live View, but observe where Dreamweaver writes the code: in the head of the HTML document. We don&#8217;t want it there! We need to copy it over to the CSS document. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4635\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css09\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css09.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css09\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css09-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css09-1024x634.png\" alt=\"\" class=\"wp-image-4635\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css09-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css09-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css09-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css09-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css09-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Moving_the_CSS_to_the_external_sheet\"><\/span>Moving the CSS to the external sheet<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Notice how you can now toggle back and forth between HTML (the <strong>Source Code<\/strong> tab) and CSS (the <strong>hello-world.css<\/strong> tab) in the code window but keep the Live view split open. This is super useful for our window switch! Under the Source Code tab, select and copy everything inside (<em>but not including<\/em>) the <code>&lt;style&gt;<\/code> tags. Now choose the CSS tab, and paste it into the CSS document. Return to the Source Code tab and delete everything from <code>&lt;style&gt;<\/code> to <code>&lt;\/style&gt;<\/code> out of the HTML <code>&lt;head&gt;<\/code>. However: keep the <code>&lt;meta&gt;<\/code> tag and its properties and values, which Dreamweaver created when it generated the <code>font-family<\/code> code. These help the browser more about your file and how to interpret it.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4636\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css10a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10a.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css10a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10a-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10a-1024x634.png\" alt=\"\" class=\"wp-image-4636\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10a-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10a-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10a-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10a-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10a-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4638\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css10ba\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10ba.png\" data-orig-size=\"3392,2100\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css10ba\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10ba-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10ba-1024x634.png\" alt=\"\" class=\"wp-image-4638\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10ba-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10ba-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10ba-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10ba-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css10ba-2048x1268.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>For legibility, indent the <code>&lt;meta&gt;<\/code> tag, and clean up any other indents, in the manner we observe in the sample file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_new_Dreamweaver_rule\"><\/span>Create a new Dreamweaver rule<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Though some people (like me) prefer hand-coding styles, they can be created, modified, and deleted using the <strong>CSS Designer<\/strong> panel. I find it a bit slow and clunky, but many designers swear by it. The CSS Designer panel should be open to the right of the workspace by default. If it isn&#8217;t, choose <strong>Window &gt; CSS Designer<\/strong>. You can redefine a default HTML tag or create a&nbsp;new class or ID.<\/p>\n\n\n\n<p>Double-click the <strong>CSS Designer<\/strong> tab if needed to expand the panel, and click on <strong>Properties<\/strong>. The style for the <code>font-family<\/code> property that we just made is saved in this panel. Clicking the <code>font-family<\/code> property opens the settings applied to that rule. We use this panel to create or modify styles.<\/p>\n\n\n\n<p>Place your cursor anywhere inside the&nbsp;<strong>body<\/strong>&nbsp;declaration. You&#8217;ll see CSS Designer&#8217;s <strong>@Media<\/strong> tab change to <strong>@Media: GLOBAL<\/strong>. Create a new style using the plus sign beside <strong>Selectors<\/strong> (it&#8217;s right under <strong>GLOBAL<\/strong>). This opens a small form field under<strong> Selectors<\/strong>. Define a rule for the tag. A CSS rule is made of two parts, a&nbsp;<em>selector<\/em>&nbsp;and a&nbsp;<em>declaration<\/em>. The selector names the part of the HTML document that will be affected by the style. The declaration tells the HTML code how the selector is affected by the rule.&nbsp;Our new rule will center text. Name the selector&nbsp;<strong>.center&nbsp;<\/strong>(including the period!)&nbsp;and click away to apply.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Centering_the_text\"><\/span>Centering the text<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Give the new rule values for the declaration using the&nbsp;<strong>Properties<\/strong>&nbsp;appear below&nbsp;<strong>.center<\/strong>. We simply start typing in the empty add property box, and code suggestions populate a pop-up option list. As properties are added, the add value box is activated and, again, pop-up options open as you start to type. We formatted our <code>.center<\/code> with <code>text-align: center<\/code> and observe the results in Live View.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4639\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css11\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css11.png\" data-orig-size=\"3390,2098\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css11\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css11-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css11-1024x634.png\" alt=\"\" class=\"wp-image-4639\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css11-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css11-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css11-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css11-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css11-2048x1267.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Observe where Dreamweaver inserts the new property: it&#8217;s in the CSS this time! Review how the CSS Designer palette expresses the same property. If you like using it, keep doing so. If not, code by hand as you see in the sample \u2014 though you do kind of need to know what you&#8217;re up to!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_style_by_hand\"><\/span>Create a style by hand<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Tools like Page Properties and the CSS Designer are great when they&#8217;re time-savers. But sometimes old-fashioned hand-coding is faster and less cumbersome. Time and experience will tell you when each method has its place. So, for the experience of doing so, let&#8217;s add a couple of classes by hand. We&#8217;ll generate a class <code>.bluetext<\/code> and a class <code>.greentext<\/code> in the CSS, then we&#8217;ll apply them to the <code>&lt;span&gt;<\/code> tags we created earlier.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>The code will look like this:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>.bluetext {\n\tcolor: blue;\n}\n.greentext {\n\tcolor: green;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4640\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css12\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css12.png\" data-orig-size=\"3390,2098\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css12\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css12-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css12-1024x634.png\" alt=\"\" class=\"wp-image-4640\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css12-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css12-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css12-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css12-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css12-2048x1267.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Now, find the first <code>&lt;span&gt;<\/code> and add the syntax for calling a class \u2014 <code>class=\"\"<\/code> \u2014 inside the tag. You may notice Dreamweaver will offer an autofill option here, which is why it&#8217;s nice to always define the class first. Choose <code>bluetext<\/code> from the options, or type <code>bluetext<\/code>, making sure you don&#8217;t include the period here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4641\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css13\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css13.png\" data-orig-size=\"3390,2098\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css13\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css13-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css13-1024x634.png\" alt=\"\" class=\"wp-image-4641\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css13-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css13-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css13-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css13-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css13-2048x1267.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Do the same for the next <code>&lt;span&gt;<\/code>, this time adding the <code>greentext<\/code> class. Observe the changes in Live View:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4642\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css14\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css14.png\" data-orig-size=\"3390,2098\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css14\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css14-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css14-1024x634.png\" alt=\"\" class=\"wp-image-4642\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css14-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css14-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css14-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css14-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css14-2048x1267.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_links_between_pages\"><\/span>Creating links between pages<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>As a finale to our styling journey, we&#8217;ll add some text to create links between the <strong>index.html<\/strong> and <strong>hello-world.html<\/strong> pages. Write the following in a new <code>&lt;div&gt;<\/code> under the image on each page:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Visit the other page<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4643\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css15\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css15.png\" data-orig-size=\"3390,2098\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css15\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css15-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css15-1024x634.png\" alt=\"\" class=\"wp-image-4643\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css15-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css15-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css15-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css15-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css15-2048x1267.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Start in the <strong>hello-world.html<\/strong> file. Highlight the <strong>Visit the other page<\/strong> text, and in the <strong>Properties Palette<\/strong>, find the folder icon to the right of the <strong>Link<\/strong> field and click on it to open a navigation dialog box. Use this to find and select the <strong>index.html<\/strong> file, then click <strong>Open<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" data-attachment-id=\"4644\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css16a\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16a.png\" data-orig-size=\"3302,2010\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css16a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16a-1024x623.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16a-1024x623.png\" alt=\"\" class=\"wp-image-4644\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16a-1024x623.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16a-300x183.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16a-768x467.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16a-1536x935.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16a-2048x1247.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Observe the anchor link Dreamweaver creates. It has a funny syntax: that <code>...\/<\/code> you see before <code>index.html<\/code> tells the browser to link the file by looking in the directory containing the subdirectory that <strong>hello-world.html<\/strong> calls home.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4645\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css16b\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16b.png\" data-orig-size=\"3390,2098\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css16b\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16b-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16b-1024x634.png\" alt=\"\" class=\"wp-image-4645\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16b-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16b-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16b-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16b-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16b-2048x1267.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Now go to the <strong>index.html<\/strong> file, and repeat the link process, this time pointing to <strong>hello-world.html<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" data-attachment-id=\"4646\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw_css16c\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16c.png\" data-orig-size=\"3390,2098\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw_css16c\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16c-1024x634.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16c-1024x634.png\" alt=\"\" class=\"wp-image-4646\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16c-1024x634.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16c-300x186.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16c-768x475.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16c-1536x951.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw_css16c-2048x1267.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>This time, the link is expressed as <code>subdirectory\/hello-world.html<\/code>, which tells the browser to first look inside the subdirectory folder to then find and link the file.<\/p>\n\n\n\n<p>Congratulations! We&#8217;ve completed our basic HTML and CSS exploration. Test the results in the browser: it should look something like the <a href=\"https:\/\/williamcromar.com\/code_samples\/helloworld\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">sample site<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Clients_and_Servers\"><\/span>Clients and Servers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We post web pages to the internet through a <strong>server<\/strong>. Downloads from the web are loaded from the same server. A server is a computer with software installed on it that allows it to send and receive requests in the form of code. A <strong>client<\/strong> is a computer running software, such as a web browser, that sends requests to the server. When you click a link on the web, your computer sends a request to the server through the web browser and the server returns the requested web page.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"238\" data-attachment-id=\"4651\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/netartdiagram\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/netartdiagram.gif\" data-orig-size=\"471,238\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"netartdiagram\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/netartdiagram.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/netartdiagram.gif\" alt=\"\" class=\"wp-image-4651\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><a href=\"http:\/\/www.mtaa.net\/mtaaRR\/off-line_art\/snad.html\" target=\"_blank\" rel=\"noreferrer noopener\">MTAA, Simple Net Art Diagram, 1997<\/a><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>MTAA&#8217;s<strong> Simple Net Art Diagram<\/strong>, seen above, was made as a gesture to define net art. These artists interpreted the idea of transmission as the art itself. In other words, the art was not interpreted as necessarily residing in the code or the aesthetic results of the code. The art happens in the space between the two computers. For MTAA, what is important is the transfer of information. In hilarious&nbsp;<strong><a href=\"http:\/\/rhizome.org\/community\/26018\/\" target=\"_blank\" rel=\"noreferrer noopener\">response<\/a><\/strong>,&nbsp;<strong><a href=\"http:\/\/www.linkoln.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Abe Linkoln<\/a><\/strong>&nbsp;published his <strong>Complex Net Art Diagram<\/strong>. This crazy drawing suggests that as we transmit information, it morphs, remixes, and otherwise bounces around until completely transformed simply by the fact of being on the web.<\/p>\n\n\n\n<p>In this exercise, we&#8217;ll post our Hello World! site to a web server.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Defining_a_site\"><\/span>Defining a site<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>In Dreamweaver, open your Hello World! <strong>index.html<\/strong> page if it&#8217;s not already up. <\/p>\n\n\n\n<p>If you are developing on a personal machine, you&#8217;ve already defined your site using the instructions in the <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/sftp\/\">SFTP<\/a><\/strong>&nbsp;title.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/sftp\/\">Open SFTP here<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>If you&#8217;re developing on a networked machine, you need to define the site with every working session. Click on the link to <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/sftp\/\">SFTP<\/a><\/strong>&nbsp;and open the instructions in a new window. Return to this window and continue with the instructions below the link once you complete the protocols, which are particular to the institution where I teach (you may need to consult with your local IT folks or commercial host to follow your own protocols).<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Once you&#8217;ve completed this and entered the server via SFTP, look in the <strong>Files Palette<\/strong> to view the root folder for the site you just defined. Click on the button at the right to expand the view to see both the local (files on your hard drive) and remote (files on the server) sites.<\/p>\n\n\n\n<p><br>If you entered the log-in information when you defined the site, you can click on the <strong>Connect to remote server button<\/strong>. This will access the server. If you do not have a domain name, this button will return an error message. Click the button to collapse the view so that you are only viewing the local files. If you have access to a server, uploading files is as easy as dragging the files from within a folder on the local side of this palette to a folder (called a <strong>directory<\/strong>) on the remote side.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"alignright size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"307\" height=\"489\" data-attachment-id=\"4654\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw11\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw11.png\" data-orig-size=\"307,489\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw11\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw11.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw11.png\" alt=\"\" class=\"wp-image-4654\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw11.png 307w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw11-188x300.png 188w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw11-300x478.png 300w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"525\" data-attachment-id=\"4655\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw12\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw12.png\" data-orig-size=\"840,525\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw12\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw12.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw12.png\" alt=\"\" class=\"wp-image-4655\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw12.png 840w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw12-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw12-768x480.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Uploading_the_site_to_the_server\"><\/span>Uploading the site to the server<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We&#8217;re going live!<\/p>\n\n\n\n<p>Expand the <strong>Files Palette<\/strong> if needed, and select the <strong>Connect to remote server icon<\/strong> if you need to re-establish the link to your server. You should see the icon change to a plug with a checkmark, and you should see your <strong>Remote Server<\/strong> window on the left side of the dialog populate with your server. Expand the <strong>Remote Server<\/strong> <strong>root directory<\/strong> on the first line, and you&#8217;ll see the templated site you uploaded with Filezilla from our <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/in-the-cloud\/#4D_Media_ONLY_Website\">In the Cloud<\/a><\/strong> reference. That may include a folder for <strong>assets<\/strong>, one for <strong>images<\/strong>, an <strong>index.html<\/strong> page, and a <strong>LICENSE.txt<\/strong> file. Leave these untouched.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"525\" data-attachment-id=\"4658\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw101\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw101.png\" data-orig-size=\"840,525\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw101\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw101.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw101.png\" alt=\"\" class=\"wp-image-4658\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw101.png 840w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw101-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw101-768x480.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n<\/div>\n\n\n<p>In the <strong>Local Files<\/strong> window to the right of the dialog, locate the <strong>helloworld<\/strong> directory in your<strong> local<\/strong> root directory. Click, hold, and drag the <strong>helloworld<\/strong> directory icon over the <strong>Remote Server<\/strong> root directory icon \u2014 both look like folders \u2014 and you see a flurry of activity in a popup window as the files and directories copy over. Being a small site, this will not take long. When complete, you&#8217;ll see the new <strong>helloworld<\/strong> directory in the <strong>Remote Server<\/strong> window.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"525\" data-attachment-id=\"4659\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/dw102\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw102.png\" data-orig-size=\"840,525\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"dw102\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw102.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw102.png\" alt=\"\" class=\"wp-image-4659\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw102.png 840w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw102-300x188.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/dw102-768x480.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p>Go visit your site on the web by typing in the URL in a browser. You&#8217;re live!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media 3 | concrete poetry helloWorld Visit the sample site here &gt; Say hello to the sample site Hello World has become a tradition in programming: it&#8217;s the first program you write in a new language. First mentioned in&nbsp;a tutorial to the B programming language, it was popularized in a 1978 book introducing&nbsp;The C&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-4515","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-references"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>helloWorld - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Hello World: the first program written in any coding language frames the creation of a first website using HTML and CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"helloWorld - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Hello World: the first program written in any coding language frames the creation of a first website using HTML and CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-24T10:39:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T11:08:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"40 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"helloWorld\",\"datePublished\":\"2023-11-24T10:39:52+00:00\",\"dateModified\":\"2024-01-11T11:08:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/\"},\"wordCount\":7455,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"References\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/\",\"name\":\"helloWorld - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-11-24T10:39:52+00:00\",\"dateModified\":\"2024-01-11T11:08:18+00:00\",\"description\":\"Hello World: the first program written in any coding language frames the creation of a first website using HTML and CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/helloworld\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"helloWorld\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"helloWorld - newMediaWiki","description":"Hello World: the first program written in any coding language frames the creation of a first website using HTML and CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/","og_locale":"en_US","og_type":"article","og_title":"helloWorld - newMediaWiki","og_description":"Hello World: the first program written in any coding language frames the creation of a first website using HTML and CSS.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/","og_site_name":"newMediaWiki","article_published_time":"2023-11-24T10:39:52+00:00","article_modified_time":"2024-01-11T11:08:18+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"40 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"helloWorld","datePublished":"2023-11-24T10:39:52+00:00","dateModified":"2024-01-11T11:08:18+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/"},"wordCount":7455,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","References"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/","url":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/","name":"helloWorld - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-11-24T10:39:52+00:00","dateModified":"2024-01-11T11:08:18+00:00","description":"Hello World: the first program written in any coding language frames the creation of a first website using HTML and CSS.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/helloworld\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/helloworld\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"helloWorld"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=4515"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4515\/revisions"}],"predecessor-version":[{"id":6000,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4515\/revisions\/6000"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=4515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=4515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=4515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}