How the Web Works Using HTML
Download as PPTX, PDF0 likes904 views
This document provides an overview of HTML and how websites work. It discusses HTML elements and tags, how to structure an HTML page using the <head>, <body>, and other tags. It also covers how to format text, add headings and paragraphs, and change background and text colors. The learning outcomes are to understand basic HTML coding syntax and styles and how they are used to code websites.
More Related Content
Similar to How the Web Works Using HTML (20)
How the Web Works Using HTML
- 1. Z Week 7: How the Web Works Using HTML Subject Code: COMP121 By: Marlon Jamera Email: [email protected]
- 2. Z How the Web Works Using HTML
- 3. Z Review: Website Basics and Categories • It is a presentation tool; a way to communicate; learning and teaching tool and a marketing tool. a. Website b. Search Engine c. Web Browser d. Website Application
- 4. Z Review: Website Basics and Categories • It is an application on the WWW that run on the user’s server or computer and are executed by the browser installed on the user’s computer. a. Client-Side Application b. Server-Side Application c. Browser Application d. Website Application
- 5. Z Review: Website Basics and Categories • A web based application that runs on the web or host server. a. Client-Side Application b. Server-Side Application c. Browser Application d. Website Application
- 6. Z Review: Website Basics and Categories • A collection of information organized in to records of information so a computer program can quickly access and select desired pieces of data. a. CGI b. Database c. Web Apps d. Storage
- 7. Z Review: Website Basics and Categories • A set of tags are used to mark up plain text so that a browser application knows how to display the text. a. XHTML b. HTML c. CSS d. CGI
- 8. Z Scope of the Lesson • Introduction to HTML • HTML elements and tags • Code with HTML • Types of HTML tags • Headings and Paragraphs • Comments in HTML • Text Formatting tags • Background and Text Color tags
- 9. Z Scope of the Lesson • Introduction to HTML • HTML elements and tags • Code with HTML • Types of HTML tags • Headings and Paragraphs • Comments in HTML • Text Formatting tags • Background and Text Color tags
- 10. Z Learning Outcomes By the end of the lesson, you will be familiar and know how the website works using HTML. • Discuss the basic coding of HTML. • Understand the coding syntax of HTML. • Explain thoroughly the coding styles and techniques of the HTML.
- 11. Z How the Web Works? • WWW use classical client / server architecture • HTTP is a text based request-response protocol.
- 12. Z How the Web Works? Page request Client running a Web Browser Server running Web Server Software (IIS, Apache, etc.) Server response HTTP HTTP
- 13. Z What is a Web Page? • Web Pages are text files containing HTML. • HTML – Hyper Text Markup Language • A notation describing document structure (semantic markup) and formatting (presentation markup) • The markup tags provide information about the page content structure.
- 14. Z Creating HTML Pages • An html file must have an .htm or .html file extension. • HTML files can be created with text editors: Notepad, Notepad++ and PSPad. • Or HTML editors: Microsoft FrontPage, Mcrodmedia Dreamweaver, Netscape Composer and Expression Web.
- 15. Z Introduction to HTML • With HTML, we can create our own website. • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags. • HTML uses markup tags to describe web pages. • HTML is not case sensitive language.
- 16. Z HTML Elements and Tags • A tag is always enclosed in angle brackets (<>) like <html> • HTML tags normally come in pairs like <html> and </html>. • Start tag = <html> • End tag = </html> • Start tags and closing tags are also called opening tags and closing tags.
- 17. Z About the Main Tags • <html> • Describe html web page that is to be viewed by a web browser. • <head> • This defines the header section of the page. • <title> • This shows the caption at the title bar of the page. • <body> • This tag show contents of the web page.
- 18. Z How to Start? • Write html code in notepad. • Save the File with (.html) extension. • View the page in any browsers like google chrome, mozilla firefox or safari. • The purpose of these browsers is to read html documents and display them as web pages.
- 19. <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> test.html First HTML Page
- 20. <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> Opening tag Closing tag An HTML element consists of an opening tag, a closing tag and the content inside. First HTML Page: tags
- 21. First HTML Page: header <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML header
- 22. Types of HTML Tags • Hyperlink Tags • Image Tags • Text Formatting Tags <a href="http://www.ama.edu.ph/" title=“AMA University">Link to AMA Website</a> <img src="logo.jpeg" alt="logo" /> This text is <em>emphasized.</em> <br />new line<br /> This one is <strong>more emphasized.</strong>
- 23. Some Simple Tags: Example <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href="http://www.ama.edu.ph/" title= “AMA University">This is a link.</a> <br /> <img src="logo.gif" alt="logo" /> <br /> <strong>Bold</strong> and <em>italic</em> text. </body> </html>
- 24. Headings and Paragraphs • Heading Tags (h1 – h6) • Paragraph Tags • Sections: div and span <p>This is my first paragraph</p> <p>This is my second paragraph</p> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <div style="background: skyblue;"> This is a div</div>
- 25. Headings and Paragraphs Example<html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html>
- 26. <head>Section: <title> tag • Title should be placed between <head> and </head> tags • Used to specify a title in the window title bar • Search engines and people rely on titles <title>AMA University – 1st Trimester 2015 </title>
- 27. Comments: <!-- --> tag • Comments can exist anywhere between the <html></html> tags • Comments start with <!-- and end with --> <!–- AMA University Logo (a JPG file) --> <img src="logo.jpg" alt=“AMA Logo"> <!–- Hyperlink to the web site --> <a href="http://ama.edu.ph/">AMA University</a>
- 28. <body> Section: Introduction • The <body> section describes the viewable portion of the page • Starts after the <head> </head> section • Begins with <body> and ends with </body> <html> <head><title>Test page</title></head> <body> <!-- This is the Web page body --> </body> </html>
- 29. Text Formatting • Text formatting tags modify the text between the opening tag and the closing tag • Ex. <b> Hello </b> makes “Hello” bold • EX. <i> Hello </i> makes “Hello” italicized • Ex. <u> Hello </u> makes “Hello” underlined
- 30. Text Formatting <b></b> bold <i></i> italicized <u></u> underlined <sup></sup> Samplesuperscript <sub></sub> Samplesubscript <strong></strong> strong <em></em> emphasized <pre></pre> Preformatted text <blockquote></blockquote> Quoted text block <del></del> Deleted text – strike through
- 31. Text Formatting: Example<html> <head> <title>Page Title</title> </head> <body> <h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph: preformatted.</pre></p> <h2>More Info</h2> <p>Specifically, we’re using XHMTL 1.0 transitional.<br /> Next line.</p> </body> </html>
- 32. Background and Text Color Tag • The attribute bgcolor is used for changing the back ground color of the page. • <body bgcolor=“Green” > • Text is use to change the color of the enclosed text. • <body text=“White”> <html> <head><title>Test page</title></head> <body bgcolor=“Green”> <h2 style="color:red">I am Red</h2> </body> </html>
- 33. Z Let’s call it a day, Thank you!