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. 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-22

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

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-24

The Development Process Design: This stage tries to provide a solution to match the requirements. It also consider, what is possible with the various technologies that 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-25

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-26

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-27

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-28

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-29

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-210

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-211

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-212

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: A little bit of hypertext GPERI – WAD - UNIT-213

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: tag, identify as HTML. HTML tags are in lowercase. (recommended) Tags are not case sensitive. GPERI – WAD - UNIT-214

Basic HTML HTML Document Structure: The tag identifies a section of HTML code, Opening with the and closing with. Simple text message example: GPERI – WAD - UNIT-215

Basic HTML HTML Document Structure: The amazing art of web programming a little bit of hypertext GPERI – WAD - UNIT-216

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: The amazing art of web programming GPERI – WAD - UNIT-217

Formatting And Fonts We can add more line into body section as text and view it on output: a little bit of hypertext makes the world go round and around GPERI – WAD - UNIT-218

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

Formatting And Fonts Using Types of Emphasis: Any word encloses by the and will be made italic. There are many ways of emphasizing. GPERI – WAD - UNIT-220 TagFormat … Italic … Bold … Underline … Typewriter effect … Emphasis … Blink … Superscript … Subscript

Formatting And Fonts Preformatted Text: … 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-221

Formatting And Fonts Preformatted Text: For Example: 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...! GPERI – WAD - UNIT-222

Formatting And Fonts Font Size: We can change the size of our text. Possible ways are: Use … tag or, Use … tag. tag can control the size and degree of emphasis for heading. GPERI – WAD - UNIT-223

Formatting And Fonts Font Size:. GPERI – WAD - UNIT-224 Font sizeHeadingPoint size pt 6 24 pt 5 18 pt 12 pt 4 12 pt bold 3Body text12 pt plain 10 pt 7 pt 2--9 pt

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

Formatting And Fonts Font Size: the amazing art of web programming a little bit of hypertext Makes the world go around GPERI – WAD - UNIT-226

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-227

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-228

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-229

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-230

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 GPERI – WAD - UNIT-231

The Move to XHTML For example: For XHTML : it is an XML application, a page should begin with an XML declaration 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-232

The Move to XHTML The XHTML can also contain the character set encoding as an optional attribute: 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 GPERI – WAD - UNIT-233

Document Structure The document structure for an XHTML: Title … GPERI – WAD - UNIT-234

Document Structure Difference The head and body elements are required in XHTML whereas in HTML they are optional. Close tags For example 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-235

Document Structure Difference Must specify a document title. GPERI – WAD - UNIT-236

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-237

Document Structure META TAGS GPERI – WAD - UNIT-238

Document Structure CHARACTER ENTITIES GPERI – WAD - UNIT-239 CharacterCharacter entityDescription &nsp;Space &&Ampresand “&quote;Quote <<Less than >>Greater than