DELHI PUBLIC SCHOOL (Under the aegis of the Delhi Public School Society, New Delhi) MATERIAL, SESSION 2022-23 Class: VI (yale, stand, heid) Subject: ICT Chapter: 1,2 (basic of web designing, introduction to html) Name: _____________________ Roll no: _______ Section: ____________ Date:26-08-2022 Ch-1 The Basic of Web Designing Tech terms: 1. Internet – it’s a network of computers grouped together sharing information all around the world. It has billions of computers connected to each other. 2. Web browser- It is an application program used to access websites and webpages over internet. Example Mozilla Firefox, Chrome, IE explorer and opera browsers. 3. URL -uniform resource locator. The website address is known as URL. Though browser the URL sends requests to the server requesting information 4. HTTP- hypertext transfer protocol. It sets rules of connecting to the internet. HTTPS means Hypertext transfer protocol secure which makes the website’s visits more secure. 5. Menu Bar- It is located on top of the browser where tools like saving, bookmarking, cut, copy, paste are used for editing on websites or webpages. 6. Search engine – this is a part of a web browser where we can search by keywords or sentences and also it returns us with suggested search from internet. 7. Most visited – this part of browser keeps a record of all the visited websites recently and often. 8. History – This is the part of a browser where all the visited websites and webpages by the user are highlighted. 9. Settings- This is a part of the browser where we can customise our browser settings like theme, security settings, deleting cookies, enabling/disabling computer hardware etc. Differences: Static Dynamic 1. fixed 1. changing 2. stable 2. lively 3. still 3. energetic 4. constant 4. active 5. content do not changes until author does 5. content is interactive changes as per it manually user’s requirement 6. example Blogs, personal websites 6. IRCTC, flip kart, google search etc Page | 1
7. web pages updates rarely 7. webpages updates frequently Linear Websites Design Hierarchical Websites Design Depending on structure of website design, Here in order to go to a particular webpage the main page contains hyperlinks leading one has to go through homepage only. to another page which further leads to another webpage Simple sequential manner Branches from Home page only Complexity is less More complex structure can be made if website designing is complex. Some main Components of a browser software Address bar – the place in the browser where we type the website address or URL of the website Backward button- used to go to the previous page visited in the browser . Forward Button – used to go to the next page visited or recent page before pressing the backward button. Reload Button – used for reloading the current page which might not be loaded properly. Search bar – used for searching keywords or topics Software and their latest versions in tabular format BROWSER RELEASE DATE LATEST VERSIONS Google September 2, 2008 48.0 Mozilla Firefox November 2004 42.0 Internet Explorer of August 16, 1995 IE 11 Microsoft Safari of Apple January 7, 2003 9.0.1 Opera 1996 33.0 Page | 2
Ch-2 Introduction to HTML and CSS HTML- stands for hypertext markup language used for writing codes for websites and webpages. Basic structure of HTML language Note : Tags are used to write HTML codes. Example all the tags should be enclosed within < > brackets or greater and lesser than sign <html> </html> - the html codes should start with this tag. This first tag is called opening tag and the second tag is called closing tag. <title></title>- is used to write the title or about the webpage being developed. Appears on top of a browser tab. <head></head>- used to write the header of the page and appears at the center top of the webpage. <body></body>- used for writing the content of the page. Here we add paragraph, headings, images and other objects in a webpage. Structure <html> <title>Add title of the page here</title> <head> <h1>Page header is added here</h1> </head> <body> Here we add the content of the page </body> </html> Container tags- the tags which has opening and closing tags both as pairs are called container tags. Example <html></html>, <body></body> etc. Empty tags- tags which do not have any closing tags are called empty tags. Example <br>,<hr> tags etc. Rules for Writing HTML codes 1. By default html tags always comes in pairs like <html></html> or opening and closing tags. 2. closing tag should always be started with (/) forward slash symbol example </p> 3. html is not case sensitive like <HTML> or <html> both are same. 4. always use smaller case letters for element or attribute names. Example <html> here html is an element. 5. write html codes in simple text editors like notepad or notepad++ Page | 3
6. save html file with filename followed .html extension. example petproject.html and save as type all files. Steps to Execute or Run HTML codes: 1. Launch notepad from all start button -> All programs->Accessories->notepad 2. start writing html codes in your notepad. 3. after completing the codes go to file menu in the notepad 4. go to save as option , a dialog box appears. 5. Choose the drive location as desktop and type the file name as petproject.html and save as type All files. 6. Run the file through any browser of your choice. Basic Formatting Tags in HTML 1. <heading></heading> tag: Note: There are 6 types of heading tags in html ranging from <h1> ……<h6> With <h1></h1> is the largest and <h6></h6> being the smallest. Blank line spaces before and after the header tags are given automatically. Example: <h1>Hello World</h1> <h6>Hello World</h6> 2. <p></p> tag: Note: Also called as paragraph tag is used to add paragraphs in html without any spaces and gives sentence structure in html. Example <p>Hello world. This is my first program. Hope you like it!</p> 3. <br> tag: Note: Break tag is used to give line break and control of the text is given to the next line. Example :<h3> This is a simple line</h3><br> 4. Preformatted Tag: <pre> tag Note: <pre> tag is used for customized user text. It considers all line breaks and spaces ignored by paragraph tag. Example: <pre> Hello World, This is a sentence of my choice. I need spaces and line breaks too!!</pre> Sample Html code applying all Html tags for lab practical <html> <title>Pet Adoption Project</title> <style> h1{ font-family: Algerian;12px; color: red; text-align: center; Page | 4
} body { background-color: blue; } </style> <heading> <h1>PET ADOPTION CLINIC</h1> <body> <p>We are a non-profitable organization who loves to take care of those who are uncared by circumstances. Yes, we are animal lovers and we like to shelter homeless pets and strays around the locality. We take all kinds of animals ranging from birds, dogs, cats and other strays. </p> <br> <br> <pre>An Open Letter to Everyone… From, ASHA PET CLINIC We would never miss your timeline. Come and join our hands to spread love and freedom to all animals. Please Adopt them because they need your attention too. </pre> </body></html> CSS-Cascading style sheet It is a part of Html without which html codes would be incomplete. We all know colours and design gives live to websites. So, CSS is the part which adds the design to a HTML code. Structure of CSS Selectors { Attribute 1: Values; Attribute 2: Values; . . . Attribute n: Values; } Example h1 { Font-size:13px; Color: red; } CSS Rules 1. CSS is always declared within { } brackets 2. It is declared inside <style></style> tag. 3. It consists of two parts , Selectors and Attributes. 4. Attributes consists of values separated by colon(:). 5. There can be more than one values for an attribute in that case they has to be separated by semicolon(;) 6. Each line in an attribute after value should end with a semicolon(:) Example: h1 { font-family: Algerian;12px; color: red; text-align: center; } body { background-color: blue; } Note: Applying CSS to the above code. Given Page | 5
Search
Read the Text Version
- 1 - 5
Pages:
