Download to read offline
Uploaded byFarzana Younas
HTML Basics, Web Development Part-1 .pptx
The document serves as an introductory lecture on the World Wide Web, outlining its basic architecture, including the roles of web clients and servers, and key standards such as HTML, HTTP, and XML. It details the structure and syntax of HTML documents, including tags, attributes, and formatting elements, as well as essential elements like headings, paragraphs, and metadata. Furthermore, it provides examples and explanations of various HTML tags and attributes to create and style web pages.
HTML Basics, Web Development Part-1 .pptx
- 1. W E BS Y S T E M A N D T E C H N O L O G I E S LECTURE 1
- 2. INTRODUCTION OF WORLDWIDE WEB • A system of interlinked hypertext documents accessed via the internet. With a web browser, one can view web pages that may contain text, images, videos and other multimedia and navigate b/w them via hyperlinks. • The World Wide Web consortium was founded in October 1994 to standardize and implement protocols and to promote the evolution of a World Wide Web technology that would enable new forms of information documentation and human communication.
- 3. BASIC WEB ARCHITECTURE •The basic web architecture is two-tiered and characterized by a web client that displays information content and a web server that transfers information to the client. • This architecture depends on three key standards: – HTML for encoding document content – URLs for naming remote information objects in a global namespace – HTTP for staging the transfer.
- 4. Web browser(user computer orclient) Network Web server Request for web page Request for web page Web page HTML Web page HTML HOW WEB WORKS
- 5. W W WS TA N DA R D S • Collection of hyperlinked computer files on the Internet • Client-server application – Web servers – Web browsers as clients • WWW standards – Hypertext markup language (HTML) • Current standard for writing Web pages • Tags in HTML instruct the client browser how to format and display the Web page content – Hypertext transfer protocol (HTTP) • Protocol that establishes a connection between Web server and client – Extensible markup language (XML) • A meta-markup language • Gives meaning to the data enclosed within XML tags
- 6. WHAT IS HTML? •HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • 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
- 7. HTML HTML Tags • HTMLmarkup tags are usually called HTML tags • HTML tags are keywords surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • A tag that has only start tag is called open tag. HTML Documents = Web Pages • HTML documents describe web pages • HTML documents contain HTML tags and plain text • HTML documents are also called web pages • The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages.
- 8. 8 WHAT IS ANHTML FILE • HTML file is a text file with HTML tags • HTML file name must end with .htm or .html • HTML file can be created using a simple text editor – When you save an HTML file, you can use either the .htm or the .html extension. – It is a habit from the past when commonly used software allowed only three letters in file extensions. – With newer software it is perfectly safe to use .html.
- 9. 9 <html> <head> <title>Title of thedocument</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> HTML DOCUMENT EXAMPLE OUTPUT This is a heading This is a paragraph.
- 10. HTML BODY • The<body> tag defines the document's body. • The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. • Note: There can only be one <body> element in an HTML document.
- 11. HTML HEAD • The<head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. • Metadata is data about the HTML document. Metadata is not displayed. • Metadata typically define the document title, character set, styles, scripts, and other meta information.
- 12. HTML TITLE • The<title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. • The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results. <!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> The content of the document...... </body> </html>
- 13. HTML FAVICON • Afavicon is a small image displayed next to the page title in the browser tab. To add a favicon <link> tag is used within html <head> tag. • <head> <title>My Page Title</title> <link rel="icon" type="image/x-icon" href=“a.jpg"> </head>
- 14. 14 Headings are definedwith the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. <html> <body> <h1>This is a heading </h1> <h2>This is a heading </h2> <h3>This is a heading </h3> </body> </html> HTML automatically displays an empty line before and after headings HTML HEADINGS
- 15. 15 HTML PARAGRAPHS Paragraphs aredefined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p> HTML automatically displays an empty line before and after a paragraph.
- 16. EXAMPLE: <HTML> <BODY> <P>THIS IS A PARAGRAPH.</P> <P>THISIS A PARAGRAPH.</P> <P>THIS IS A PARAGRAPH.</P> <P>PARAGRAPH ELEMENTS ARE DEFINED BY THE P TAG.</P> </BODY> </HTML> OUTPUT: This is a paragraph. This is a paragraph. This is a paragraph. Paragraph elements are defined by the p tag.
- 17. 17 Use the <br>tag if you want a line break (a new line) without starting a new paragraph: <p>This is<br>a para<br>graph with line breaks</p> The <br> tag is an empty tag. It has no end tag like </br>. HTML LINE BREAKS
- 18. 18 Comments can beinserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and not displayed. Comments are written like this: <!-- This is a comment --> Note: There is an exclamation point after the opening bracket, but not before the closing bracket. HTML COMMENTS
- 19. EXAMPLE: <HTML> <BODY> <!--THIS COMMENT WILL NOTBE DISPLAYED--> <P>THIS IS A REGULAR PARAGRAPH</P> </BODY> </HTML> OUTPUT: This is a regular paragraph
- 20. 20 Have you everseen a Web page and wondered "Hey! How did they do that?“ To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the page. HOW TO VIEW HTML SOURCE
- 21. 21 This example demonstrateshow to insert a horizontal rule. <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph</p> <hr> <p>This is a paragraph</p> <hr> <p>This is a paragraph</p> </body> </html> HORIZONTAL RULE
- 22. 22 The hr tagdefines a horizontal rule: This is a paragraph This is a paragraph This is a paragraph OUTPUT
- 23. HTML ATTRIBUTES • Attributesprovide additional information about HTML elements. • HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value"
- 24. HTML ATTRIBUTES • AttributeExample • HTML links are defined with the <a> tag. The link address is specified in the href attribute: • <a href="http://www.w3schools.com">This is a link</a>
- 25. HTML STYLE ELEMENT •HTML uses tags like <b> and <i> for formatting output, like bold or italic text. • These HTML tags are called formatting tags • Every HTML element has a default style (background color is white and text color is black). • Changing the default style of an HTML element, can be done with the style attribute. • Syntax style="property:value"
- 26. FONT COLOR • Thecolor property defines the text color to be used for an HTML element • Example • <h1 style="color:blue">This is a heading</h1> <p style="color:red">This is a paragraph.</p>
- 27. TEXT FONT • Thefont-family property defines the font to be used for an HTML element • Example: <h1 style="font-family:verdana">This is a heading</h1> <p style="font-family:courier">This is a paragraph.</p> • The font-size property defines the text size to be used for an HTML element: • Example <h1 style="font-size:300%">This is a heading</h1> <p style="font-size:160%">This is a paragraph.</p> Note: The <font> tag, supported in older versions of HTML, is not valid in HTML5.
- 28. TEXT ALIGNMENT • Thetext-align property defines the horizontal text alignment for an HTML element: • Example • <h1 style="text-align:center">Centered Heading</h1> <p>This is a paragraph.</p>
- 29. FORMATTING HTML ELEMENTS •Formatting elements display special types of text • HTML uses elements like <b> and <i> for formatting output, like bold or italic text. • Bold: Makes text bold • Example <p>This text is normal.</p> <p><b>This text is bold</b>.</p> • The HTML <strong> element defines strong text, with added semantic "strong" importance. • Example <p>This text is normal.</p> <p><strong>This text is strong</strong>.</p>
- 30. CONT. • The HTML<i> element defines italic text, without any extra importance. • Example <p>This text is normal.</p> <p><i>This text is italic</i>.</p> • The HTML <em> element defines emphasized text, with added semantic importance. • Example <p>This text is normal.</p> <p><em>This text is emphasized</em>.</p> • Note:<b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".
- 31. CONT. • The HTML<sub> element defines subscripted text. • Example <p>This is <sub>subscripted</sub> text.</p> • The HTML <sup> element defines superscripted text. • Example <p>This is <sup>superscripted</sup> text.</p>
- 32. HTML QUOTATIONS • TheHTML <q> element defines a short quotation. • Browsers usually insert quotation marks around the <q> element. • Example <p>Browsers usually insert quotation marks around the q element.</p> <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
- 33. CONT. • The HTML<blockquote> element defines a quoted section. • Browsers usually indent <blockquote> elements. • Example <p>Here is a quote from WWF's website:</p> <blockquote> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
- 34. ABBREVIATIONS • The HTML<abbr> element defines an abbreviation or an acronym. • Marking abbreviations can give useful information to browsers, translation systems and search-engines. • Example • <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
- 35. HTML BLOCK/INLINE ELEMENTS •Most HTML elements are defined as block level elements or as inline elements. –Block level elements normally start (and end) with a new line when displayed in a browser. –Examples: <h1>, <p>, <ul>, <table> –Inline elements are normally displayed without starting a new line. –Examples: <b>, <td>, <a>, <img>
- 36. CONT. <!DOCTYPE html> <html> <body> <div style="background-color:black;color:white; padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> </body> </html>
- 37. SPAN ELEMENT • TheHTML <span> Element – The HTML <span> element is an inline element that can be used as a container for text. – The <span> element has no special meaning. – When used together with CSS, the <span> element can be used to set style attributes to parts of the text. • EXAMPLE <!DOCTYPE html> <html> <body> <h1>My <span style="color:red">Important</span> Heading</h1> </body> </html>
- 38. Use the HTMLtags/attributes learned in this class to create a web page for your personal profile. - Class Activity