Website Demo1 Website Demo2
1.Create HTML document using markup Tags in HTML editor (Notepad) (Open/run the html file in web browser to check the output (30 mins)
That looks like a basic HTML page! HTML stands for HyperText Markup Language, and it is a standard markup language used to create web pages. The code you provided creates a webpage with a heading and a paragraph.
The <!DOCTYPE html> declaration at the top of the page tells the web browser that this is an HTML5 document. The <html> element is the root element of the HTML page, and it contains the <head> and <body> elements.
The <head> element can contain information about the webpage, such as the title (which appears in the browser's tab). The <body> element contains the content that is visible on the webpage, such as headings, paragraphs, and images.
The <h1> element is a heading, and the <p> element is a paragraph. You can use different levels of headings, from <h1> to <h6>, to indicate the hierarchy of the content on your webpage
Here is an example of how you can modify the HTML document to include line breaks:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first webpage. I'm so excited to share it with the world!</p>
<br>
<p>I hope you enjoy it.</p>
</body>
</html>
2. Modify above HTML document using heading – paragraphs, modify above HTML document using Line Breaks, modify above HTML document using HTML Tags. (30 mins)
To add a line break in an HTML document, you can use the <br> element. The <br> element is an empty element, which means it does not have a closing tag. It is used to insert a line break or new line in the text.
Here is an example of how you can use the <br> element to add a line break in an HTML document:
<p>This is a paragraph.<br>It has a line break.</p>
The above code will be displayed as follows in the web browser:
This is a paragraph.
It has a line break.
You can also use the <br> element to add multiple line breaks:
<p>This is a paragraph.<br><br>It has two line breaks.</p>
The above code will be displayed as follows in the web browser:
This is a paragraph.
It has two line breaks.
I hope this helps! Let me know if you have any other questions
3. Introduce new elements of HTML5 (1 Hrs)
HTML5 is the latest version of HTML (HyperText Markup Language), the standard markup language used to create web pages. It was published in 2014 and it brings several new elements and features that allow developers to create more interactive and engaging websites.
Here are some new elements introduced in HTML5:
<article>: This element represents a standalone piece of content, such as a blog post or an article.
<aside>: This element represents content that is related to the main content of the page, but is not essential to understand it.
<audio>: This element allows you to embed audio files in your webpage.
<canvas>: This element provides a drawing surface for rendering graphics, such as charts or games, using JavaScript.
<datalist>: This element provides a list of options for input controls, such as text boxes and drop-down lists.
<details>: This element allows you to provide additional details that the user can view or hide.
<figure>: This element represents self-contained content, such as images or diagrams, that can be referenced in the main content of the page.
<footer>: This element represents the footer of a page or section.
<header>: This element represents the header of a page or section.
<main>: This element represents the main content of a page.
<mark>: This element represents highlighted text.
<output>: This element represents the result of a calculation or user action.
<video>: This element allows you to embed video files in your webpage.
I hope this helps! Let me know if you have any other questions.
4. Create Text, Lists, Tables and iFrames (2 Hrs)
To create text in an HTML document, you can use the <p> element to represent a paragraph, the <h1> to <h6> elements to represent headings, and the <span> element to apply styles to a part of a text.
Here is an example of how you can create text in an HTML document:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is a paragraph. It has a lot of <span>important</span> information.</p>
<p>This is another paragraph. It is also very <span>important</span>.</p>
To create lists in an HTML document, you can use the <ul> element to represent an unordered list (a list of items with bullet points), and the <ol> element to represent an ordered list (a list of items with numbers). Each list item is represented by the <li> element.
Here is an example of how you can create lists in an HTML document:
<h2>My Favorite Fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
<h2>My Todo List</h2>
<ol>
<li>Buy groceries</li>
<li>Finish homework</li>
<li>Go for a run</li>
</ol>
To create tables in an HTML document, you can use the <table> element to represent the table, the <tr> element to represent a row, and the <td> element to represent a cell. You can also use the <th> element to represent a cell that contains a heading.
Here is an example of how you can create a table in an HTML document:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Female</td>
</tr>
</table>
To create an iFrame in an HTML document, you can use the <iframe> element. An iFrame (Inline Frame) is an HTML element that allows you to embed another HTML document within the current document.
Here is an example of how you can create an iFrame in an HTML document:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
I hope this helps! Let me know if you have any other questions
5. Create Hyperlinks, Images and Multimedia Working with Forms and controls. (3 Hrs)
To create a hyperlink in an HTML document, you can use the <a> element. The <a> element stands for anchor, and it is used to create a link to another webpage or a specific location within the same page.
Here is an example of how you can create a hyperlink in an HTML document:
<a href="https://www.example.com">Visit Example Website</a>
To add an image to an HTML document, you can use the <img> element. The <img> element is an empty element, which means it does not have a closing tag. It is used to insert an image into the webpage.
Here is an example of how you can add an image to an HTML document:
<img src="image.jpg" alt="A description of the image">
The src attribute specifies the location of the image file, and the alt attribute provides a description of the image for accessibility purposes.
To add multimedia to an HTML document, you can use the <audio> and <video> elements. The <audio> element allows you to embed audio files in your webpage, and the <video> element allows you to embed video files.
Here is an example of how you can add an audio file to an HTML document:
<audio src="audio.mp3" controls></audio>
Here is an example of how you can add a video file to an HTML document:
<video src="video.mp4" controls></video>
To create a form in an HTML document, you can use the <form> element. A form allows users to enter data that is sent to a server for processing.
Inside the <form> element, you can use various form controls, such as text boxes, radio buttons, and drop-down lists, to collect user input.
Here is an example of how you can create a simple form in an HTML document:
<form>
<label for="name">Name:</label><br>
<input type="text" id="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email"><br>
<input type="submit" value="Submit">
</form>
I hope this helps! Let me know if you have any other questions
6. Enable Hypertext Transfer Protocol (HTTP) via GET and POST requests (1 Hrs)
Hypertext Transfer Protocol (HTTP) is a set of rules that defines how web clients (such as web browsers) and web servers communicate with each other. HTTP is the foundation of data communication on the World Wide Web.
To enable HTTP via GET and POST requests, you can use the <form> element in HTML. The <form> element allows you to create a form that can be submitted to a server for processing.
The method attribute of the <form> element specifies the HTTP method that is used to submit the form data to the server. The two most commonly used methods are GET and POST.
The GET method sends the form data as a query string in the URL, while the POST method sends the form data as a request body.
Here is an example of how you can use the GET method in an HTML form:
<form action="process.php" method="get">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
When the form is submitted, the data is sent to the process.php script as a query string in the URL:
http://www.example.com/process.php?name=John&email=john@example.com
Here is an example of how you can use the POST method in an HTML form:
<form action="process.php" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
When the form is submitted, the data is sent to the process.php script as a request body:
name=John&email=john@example.com
I hope this helps! Let me know if you have any other questions
7. Obtain input from users. (5 Hrs)
To obtain input from users in an HTML document, you can use various form controls such as text boxes, radio buttons, and drop-down lists.
Here is an example of how you can use a text box to obtain input from users:
<label for="name">Name:</label><br>
<input type="text" id="name"><br>
The <input> element with the type="text" attribute creates a text box where the user can enter a single line of text. The id attribute is used to uniquely identify the element, and the for attribute of the <label> element is used to associate the label with the text box.
8. Divide a webpage into logical sections (1 Hr)
To divide a webpage into logical sections, you can use various HTML elements such as <header>, <nav>, <main>, <aside>, <article>, and <footer>.
The <header> element represents the header of a page or section. It can contain the logo, the navigation menu, and other elements that are common to the whole page.
The <nav> element represents a section of the page that contains navigation links.
The <main> element represents the main content of a page. It should contain the content that is specific to the page and that is not repeated on other pages.
The <aside> element represents content that is related to the main content of the page, but is not essential to understand it. It can contain a sidebar, a widget, or other secondary information.
The <article> element represents a standalone piece of content, such as a blog post or an article.
The <footer> element represents the footer of a page or section. It can contain the copyright information, the credits, and other elements that are common to the whole page.
Here is an example of how you can use these elements to divide
9. Display computer code with HTML (1 Hr)
To display computer code in an HTML document, you can use the <pre> element or the <code> element.
The <pre> element represents preformatted text. It preserves the whitespace and the formatting of the text, such as the line breaks and the indentation.
Here is an example of how you can use the <pre> element to display computer code in an HTML document:
<pre>
function greet(name) {
console.log("Hello, " + name);
}
</pre>
The <code> element represents a fragment of computer code. It does not preserve the whitespace and the formatting of the text, but it allows you to apply styles to the code using CSS.
Here is an example of how you can use the <code> element to display computer code in an HTML document:
<p>To greet someone, you can use the <code>greet</code> function:</p>
<code>greet("John");</code>
You can also use the <pre> element inside the <code> element to preserve the formatting of the code:
<p>Here is the definition of the <code>greet</code> function:</p>
<code>
<pre>
function greet(name) {
console.log("Hello, " + name);
}
</pre>
</code>
I hope this helps! Let me know if you have any other questions
10. Annotation of images and graphics. (2 Hrs)
To annotate images and graphics in an HTML document, you can use the <figure> element and the <figcaption> element.
The <figure> element represents self-contained content, such as images or diagrams, that can be referenced in the main content of the page. The <figcaption> element represents a caption or a legend for the <figure> element.
Here is an example of how you can use the <figure> element and the <figcaption> element to annotate an image in an HTML document:
<figure>
<img src="image.jpg" alt="A description of the image">
<figcaption>This is the caption of the image</figcaption>
</figure>
You can also use the <mark> element to highlight text within the <figcaption> element:
<figure>
<img src="image.jpg" alt="A description of the image">
<figcaption>This is the <mark>caption</mark> of the image</figcaption>
</figure>
I hope this helps! Let me know if you have any other questions
11. Marking abbreviations (1 Hr)
To mark abbreviations in an HTML document, you can use the <abbr> element. The <abbr> element represents an abbreviation or an acronym.
The title attribute of the <abbr> element provides the expansion or the definition of the abbreviation.
Here is an example of how you can use the <abbr> element to mark an abbreviation in an HTML document:
<p>The <abbr title="World Wide Web">WWW</abbr> is an interconnected network of websites.</p>
You can also use the <acronym> element, which is similar to the <abbr> element, but it is deprecated in HTML5. It is recommended to use the <abbr> element instead.
I hope this helps! Let me know if you have any other questions
12. Add quotations and citations to web pages (2 Hrs)
To add quotations to an HTML document, you can use the <blockquote> element. The <blockquote> element represents a long quotation that is separated from the main content.
You can use the cite attribute of the <blockquote> element to provide the source of the quotation.
Here is an example of how you can use the <blockquote> element to add a quotation to an HTML document:
<blockquote cite="https:
<p>A quote goes here</p>
<footer>
<cite>Author</cite>, <cite><a href="https:
</footer>
</blockquote>
To add citations to an HTML document, you can use the <cite> element. The <cite> element represents the title of a work, such as a book or a film.
Here is an example of how you can use the <cite> element to add a citation to an HTML document:
<p>According to <cite>The Art of War</cite>, "Strategy without tactics is the slowest route to victory. Tactics without strategy is the noise before defeat."</p>
I hope this helps! Let me know if you have any other questions
13. Embed a webpage within another webpage (2 Hrs)
To embed a webpage within another webpage, you can use the <iframe> element. The <iframe> element represents an inline frame, which allows you to embed another HTML document in the current webpage.
The src attribute of the <iframe> element specifies the URL of the webpage that you want to embed.
Here is an example of how you can use the <iframe> element to embed a webpage in an HTML document:
<iframe src="https://www.example.com"></iframe>
You can also use the width and height attributes to specify the size of the <iframe> element:
<iframe src="https://www.example.com" width="800" height="600"></iframe>
I hope this helps! Let me know if you have any other questions
css
Cascading Style Sheets (CSS) is a stylesheet language that is used to describe the look and formatting of a document written in HTML.
With CSS, you can control the color, font, layout, and other aspects of the presentation of an HTML document.
To use CSS in an HTML document, you can include a <style> element in the <head> of the document or you can link to an external stylesheet using the <link> element.
Here is an example of how you can use the <style> element to apply CSS styles to an HTML document:
<head>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
}
</style>
</head>
Here is an example of how you can use the <link> element to link to an external stylesheet in an HTML document:
<head>
<link rel="stylesheet" href="style.css">
</head>
In the external stylesheet (style.css), you can define the styles that you want to apply to the HTML document:
body {
background-color: lightgray;
}
h1 {
color: blue;
}
I hope this helps! Let me know if you have any other questions
google app scritpts
Google Apps Script is a scripting language that is based on JavaScript and that lets you customize and automate Google apps such as Docs, Sheets, and Forms.
With Google Apps Script, you can create custom functions, scripts, and macros that can be used in Google apps or that can be published as web apps or add-ons.
To use Google Apps Script, you can create a script in the Script Editor that is built into Google apps or you can use the online code editor at script.google.com.
To create a script in the Script Editor, open a Google Doc, Sheet, or Form and click on the Tools menu and then click on Script editor. This will open the Script Editor in a new tab, where you can write and debug your script.
To use the online code editor, go to script.google.com and sign in with your Google account. You can create a new script by clicking on the New script button or you can open an existing script by clicking on the Open script button.
I hope this helps! Let me know if you have any other questions
https://script.google.com/macros/s/AKfycbxfVV9MD1Qh4cH__Rm9fhsGZr7jN5YtQzHCGbei0n5MzyGLNWaeoRbiYsUhHqklzsOc/exec
https://saeeam-web-demo.shivamkumar87.repl.co/
