Blog

Lab 4: Publishing with HTMLLearning Outcomes and IntroductionSet Up:Integrated Development EnvironmentTask 1: Basic StructureTask 2: Lists and Tabular DataTask 3: Images and LinkingSubmissionLearning Outcomes and IntroductionIn this Lab you will learn how to :Set up an IDE environment for Code developmentCreate a document for publishing on the WebInsert Mark up Tags in text filesCreate a an ordered or unordered listCreate a tabular DataInsert images in your fileLink to other files or websites fileTest a live preview before publishing on the WebHow to fix the tags when markup is wrong :(Plan a Web PublicationThere are many authoring tools, like MS Word, that allow you create documents visually and export the result as an HTML file. However, because these tools don’t work with HTML directly, they usually produce poor markup that is hard for a human to read and that does not make good use of the features of the language. For this lab, you must use an editor that allows you to hand-craft the markup.As you progress through the lab, your document will slowly become more and more complex. Save and check your work in a web browser frequently to catch errors early. You will also see how changing your markup changes the presentation of the document in your browser. However, don’t worry to much about how it looks right now; what you are seeing is only the defaults – we will learn how to override these defaults in a later lab.Web browsers are often very forgiving of errors in your code, but your marker will not be! Be careful to double-check your work and ask for help when you need it. Task 1 will show you one way to validate your code, using an online tool. It would be a good idea to make use of this tool for subsequent tasks as well! Note:When preparing to publish a document over the WWW, you need to ask your self some of the following questions:What is the purpose of this Web presentation?What audience am I trying to reach and how does that affect my presentation?What information am I trying to convey?How will I organize the information?Web Document Design ChecklistBe brief and– use lists whenever possibleBe clear – avoid vague wordsUse simple languageCheck your spelling and grammarTry your web page in more than one browserSet Up: IDE (Integrated Development Environment)(8 marks)To create an IDE envrionement. The following is as example of a few options for code development. you need to have a code editor for generating the code and a browser for viewing the output. Here is an example of how your Programming Environment should look like You will be creating an HTML document from scratch using a code editor. These are some of the code editors your can use. In the lab we will use NotePad++. You should make sure you have an good editor with syntax highlightingYou need a Code editor and a browser in order to test your code.Code Editors NotePad++BracketsNVU KompozerBrowsersGoogle ChromeFireFoxInternet ExplorerYou will begin with unstructured plain text, and slowly improve upon it by adding semantic markup. During this process, you will learn:This lab document is written in HTML, and has examples of all of the topics

covered in its own markup. Take a look at its source code (or use your browser’s “web inspector”) to see how it works!Task 2: Basic Structure (7 marks)InstructionsCreate a folder inside your existingfolder. All of your work for this lab will be stored here.Note: You may complete the lab assignment using any plain-text editor, but because different editors work differently, not all the instructions will be directly applicable. Open the “NotePad++” code editor.Selectfrom the menu and choose yourfolder.Selectto create a new file.Select, and name this file _.txt, where and are your own first and last name respectively.Copy & paste the contents of,, andinto your new file, leaving some blank space between each.In your web browser (where you are reading this lab), choosefrom the menu, and select your_.txtfile. Notice that your browser displays this file exactly as it appears in your editor, including line breaks, empty lines, and indenting.Back in NotePad++, right-click on your_.txtfile and choose. Change thepart of the filename to .Open your renamed lab file in your browser, and notice how the browser’s treatment of it has changed! Whitespace is usually not meaninful in HTML; this allows you to arrange text in whatever way makes it easiest to read and edit without affecting the end result. Without markup, an HTML has no structure, and the browser displays its content as one… long… paragraph… Add at the very beginning of your document, and at the very end. Note: Brackets will try to be helpful and insert closing tags for you as soon as you’ve finished typing the opening tag. When adding tags to existing content this probably isn’t what you want, so make sure to remove them! These are called “opening” and “closing” tagsrespectively, and together these particular tags define theelement. This element contains the “main content” of a document – usually the only content visible in the main scrolling area of a browser. insert the code to include the image in your document.If you do not see your image, check to see where did you save your image “lightning-off.svg”.Open your file in your browser, and see if you can see the image you just placed in your code.Keep your browser and code editor side by side on your screen. It will save you some time and effort by showing the changes you make to your document in the browser as you make them! Normally, web browsers will only show you what a document looks like at the time you open it, and You need to manually “refresh” to notice any changes.Keep this window open for the remainder of the Task, and watch how subsequent changes to your document are reflected in the browser.Add just before each paragraph, and just after. Notice in your browser that each block of text that is marked up as with a paragraph element now starts on a new line and has some whitespace separating it from other paragraphs. Not all of your content is really a paragraph; use your judgement to decide which blocks of text are paragraphs and only apply this element to them.Indent your paragraph elements so that it is visually clear they are insideof your sections. For example,