The Other Art Of Computer Programming. Milestone 5: HTML .


Edith Cowan UniversityResearch OnlineECU Publications Post 20132019The Other Art of Computer Programming. Milestone 5: HTML &CSS. 1990sMelanie TarrEdith Cowan University, melanie.tarr@gmail.comFollow this and additional works at: of the Education Commons, and the Programming Languages and Compilers Commons10.25958/5e3a76e662fd9This Book is posted at Research Online.

HTML & CSSMilestoneThe Other Art of Computer Programmingby Melanie TarrHypertext markup languageLearn HTML and cascading style sheetscripting for the world wide webForm submission and receivalLearn how to get and send informationThe Ruby Frameworkearn how to ma e a simple todo’ listPOST1990sDOI:10.25958/5e3a76e662fd9

1990s Milestone i e1Melanie Tarr

Table of ContentsThe other art of computer ructions. .3Client, server and browser. .4Universal Resource Locators. .5Model View Controller. .6Simple HTML and CSS. .7MVC and web apps. .10View and form. .11CSS elements. .10CSS inheritance . .11ebsite le structure. .12Tags. .13What does index.html look like. .14The syntax of CSS. .16How forms work when submit is pressed. .22Ruby on rails framework. .24Welcome the user. .26Adding an item to the database. .27Back to the controller. .30Testing your Ruby application. .313 ftHomeAboutLessons Teachers7 ftStudentsACTDIP041ACTDIP039ACTDIK024Note: This lesson may offer useful explanations forthe DT curriculum codes above and elaborations inthe Australian National Curriculum.1990s Milestone i e2Melanie Tarr

The other art of computer programmingHomeA2About1LessonsTeachersStudents3 ftHomeAboutLessonsTeachers7 ftStudentsserverrequestdatabrowser21990s Milestone i e3Melanie Tarr

31990s Milestone i e4Melanie Tarr

41990s Milestone i e5Melanie Tarr

51990s Milestone i e6Melanie Tarr

61990s Milestone i e7Melanie Tarr

71990s Milestone i e8Melanie Tarr

81990s Milestone i e9Melanie Tarr

index.htmlcssimages other files 91990s Milestone i e10Melanie Tarr

10 1990s Milestone i e11Melanie Tarr

index.html11 1990s Milestone i e12Melanie Tarr

12 1990s Milestone i e13Melanie Tarr

div id ”container” div id ”header” h1 The other art. /h1 /div div id ”content” div id ”nav” h3 Navigation /h3 ul li Home /li li About /li li Contact /li /ul /div div id ”main” h2 Home page /h2 p Lorem ipsum. /p p Lorem ipsum. /p p Lorem ipsum. /p /div /div div id ”footer” Copyright © 2017 /div /div 13 1990s Milestone i e14 div id ”nav” /div div id ”main” /div li Home /li li About /li li Contact /li h2 Home p Lorem p Lorem p Lorempage /h2 ipsum. /pipsum. /pipsum. /pMelanie Tarr

14 1990s Milestone i e15Melanie Tarr

simages other files to connect the html file to the style of itselements, we specify the following: link rel ”stylesheet” type ”text/css” href ”style.css”15 1990s Milestone i e16Melanie Tarr

{#header}#navigation {}#main{}#container {}#content {}#footer16 1990s Milestone i e17Melanie Tarr

VIEWpadding:()"* "#10px;3217 1990s Milestone i e18Melanie Tarr

VIEW18 1990s Milestone i e19Melanie Tarr

VIEW19 1990s Milestone i e20Melanie Tarr

VIEW#content {padding:10px;}#nav {width: 180px;float: left;}#main {width: 600px;float: right;}20 1990s Milestone i e21Melanie Tarr

21 1990s Milestone i e22Melanie Tarr

{#header}#navigation {}#main{22 1990s Milestone i e23Melanie Tarr

1990s Milestone i e24Melanie Tarr

How forms work when “submit” ispressedGETThe other art .180px600pxcopyright24 1990s Milestone i e25Melanie Tarr

The other art .180px600pxThe other art .180px600pxEXAMPLE:DatabasesData files25 1990s Milestone i e26EXAMPLE:HtmlSome PHPEXAMPLE:PHPMelanie Tarr

1990s Milestone i e27Melanie Tarr

MODELCONTROLLERVIEWwww.todolist.27 1990s Milestone i e28Melanie Tarr

tenewhtml.erb29 1990s Milestone i e29Melanie Tarr

todolistappviewsitemsnewhtml.erbOnce the route istriggered the controllergenerates the view fileSQLtodolis tdatabasetitleanotherdatabasenotes28 1990s Milestone i e30Melanie Tarr

show all the items in thelist on the viewcreate a new itemdelete the itemedit the itemcreate a global variableto contain an array ofitems or a listmake a new item30 1990s Milestone i e31Melanie Tarr

Testing your Ruby application31 1990s Milestone i e32Melanie Tarr

The other art of computer programming. Home About Lessons Teachers Students. Home About Lessons Teachers Students. Table of Contents. 1990s Milestone ie 2 Melanie Tarr. 2 - request data. server browser. A 2 1. 7 ft 3 ft. The other art of computer programming. Home About Lessons Teachers Students. Home About Lessons Teachers Students . 1990s Milestone ie 3 Melanie Tarr. 3 - 1990s