Related Topics
HTML
CSS
HTML
<title>My Web Page</title>
<h1>Welcome to My Web Page</h1>
<h2>About Me</h2>
<p>Hi, my name is John and I'm a web developer.</p>
<h2>My Projects</h2>
<h3>Project 1</h3>
<p>This is a description of my first project.</p>
<h3>Project 2</h3>
<p>This is a description of my second project.</p>
<h2>Contact Me</h2>
<p>You can reach me at john@example.com.</p>
In this example, the <h1> tag is used for the main heading of the page, followed by three sections using <h2> tags. Within the “My Projects” section, two sub-sections are created using <h3> tags. The content of each section is then placed in paragraphs using the <p> tag. This creates a clear and organized structure for the web page.
h1 {
background-color: #ffc107;
}
p {
background-color: #f2f2f2;
}
<h1>My Heading</h1>
<p>My paragraph</p>
In this example, the background-color property is used to set the background color of the <h1> and <p> tags to yellow and light gray, respectively.
To add a background image, you can use the background-image property in CSS. Here’s an example:
h1 {
background-image: url("background-image.jpg");
}
p {
background-image: url("background-image.jpg");
}
<h1>My Heading</h1>
<p>My paragraph</p>
In this example, the background-image property is used to set the background image of the <h1> and <p> tags to a file called background-image.jpg. You can replace the URL with the location of the image file on your server.
Note that you can also use other CSS properties such as background-size and background-position to control how the background image is displayed.
<title>My Web Page</title>
<header>
<h1>My Web Page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to My Web Page</h2>
<p>This is the main content of my web page.</p>
</main>
<footer>
<p>© 2023 My Web Page</p>
</footer>
n this example, the <header> tag is used to create a header section for the web page. Within the header, there is an <h1> tag for the main heading of the page and a <nav> tag for a navigation menu.
The <main> tag is used to contain the main content of the web page, which includes a <h2> tag for a subheading and a <p> tag for a paragraph.
The <footer> tag is used to create a footer section for the web page. Within the footer, there is a <p> tag for a copyright notice.
By using these semantic tags, you create a clear structure for your web page that makes it easier to understand and maintain.
<p>This is a paragraph of text.</p>
The <blockquote> tag, on the other hand, is used to indicate a block of quoted text. It is commonly used to display a quotation or citation on a web page. When you use the <blockquote> tag, it creates an indented block of text that is set apart from the surrounding text.
Here’s an example of using the <blockquote> tag to display a quotation:
<blockquote>
<p>"The only way to do great work is to love what you do."</p>
<cite>― Steve Jobs</cite>
</blockquote>
In this example, the <blockquote> tag contains a <p> tag for the quoted text and a <cite> tag for the citation.
In summary, the <p> tag is used to create paragraphs of text, while the <blockquote> tag is used to create a block of quoted text. The <blockquote> tag is typically used to display a quotation or citation, while the <p> tag is used for general text content.
<title>My Web Page</title>
<header>
<h1>My Web Page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to My Web Page</h2>
<p>This is the main content of my web page.</p>
<blockquote>
<p>"The only way to do great work is to love what you do."</p>
<cite>― Steve Jobs</cite>
</blockquote>
<p>This is some more content on my web page.</p>
<p><q>Design is not just what it looks like and feels like. Design is how it works.</q></p>
</main>
<footer>
<p>© 2023 My Web Page</p>
</footer>
In this example, we have used the <blockquote> tag to create a quote by Steve Jobs. Within the <blockquote> tag, we have used a <p> tag for the quoted text and a <cite> tag for the citation.
We have also used the <q> tag to create a pull quote. The <q> tag is used to indicate a short inline quotation, which is a brief extract or excerpt from the surrounding text.
By using these semantic tags, we create a clear structure for our web page that makes it easier to understand and maintain.
<title>My Blog</title>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>How to Make a Delicious Chocolate Cake</h2>
<p>If you love chocolate, you'll love this recipe for a decadent chocolate cake. In this post, we'll walk you through the steps to create a delicious and moist cake that is sure to impress your friends and family.</p>
<h3>Ingredients</h3>
<ul>
<li>1 3/4 cups all-purpose flour</li>
<li>2 cups granulated sugar</li>
<li>3/4 cup unsweetened cocoa powder</li>
<li>1 1/2 teaspoons baking powder</li>
<li>1 1/2 teaspoons baking soda</li>
<li>1 teaspoon salt</li>
<li>1 cup buttermilk</li>
<li>1/2 cup vegetable oil</li>
<li>2 large eggs</li>
<li>2 teaspoons vanilla extract</li>
<li>1 cup boiling water</li>
</ul>
<h3>Instructions</h3>
<ol>
<li>Preheat your oven to 350 degrees Fahrenheit.</li>
<li>Grease and flour two 9-inch round cake pans.</li>
<li>In a large bowl, mix together the flour, sugar, cocoa powder, baking powder, baking soda, and salt.</li>
<li>Add the buttermilk, vegetable oil, eggs, and vanilla extract to the dry ingredients and mix until well combined.</li>
<li>Stir in the boiling water, a little bit at a time, until the batter is smooth and well mixed.</li>
<li>Pour the batter into the prepared cake pans and bake for 30-35 minutes, or until a toothpick inserted in the center comes out clean.</li>
<li>Let the cakes cool in the pans for 10 minutes, then remove them from the pans and place them on a wire rack to cool completely.</li>
<li>Frost the cake with your favorite frosting and serve.</li>
</ol>
</main>
<footer>
<p>© 2023 My Blog</p>
</footer>
In this example, we have used the <h2> tag for the title of the blog post, “How to Make a Delicious Chocolate Cake”. We have also used the <p> tag to provide a summary or abstract of the post, which tells the reader what they can expect to learn from the post.
The rest of the post is structured using headings and paragraphs to provide the recipe instructions, ingredient list, and other details. By using semantic tags like <h2> and `<p
<title>My Website</title>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>About My Website</h2>
<p>My website provides information about a variety of topics, including technology, science, and lifestyle. Please note that the information provided on this website is for educational and informational purposes only and should not be considered professional advice. Always consult a qualified professional before making any decisions based on the information on this website.</p>
<h3>Disclaimer</h3>
<p>The information provided on this website is accurate to the best of our knowledge. However, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.</p>
<h3>Warning</h3>
<p>Unauthorized use of this website may give rise to a claim for damages and/or be a criminal offense. From time to time, this website may also include links to other websites. These links are provided for your convenience to provide further information. They do not signify that we endorse the website(s). We have no responsibility for the content of the linked website(s).</p>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
In this example, we have used the <h3> tag for the headings of the disclaimer and warning, and the <p> tag for the text of the disclaimer and warning. The disclaimer provides information about the accuracy and reliability of the information on the website, and the warning alerts the reader to the potential risks of unauthorized use and use of external links. By using semantic tags like <h3> and <p>, we can create a well-structured and easy-to-read disclaimer and warning.
<title>My Website</title>
h1 {
font-size: 36px;
font-family: Arial, sans-serif;
color: #333;
}
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>About My Website</h2>
<p>My website provides information about a variety of topics, including technology, science, and lifestyle.</p>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
In this example, we have used the <style> element to define the CSS rules for the <h1> heading. We have set the font size to 36 pixels, the font family to Arial or a sans-serif font, and the color to #333 (a dark gray). By applying these styles to the <h1> heading, we can change its appearance on the web page.
You can also use similar CSS rules to change the font size, type, or color of paragraphs or other HTML elements. Simply select the element you want to change, specify the CSS properties you want to change, and apply the CSS to the element.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.