Advance HTML For Beginners,2023

1. Introduction to HTML

HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a webpage and is supported by all web browsers. HTML uses tags to define elements and their properties.

Example:

html
<!DOCTYPE html>

<html>

<head>
    <title>My First Webpage</title> 
</head> 
<body>

    <h1>Welcome to My Webpage</h1>

    <p>This is a paragraph.</p>

</body>

</html>

2. HTML Document Structure An HTML document consists of the following basic structure:

<!DOCTYPE> declaration: Specifies the HTML version being used.
<html>: The root element that wraps the entire HTML content.
<head>: Contains metadata and external resources used by the webpage.
<title>: Sets the title displayed in the browser's title bar or tab.
<body>: Contains the visible content of the webpage.

3. HTML Elements HTML elements are the building blocks of a webpage. They are defined by tags and can have attributes and content.

Example:

html
<p>This is a paragraph.</p>

<a href="https://www.example.com">Visit Example</a>

<img src="image.jpg" alt="Image">

4. HTML Headings

Headings define the hierarchy and structure of the content. There are six levels of headings: <h1> to <h6>, where <h1> represents the highest level and <h6> the lowest level.

Example:

html
<h1>Main Heading</h1>

<h2>Subheading</h2>

5. HTML Paragraphs Paragraphs are used to structure and format text content on a webpage.

Example:

html
<p>This is a paragraph.</p>

6. HTML Links Links are used to navigate between web pages or sections within a page.

Example:

html
<a href="https://www.example.com">Visit Example</a>

7. HTML Images Images are used to display visual content on a webpage.

Example:

html
<img src="image.jpg" alt="Image">

8. HTML Lists HTML supports ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).

Example:

html
<ul>

    <li>Item 1</li>

    <li>Item 2</li>

</ul>


<ol>

    <li>First</li> 
<li>Second</li>

</ol>


<dl>

    <dt>Term 1</dt>

    <dd>Definition 1</dd>

    <dt>Term 2</dt>

    <dd>Definition 2</dd> 
</dl>

9. HTML Forms Forms allow users to input data and interact with a website. They consist of various form elements like input fields, checkboxes, radio buttons, dropdowns, etc.

Example:

html
<form action="/submit" method="post">

    <label for="name">Name:</label> 
<input type="text" id="name" name="name" required>

    
    <label for="email">Email:</label>

    <input type="email" id="email" name="email" required>

    
    <input type="submit" value="Submit">

</form>

10. HTML Tables Tables are used to organize data into rows and columns.

Example:

html
<table>

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

    </tr>

    <tr>

        <td>Data 1</td>

        <td>Data 2</td
>
    </tr> 
</table>

11. HTML Semantic Elements Semantic elements provide meaning and structure to the content, making it more accessible and SEO-friendly.

Example:

html
<header>
    <h1>Website Title</h1>

</header> 
<article> 
<h2>Article Title</h2>

    <p>Article content goes here.</p>

</article>


<footer>

    <p>Footer content</p>

</footer>

12. HTML Multimedia HTML allows the embedding of multimedia elements like videos and audio.

Example:

html
<video src="video.mp4" controls></video> 
<audio src="audio.mp3" controls></audio>

13. HTML Styles and CSS CSS (Cascading Style Sheets) is used to style and layout the HTML content.

Example:

html
<style>
    h1
 {
        color: blue;
    }
p {
        font-size: 16px;
    }
</style>

14. HTML5 Semantic Markup HTML5 introduced new semantic elements to improve the structure and readability of the code.

Example:

html
<header>

    <h1>Website Title</h1>

</header> 
<nav>

    <ul>

        <li>Home</li>

        <li>About</li> 
<li>Contact</li>

    </ul> 
</nav> 
<article>

    <h2>Article Title</h2>

    <p>Article content goes here.</p>

</article>


<footer> 
<p>Footer content</p>

</footer>

This covers the basics of HTML. There are many more advanced topics and elements in HTML, but this course provides a solid foundation to get started with web development using HTML.

Here is the another example:

To create a copy button using HTML, you can use a combination of HTML and JavaScript. Here's an example:

html
<!DOCTYPE html>

<html>

<head>

    <title>Copy Button Example</title>

    <style>

        .copy-btn {
background-color: #4CAF50;
color: white;
border: none; 
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block; 
font-size: 16px; 
cursor: pointer;
 } 
</style>

</head> 
<body> 
<input type="text" value="Text to be copied" id="myInput">

    <button class="copy-btn" onclick="copyToClipboard()">Copy</button>


    <script>

        function copyToClipboard()
 {
            /* Get the text field */ 
var copyText = document.getElementById("myInput");
/* Select the text field */ 
 copyText.select();
            copyText.setSelectionRange(0, 99999);
/* For mobile devices */


            /* Copy the text inside the text field */
            document.execCommand("copy");
/* Alert the copied text */ 
alert("Copied: " + copyText.value);
 } 
</script>
</body> 
</html>

In the above example, we create an input field with an initial value and an ID of "myInput". The copy button has a class of "copy-btn" and an onclick attribute that calls the copyToClipboard() function.

Inside the copyToClipboard() function, we use JavaScript to select the text inside the input field, copy it to the clipboard using the execCommand("copy") method, and display an alert with the copied text.

When you run the above HTML code in a browser, you'll see the input field and the copy button. Clicking the copy button will copy the text inside the input field to the clipboard and display an alert with the copied text.

Feel free to customize the styles and text according to your requirements.

Here is the another Advance topic of HTML:

1. HTML5 WebSockets WebSockets allow real-time, bidirectional communication between a client and a server. It enables instant data transfer and is commonly used in applications that require real-time updates, such as chat applications and collaborative tools.

Example:

html
<!DOCTYPE html>

<html> 
<head> 
<title>WebSocket Example</title> 
<script>

        var socket = new WebSocket("wss://echo.websocket.org");
 socket.onopen = function (){
console.log("Connection established.");
        }; 
 socket.onmessage = function (event) {
console.log("Received message: " + event.data);
        };
 socket.onclose = function () { 
console.log("Connection closed.");
        };
function sendMessage() {
var message = document.getElementById("message").value;
            socket.send(message);
        }
    </script>

</head>

<body>

    <input type="text" id="message"> 
<button onclick="sendMessage()">Send</button> 
</body>

</html>

In this example, we create a WebSocket connection to the "wss://echo.websocket.org" server. When the connection is established, a message is logged in the console. When a message is received, it is logged in the console as well. The sendMessage() function reads the value from the input field and sends it as a WebSocket message.

2. HTML5 Drag and Drop Drag and drop functionality allows users to drag elements and drop them in specific areas. It is commonly used for file uploads, rearranging items, and creating interactive interfaces.

Example:

html
<!DOCTYPE html>

<html>

<head> 
<title>Drag and Drop Example</title>

    <style>

        #div1,
#div2
 {
width: 150px;
height: 150px;
padding: 10px;
border: 1px solid black;
            margin: 10px;
 }
</style>

    <script>

        function allowDrop(event)
 { 
 event.preventDefault();
 }
function drag(event) 
{ 
 event.dataTransfer.setData("text", event.target.id);
 } 
function drop(event) 
{
 event.preventDefault();
var data = event.dataTransfer.getData("text");
 event.target.appendChild(document.getElementById(data));
 } 
</script>

</head>

<body> 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <img id="drag1" src="image.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">

</body>

</html>

In this example, we have two div elements that can accept dropped elements. The allowDrop() function prevents the default behavior of the browser when an element is being dragged over. The drag() function sets the dataTransfer object with the id of the dragged element. The drop() function prevents the default behavior of the browser when an element is dropped and appends the dragged element to the target element.

3. HTML5 Geolocation The Geolocation API allows web applications to access the geographical location of a user's device. It can be used for location-based services, maps, and more.

Example:

html
<!DOCTYPE html> 
<html> 
<head> 
<title>Geolocation Example</title>

    <script>
        function getLocation() { 
if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
 } else {
alert("Geolocation is not supported by this browser.");
 } 
 }
function showPosition(position) {
            var latitude = position.coords.latitude; 
var longitude = position.coords.longitude;
alert("Latitude: " + latitude + "\nLongitude: " + longitude);
 }
</script>

</head>

<body> 
<button onclick="getLocation()">Get Location</button> 
</body>

</html>

In this example, clicking the "Get Location" button triggers the getLocation() function. If the browser supports geolocation, the getCurrentPosition() function is called to retrieve the user's current position. The latitude and longitude values are then displayed in an alert box using the showPosition() function.

These advanced HTML topics offer additional functionalities and interactivity to your web applications. Remember to explore each topic further and experiment with different implementations to expand your knowledge and skills.

Code4U

Advance HTML For Beginners,2023

About the Author

Post a Comment

Bootstrap For Beginners, 2023

Java For Beginners, 2023

Django For Beginners,2023

0286 Team