Web Page Designing Using HTML
Download as PPTX, PDF17 likes12,515 views
The document is a presentation on web page designing using HTML, outlining the structure and components of HTML, including tags, attributes, headings, paragraphs, and images. It emphasizes the importance of various HTML elements such as <html>, <head>, <title>, and <body> in creating web pages, along with their roles and functions. Additionally, it provides practical examples and coding tips for effective web design.
![References
(N. Adhikary, 2017). Web Page Designing Using HTML .Oasis Publication. 1st ed.
Pg. 159-168. [Accessed date: 03 Sept 2017]
(W3schools.com, 2017) Introduction to HTML. W3Schools.com
https://www.w3schools.com/html/html_intro.asp/ [Accessed date: 05 Sept
2017]
(Pradhan, 2017). Om Vajra Public School - OVPS is transforming to RITAMVARA
SCHOOL http://ovps.edu.np/ [Accessed date: 04 Sept 2017].](https://image.slidesharecdn.com/groupasectionembssemester2017final-170904181048/85/Web-Page-Designing-Using-HTML-16-320.jpg)
Web Page Designing Using HTML
- 1. Web Page Designing Using HTML Mahesh Sharma Computer Facilitator, Ritamvara School Welcome to PowerPoint Presentation on: © Copyright, Mahesh Sharma. 2017
- 2. Agendas Today 1. Introduction to Web Page Designing using HTML 2. Introduction to HTML 3. HTML Tags, Attributes, Headings, Paragraphs and Images 4. Describe the process to work with HTML
- 3. Introduction to Web Page 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://ovps.edu.np/ - Our School Website (N. Adhikary, 2017).
- 7. Introduction to Web Page 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
- 8. Introduction to HTML HTML Stands 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.
- 9. HTML Tags HTML Tags are enclosed 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
- 10. 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
- 11. HTML Attributes All HTML elements 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
- 12. HTML Headings • Headings are 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
- 13. 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.
- 14. 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
- 15. HTML Images I. Use the HTML <img> element to define an image II. Use the HTML src attribute to define the URL of the image III. Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed IV. Use the HTML width and height attributes to define the size of the image Note: Loading images takes time. Large images can slow down your page. Use images carefully.
- 16. References (N. Adhikary, 2017). Web Page Designing Using HTML .Oasis Publication. 1st ed. Pg. 159-168. [Accessed date: 03 Sept 2017] (W3schools.com, 2017) Introduction to HTML. W3Schools.com https://www.w3schools.com/html/html_intro.asp/ [Accessed date: 05 Sept 2017] (Pradhan, 2017). Om Vajra Public School - OVPS is transforming to RITAMVARA SCHOOL http://ovps.edu.np/ [Accessed date: 04 Sept 2017].
- 17. Any Questions?
- 18. Thank you!