Skip to main content

Learning Anchor Tag 2

Learning Anchor Tag 2

<!DOCTYPE html>

<html>

<head>

<title>Blog | Coding Ninja </title>

</head>

</body>

<h3>

<a href="../ Index.html"> Home</a>

</h3>

<p> Blog Categories</p>

<ul>

<li>

<a href="general/ best coding practices.html"> general</a>

</li>

<li>

<a href="web/five-tips.html">web</a>

</li>

</ul>

</body>

</html> 

EXPLAINTION 

 I can explain the HTML code you have shared.


The code creates a simple web page with a heading, a paragraph, and an unordered list. The heading has an anchor tag with the href attribute set to "../Index.html". This means that the anchor tag will link to the file `Index.html` in the same directory as the current file.


The unordered list has two list items. Each list item has an anchor tag with the href attribute set to a different file. The first list item links to the file `general/best-coding-practices.html`, and the second list item links to the file `web/five-tips.html`.


In general, the anchor tag is used to create hyperlinks in HTML. The href attribute specifies the URL of the link. The link text is the text that will be displayed to the user.


In the code you have shared, the anchor tags are used to create links to different pages on the same website. The href attributes of the anchor tags are set to the full paths of the files that the links point to.


The provided HTML code represents a basic web page with some HTML elements, primarily focusing on anchor tags (`<a>`), headings, and list elements. Here's a broad explanation of the code:


1. `<!DOCTYPE html>`: This is the document type declaration, specifying that the document is written in HTML5.


2. `<html>`: This is the root element of an HTML document, containing all the other HTML elements.


3. `<head>`: The `<head>` section typically contains metadata and links to external resources. In this case, it includes a `<title>` element.


4. `<title>`: The `<title>` element sets the title of the web page, which is displayed in the browser's title bar or tab.


5. `<body>`: The `<body>` section contains the main content of the web page, visible to the user.


6. `<h3>`: This is a heading level 3 element, creating a subheading within the page's content.


7. `<a>` (Anchor Tag): This is a hyperlink element used to create links to other web pages or resources. Inside the `<a>` tag, you have an `href` attribute that specifies the URL of the linked page.


   - `<a href="../ Index.html"> Home</a>`: This anchor tag creates a link labeled "Home" that points to a file named "Index.html" located one level up from the current directory (indicated by `../`).


8. `<p>`: This is a paragraph element used for text content.


   - `<p> Blog Categories</p>`: This paragraph element displays the text "Blog Categories."


9. `<ul>`: This is an unordered list element, used to create bulleted lists.


   - `<li>`: This is a list item element, used to define individual items within a list.


     - `<a href="general/ best coding practices.html"> general</a>`: Inside the list item, there is an anchor tag that creates a link labeled "general" and points to a file named "best coding practices.html" within a "general" directory.


     - `<a href="web/five-tips.html">web</a>`: Similarly, there's another anchor tag creating a link labeled "web" that points to a file named "five-tips.html" within a "web" directory.


In summary, this HTML code represents a basic web page with a title, some headings, and a list of blog categories with hyperlinks to related articles. The "Home" link goes to a different page, and the two list items under "Blog Categories" link to specific articles within different directories. However, there are a few issues in the code, such as the space in the "Index.html" filename and inconsistent spacing around attribute values.



Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Add Image To Blog Page

  Add Image To Blog Page Send Feedback Your blog now looks better and seems to be readable. After knowing how to add an image, you will now do the same in your blog. So let's add all the images required to your blog. Images to be added are provided at the end of this problem. Remember to add appropriate alternate text as well. Some text also need to be added to the blog, so add it as well. For where to insert them, look at the expected look of the page and add them to their appropriate positions, as shown below- The required images are - code for this question  <!DOCTYPE html> <html>     <head>          <img src = "https://ninjasfiles.s3.amazonaws.com/0000000000001394.png">         <p>blog codingninjas.in</p>         <p>blog Coding Ninja Offical Blog</p>         <img src = "https://ninjasfiles.s3.amazonaws.com/0000000000001395.png"...
Post a Comment
Read more

Create Blog Page

  Create Blog Page Send Feedback Now, you know what is heading tag and paragraph tag and how and where to use them. So, let's make use of them to add content to our blog page. All the content to be added is provided inside the HTML itself.   NOTE: For the headings in the document refer to the image below.   Expected Blog Page is -     Code for this solution <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Best Coding Practices for Hassle-free Programming</title> </head> <body>     <h1>Best Coding Practices for Hassle-free Programming</h1>     <p>Just like with any other activity, the world of coding is also governed by informal rules. Most of these rules are formulated over decades. Programming languages often remain...
Post a Comment
Read more

Code: Form Input Types

  Code: Form Input Types Send Feedback For now, we have created a simple form. But there is a problem that the inputs can take any value other than what they are meant to be. So, we need to change the type of the input element for proper functioning. Your task is to change the type of input according to the meaning of each of them. The meaning of each input element is provided below - 1. Comment - to provide a comment for the blog 2. Name - the name of the person who wants to comment on the blog. 3. Email - to provide the email id of the person. 4. Website - to provide the link to a website that belongs to the above said person. The expected output is - code for this  <!DOCTYPE html> <html>     <head>         <title>Best Coding Practices</title>     </head>     <body>         <div>             <header>       ...
Post a Comment
Read more