Download to read offline
FYCOM Unit 1.pptx
- 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
- 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
- 18. 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
- 19. 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
- 20. ⮚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 paragraph HTML Paragraphs
- 21. <p> This paragraph contains alot of lines in the source code, but the browser ignores it. </p> <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p>
- 22. The <br> taginserts a single line break. The <br> tag is an empty tag which means that it has no empty tag. These tag is also called as non container tag. <p> This content is before the line break<br> and this content after the line break</p> Break Tag
- 23. 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-