Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html WebPageDesign


Published on

Introduction To HTML, its a small experiment to show , how to develop a webpage and publish them

Published in: Education, Technology, Design

Html WebPageDesign

  1. 1. WELCOME V.Chiranjeevi -MCA RonaldRoss P.G College
  2. 2. HTML Basics – Building & publishing your own website
  3. 3. What this presentation includes: <ul><li>Background about the World Wide Web </li></ul><ul><li>What is HTML? </li></ul><ul><li>Building a simple web page </li></ul><ul><li>A look at more complicated HTML </li></ul><ul><li>Publishing your web page </li></ul>
  4. 4. Basic Premise Underlying the World-Wide Web: Nonlinearity <ul><li>Books/magazines: Present information in linear form – typical reader starts at first page and continues to last page. </li></ul><ul><li>Web Pages: Online information is nonlinear – it can be traversed in any order desired by the user using the links you provide within your web pages. </li></ul>
  5. 5. What Web Pages Really Are <ul><li>Web pages are simply documents that use certain formatting commands to tell computer browsers how to display the information on screen. </li></ul><ul><li>Most common method of developing web pages is to use HTML. </li></ul>
  6. 6. What is HTML? <ul><li>H yper T ext M arkup L anguage </li></ul><ul><li>A method of publishing documents that includes commands telling computers how to display the document on screen </li></ul><ul><li>HTML is platform-independent: a document formatted in HTML can be viewed using a web browser on virtually any Windows, Mac, Linux, or Unix computer </li></ul>
  7. 7. Creating HTML Documents <ul><li>Can be created in any text editor (Note Pad) or word processor (MS Word) </li></ul><ul><li>Special software applications make the job of publishing/managing a website easier, but aren’t necessary for small, simple websites </li></ul><ul><ul><li>Microsoft Front Page </li></ul></ul><ul><ul><li>Macromedia Dreamweaver </li></ul></ul><ul><ul><li>Adobe Go Live </li></ul></ul>
  8. 8. HTML Tags <ul><li>Tags – these are the coded instructions that accompany the text of a web page. Tags are what make your web page work! </li></ul><ul><li>These particular tags (in blue text) tell your browser to put the text between them into the top bar of your browser </li></ul><Title> steph moore: My home page at NM Tech </Title>
  9. 9. <Title> steph moore: My home page at NM Tech </Title>
  10. 10. HTML Document Structure <ul><li>Head – Contains codes for displaying the document’s background, text and link colors; font family and size; the title of the page; and other formatting information. </li></ul><ul><li>Body – This is where the actual content of the document appears. Content includes text, graphics, and links -- each with the appropriate tag(s) to indicate how it should be displayed. </li></ul>
  11. 11. A Very Simple HTML Page <HTML> <Head> <Title> Ronald Ross </Title> </Head> <Body> < H1> Welcome to Ross Students! </H1> <p> <p> This website is devoted to providing accurate, researched information on the proper care and feeding of Geochelone sulcata tortoises, which are also known as African Spurred Tortoises, African Spur-Thighed Tortoises, African Desert Tortoises, or by various other names. You will find accurate, useful information here on how to feed, house, and otherwise care for your sulcata tortoises, no matter what your level of expertise. We keep sulcata tortoises, and we work closely with other sulcata keepers around the world . </p> </Body>
  12. 12. What it looks like in your Browser:
  13. 13. Note what the tags have done:
  14. 14. Links – the crucial piece of HTML <ul><li>Links take you to other webpages within the same site, or to completely different websites. </li></ul><ul><li>Code used to specify links: </li></ul><ul><li><a href => </li></ul><ul><li>ONLY your browser sees this particular code! </li></ul><ul><li>You must add some text so that the user can actually see the link </li></ul>
  15. 15. Making Links Visible to Users <ul><li>Links become visible to users when you include text and then close your <a> tag: </li></ul><ul><li><a href=“”>Sulcata Station</a> </li></ul><ul><li><a href= “”>New Mexico Tech</a> </li></ul>
  16. 16. How Links are coded on your webpage <ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Title> Sulcata Station </Title> </li></ul><ul><li></Head> </li></ul><ul><li><Body> </li></ul><ul><li>< H1> Welcome to Sulcata Station! </H1> </li></ul><ul><li><p> <a href=“”> Sulcata Station </a></p> </li></ul><ul><li><p> <a href= “”> New Mexico Tech </a></p> </li></ul><ul><li><p> </li></ul><ul><li></Body> </li></ul>
  17. 17. What it looks like in your browser
  18. 18. More Complicated HTML Page:
  19. 19. What it looks like in your Browser:
  20. 20. Publishing Your Web Page <ul><li>Now that you’ve built your web page or web site, you have to “publish” it. </li></ul><ul><li>Publishing = transferring the page file(s) to a web server so that other people can see it. </li></ul>
  21. 21. Thank you....