Download as PDF, PPTX
FYCOM Unit 1.pptx (2).pdf
- 1. Web Page DesigningUsing HTML Welcome to PowerPoint Presentation on:
- 2. The Internet ❏ TheInternet consists of millions of interconnected computers that enable users to communicate and share information. ❏ The World Wide Web was developed to make the Internet easier to use and give quick access to users.
- 3. Purpose of Internet ❏For Information ❏ Sending and Retrieval (researches, facts and figures, etc.) ❏ For Communication ❏ Via emails, chat, etc.
- 4. Structure of theInternet This figure shows the physical structure of the Internet, which uses fiber- optic cables, satellites, phone lines, and other telecommunications media to send data back and forth.
- 5. Hypertext Documents ❏ Hypertextoffers a better way of locating information. ❏ When you read a book, you follow a linear progression, reading one page after another. ❏ With hypertext, you progress through pages in whatever way is best suited to you and your objectives. ❏ Hypertext lets you skip from one topic to another.
- 6. Linear Versus HypertextDocuments This figure shows how topics can be related in a hypertext fashion,as opposed to a linear fashion.
- 7. Web Pages andWeb Browsers ❏ A Web page is stored on a Web server, which makes the page available to users of the Web. ❏ To view a Web page, the user runs a Web browser , a software program that retrieves the page and displays it. ❏ A Web browser can either be text-based, or graphical.
- 8. Using a Browserto View a Web Document on a Server This figure shows to view web pages, the user runs a Web browser, a software program that retrieves the page and displays it. PRELIM
- 9. Introduction to WebPage Designing WHAT IS A WEB PAGE? The Internet Page displayed on the website is called A Web Page. Some Examples are: https://www.facebook.com/ - A Social Networking Site https://www.google.com.np/- A Search Engine http://www.sjcem.edu.in- Our School Website
- 13. Introduction to WebPage Designing A web page may include different Data and Information based on: I. Title, Heading and Paragraph II. Images, Audios and Videos III. Schedules of Events IV. Search Forms V. Sign Up and Login Forms etc
- 14. Introduction to HTML HTMLStands for Hypertext Markup Language The language for building Web Pages Describes the structure of Web pages using markup language HTML elements are the building blocks of HTML pages HTML elements are represented by HTML tags Some of the Examples of HTML tags are: <HTML> </HTML>, <HEAD></HEAD>, <TITLE></TITLE>, <BODY></BODY>, <H1></H1> <P></P>, <B></B>, <U></U>, <I></I> etc.
- 15. HTML Tags HTML Tags areenclosed in the < and the > symbols. It has two pairs, an Opening tag eg. <html> and a closing tag eg. </html>. A closing tag is followed by symbol ‘/’. The <html> element defines the whole document. It has a start tag <html> and an end tag </html> Input in Notepad saved as - Nepal.html Output in a Web browser - Google Chrome
- 16. HTML Tags Explained I.The <!DOCTYPE html> declaration defines this document to be HTML5 II. The <html> element is the root element of an HTML page III. The <head> element contains title of document IV. The <title> element specifies a title for the document V. The <body> element contains the visible page content VI. The <h1> element defines a large heading VII. The <p> element defines a paragraph VIII. The <b> element defines the bold of text
- 17. HTML Headings • Headingsare important in HTML documents. They are the title of HTML pages • Headings are defined with the <h1> to <h6> tags. • H1 is the largest heading tag while H6 is the smallest heading tag. • <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on
- 18. HTML Attributes All HTMLelements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value" Example: <body BGCOLOR = “green”> changes the background of webpage to green color
- 19. HTML Paragraphs The HTML<p> element defines a paragraph. We define <p> tag with attribute and value to change the properties of the paragraph For instance: I. <p align = “left”> - for left alignment of paragraph II. <p align = “center”> - for center alignment of paragraph III. <p align = “right”> - for right alignment of paragraph IV. <p align = “justified”> - for justified alignment of paragragh I. II. III. IV .
- 20. HTML Images In HTML,images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image: <img src="pic_mountain.jpg" alt="Mountain View" width= "340px" height="228px"> For Instance: Input in Notepad saved as - Mountain.html Output in Web Browser- Google Chrome