Web Technologies and Programming Lecture 06

1Web Technologies and ProgrammingLecture 06 2Modeling web applicationsIntroduction to HTML3Summary of Previous Lecture Software system architectureSpecifics of web application architectureLayered web architecture2-layered architecture3-layered architectureN-layered architecture4OutlineIntroduction to HTMLBasic Structure of a HTML pageText formatting tags in HTMLLists in HTML5HTML – Hyper-Text Markup Language – The Language of Web Pages on the World Wide WebHypertext:Allows for non-linear linking to other documentsMarkup Language:Content is “marked up” or tagged to tell the browser how to display it61. Introduction to HTMLIt is called markup language because it contains a set of markup tagsHTML is a text formatting languageHTML standards are developed under the authority of the World Wide Web Consortium (W3C), headed by Tim Lee Introduction to HTMLIt defines the structure of webpages and determines how data is displayed onlineIt has a set of special instructions that can be added in the text to add formatting and linking informationIt is directly interpreted by the browserHTML is described by different HTML tagsEach HTML tag describes different document content81. Introduction to HTMLHTML was created in 1991 by Tim Berners-Lee at CERN in SwitzerlandIt was designed to allow scientists to display and share their research1995- HTML 2lots of browsers had added their own bits to HTMLDan Connolly and colleagues collected all the HTML tags that were widely used and collated them into a draft document91. Introduction to HTML1997- HTML 3.2It was the first version developed and standardized exclusively by the W3C HTML 3.2 included the support for applets, text flow around images, subscripts and superscripts etc 1999 – HTML 4.1extends HTML with mechanisms for style sheets, scripting, frames etc.HTML5101. Introduction to HTMLHTML Tags:Tags are instruction that are directly embedded into the text of the documentIs a signal to a browser to do something before just throwing text on the screenBegin with open angle bracket For example 111. Introduction to HTMLHTML Tags:HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tagThe end tag is written like the start tag, but with a slash before the tag namePaired Tags : Singular Tags: 121. Introduction to HTMLHTML is not case-sensitiveBlank and new lines are ignoredComment can be added asHTML files have .html extension131. Introduction to HTML142. Structure of HTML PageThe entire web page is enclosed within and Within these tags two distinct sections are created head and bodyHead: shows the title of the webpage152. Structure of HTML Page. Body: indicate the start and end of main body of textual information Body is the part of html page which is displayed by web browser.162. Structure of HTML Page172. Structure of HTML PageExample - First HTML page:182. Structure of HTML PageExample Output- First HTML page: DeclarationThe declaration helps the browser to display a web page correctly depending on doctype.To display a document correctly, the browser must know both type and version.The doctype declaration is not case sensitive.192. Structure of HTML PageCommon DOCTYPE DeclarationHTML5HTML 4.01XHTML 1.0202. Structure of HTML PageAttributes:BGCOLOR: Change the background colorBACKGROUND: Place an image at backgroundTEXT: Change the color of the body textExample: 213. The BODY Tag 22Contents of the bodyText=“red”bgcolor=“pink”3. The BODY Tag 234. Formatting textFormatting Text...24.. : starts a new paragraphAttributes of paragraph (values) Align (left, right, center and justify): gives an one line break. After this, tag start from next lineText Styles: . , . , . : draws horizontal lineAttibutesALIGN (LEFT,CENTER,RIGHT)SIZE=2WIDTH=100%color254. Formatting textHeadings (6 sizes) .. .. .. .. .. .. 264. Formatting text.FONTFACE: Sets the specified font nameSIZE: Size of the text (between 1 and 7)COLOR: Set the color of the textExample: Welcome274. Formatting text : Spaces and line breaks are supportedText is displayed in mono-spaced formatText is shown in same format as written in editor284. Formatting textWithout With :DEL is also used in modern browsers::294. Formatting text304. Formatting text314. Formatting textSpecial Characters: Non-breaking space:  Copyright: © © Registration mark: ® ®Fraction one qtr: ¼ ¼ Greater-than sign: > >Less-than sign: < , Ending Tag List Items Type (FILLROUND, SQUARE)Ordered Lists:Starting Tag , Ending Tag List Items Type (“1”, “A”, ‘”a”, ”I”, ”i”)Start (Alerts the numbering Sequence)Value (Changes the number sequence in the middle of an ordered list)355. Lists in HTMLUn-ordered Lists Example:365. Lists in HTMLOrdered Lists Example:375. Lists in HTMLDefinition Lists:Starting TagEnding Tag Definition Term Definition Description 385. Lists in HTMLDifferences Between HTML 4.01 and HTML5In HTML 4.01, the tag defines a definition list.In HTML 5, the tag defines a description list.395. Lists in HTMLDefinition Lists Example:405. Lists in HTMLNested List:We can nest multiple list to make sub-lists415. Lists in HTMLNested List:We can nest multiple list to make sub-list425. Lists in HTMLWhat is HTML?Basic Structure of HTML pageBody tag attributesText formatting tagsLists43SummaryTHANK YOU44