Introduction to HTML

Introduction to HTML1Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.OutlineIntroduction to HTMLBasic Structure of a HTML pageText formatting tags in HTMLLists in HTML2Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.HTML – Hyper-Text Markup Language – The Language of Web Pages on the World Wide WebIt defines the structure of webpages and determines how data is displayed onlineHTML is a text formatting languageIs a set of special instructions that can be added in the text to add formatting and linking informationIs directly interpreted by the browser3Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.1. Introduction to HTMLHypertext:Allows for non-linear linking to other documentsMarkup Language:Content is “marked up” or tagged to tell the browser how to display itHTML standards are developed under the authority of the World Wide Web Consortium (W3C), headed by Tim Lee Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.1. 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 document5Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.1. 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.HTML56Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.1. 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 Paired Tags : Singular Tags: 7Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.1. Introduction to HTMLHTML is not case-sensitivemultiple spaces will appear as a single spaceBlank and new lines are ignoredHTML files have .html extension8Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.1. Introduction to HTMLThe entire web page is enclosed within and Within these tags two distinct sections are created head and bodyHead: . Body: indicate the start and end of main body of textual information 9Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.2. Structure of HTML Page10Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.2. Structure of HTML PageFirst HTML page:Attributes:BGCOLOR: Change the background colorBACKGROUND: Place an image at backgroundTEXT: Change the color of the body textExample: 11Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.3. The BODY Tag 12Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.4. Formatting textFormatting Text...13Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan... : starts a new paragraph Align (left, right, center and justify): gives an one line break .. : heading: draws horizontal lineALIGN (LEFT,CENTER,RIGHT)SIZE=2WIDTH=100%colorText Styles: . , . , . 14Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.4. Formatting text.FONTFACE: Sets the specified font nameSIZE: Size of the text (between 1 and 7)COLOR: Set the color of the textExample: Welcome15Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.4. Formatting textUn-ordered Lists:Starting Tag , 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)16Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.5. Lists in HTMLDefinition Lists:Starting TagEnding Tag Definition Term Definition Description 17Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.5. Lists in HTMLWhat is HTML?Basic Structure of HTML pageBody tag attributesText formatting tagsLists18Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.SummaryChapter 1, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. 19Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References