1. Web Engineering Hypertext Markup Language(HTML)  Bscshelp.com Indus International Institute D G khan 1

2. Overview Indus International Institute D G khan 2  Introduced by: Tim Berners-Lee.  HyperText Markup Language (HTML)  Derived from SGML (Standard Generalized Markup Language )  Not a procedural programming language like C, Fortran, Cobol or Pascal  MarkUp language The notation that is used to indicate how text should be displayed. Identify elements of a page so that a browser can render that page on your computer screen

3. 3 HTML Fundamentals  HTML Tags  keywords surrounded by angle brackets like  Normally come in pairs like and  The first tag in a pair is the start tag, the second tag is the end tag  Case insensitive  Ignores white spaces and unknown attributes  HTML Documents = Web Pages  HTML documents describe web pages  HTML documents contain HTML tags and plain text  HTML documents are also called web pages

4. 4 HTML - Fundamentals  Open tags  ,   Closed tags  stuff  text to be bolded  level 1 heading text  Comments

5. 5 HTML – Fundamentals Document Structure Header Body

6. 6 HTML – Fundamentals Basic Structure The title of your html page …

7. Various HTML Elements Indus International Institute D G khan. 7

8. Writing and Saving an HTML File Indus International Institute D G khan 8

9. Hypertext Markup Language 9 Authoring Tools  Dreamweaver  Staying Simple: Just use Notepad  The best way to learn HTML

10. 10 HTML – Fundamentals Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 Output

11. 11 HTML - Fundamentals Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 Output

12. 12 HTML - Fundamentals Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 Output

13. 13 HTML - Fundamentals Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 Output

14. 14 HTML - Fundamentals Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 Read my Bio

15. 15 HTML - Fundamentals Output

16. Hypertext Markup Language 16 Miscellaneous  Most Common Character Entities  Colors CharacterDescriptionEntity Name space <less than< >greater than> &ampersand& "quotation mark" ColorHEXRGB #000000rgb(0,0,0) #FF0000rgb(255,0,0) #00FF00rgb(0,255,0) #0000FFrgb(0,0,255) #FFFF00rgb(255,255,0) #00FFFFrgb(0,255,255) #FF00FFrgb(255,0,255) #C0C0C0rgb(192,192,192) #FFFFFFrgb(255,255,255)

17. 17 HTML – Fundamentals Colors color = “red” color = “#FF0000” Hexadecimal values vary from 00 to FF 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f Red Green Blue #FF FF FF

18. 18 HTML – Fundamentals Headings  Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text. Heading 1 level text Heading 2 level text Heading 3 level text Heading 4 level text Heading 5 level text Heading 6 level text

19. HTML – Fundamentals Horizontal Lines and Comments  Horizontal Line The tag is used to create an horizontal rule (line). This is a paragraph  Comments Comments are ignored by the browser and are not displayed. Make the code readable and understandable Hypertext Markup Language 19

20. TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use instead Deprecated. Use instead Deprecated. Use styles instead Hypertext Markup Language 20 HTML – Fundamentals Text Formatting (not recommended, use CSS instead)

21.  The style attribute is a new HTML attribute.  It introduces CSS to HTML.  Purpose: To provide a common way to style all HTML elements.  HTML Style Examples  style="background-color : yellow"  style="font-size:10px"  style="font-family : Times"  style="text-align : center" Hypertext Markup Language 21 HTML – Fundamentals Style Attribute

22.   Look! Styles and colors   This text is in Verdana and red   This text is in Times and green  This text is 30 pixels high  Hypertext Markup Language 22 HTML – Fundamentals Style Attribute

23. Hypertext Markup Language 23 More about Hyperlinks  Relative Paths (Recommended)  Same directory: …  Parent directory: …  Target Attribute  …  Named Anchors  Web Technologies …

24. 24 HTML – Fundamentals Lists Unordered list apples bananas grapes strawberries Ordered list apples bananas grapes strawberries

25. 25 HTML – Fundamentals Lists Unordered list  apples  bananas  grapes  strawberries Ordered list II. apples III. bananas IV. grapes V. strawberries What is Definition List?

26. 26 HTML – Fundamentals Tables Class Grades Student Grade Tom B+ Sue A-

27. 27 HTML – Fundamentals Tables  BORDER=value  ALIGN=left|right|center  CELLSPACING=value  CELLPADDING=value  WIDTH=value|percent

28. 28 HTML – Fundamentals Tables Class Grades Student Grade Tom B+ Sue A-

29. 29 HTML – Fundamentals Tables rowspan and colspan

30. 30 HTML – Fundamentals Student Grades Student Grade Tom A Sue

31. 31 Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480

32. 32 HTML – Fundamentals Tables  Tables are frequently used to layout the basic web page design. 640 1280

33. Hypertext Markup Language 33 Next Class  Advance HTML  Forms, Frames, Embedded Objects …

34. 34 Resources http://www.w3schools.com/  HTML Tutorials Learn HTML Learn XHTML Learn CSS Learn TCP/IP  Browser Scripting Learn JavaScript Learn DHTML Learn VBScript Learn HTML DOM Learn WMLScript  Server Scripting Learn SQL Learn ASP Learn ADO Learn PHP  XML Tutorials Learn XML Learn XSL Learn XSLT Learn XSL-FO Learn XPath Learn XQuery Learn XLink Learn XPointer Learn DTD Learn Schema Learn XML DOM Learn XForms Learn SOAP Learn WSDL Learn RDF Learn RSS Learn WAP .NET (dotnet).NET Microsoft.NET ASP.NET Mobile  Multimedia Learn Media Learn SMIL Learn SVG Learn Flash  Web Building Web Building Web W3C Web Browsers Web Quality Web Semantic Web Careers Web Hosting Web Certification