w3resource

HTML5: How to define the relationship between a document and the external resources?

Go to Exercise page

Solution :

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to define the relationship between a document and the external resources</title><!-- Sets the title of the document -->
<link rel="stylesheet" type="text/css" href="link.css"><!-- Specifies a relationship between the current document and an external stylesheet named "link.css" -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><!-- Specifies a relationship between the current document and an external JavaScript file hosted on the web -->
</head>
<body>
<ul><!-- Begins an unordered list -->
<li>PHP Tutorial</li><!-- Defines a list item for PHP Tutorial -->
<li>JavaScript Tutorial</li><!-- Defines a list item for JavaScript Tutorial -->
<li>MySQL Tutorial</li><!-- Defines a list item for MySQL Tutorial -->
</ul><!-- Ends the unordered list -->
</body>
</html>

Explanation:

  • The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
  • The <html> element encloses the entire HTML document.
  • The <head> section contains metadata about the document, including the character encoding (<meta charset="utf-8">) and the title of the document (<title>).
  • Inside the <head> section, there are two external resources linked to the document:
    • A stylesheet (<link> element) with the rel attribute set to "stylesheet", indicating that it is a stylesheet, and the href attribute pointing to an external CSS file named "link.css".
    • A JavaScript file (<script> element) with the src attribute pointing to an external JavaScript file hosted on the web.
  • The <body> section contains an unordered list (<ul>) with three list items (<li> elements) representing different tutorials.

Live Demo:

See the Pen exercise-of-li-value-tag-answer by w3resource (@w3resource) on CodePen.


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/html-css-exercise/basic/exercise-link-link-tag-answer.php