Scribd
Upload
14 views

Web 2-Compressed

web book of me

Uploaded by

mansha.1309
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
14 views

Web 2-Compressed

web book of me

Uploaded by

mansha.1309
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 62
Safari v Web Applications (803) Class XI TABLE OF CONTENTS Chapter 1: Basics of Networking 1.1 What is Networking? 1.1.1Concept of Communication 1.1.2Components of Data Communication 1.13 Internet 1.2 Advantages and Disadvantages of Networking 1.3 Data Communication Terminology 1.3.1 Communication Channel 1.3.2 Bandwidth 1.3.3 Data Transfer Rate 1.3.4 IP Address 1.4 Network Devices 1.5 Types of Networks 15.1 PAN 15.2LAN 15.3 MAN 15.4WAN 1.6 Web Architecture 1.6.1 Peer-to-Peer 1.6.2 Client-Server 1.7 Network Threats and Security Measures 1.7.1 Virus and Malware 1.7.2 Phishing and Spam 1.7.3 Denial of Service 1.7.4 Security Tools Chapter 2: Website Building Using HTML and CSS 2.1 Introduction to HTML 2.2 Basic Tags in HTML 2.3 Images 24 Lists 2.5 Tables 2.6 Div & Span Tags 2.7 Hyperlinks 2.8 Forms 2.9 Audio and Video Tags Web Applications (803) Class XI 2.10 Introduction to CSS 2.11 Advantages of CSS Page 1-24 Page 25-84 Safari v Vhat is a computer neiwor Q2. What is Internet? 2 applications of internet? data communication mean? 30 of 165 nponents of data sharing over a network? Ub. What is a data communication channel? Q7. What does the term Bandwidth signify? Q8. Explain maximum and actual Bandwidth with the help of an example. Q¥. Why is actual Bandwidth usually tess than maximum bandwidth ? QUO. What is Data Transfer Rate? QU1. What is a Protocol? Q12. What is the significance of IP Addresses? Q13. What are the different types of Computer Networks? QU4. What is PAN (Personal Area Network)? QU5. Describe the following Network devices briefly: Se (CBSE PUBLICATION WEB APPLICATION 23 Chapter 1: Networking Concepts a) Repeater b) Hub ©) Switch d) Router e) Gateway QU6. What is Virus and how does it spread? QI7. How does a firewall protect a network? Q19. Discuss Phishing and different types of Phishing Scams (20. What is spamming? IV. Answer the following Competency based / Application based Questions 1. Assmall organization in your neighbourhood has received a donation of 10 computers and a printer. They want to be able to offer internet and printing facilities in their newly built computer room, what suggestions can you give them. They will also need help with choosing the right network devices. 2. The internet in the computers in the school library is very slow, how can you help them identify the problem. 3. Your uncle is using online banking on his laptop, he does not have anti-virusinstalled, how will you convince him to have one installed. V. Group Discussion © Discuss the pros and cons of the Internet. * Also discuss how IP addresses can be hidden. * Discuss the Bandwidth plans offered by various service providers. SE PUBLICATION WEB APPLICATION 24 &D 310f165 sae Chapter 2: Website Building using HTML and CSS Chapter 2 Website Building Using HTML and CSS Topics Covered 2.1 Introduction to HTML. 2.2 Basic Tags in HTML 2.3 Images 24 Lists 25 Tables 2.6 Div and Span Tags 2.7 Hyperlinks 2.8 Forms 2.9 Audio and Video Tags 2.10 Introduction to CSS 2.11 Advantages of CSS. 2.12 Three ways to implement CSS 2.13 CSS Box Model using Div 2.14 CSS Syntax and Tags 2.1 Introduction to HTML ‘What is a website? A website is a collection of web pages which contains the information about the particular organization or institution or any product. It contains the related content that is identified by a common domain name and published on one or many web servers. etc. (CBSE PUBLICATION WEB APPLICATION 2 Chapter 2: Website Building using HTML and CSS ‘A website can be opened using the software known as Browser. Commonly used browsers are Google Chrome, Microsoft Edge, Mozilla Firefox, Safari etc. Few examples of such websites are bing.com, wikipedia org, google.com, amazon.com ete. CBSE PUBLICATION WEB APPLICATION % Chapter 2: Website Building using HTML and CSS A website can be opened using the software known as Browser. Commonly used browsers are Google Chrome, Microsoft Edge, Mozilla Firefox, Safari etc. ‘Types of Website: + Static Website + Dynamic Website A static website is one where web pages are delivered exactly as they are stored, with no real-time content changes. In contrast, a dynamic website generates content in real time, typically using databases and scripting languages to provide interactivity and personalized experiences. Static Website Dynamic Website |'Same content is delivered every time the | Content may change every time the page page is loaded. is loaded. No interaction with database possible. _| Interaction with database possible. It is faster to load as compared to dynamic | It is slower than the static website website. Languages used for website development The specific languages used for a website depend on its complexity and functionality. The most common programming languages used to develop websites are: © HTML (Hyper Text Markup Language) : This forms the core structure of a web page, defining the content and its layout. Imagine it as the skeleton of a building. ‘© CSS (Cascading Style Sheets) : This language controls the visual aspects like fonts, colors, and layout that bring the website to life. ‘© JavaScript : This adds interactivity to web pages, enabling features like animations, dynamic content updates, and user input handling. It's like the electrical wiring and plumbing that make the website functional. (CBSE PUBLICATION WEB APPLICATION 26 using HTML and CSS Safari v rascading Style Sheets) : This language controls the visual aspects like fonts, colors, and layout that bring the website to life. ‘© JavaScript : This adds interactivity to web pages, enabling features like animations, dynamic content updates, and user input handling. It's like the electrical wiring and plumbing that make the website functional. CBSE PUBLICATION WEB APPLICATION 26 Chapter 2: Website Building using HTML and CSS HTML Hyper Text Markup Language or HTML is the foundational building block of web pages. It's a markup language, meaning it uses special tags to define the structure and content of a web page, telling the web browser how to display the information. It is a way of describing how a set of text, and images should be displayed to the viewer. Brief History of HTML In 1989, Tim Berners-Lee, a physicist at the European Organization for Nuclear Research, also known as CERN, wrote a memo proposing an Internet based hypertext system. In late 1990 he specified HTML and wrote the browser and server software, ‘The first publicly available description of HTML was adocument called "HTML Tags’, first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements comprising the initial, HTML's key features: ‘© Structure: It defines the overall layout of a web page, separating it into sections like headings, paragraphs, lists, images, and more. Think of it as the skeleton of a building, providing the framework for the content. © Content: While HTML doesn't directly display the content itself, it specifies the type of content within each section using various tags. For example, a

tag defines a paragraph, an tag defines a heading, and an tag, defines an image. ‘* Simplicity: HTML is a relatively easy-to-learn language with a basic syntax. It uses tags written within angle brackets (< and >) , making it accessible for beginners with no prior programming experience. It is platform-independent. © Collaboration: HTML works hand-in-hand with other web development technologies like CSS (Cascading Style Sheets and JavaScript). > CSS controls the visual aspects of the website, like fonts, colors, and layout, adding the "style" to the HTML's structure. © JavaScript adds interactivity to the website, enabling features like animations, dynamic content updates, and user input handling. HTML has no compiler or interpreter and they are browser dependent. We can create an HTML program in any text editor. Thereafter, we can run it on a browser like Edge, Chrome, ete. The file name for an HTML program should have .htm or html extension. (CBSE PUBLICATION WEB APPLICATION a Chapter 2: Website Building using HTML and CSS Web Page Safari v ‘r interpreter and they are browser dependent. We can create an © 34 Of 165 _ *iltor: Thereafter, we can run it on a browser like Edge, te for an HTML program should have .htm or html extension. (CBSE PUBLICATION WEB APPLICATION a Chapter 2: Website Building using HTML and CSS Web Page ‘A web page is a document written in hypertext (also known as HTML) that you can see online, using a web browser. Most web pages include text, photos or videos, and links to other web pages. A group of many web pages managed by one person or company is a website. A web page consists of an HTML file with any image used on the page. The HTML file (a normal text file) contains all the text to display and also acts as the ‘glue’ to hold the text and images together in the right places and display them in the right style, Writing an HTML file means composing the text you want to display, then inserting any tags you want in the right places. Tags tells a browser to do something, special, like to show text in italic or bold in a larger font, show an image or to make a link to another web page. Prerequisites to writing a HTML program ‘You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer or Netscape Navigator. You don't need any sophisticated software to write HTML code. We create HTML documents using text editors and some popular editors are: © Notepad @ Notepad++ ‘© Sublime Text © Text Edit(Mac OS) HTML Tags Tags have a simple structure and they begin with a“<” and end with “>”. Between the < angular brackets are the tag name and may be some attributes, depending on the tag The general form of a tag is: ....... BSE PUBLICATION WEB APPLICATION 20 Chapter 2: Website Building using HTML and CSS 2 Empty tags These types of tags require only a starting tag instead of a pair of tags. ie. it does not Some of the container tags are given below: 37 of 165 - ...... (CBSE PUBLICATION WEB APPLICATION 0 Chapter 2: Website Building using HTML and CSS 2. Empty tags These types of tags require only a starting tag, instead of a pair of tags. ie. it does not require an ending tag. Some of the empty tags are given below:


Some Important Tags in HTML Tag The tag identifies the document as an HTML. document. tag represents the root of an HTML document. So, it acts as the container tag for all other HTML elements. All HTML documents start with tag and end with tag. Tag ‘The tag defines the document header and does not affect the appearance of the document in the browser window. The element can also include a title for the document. Syntax Header of the document Tag The <TITLE> tag defines the title of the document. It is placed between <HEAD> and </HEAD> tags. Each document can have only one title which should identify the od (CBSE PUBLICATION WEB APPLICATION 3t Chapter 2: Website Building using HTML and CSS Safari v (0 38:0f165 S222 <TITLE> Tag The <TITLE> tag defines the title of the document. It is placed between <HEAD> and </HEAD> tags. Each document can have only one title which should identify the CBSE PUBLICATION WEB APPLICATION 3 Chapter 2: Website Building using HTML and CSS document content in a general way. The title is not a part of the document text and cannot contain hypertext links or special markup commands. It must be simple text. Syntax <TITLE> Title of the Page Tag, The tag defines the largest part of an HTML document, ie. the body. This tag contains all the major content of the document such as text, images, lists, tables, hyperlinks, etc. ‘Syntax Body of the document HTML Background can bea color or an image and can be used as an attribute with the body tag, Bgcolor The bgcolor attribute specifies a background-color for an HTML page. The value of this. attribute can be a hexadecimal number, an RGB value, or a color name: The lines above all set the background-color to black. Example . Number 1 to 6 specifies the level of heading and attribute ALIGN seis the heading in the left side, right side or at the center. If ALIGN = RIGHT, then the heading is aligned at RIGHT ALIGN = LEFT, _ then the heading is aligned at LEFT ALIGN = CENTER, then the heading is aligned at CENTER Hi1........H6, represents different levels of headings. They each differ by some factors suchas typeface, font size and the space. Sample code to illustrate the use of headings is as follows: Headings in HTML

Level 1 Heading

Level 2 Heading

Level 4 Heading

Level 6 Heading
Output Level 1 Heading Level 2 Heading anaes Level 3 Heading Level 5 Heading (CBSE PUBLICATION WEB APPLICATION 2 Chapter 2: Website Bu Safari v Level 2 Heading Level 3 Heading & 40 of 165 Naneedeg Level 5 Heading =.46 (CBSE PUBLICATION WEB APPLICATION 2 Chapter 2: Website Building using HTML and CSS Paragraph

Tag This tag is used to add space between paragraphs and is a container tag. The align attribute specifies the alignment of the text within a paragraph. Use a paragraph marker

to end a line and also show a blank line before beginning anything else. Syntax

This paragraph is centered and written from left to right.

This example will create a horizontal line that is: Center-aligned (align="center") 5 pixels high (size="5") ‘Spans 50% of the available width (width="50%") Color is blue Tag The tag is used to change font sizes, font colors and font styles of the text in your web pages. The tag provides no real functionality by itself but with the help of a few attributes, (ie. size, color and face) it does so. The size, color and face attributes can all be used at once or individually, providing users with the ability to create dynamic font styles for any HTML element. (CBSE PUBLICATION WEB APPLICATION 6 Chapter 2: Website Building using HTML and CSS Safari v 1 to change font sizes, font colors and font styles of the text in your wev pages. sue SFONT> tag provides no real functionality by itself but with the help of a few attributes, (i.e. size, color and face) it does so. The size, color and face attributes can all be used at once or individually, providing users with the ability to create dynamic font styles for any HTML element. (CBSE PUBLICATION WEB APPLICATION 6 The font tag should not be used for modern web development. Instead, you should leverage CSS properties like font-family, font-size, font-weight, color, and others to control the appearance of text in your web pages. CSS offers more flexibility, control and separation of concerns, making it a better choice for styling. Attributes: Font Size The tag uses size attribute to specify the relative or absolute size of text. The size of font ranges from 1 (very small. to 7 (very large). Syntax Text The Font size number from 1 to 7 defines the size of the text. By default, font size is 3 Font Color The color attribute defines the color of the text inside a element. To change the text color, you need to add the attribute color to the opening font tag and assign it a value for the color. The color values can be given either a standard color name e.g. red, blue, black, etc., or as RGB components e.g. # 000099. The RGB components are denoted by a preceding # sign followed by six-digit hex number. ‘Syntax Font Face The face attribute defines the font or style of the text inside a element. To change the font style from the default to a different style, simply add the attribute FACE to the opening FONT tag. As a value for the face attribute, you can use any specific font name such as “Verdana”, “Arial” and many more. The font face value is not case sensitive. Example

Its an example using the font tag.>/p> (CBSE PUBLICATION WEB APPLICATION 26 Safari v change the font tstyle from the default to a different style, simply add ‘the attribute FACE 3. Asa value for the face attribute, you can use any specific font © 43 of 165 , “Arial” and many more. The font face value is not case Example

Itis an example using the font tag.>/ p> (CBSE PUBLICATION WEB APPLICATION Fy Chapter 2: Website Building using HTML and CSS Comments in HTML ‘The comment tag is used to insert a comment in the HTML source code. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. The comment tag in HTML is used to add explanatory notes or annotations within your HTML code. Comments are not interpreted by the browser and donot affect the appearance of your webpage. The comment has an exclamation point (!. in the opening tag, but not in the closing tag). These comments are not displayed by the web browser when rendering the page, but they are visible when viewing the source code. To view the source code for this page, in your browser window, select View and then select Source. Do not put private information in comments, as anyone viewing the source code can easily see them. Do not put HTML tags inside your comments as well, since most browsers will think the comment ends with the first “>’ character. ‘© Comments can make your code easier to understand for yourself and others who may need to work with it in the future. ‘© Comments can be helpful for communicating the rationale behind code decisions, facilitating collaboration among developers. © Well-commented code can serve as a form of documentation, reducing the need for separate documentation files. Example

HTML Comments are used to add information, which is not meant tobe viewed on the webpage

Other HTML Tags The and tagsin HTML are used to format text, specifically for superscript and subscript, respectively. They are often used for: © Superscript: © Denoting exponents in mathematical expressions (¢.g., 7). © Footnotes or endnotes referencing annotations at the bottom of the page. © Trademarks (e.g., TM). © Subscript: © Chemical formulas (e.g., H.0). © Units of measurement (e.g.,m?). ©. Indexing or referencing numbered items within text. (CBSE PUBLICATION WEB APPLICATION a Safari v © Superscript: -xponents in mathematical expressions (e.g., x2). @ 44. of 165 endnotes referencing annotations at the bottom of the page. 5 (e.g. TM), © Subscript: © Chemical formulas (¢.g., H:0). Units of measurement (e.g.,m’). Indexing or referencing numbered items within text. ° (CBSE PUBLICATION WEB APPLICATION a Chapter 2: Website Building using HTML and CSS Tag (Superscript) : © Raises the text half a line above the baseline of the surrounding text. ‘© Often rendered in a smaller font size for better readability. Example ‘The formula for the area of a square is A 2. Tag (Subscript) : © Lowers the text half a line below the baseline of the surrounding text. ‘® Often rendered in a smaller font size for better readability. Example The chemical formula for water is H 2 O. 2.3 Images The tag is used to embed an image into an HTML document. Remember to replace "images/" with the actual path to your image files. Required Attributes: sre: Specifies the path or URL to the image file. This is a required attribute. Additional Attributes: width: Sets the width of the image in pixels. height: Sets the height of the image in pixels. title: Displays a tooltip when the user hovers over the image (optional) align: An attribute for aligning the image. Set align to “left,” “center,” or “right” for horizontal alignment and “top’and “bottom” for vertical alignment. © border: To add a border to an image in HTML, you can use the "border" attribute . It specifies the width of the border around the image, in pixels. © alt: Provides alternative text that is displayed if the image cannot be loaded or if the user is using a screen reader. It's also essential for accessibility and for search engines to understand the image content. (CBSE PUBLICATION WEB APPLICATION 8 . It specifies the width of the border around the image, in pixels. native text that is displayed if the image cannot be loaded or if iam] 45 Of 165 screen reader. tt's also essential for accessibility and for search tand the image content. (CBSE PUBLICATION WEB APPLICATION 8 Chapter 2: Website Building using HTML and CSS ‘Example image" border="1"> My First Webpage My First Web page

Welcome to my first webpage. I am writing this page using a text and plain old html.

By learning html, I'll be able to create web pages like a pro....
Who would have guessed how easy this would be :.


Output 2.4 Lists Lists are essential components in HTML for organizing and presenting information in an ordered or unordered manner. They improve the readability of your web content, making it easier for users to navigate and understand the presented information. 1. Ordered List (

    tag) : ‘© Used for items that have a specific sequence or order. © Each ist item is represented by the
  1. (list item) tag. © The browser automatically numbers the items by default, starting from 1. © These are also called numbered lists. (CBSE PUBLICATION WEB APPLICATION 8 Chapter 2: Website Building using HTML and CSS Attributes : Type, Start Safari v The browser automatically numbers the items by default, starting from 1. ‘ed numbered lists. LD 46 OF 165 PLICATION Fd Chapter 2: Website Building using HTML and CSS Attributes : Type, Start type="1" | The list items will be numbered with numbers (default) ity The list items will be numbered with uppercase letters ‘The list items will be numbered with lowercase letters The list items will be numbered with uppercase roman numbers ms will be numbered with lowercase roman numbers Output Coffee
    2. 1. Coffee Milk 2. Mik 3. Tea Tea
Example
        1. Coffee
        2. Coffee
        3. Cofiee
        4. Coffee
          5. <Milk
        5. Milk
        6. Milk
        8. Teas/li>
        9. Tea
The above HTML code in a browser looks like: By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:
    Oven
  1. Coffee
    2. oss ‘
  2. Milk
    3. 3. Milk
  3. Teas/li> 4. Tea
(CBSE PUBLICATION WEB APPLICATION 40 Chapter 2: Website Building using HTML and CSS 2. Unordered List (