{"id":77,"date":"2019-04-05T14:35:27","date_gmt":"2019-04-05T14:35:27","guid":{"rendered":"https:\/\/projects.history.qmul.ac.uk\/handson\/?page_id=77"},"modified":"2023-05-26T13:22:44","modified_gmt":"2023-05-26T13:22:44","slug":"module-1","status":"publish","type":"page","link":"https:\/\/projects.history.qmul.ac.uk\/handson\/module-1\/","title":{"rendered":"[M1L0] Module 1: Introduction to Web Technologies"},"content":{"rendered":"<p>This module is an introduction to core languages of the web, HTML and CSS.\u00a0 All websites, from simple text-based pages like this one to rich applications like email or maps are delivered using a combination of these technologies.<\/p>\n<p>You might wonder why we have chosen to start our course by studying HTML and CSS.\u00a0 There are many factors that make them good candidates, but here are a few key reasons:<\/p>\n<p>First, they contribute towards a baseline understanding of how the Web works, which will help to inform conversations in the hackathon itself.\u00a0 Such an understanding is important for any digital humanities project, because it helps to make conversations between different members of a project team more meaningful.\u00a0 The best apps are produced when each of the roles within a team try hard to understand the needs and priorities of each of the other roles, rather than (for example) treating code as a mysterious black box that can only be understood by experts.\u00a0 Functional literacy with \u2013 or at least curious engagement in \u2013 others\u2019 spheres of knowledge can lead to more informed discussion and sharing of ideas, and helps to avoid dead-end discussions and miscommunication.<\/p>\n<p>Second, they are simple languages that are easy to learn.<\/p>\n<p>Third, they introduce some concepts and structures that you will encounter if you go on to learn other markup languages, like XML &#8211; which is common in digital literary editing.<\/p>\n<p>Finally, they are a good entry point to coding because you can produce something very quickly.\u00a0 Hopefully, this means they are also fun!<\/p>\n<p>In the early days of the web, anyone who published online needed to understand how to write HTML.\u00a0 Thfese days, many people publish online on blogs, websites, or social media platforms using simple What-You-See-Is-What-You-Get (WYSIWYG) editors, that handle all the behind-the-scenes coding for you \u2013 this page itself is written on one such platform (WordPress).\u00a0 However they are created, though, every page on the Web includes some HTML, and it\u2019s easy to take a look on most browsers.\u00a0 Let\u2019s have a look at the code of this page.\u00a0 Read through the instructions in full before following them, or you might get lost:<\/p>\n<ul>\n<li>Right-click anywhere on this page<\/li>\n<li>Click \u2018View Page Source\u2019 (this menu item will be different depending on which browser you are using)<\/li>\n<li>You will see something like this:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-119 aligncenter\" src=\"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-content\/uploads\/sites\/30\/2019\/04\/Screenshot-2019-04-10-at-12.35.14-1024x252.png\" alt=\"\" width=\"1024\" height=\"252\" srcset=\"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-content\/uploads\/sites\/30\/2019\/04\/Screenshot-2019-04-10-at-12.35.14-1024x252.png 1024w, https:\/\/projects.history.qmul.ac.uk\/handson\/wp-content\/uploads\/sites\/30\/2019\/04\/Screenshot-2019-04-10-at-12.35.14-300x74.png 300w, https:\/\/projects.history.qmul.ac.uk\/handson\/wp-content\/uploads\/sites\/30\/2019\/04\/Screenshot-2019-04-10-at-12.35.14-768x189.png 768w, https:\/\/projects.history.qmul.ac.uk\/handson\/wp-content\/uploads\/sites\/30\/2019\/04\/Screenshot-2019-04-10-at-12.35.14.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<li>Scroll down to around line 200, and you should see these instructions.<\/li>\n<\/ul>\n<h2>How this Module Works<\/h2>\n<p>In this module, we will be creating a basic HTML profile page that looks like this:<\/p>\n<p>&nbsp;<\/p>\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\"><iframe style=\"height: 100%; width: 100%; border: 0;\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/intro-to-web?path=index.html&amp;previewSize=100\"><br \/>\n<\/iframe><\/div>\n<p>&nbsp;<\/p>\n<p>The module is structured into 2 short practical lessons.<\/p>\n<ol>\n<li>HTML: Structuring Web Pages<\/li>\n<li>CSS: Adding Aesthetics<\/li>\n<\/ol>\n<h2>Setting Things Up<\/h2>\n<p>Before we begin in earnest, we need to set up our tools.\u00a0 We recommend that you use a desktop web browser that is maximised so that it takes up the whole of your screen when working on these examples.<\/p>\n<p>A few years ago you would have needed to install software on your computer in order to develop a web page, but fortunately that is no longer the case.\u00a0 For our lessons we are going to use a fully-online development tool called Glitch.<\/p>\n<p>You can use Glitch straight away without creating an account, but this module will be easier if you create an account so that you can easily find your project and use it in successive lessons.\u00a0 (Glitch does save \u2018anonymous\u2019 projects, but it deletes them after 2 weeks, and you won\u2019t be able to find them easily on a different computer).<\/p>\n<ol>\n<li>Go to <a href=\"https:\/\/glitch.com\">glitch.com<\/a><\/li>\n<li>Click the \u2018Sign in\u2019 button in the top right<\/li>\n<li>If you don\u2019t already have an account, you will be presented with a variety of ways of logging in.\u00a0 You can use an existing account with Facebook, Google or GitHub or, if you don\u2019t want to use those you can enter your email address and a special log-in link will be sent to you.\u00a0 Pick one of the \u2018log in with\u2019 options and confirm that you want to allow Glitch to log in using your account, or enter your email address and follow the instructions in the email to set up your account.<\/li>\n<\/ol>\n<p>Optional: Install Firefox<\/p>\n<ul>\n<li><a href=\"https:\/\/getfirefox.com\/\">Get Firefox from the Mozilla website, here<\/a><\/li>\n<\/ul>\n<p>The site we are going to create should work in any Web Browser, but the examples I am going to give all use Firefox.\u00a0 I recommend Firefox because it is fast and easy to use, but also because \u2013 unlike most other popular browsers \u2013 it is produced in an open way by a not-for-profit foundation whose goal is \u2018Our mission is to ensure the Internet is a global public resource, open and accessible to all.\u2019\u00a0 Google\u2019s goal, by contrast is to make money by showing as many adverts to as many people as possible.\u00a0 This is not to say that Google necessarily produces a bad browser, or that the company\u2019s actions are necessarily suspect, but the continued existence of products like Firefox is good for the health of the web and \u2013 arguably \u2013 for the public sphere in general.<\/p>\n<p>If you have read all this then you are ready!\u00a0 <a href=\"https:\/\/projects.history.qmul.ac.uk\/handson\/module-1\/m1l1-html\/\">Go to the next lesson &gt;<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This module is an introduction to core languages of the web, HTML and CSS.\u00a0 All websites, from simple text-based pages like this one to rich applications like email or maps are delivered using a combination of these technologies. You might wonder why we have chosen to start our course by studying HTML and CSS.\u00a0 There [&#8230;] <a class=\"read-more\" href=\"https:\/\/projects.history.qmul.ac.uk\/handson\/module-1\/\">Read More<\/a><\/p>\n","protected":false},"author":69,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-77","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":23,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/77\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/77\/revisions\/454"}],"wp:attachment":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/media?parent=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}