Curriculum
Ncert-Class 10 computer science
Chapter 1 -Networking
0/6
Chapter 2- HTML
0/4
Chapter 3: Cyber ethics
0/5
Lab Exercises
0/4
Case Based Qquestions
0/1
Assertion and Reason
0/1
Lab Exercises- Part 1- Class 10- Computer Science- Lab Exercises
Short Notes- Class 10- Computer Science- Lab Exercises
Create static web pages:
Task: Create simple HTML pages with text content.
Example: Create a homepage with information about yourself, a contact page with your contact details, and a portfolio page showcasing your projects.
<!DOCTYPE html> <html> <head> <title>Homepage</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is the homepage.</p> </body> </html> |
Use style sheets to enforce a format in an HTML page (CSS):
Task: Create a CSS file to style HTML elements such as headings, paragraphs, links, and background colors.
Example: Define CSS rules to make headings bold and italicized, paragraphs with a specific font, and links with a different color.
Create a CSS file:
◆Open a text editor.
◆Write your CSS rules to style the heading.
For example:
h2 { color: #333; /* Dark gray color */ font-family: Arial, sans-serif; font-size: 24px; /* Larger font size */ font-weight: bold; /* Bold text */ text-decoration: underline; /* Underline text */ } |
◆Save the file with a .css extension, for example, heading-styles.css.
◆Link the CSS file to your HTML document:
◆In your HTML file, within the <head> section, add a <link> tag to link the CSS file.
For example:
<!DOCTYPE html> <html> <head> <title>Styled Heading</title> <link rel=”stylesheet” type=”text/css” href=”heading-styles.css”> </head> <body> <h2>Use style sheets to enforce a format in an HTML page (CSS)</h2> <!– Other content here –> </body> </html> |
◆Save your HTML file: Save your HTML file with a .html extension in the same directory as your CSS file. For example, styled-heading.html.
◆Testing: Open the HTML file (e.g., styled-heading.html) in a web browser. The browser will apply the styles defined in your CSS file to the heading.
Embed pictures, audio, and videos in an HTML page:
Task: Use HTML <img>, <audio>, and <video> tags to embed media files in a web page.
Example: Embed an image of your choice, an audio clip with background music, and a video tutorial demonstrating a skill.
◆Embedding Image :
To embed an image in an HTML page, you can use the <img> tag.
Explanation:
◆The <img> tag is used to embed images.
◆The src attribute specifies the path to the image file.
◆The alt attribute provides alternative text for accessibility and is displayed if the image fails to load.
Embedding Audio:
To embed audio in an HTML page, you can use the <audio> tag.
Example:
Explanation:
◆The <audio> tag is used to embed audio.
◆The controls attribute adds audio controls (play, pause, volume) to the audio player.
◆The <source> tag specifies the path to the audio file and its MIME type.
Embedding Videos:
To embed videos in an HTML page, you can use the <video> tag.
Example:
Explanation:
◆The <video> tag is used to embed videos.
◆The width and height attributes specify the dimensions of the video player.
◆The controls attribute adds video controls (play, pause, volume) to the video player.
The <source> tag specifies the path to the video file and its MIME type.
<!DOCTYPE html> <html> <head> <title>Media Page</title> </head> <body> <img src=”image.jpg” alt=”Example Image”> <audio controls> <source src=”audio.mp3″ type=”audio/mpeg”> Your browser does not support the audio element. </audio> <video controls> <source src=”video.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video> </body> </html>
|
