Dynamic Web Development Lecture Slides PDF

DYNAMIC WEB DEVELOPMENT WEEK 1.B: INTRODUCTION & REVIEW OF HTML AND CSS Dr. Basel Almourad 1 GOALS  Learn what is dynamic web  Learn how to design, develop, and deploy secure websites with dynamic web content...

DYNAMIC WEB DEVELOPMENT WEEK 1.B: INTRODUCTION & REVIEW OF HTML AND CSS Dr. Basel Almourad 1 GOALS  Learn what is dynamic web  Learn how to design, develop, and deploy secure websites with dynamic web content OUTLINE 1. What is a dynamic web site 2. Development tools and technologies 3. Review of HTML and CSS 4. Q & A 2 WHAT IS A DYNAMIC WEB SITE Dynamic web sites, more accurately referred to as web applications, have several characteristics/properties:  Respond to different parameters;  e.g. time of the day, browser version  Have a “memory”:  e.g. allowing registration and login, e-commerce Almost always integrate HTML forms;  e.g. allowing visitors to perform searches, provide feedback, etc. Often have interfaces to manage the site’s content Are easier to maintain, upgrade, and extend 3 WHAT IS A DYNAMIC WEB SITE Many technologies are available for creating dynamic Web sites; e.g.:  ASP.NET (Active Server Pages), a Microsoft construct  JSP (Java Server Pages)  ColdFusion  Ruby on Rails, a Web development framework for the Ruby programming language  PHP (Hypertext Preprocessor) to run in the servier All these are server-side technologies/ programing languages JavaScript studied in SWE-245 is a client-side 4 scripting language WHAT IS A DYNAMIC WEB SITE Dynamic Web sites don’t always rely on a database, but more and more of them do, for several reasons.  Excellent database applications are available at little to no cost; e.g. MySQL  Easier to maintain and update content via a database 5  WHAT IS A DYNAMIC WEB SITE Static vs. Interactive vs. Dynamic Web Page  Lets first watch the video Summary  Static Web Page: page content generated by server doesn’t change  Interactive: e.g. Client-side scripting is used to change the content  Dynamic Web Page: page content generated by server changes 6 COURSE STRUCTURE  The delivery of this course will consist of the following activities: 1. A lecture: Presentation of concepts from outline syllabus. 2. A practical workshop / laboratory session: A Practical session, which reinforces the concepts from the lecture and provides you with practical development experience in relation to web development. 7 DEVELOPMENT TOOLS & TECHNOLOGIES  For the course, we will use  PHP + MySQL XAMPP  Apache Web Server  DreamWeaver & NetBeans; the development IDE  A web browser; e.g. Chrome - More details on the platform in the next lecture - 8 REVIEW Web Components HTML CSS 9  WEB COMPONENTS Communicate using HTTP Web Client, e.g. Browser Request Request 2 1 3 4 Web Server Reply Reply Written in HTML Web Page Formatted with CSS 10 May include script; e.g. JS, PHP WEB COMPONENTS HTTP: Defines how the web application entities talk to each other Which messages to use How each message is formatted …… HyperText Markup Language (HTML): used to specify the content of a page Tells a browser how a web page is structured (e.g. defines headings, paragraphs, etc.) HTML pages are saved with the file extension.htm or.html Cascading Style Sheet (CSS): used to specify the presentation and layout of the page tell the browser how to display web pages (e.g. color, fonts, background, etc.) CSS files are saved with the file extension.css 11 HTML REVIEW 12 HTML: PAGE STRUCTURE There are several elements. Each element has an opening and a closing tag. This is my Web Page Title This is the Main Heading This text might be an introduction to the rest of the page. This is a Sub-Heading Many long articles have sub-headings to help you follow the structure. Another Sub-Heading 13 PARAGRAPHS AND HEADINGS  Normal paragraph text appears inside tags  Unless told otherwise, the browser will display paragraph text in its default text size and format, as defined by the browser  Headings of different levels use , , , etc Level Headers Level 1 header Level 2 header Level 3 header Level 4 header Level 5 header Level 6 header 14 EXAMPLE OF PAGE CONTENT Some html code Notice that the and text blocks are displayed in different font sizes, and paragraph text is all the same The code displayed in the browser 15 A CLOSER LOOK AT TAGS Most tags come in pairs: an opening and a closing tag. An element comprises the opening tag and the closing tag and any content that lies between them e.g. this is the content of my paragraph Some elements are empty elements (i.e. they have no content). e.g. 16 ATTRIBUTES TELL US MORE ABOUT ELEMENTS Elements may have attributes. Attributes appear on the opening tag of the element. Attributes are made up of two parts: a name and a value, separated by an equals sign. Attribute 1 Attribute 2 this is the content of my paragraph An element may have more than one attribute 17 HTML TAGS ARE PREDEFINED To learn HTML you need to know what tags you can use, what they do, and where they can go. Examples: Paragraphs and Headings Text formatting Links/hyperlinks Image Media 18 TEXT FORMATTING  There are tags which can format HTML text, e.g. This text is in italics This text is in bold This text is in bold italics  BUT it is recommended to use Cascading Style Sheets (CSS) for formatting 20 LINKS/HYPERLINKS THE PAGE THE LINK TAKES YOU TO Go to the BBC home page THE TEXT THE USER CLICKS ON IMAGES Tells the Image Define image display size (pixels) browser to filename display an image  You may need to add a pathname if your image/file is stored in a separate folder 21 CSS REVIEW 22 CSS: 3 TYPES OF STYLE  Three ways to apply a style to an HTML  Inline style  Style information appears near the text being styled This text will use the Arial font, and will be coloured red.  Internal or Embedded style sheet  Style information appears inside … tags p {color:red; font-family: Arial;}  External style sheet  Style information is held in separate CSS document 23 CSS: STYLE DECLARATION  Style declarations are in the form of:  selector-property-value  Selector = the element being styled (e.g. )  Property = the attribute being styled (e.g. text size for)  Value = how you want it styled (e.g. the text size and colour) Selector { propertyA:valueA; propertyB:valueB } e.g. h1 { font-size:20pt; color: #FF3399 } 24 EXAMPLE EXTERNAL STYLE SHEET h1 { Selector color: red; font-family: Arial } Propert Value y body { background-color: #ffffff; } p { font-size: 12px; text-align: center; } 25 CSS: STYLE DECLARATION  Selector: HTML elements can be selected :  by name:  use the element tag-name, e.g. h1, table, img, etc.  Will select all the elements with the given tag-name returns an array  by id:  Use #, followed by the element id  Will select only the element with the given id  returns a unique element  by class name:  Use., followed by the class name  Will select all the elements with the given class name returns an array 26 CSS: STYLE DECLARATION  Selector: Examples:  by name: to select all h1 elements, use h1. To format all h1 elements, use h1 {} To make all h1 elements red, use: h1 {color: red;}  By id: only this h1 element will be selected, even if there are other h1 elements #id3 {color: green;} : only the element with id=‘id3’ will be green 27 CSS: STYLE DECLARATION  Selector: Examples:  By class name: this h1 element will be selected this paragraph element will also be.cls {color: blue;} : all the elements with class=‘cls’ will be selected blue 28  DIV POSITION Default positions #d1,#d 2, #d3 { float: right;} #d1, #d2, #d3 { float: left;} #d1,#d 2 { float: left;} #d3{ clear: left; } 29 ANY QUESTIONS? 30 REFERENCES HTML https://www.w3schools.com/html/ 31