1 / 26

Introduction to HTML

Introduction to HTML. OMT II Mam Saima Gul. 3. HTML files return to client. 1. Client requests web pages. Client computer. Web server. Static web page a web page with contents that remain fixed and unchanged once it has been created by the author.

palti
Download Presentation

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. Introduction to HTML OMT II Mam Saima Gul

  2. 3. HTML files return to client 1. Client requests web pages Client computer Web server • Static web page • a web page with contents that remain fixed and unchanged once it has been created by the author 4. Client browser formats HTML files 2. Web server looks for the corresponding HTML files Static Web Pages versus Dynamic Web Pages

  3. Static Web Pages versus Dynamic Web Pages • Static web page

  4. Static Web Pages versus Dynamic Web Pages • Dynamic web page • a web page with contents generated “on-the-fly” by the server or the client computer according to clients’ requests • e.g. return the system’s current date and time to the surfer browser (written in Active Server Page)

  5. Comparison between static and dynamic web pages

  6. JavaScript • VB Script • Java • Java Applets Client-Side Processing Technologies

  7. Common Gateway Interface (CGI) • a standard that specifies how an application program communicates with the web server • Active Server Pages (ASP) • a server-side scripting language developed by Microsoft • JSP (JavaServer Pages) • developed by Sun Microsystems • combine Java code and HTML(or XML) codes to generate dynamic web pages • HyperText Preprocessor (PHP) • another scripting language for creating dynamic web pages Server-Side Processing Technologies

  8. Hypertext Markup Language (HTML) is the text markup language currently used on the World Wide Web. It is used to tell web browsers how to structure and display web pages. <HTML> <HEAD> <TITLE>First HTML Example</TITLE> </HEAD> <BODY> <H1>Welcome to the world of HTML</H1> <HR> <P>HTML <B>really</B> isn’t so hard!</P> <P>You can put in lots of text if you want to. In fact, you could keep on typing and make up more sentences and continue on and on. </P> </BODY> </HTML> HTML Basics

  9. The preceding example uses some of the most common elements used in HTML documents, which are described here: • The <HTML>, <HEAD> and <BODY> tag pairs are used to specify the general structure of the document. • The <TITLE> and </TITLE> tag pair specifies the title of the document that generally appears in the title bar of the web browser. • The <H1> and </H1> header tag pair creates a headline indicating some important information. • The <HR> element, which has no end tag, inserts a horizontal rule, or bar, across the screen. • The <P> and </P> paragraph tag pair indicates a paragraph of text. HTML Basics (Contd.)

  10. So a basic template can be derived for a basic HTML document as shown here: <HTML> <HEAD> <TITLE>Document Title Goes Here</TITLE> ...Other supplementary information goes here.... </HEAD> <BODY> ...Document content and markup go here.... </BODY> </HTML> HTML Basics (Contd.)

  11. The <HTML> element delimits the beginning and the end of an HTML document. It contains only the <HEAD> element and the <BODY> element. • The <HEAD> Element • The information in the <HEAD> of an HTML document is very important because it is used to describe or augment the content of the document. The head of an HTML document is like the front matter or cover page of a document. The <HTML> Element • The <TITLE> Element • The most important head element is the <TITLE> element, which most browsers display in a title bar at the top of the browser window. It gives an HTML document a title by which it is known to browsers. Only one <TITLE> element should appear in every document.

  12. Body of a document is delimited by <BODY> and </BODY>. Only one <BODY> element can appear per document. Because the <BODY> element delimits the document itself, its attributes are primarily used to effect change across the entire document, such as setting background images, background colors, and link and text color. The <BODY> Element

  13. HTML is not case sensitive. • HTML is sensitive to a single white space character. • HTML elements should close unless empty. • HTML elements should nest. • A simple rule states that HTML should nest, not cross, thus <B><I>is in error as tags cross</B></I> Whereas <B><I>is not since tags nest>/I></B> • Browsers ignore unknown attributes and elements. The Rules of HTML

  14. The heading elements are used to create “headlines” in documents. • Six different levels of headings are supported: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. These range in importance from <H1>, the most important, to <H6>, the least important. • Most browsers display headings in larger and/or bolder font than normal text. <HTML> <HEAD> <TITLE>Heading Example</TITLE> </HEAD> <BODY> <H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </BODY> </HTML> Headings

  15. By setting the ALIGN attribute of the various heading elements, the text may be aligned to the right, left, or center of the screen. <HTML> <HEAD> <TITLE>Heading Alignment Example</TITLE> </HEAD> <BODY> <H1 ALIGN="left">Aligned Left</H1> <H1 ALIGN="center">Aligned Center</H1> <H1 ALIGN="right">Aligned Right</H1> </BODY> </HTML> Heading (Contd.)

  16. Surrounding text with the <P> and </P> tags indicates that the text is a logical paragraph unit. Normally, the browser places a blank line or two before the paragraph. • Text within the <P> is normally rendered flush left, with a ragged right margin. The ALIGN attribute makes it possible to specify a left, right, or center alignment. Paragraphs and Breaks

  17. <HTML> <HEAD> <TITLE>Paragraph Example</TITLE> </HEAD> <BODY> <P>This is the first paragraph in the example about the P tag. There really isn't much to say here.</P> <P ALIGN="center">This is the second paragraph. Again, more of the same. This time the paragraph is aligned in the center. This might not be such a good idea as it makes the text hard to read.</P> <P ALIGN="right">Here the paragraph is aligned to the right. Right-aligned text is also troublesome to read. The rest of the text of this paragraph is of little importance.</P> <P ALIGN="justify">Under HTML 4.0-compliant browsers, you are able to justify text. As you may notice, the way browsers tend to justify text is sometimes imprecise. Furthermore, not all browsers support this attribute value.</P> </BODY> </HTML> Paragraphs and Breaks (Contd.)

  18. To insert returns or blank lines in a document, the <BR> element must be used. The <BR> element is a text-level element that inserts a single carriage return or break into a document. It contains no content and has no end tag. It is an empty element – thus, no close tag. <HTML> <HEAD> <TITLE>Break Example</TITLE> </HEAD> <BODY> <P>This is the first paragraph.<BR> Not much to say here.</P> <BR><BR><BR> <P>This is the second paragraph. Notice all the extra space between these paragraphs. That's from the BR tags.</P> </BODY> </HTML> Paragraphs and Breaks (Contd.)

  19. <HTML> <HEAD> <TITLE>Horizontal Rule Example</TITLE> </HEAD> <BODY> <P>Size of 10</P> <HR SIZE=10> <P>Width of 50%</P> <HR WIDTH=50%> <P>Width of 200 pixels, size of 3 pixels</P> <HR WIDTH=200 SIZE=3> <P>Width of 100, aligned right</P> <HR ALIGN="right" WIDTH=100> <P>Width of 100, aligned left</P> <HR ALIGN="left" WIDTH=100> <P>Width of 100, aligned center</P> <HR ALIGN="center" WIDTH=100> </BODY> </HTML> Horizontal Rules

  20. <HTML> <HEAD> <TITLE>Physical Text Elements</TITLE> </HEAD> <BODY> <H1 ALIGN="center">Physical Text Elements</H1> <HR> This is <B>Bold</B> <BR> This is <I>Italic</I> <BR> This is <TT>Monospaced</TT> <BR> This is <U>Underlined</U> <BR> This is <STRIKE>Strike-through</STRIKE> <BR> This is also <S>Strike-through</S> <BR> This is <BIG>Big</BIG> <BR> This is even <BIG><BIG>Bigger</BIG></BIG> <BR> This is <SMALL>Small</SMALL> <BR> This is even <SMALL><SMALL>Smaller</SMALL></SMALL> <BR> This is <SUP>Superscript</SUP> <BR> This is <SUB>Subscript</SUB> <BR> </BODY> </HTML> Physical Character-Formatting Elements

  21. Basic Layout:Text, Colors, and Backgrounds

  22. <html> <head> <title>Font Element Demo</title> <body> <h2 align = "center">Font Sizing</h2> <font size=1>Font Size 1</font><br> <font size=2>Font Size 2</font><br> <font size=3>Font Size 3</font><br> <font size=4>Font Size 4</font><br> <font size=5>Font Size 5</font><br> <font size=6>Font Size 6</font><br> <font size=7>Font Size 7</font><br> This is <font size = +2>+2 from the base size.</font> Now it is <font size = -1>-1 from the base size.</font> Fonts

  23. <h2 align="center">Font Color</h2> <font color="red">Red Text</font><br> <font color = "#ffc66">Hex #ffc66 color</font> <h2 align="center">Font Face</h2> <font face="Arial">Set font to common fonts like Arial</font><br> <font face="'Viner Hand ITC'">Take a chance on an unusual font</font><br> Even set text to dingbat characters <font face="Webdings">f3khilqm</font><br> <h2 align="center">Common Font Face Combinations</h2> <font face=Arial,Helvetica,sans-serif"> Arial, Helvetica, sans-serif</font><br> <h2 align="center">Combination</h2> You can <font size=02 color="red" face="Arial">set all attributes at once!</font> </body></html> Fonts (Contd.)

  24. Common HTML 4 Color Names and HEX Values

  25. <HTML> <HEAD> <TITLE>Colors</TITLE> </HEAD> <BODY BGCOLOR="pink" TEXT="#008000"> ...Content to color... </BODY> </HTML> Document-Wide Color Attributes for <BODY>

  26. The End

More Related