HTML CSS Exercise: title, heading, paragraph, em, strong, lsit and image

Last update on March 04 2024 06:50:53 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<meta charset="utf-8"><!-- Specifies the character encoding of the document -->
<title>This is the first HTML-CSS exercise</title><!-- Sets the title of the document -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<img src="https://www.w3resource.com/html-css-exercise/first.png" alt="demo image for html-css exercise"><!-- Displays an image with alt text -->

<h1>FIFA World Cup 2014 News</h1><!-- Displays a level 1 heading with the text "FIFA World Cup 2014 News" -->
<p>The biggest scoreline in the history of the <strong>FIFA World Cup</strong> qualifiers - and indeed in the history of international football - was recorded on 11 April 2001, when Australia beat American Samoa 31-0.</p><!-- Displays a paragraph with strong emphasis on "FIFA World Cup" -->

<p>This legendary match also brought global renown for <em>Archie Thompson</em>, whose 13-goal haul set a new world record, which stands to this day, for an individual player in a single international match.</p><!-- Displays a paragraph with emphasis on "Archie Thompson" -->

<p>And though the defeat earned American Samoa ignominy, so inspiring has their subsequent recovery been that it is now the subject of an acclaimed documentary, <em>‘Next Goal Wins'</em>, showing across the world.</p><!-- Displays a paragraph with emphasis on "Next Goal Wins" -->

<h2>Destinations</h2><!-- Displays a level 2 heading with the text "Destinations" -->
<ul><!-- Begins an unordered list -->
<li><a href="http://www.fifa.com/worldcup/destination/stadiums/stadium=771/index.html">BELO HORIZONTE, STADIUM : Estadio Mineirao</a></li><!-- Displays a list item with a hyperlink -->
<!-- Other list items follow the same structure with different destinations and stadium names -->
</ul><!-- Ends the unordered list -->

<p><a href="http://feeds.feedburner.com/W3resource"><img src="https://www.w3resource.com/images/rss.gif" alt="RSS Feed"></a><a href="http://in.linkedin.com/in/w3resource"><img src="https://www.w3resource.com/images/linkedin.gif" alt="LinkedIn"></a><a href="http://www.twitter.com/w3resource"><img src="https://www.w3resource.com/images/twitter.gif" alt="follow w3resource on twitter"></a></p><!-- Displays a paragraph with social media icons as hyperlinks -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document contains information about the FIFA World Cup 2014 and its destinations.
It includes headings, paragraphs, a list of destinations, and social media icons as hyperlinks.
The img tag is used to display an image with the specified source and alternative text.
Headings (h1, h2) are used to structure the content.
Paragraphs (p) are used to provide textual information.
The ul tag creates an unordered list, and li tags represent list items within it.
Anchor (a) tags are used for hyperlinks, linking to various FIFA World Cup destinations and social media profiles.

Live Demo :

See the Pen title-heading-paragraph-em-strong-list-image-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes