1 / 25

Learn the Basics of Web Development and HTML in 15 Minutes

This concise guide provides an overview of web development fundamentals, focusing on HTML and its components. Discover the roles of web browsers and servers, how to create web pages using HTML tags, and the significance of hyperlinks and lists. You'll learn about dynamic content generation through techniques like CGI. This resource is perfect for beginners who want to understand the core aspects of web pages, including structuring documents and managing graphics. Unleash your web development potential in just 15 minutes!

dwayne
Download Presentation

Learn the Basics of Web Development and HTML in 15 Minutes

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. The Web… in 15 minutes Ethel Schuster schuster@cs.uml.edu http://www.cs.uml.edu/~schuster Http://www.dov-e-games.com/dov-e-games/

  2. Goals of the Web • Sharing information • Most successful • Collaboration • “Not quite”

  3. Overview • Brief discussion of components … • Create web pages using HTML … • Install home page “out there in the world”

  4. Understanding the Components • Web Browser (Client) … • Server … • Server Side Processing ...

  5. Web Browser ... • Main two roles: • Finds web server on Internet & requests page to display at local machine • Knows how to interpret HTML tags to display page as intended • Netscape, Internet Explorer, Amaya, Opera

  6. Web Server … • Computer software • Runs on dedicated machine • Responds to request from browser and sends page • NCSA, Apache, CERN

  7. Server Side Processing … • Handles dynamic data • CGI • Servelet

  8. Web Page ... • File with text, graphics, hyperlinks, sound, video • Contains all above along with HTML tags • Tags tell web browser how to display the page

  9. Creating Web Pages • Create a document with HTML tags • Using a plain text editor • NotePad, Word • Using a Web Page editor • Homesite, FrontPage

  10. Understanding HTML • Hypertext Markup Language • Tags: Special instructions surrounded by “<>” • Symmetry (usually): matching • “begin” with “<>” and • “end” with “</>” • E.g. <HTML> and </HTML>

  11. Basic HTML Document • <HTML> to mark the page as an HTML document • <!--> to specify comments • <HEAD> to mark begin and end of header for page • <TITLE> to mark the title of the page • <BODY> to mark the body of the page

  12. Example Template • http://www.cs.uml.edu/~schuster/books1.html

  13. HTML commands • Change color of background and font • Can use hexadecimal values • Introduce different headers with <H1>, <H2> and <H3> • Center the text with <center> • Paragraphs in HTML using <p> • http://www.cs.uml.edu/~schuster/books2.html

  14. Hyperlinks in HTML • One of the most important capability of HTML: • To create hyperlinks to documents elsewhere • How? Use anchors • <a href = “http://www.yahoo.com”>http://www.yahoo.com</a>

  15. Lists in HTML • Items marked with <li> • Ordered lists • <ol> … </ol> • Unordered lists • <ul> … </ul> • http://www.cs.uml.edu/~schuster/books4.html

  16. Tables in HTML • Tables specified with <table> tag • Rows use <tr> tag • Cells use <td> tag, <th> for header • Optional: modify width, alignment, bgcolor, height • http://www.cs.uml.edu/~schuster/books_table.html

  17. Graphics • Most images are GIF or JPG files • Can be scanned, downloaded or generated with • Editor • E. g. Paint Shop Pro, PhotoShop • http://www.dov-e-games.com/dov-e-games

  18. Putting the Page up for the World • Internet service provider (ISP) • College allocates space • Specify the directory to place files • Unix: public_html (convention used but not everywhere) • Make files accessible • “Home Page” file is index.html

  19. The URL Concept • Each hyperlink, 2 components: • Anchor text/graphics • Trigger hyperlink when clicked • Universal Resource Locator ...

  20. Universal Resource Locator (URL) • What happens when hyperlink is activated • Protocol to reach • Target server • Host system (server name) where doc is • Directory path • Filename

  21. Examples • http://www.magicpen.com • Http://www.donbarnett.com/art/art_DB.htm • My web page • http://www.cs.uml.edu/~schuster

  22. Common Gateway Interface: CGI • Used to create dynamic content • Output can change, e.g., • Search for an author in an online bookstore • Have partial name • Dynamically create a list of books by that author

  23. How CGI scripts work • Instead of displaying a page • => execute a program • Output of execution is a web page • sent to browser requesting the page • Output is executable code • E.g. C or PERL script

  24. PERL • Widely used • Highly portable • Powerful string manipulation

  25. Summary • Discussed • Components of the web • HTML commands to create web page • Handle Dynamic information

More Related