Introduction to HTML


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Vellore Institute of Technology
  • Vellore Institute of Technology
  • Vellore Institute of Technology
  • Vellore Institute of Technology
  • Vellore Institute of Technology
  • Introduction to HTML

    1. 1. 1Introduction to Web Design
    2. 2. 2Web server• A web server is a computer program thatdelivers (serves) content, such as web pages,using the Hypertext Transfer Protocol (HTTP),over the World Wide Web .• The primary function of a web server is todeliver web pages to clients. This meansdelivery of HTML documents and any additionalcontent that may be included by a document,such as images, style sheets and JavaScripts.
    3. 3. 3• A client, commonly a web browser or webcrawler, initiates communication bymaking a request for a specific resourceusing HTTP and the server responds withthe content of that resource, or an errormessage if unable to do so .• Many generic web servers also supportserver-side scripting, e.g., Apache HTTPServer and PHP.
    4. 4. 4Client Server ArchitectureClient Server database
    5. 5. Vellore Institute of TechnologyUniversity5Advantages of Client-ServerArchitect• Centralization resourceIn the model the main role is done by theserver because it provide the resources to clientand access, resource and security for databaseare controlled by the server.• ScalabilityIn this case any element can be upgradedwhen needed.• FlexibilityWith this model we can easily integrate thenew technology in to the system.
    6. 6. Vellore Institute of TechnologyUniversity6• InteroperabilityAll components of (clients, network, andservers) model work together.• AccessibilityIn this model server can be accessedremotely and across multiple platforms forclient request.
    7. 7. Vellore Institute of TechnologyUniversity7• SimpleIt is Simple to understand and ease ofapplication development.• Low cost
    8. 8. Vellore Institute of TechnologyUniversity8Disadvantages of Client-ServerArchitecture• DependabilityIn the model the application processing isdepends on server side• Lack of scalabilitySome of the network operating system havinglack of scalability.CongestionIn client server model some time there may bechance to occur of congestion, whenmultiple requests are came at server side.
    9. 9. Vellore Institute of TechnologyUniversity9Web Components• Clients and Servers• Internet Service Providers• Web Site Hosting Services• Domains Names, URL’s and Ips• Registrars
    10. 10. Vellore Institute of TechnologyUniversity10Clients & ServersClients (Browser)• Internet Explorer• Firefox• Mozilla• Netscape• Opera• Amaya• AOL• MSNServers• Apache• Microsoft• Netscape• zeus• AOLserver• AV• JavaWebServer• Oracle
    11. 11. Vellore Institute of TechnologyUniversity11Web Components• Clients and Servers• Internet Service Providers• Web Site Hosting Services• Domains Names, URL’s and Ips• Registrars
    12. 12. Vellore Institute of TechnologyUniversity12Internet Service ProvidersConnect Clients to the Internet• Phone Company• AOL• Earthlink• Verizone• NetZero• Basic internetconnection• Dialup/DSL/Cable/Sat• Email
    13. 13. Vellore Institute of TechnologyUniversity13Web Components• Clients and Servers• Internet Service Providers• Web Site Hosting Services• Domains Names, URL’s and Ips• Registrars
    14. 14. Vellore Institute of TechnologyUniversity14Web Hosting ServicesConnects Web Sites to the Internet• Computer (server) farm• Web server software• Firewall hardware and software• IT services– (Backup, troubleshooting, hardware repair)• Disk space• Bandwidth / connection to internet• Routers and switchers• Email server / storage
    15. 15. Vellore Institute of TechnologyUniversity15Web Components• Clients and Servers• Internet Service Providers• Web Site Hosting Services• Domains Names, URL’s and Ips• Registrars
    16. 16. Vellore Institute of TechnologyUniversity16Domain’s URL’s and IPs• Domain name: The specific address of acomputer on the Internet–• Uniform Resource Locator (URL):–• Internet protocol (IP) address–
    17. 17. Vellore Institute of TechnologyUniversity17Web Components• Clients and Servers• Internet Service Providers• Web Site Hosting Services• Domains Names, URL’s and IPs• Registrars
    18. 18. Vellore Institute of TechnologyUniversity18Domain Registrar• A company that provides domain nameregistration services for a fee.• Maintain database which maps domainnames to IP’s• Propagate new domain name/IP addressinformation across the internet
    19. 19. Vellore Institute of TechnologyUniversity19Creating a Web Site1. Choose a domain name2. Register with a Registrar3. Choose a hosting service4. Tell Registrar the IP address5. Create web content6. Store (publish) onto hosting server (FTP)7. Submit new site to search engines
    20. 20. Vellore Institute of TechnologyUniversity20World Wide Web• WWW comprises software(Web server and browser) anddata (Web sites)Client SideJavaScriptVBScriptDHTMLJava AppletsServer SideCGI(Common gateway Interface )ASPJava ServletsHTML, XML, ...
    21. 21. Vellore Institute of TechnologyUniversity21How HTML is DisplayedBrowser CommandHTML DisplayHttp protocol(HyperText Transfer Protocol)Text & binary datarenderHTML URL:
    22. 22. Vellore Institute of TechnologyUniversity22How HTML is Displayed – from remote siteHTML DisplayUserBrowser CommandURL: ServerWeb ServerClient SiteClient SiteDBDBHTMLCGIASPPHP…http requesthttp response
    23. 23. Vellore Institute of TechnologyUniversity23The BasicsElements and Tags are the basics of anywebpage.
    24. 24. Vellore Institute of TechnologyUniversity24ElementsElements are made up of two tags; a starttag and an end tag. Between these tags isthe element content.<title>Welcome to My World</title>
    25. 25. Vellore Institute of TechnologyUniversity25Start TagsA start tag is a left angle bracket followed bythe name of the element and then a rightangle bracket.<title>
    26. 26. Vellore Institute of TechnologyUniversity26End TagsEnd tags are a left angle bracket and a slashfollowed by the name of the element andthen a right angle bracket. The slash allowsthe computer to distinguish the end tag fromthe start tag.</title>
    27. 27. Vellore Institute of TechnologyUniversity27Empty ElementsCertain elements are empty and aredesignated by a slash before the right anglebracket in the start tag.<br/>The <br> element is used to insert a line break intothe document. This tells the computer to stop thetext at that point and start a new line. As you mayhave guessed the <br> element does not have anycontent so it does not need an end tag.
    28. 28. Vellore Institute of TechnologyUniversity28ContentMost elements will contain multipleelements. This may sound confusing but itis really very simple. An element thatcontains another element looks like this:<head><title>The document title</title></head>
    29. 29. Vellore Institute of TechnologyUniversity29NestingNesting means the way in which elementscontain elements. When we say thatelements are properly nested we mean thateach element is completely contained withinthe elements that contain it, and itcompletely contains the elements itcontains.
    30. 30. Vellore Institute of TechnologyUniversity30Required ElementsThere are four elements that all HTMLdocuments must contain.They must have a <head> and they mustcontain a <title>. They also must have<html> and <body> elements.
    31. 31. Vellore Institute of TechnologyUniversity31<html>The <html> element contains the wholedocument. It starts first and finisheslast. It tells the computer that this is an<html> document and must always bepresent.
    32. 32. Vellore Institute of TechnologyUniversity32<head>The <head> contains elements that areabout the document rather than elementsthat are displayed in the page itself andincludes things like the document title.
    33. 33. Vellore Institute of TechnologyUniversity33<title>The document you must have a <title>which describes what the document is.Without a <title> the document is not valid.
    34. 34. Vellore Institute of TechnologyUniversity34<body>A last, but certainly not least, the documentmust have a <body>. The <body> is theWebpage itself. It comes after the <head>and is the only other element that can go inyour <html> element. Anything that youwantto put in your page goes in here.
    35. 35. Vellore Institute of TechnologyUniversity35HTML• We’ll type it in Notepad• Start/Programs/Accessories/Notepad/• New File
    36. 36. Vellore Institute of TechnologyUniversity36Put It All Together<html><head><title>WelCome To VIT</title></head><body></body></html>
    37. 37. Vellore Institute of TechnologyUniversity37Example<html><head><title> Wel come TO VIT </title></heaD><Body>Hi Friends <BR>Wel come to my webworld</Body></html>
    38. 38. Vellore Institute of TechnologyUniversity38Let’s Save It!!• File/Save As• Type in a file name with theextension .html• Example name: school.html• Put it in your HTML folder with yourgraphic
    39. 39. Vellore Institute of TechnologyUniversity39Let’s Browse It!• Open a browser (Netscape or InternetExplorer)• NETSCAPE--File/Open Page/ChooseFile–Browse to your file (OK)• INTERNET EXPLORER--File/Open–Browse to your file (open,OK)
    40. 40. Vellore Institute of TechnologyUniversity40Here’s What You’ll See TitleBarHeading Body
    41. 41. Vellore Institute of TechnologyUniversity41Paragraphs and Line Breaks• You must use HTML tags to control whereline and paragraph breaks actuallyappear.• To skip a line between paragraphs, put a<p> tag at the beginning of eachparagraph and a </p> tag at the end.
    42. 42. Vellore Institute of TechnologyUniversity42• The <br> tag forces a line break within aparagraph. Unlike the other tags youveseen so far, <br> doesnt require a closing</br> tag.• Use <hr /> to draw horizontal rulesseparating major sections of text, orwherever youd like to see a line acrossthe page.
    43. 43. Vellore Institute of TechnologyUniversity43Unordered, Ordered, and DefinitionLists• Unordered• ordered• definition lists
    44. 44. Vellore Institute of TechnologyUniversity44Unordered• one in which the order of items is notimportant, such as a laundry or grocery listgets bounded by <ul> and </ul> tags.• Each item in the list, usually a word orshort phrase, is marked by the <li> (list-item) tag.
    45. 45. Vellore Institute of TechnologyUniversity45Ordered List• Ordered lists, bounded by the <ol> and</ol> tags, are identical in format tounordered ones, including the <li> tag(and </li> end tag with XHTML) formarking list items.
    46. 46. Vellore Institute of TechnologyUniversity46Definition lists• Definition lists enclosing <dl> and </dl>tags, each list item has two parts, eachwith a special tag: a short name or title,contained within a <dt> tag, followed by itscorresponding value or definition, denotedby the <dd> tag .
    47. 47. Vellore Institute of TechnologyUniversity47• <html><head><title>List</title></head><body><ul><li> hi<li>how r u
    48. 48. Vellore Institute of TechnologyUniversity48<ul><li>fine</ul></ul><p><ol>I am missing you<li> VIT is No 1 university</ol></body> </html>
    49. 49. Vellore Institute of TechnologyUniversity49Table• Tables are defined with the <table> tag. Atable is divided into rows (with the <tr>tag), and each row is divided into datacells (with the <td> tag). The letters tdstands for "table data," which is thecontent of a data cell. A data cell cancontain text, images, lists, paragraphs,forms, horizontal rules, tables, etc.
    50. 50. Vellore Institute of TechnologyUniversity50• <body><table border="2" bgcolor="blue" cellpadding=40><caption> table with border</caption><th> c1</th><th> c2</th><tr><td>srinivas Koppu </td><td>Web Desiging</td></tr></body>
    51. 51. Vellore Institute of TechnologyUniversity51Output For Table tag
    52. 52. Vellore Institute of TechnologyUniversity52Forms• A form is an area that can contain formelements.• Form elements are elements that allowthe user to enter information (like textfields, textarea fields, drop-down menus,radio buttons, checkboxes, etc.) in a form.• A form is defined with the <form> tag.
    53. 53. Vellore Institute of TechnologyUniversity53Form Structure• <form>..input elements.</form>
    54. 54. Vellore Institute of TechnologyUniversity54Input• The most used form tag is the <input> tag.The type of input is specified with the typeattribute. The most commonly used inputtypes are explained below.• Text Fields• Radio Buttons• Checkboxes• The Forms Action Attribute and theSubmit Button
    55. 55. Vellore Institute of TechnologyUniversity55Text Fields• Text fields are used when you want the user totype letters, numbers, etc. in a form.<form>First Name:<input type="text" name="first name" /><br />Last Name:<input type="text" name="last name" /></form>
    56. 56. Vellore Institute of TechnologyUniversity56Out Put
    57. 57. Vellore Institute of TechnologyUniversity57Radio Buttons• Radio Buttons are used when you want the userto select one of a limited number of choices.<form>Gender:<input type="radio" name="sex" value="male" />Male<input type="radio" name="sex"value="female" /> Female</form>
    58. 58. Vellore Institute of TechnologyUniversity58Out Put With Radio Buttons
    59. 59. Vellore Institute of TechnologyUniversity59Checkboxes• Checkboxes are used when you want the user to selectone or more options of a limited number of choices.• <form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle" value="Airplane"/></form>
    60. 60. Vellore Institute of TechnologyUniversity60Out Put With Check Boxs
    61. 61. Vellore Institute of TechnologyUniversity61Selection Lists• Both Scrolling lists and pull-down pick listare created with the <select> Tag.• <option> Tag used to give the options toend user.•
    62. 62. Vellore Institute of TechnologyUniversity62Scrolling lists• <form><select name="extras" size="2" Multiple="multiple"><option selected="selected"> </option><option>Am/Fm Radio</option><option>Turbocharge</option><option>SBI Card</option><option>Mastercard</option><option>Visa card</option></select></form>
    63. 63. Vellore Institute of TechnologyUniversity63Out Put Scrolling Lists
    64. 64. Vellore Institute of TechnologyUniversity64Pull Down list• <body> <form> <select name="card"><option>Mastercard</option><option>Visa card</option> </select></form> </body>• Pick Lists cannot allow multiple choices:they are logically equivalent in to a groupof radio buttons.
    65. 65. Vellore Institute of TechnologyUniversity65Output for Pull Down Lists
    66. 66. Vellore Institute of TechnologyUniversity66Text Areas• Allow multiple lines of text in a singleinput item, use the text area tagie<textarea>……</textarea>• <html> <head> <title> hi </title> </head><body> <form> <textareaname="comments" rows="8" cols="20">please enter u r comments </textarea></form> </body> </html>
    67. 67. Vellore Institute of TechnologyUniversity67Output for text area•
    68. 68. Vellore Institute of TechnologyUniversity68The Forms Action Attribute andthe Submit Button• When the user clicks on the "Submit"button, the content of the form is sent tothe server.• The forms action attribute defines thename of the file to send the content to.The file defined in the action attributeusually does something with the receivedinput
    69. 69. Vellore Institute of TechnologyUniversity69• <form name="input"action="html_form_submit.asp"method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>• If you type some characters in the textfield above, and click the "Submit" button,the browser will send your input to a pagecalled "html_form_submit.asp". The pagewill show you the received input.
    70. 70. Vellore Institute of TechnologyUniversity70Frames• You can display more than one HTMLdocument in the same browser window.Each HTML document is called a frame,and each frame is independent of theothers.• HTML file can have either a frameset orbody but not both.
    71. 71. Vellore Institute of TechnologyUniversity71Example• <frameset cols=50%,25%,*>• <frame src="C:Documents andSettingsadminDesktopNew Foldertab.html">• <frame src="C:Documents andSettingsadminDesktopNewFolderprabu.html">• <frame src="C:Documents andSettingsadminDesktopNew Folderf.html">• </frameset>
    72. 72. Vellore Institute of TechnologyUniversity72Here’s the code:• <html>• <head>• <title>Type what you want in the title barhere• </title>• <h1 align=“center”>< font face=“ComicSansMS”>– Type what you want your heading to say here.• </center></font face> </h1>• </head>
    73. 73. Vellore Institute of TechnologyUniversity73The body• <body>• <center>• <img src=“kids3.jpg”>• </center>• <font face=“Comic Sans MS”>• <center>• Type what you want to say in the bodyunder your image here.• </center>• </font face>• </body>• </html>
    74. 74. Vellore Institute of TechnologyUniversity74Thank you