1 / 39

Unit-2 Introduction to HTML

Unit-2 Introduction to HTML. Prepared by: Prof. Harish I Rathod Computer engineering department Gujarat power engineering & Research institute. WEB APPLICATION DEVELOPMENT (170705). The Development Process. A Web site is generally composed of individual pages .

talon
Download Presentation

Unit-2 Introduction to HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Unit-2 Introduction to HTML Prepared by: Prof. Harish I Rathod Computer engineering department Gujarat power engineering & Research institute WEB APPLICATION DEVELOPMENT (170705)

  2. The Development Process • A Web site is generally composed of individual pages. • Each pages are linked together. • Each page relating to a different aspects(part) of web site, • Ex: news, links, contact us etc… GPERI – WAD - UNIT-2

  3. The Development Process • A Web development having following satges: • Requirement. • Design. • Write Code. • Test. • Upload. • Re-iterate. GPERI – WAD - UNIT-2

  4. The Development Process Requirement: • It is important to understand the requirement of problem(site) before build it. • It can be seen from the point of view of both graphics design and functionality. • The best idea is, make some sketches at the start to play with ideas. • Then we can work out which pages should link to each other. GPERI – WAD - UNIT-2

  5. The Development Process Design: • This stage tries to provide a solution to match the requirements. • It also consider, what is possible with the various technologiesthat are available. • Some times hand coding, although more precise, can simply not be fast enough to meet a deadline! • We may get help from application such as Dreamwear. • Web site can require a large amount of work with art and graphics as well as code tools. GPERI – WAD - UNIT-2

  6. The Development Process Write Code: • This is the point where we start writing our HTML code. • Hand coding is slow but precise (exact or accurate) and usually easier to follow. • Generated script and HTML from an application may sometimes also be non-standard. GPERI – WAD - UNIT-2

  7. The Development Process Test: • After spending some time working on web site, we want to see what it looks like. • We load a web page in browser. • Then it is possible to show, what a page look like. GPERI – WAD - UNIT-2

  8. The Development Process Upload: • When we happy with our page, we may publish it for public viewing. Re-Iterate: • It is an instruction to do the above again until we got it right and it work without bugs. GPERI – WAD - UNIT-2

  9. Basic HTML • HTML can be considered as the main language of the Web in some respects. • All browsers understand it because of its simplicity. • Initially we develop static pages; • Means, page can not change depending on user input or interaction. • The aim of HTML is to format a Web page hopefully (confidently). GPERI – WAD - UNIT-2

  10. Basic HTML Loading Pages with the Browser: • A page can be loaded into a browser in a couple of way: • By writing a URL in the address bar, • By going to the menu and click on ‘file’ then ‘open’. GPERI – WAD - UNIT-2

  11. Basic HTML A Page on the Web: • How do we start? • If we point a web browser at a document it will do its best to read it. • For ex: • If we use ‘open’ on the file menu of our browser and enter the name of a local file called hello.txt containing simple text: Hello • It will actually read and display it. GPERI – WAD - UNIT-2

  12. Basic HTML A Page on the Web: • How do we start? • If we point a web browser at a document it will do its best to read it. • For ex: • If we use ‘open’ on the file menu of our browser and enter the name of a local file called hello.txt containing simple text: Hello • It will actually read and display it. GPERI – WAD - UNIT-2

  13. Basic HTML HTML Document Structure: • To make a ‘real’ Web we need to add some elements and rename the file to either htm or hml. • To create a HTML document: • Open a new blank file in editor and write some code: <html> A little bit of hypertext </html> GPERI – WAD - UNIT-2

  14. Basic HTML HTML Document Structure: • Anything written in triangular brackets is known as tag and it is a part of the markup language. • Number of tags in web page, • Each tag having some function. • For Ex: <html> tag, identify as HTML. • HTML tags are in lowercase. (recommended) • Tags are not case sensitive. GPERI – WAD - UNIT-2

  15. Basic HTML HTML Document Structure: • The <html> tag identifies a section of HTML code, • Opening with the <html> and closing with </html>. • Simple text message example: GPERI – WAD - UNIT-2

  16. Basic HTML HTML Document Structure: <html> <head> <title> The amazing art of web programming </title> </head> <body> a little bit of hypertext </body> </html> GPERI – WAD - UNIT-2

  17. Basic HTML HTML Document Structure: • The body section contains the main document while, • The head contains the detail such as title. • An HTML element begins with a start tag and ends with a closing tag: • Example: <title> The amazing art of web programming </title> GPERI – WAD - UNIT-2

  18. Formatting And Fonts • We can add more line into body section as text and view it on output: <body> a little bit of hypertext <br> makes the world go round<br> and <i> around </i> <br> </body> GPERI – WAD - UNIT-2

  19. Formatting And Fonts • The <br> or break tag makes output start on the next line. • Another way of adding breaks is to define paragraph with the <p> tag with a closing </p> at the end of the paragraph. • The <p> tag places a blank line before the line start. • To break a section of a page <hr> tag can be use. • Creates a line or horizontal rule , like <br> tag. • It does not require an ending tag. GPERI – WAD - UNIT-2

  20. Formatting And Fonts Using Types of Emphasis: • Any word encloses by the <i> and </i> will be made italic. • There are many ways of emphasizing. GPERI – WAD - UNIT-2

  21. Formatting And Fonts Preformatted Text: • <pre>…</pre> is a useful formatting element. • It enables us to embed text that is already formatted, • So we don’t have to put break tag. GPERI – WAD - UNIT-2

  22. Formatting And Fonts Preformatted Text: • For Example: <pre> This is already set out in the way I want it It has some advantages and is quick You don't have to add line breaks but I hasn't proportional spacing and is in courier font...! </pre> GPERI – WAD - UNIT-2

  23. Formatting And Fonts Font Size: • We can change the size of our text. • Possible ways are: • Use <font>…</font> tag or, • Use <h..> … </h..> tag. • <h..> tag can control the size and degree of emphasis for heading. GPERI – WAD - UNIT-2

  24. Formatting And Fonts Font Size: • . GPERI – WAD - UNIT-2

  25. Formatting And Fonts Font Size: • The size of font can also be changed with <font size = ..> …. </font> tag. • The ending font tag will make the font revert to the previous font used. • We can align text: left, right or center using <p>..</p> tag. (paragraph). GPERI – WAD - UNIT-2

  26. Formatting And Fonts Font Size: <html> <head><title>the amazing art of web programming </title> </head> <body> <p align=“center”> a little bit of hypertext <br> Makes the world go <i>around </i> </p> </body> </html> GPERI – WAD - UNIT-2

  27. Introduction to XHTML XML (Extensible Markup Language): • XML is a meta-language. • It is a language used to describe and define other language. • Like HTML, • it processes: • tags, attribute and values. • Use it to design own custom markup language. • Used to format own document. GPERI – WAD - UNIT-2

  28. Introduction to XHTML XML: • Using tags, identify data and then data available for the use again. • The software that interprets the XML is known as parser. • Case sensitive. • Advantages: • Code written in a new specification, understood by all the browser. • Any one who already some knowledge of HTML could quickly get used to it. GPERI – WAD - UNIT-2

  29. Introduction to XHTML XML: • Using tags, identify data and then data available for the use again. • The software that interprets the XML is known as parser. • Case sensitive. • Advantages: • Code written in a new specification, understood by all the browser. • Any one who already some knowledge of HTML could quickly get used to it. GPERI – WAD - UNIT-2

  30. Introduction to XHTML XHTML: • Several types of XHTML, allows following flexibility: • transitional, allow the use of deprecated (out of date or old) tags, • frameset, allows the use of both deprecated and frames. • strict, • Each flexibility can be combine with CSS. GPERI – WAD - UNIT-2

  31. The Move to XHTML • XHTML and HTML share a common vocabulary but have a slightly different syntax. • Both XHTML and HTML 4 demanding in a structure, imply in code. • For example: • For HTML 4 <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> GPERI – WAD - UNIT-2

  32. The Move to XHTML • For example: • For XHTML : it is an XML application, a page should begin with an XML declaration <? Xml version=“1.0“ ?> • The question marks say that this is an XML declaration. • There must be no space between opening question mark and the xml, GPERI – WAD - UNIT-2

  33. The Move to XHTML • The XHTML can also contain the character set encoding as an optional attribute: <?xml version=“1.0” encoding=“UTF-8” ?> • The encoding format used is 8-bit Unicode Transformation format • One of the attributes is the actual human language begin used in the form of code, for example • <html xml:lang=“en”> • </html> GPERI – WAD - UNIT-2

  34. Document Structure • The document structure for an XHTML: <!DOCTYPE HTML PUBLIC “-//W3C// DTD XHTML 1.00 Transitional//EN” “https:// transitional.dtd”> <html xmlns=“http:// ”> <head> <title>Title </title> </head> <body> … </body> </html> GPERI – WAD - UNIT-2

  35. Document Structure Difference • The head and body elements are required in XHTML whereas in HTML they are optional. • Close tags • For example <br> <br/> • All XHTML tag and attribute name must be in lowercase, and • All attribute values must be enclosed in quotes. • Nest tags but must be done correctly. (without overlapping tags) GPERI – WAD - UNIT-2

  36. Document Structure Difference • Must specify a document title. GPERI – WAD - UNIT-2

  37. Document Structure META TAGS • Metadata is information about information. • Machine understandable information about the Web resources. • Include in both HTML and XHTML to describe the actual. • Metadata is include in the head section of page: GPERI – WAD - UNIT-2

  38. Document Structure META TAGS <html> <head> <title> <meta name=“author” content=“Fred Flinstone”/> <meta name=“keywords” content=“stone age”/> </title> </head> </html> GPERI – WAD - UNIT-2

  39. Document Structure CHARACTER ENTITIES GPERI – WAD - UNIT-2

More Related