HTML – DesignSavvy: Unleashing Creative Brilliance https://www.searchenginegenie.com/web-design-blog Inspiring Designs, Transformative Insights Thu, 11 Jan 2024 07:37:50 +0000 en-US hourly 1 https://wordpress.org/?v=7.1.3 https://www.searchenginegenie.com/web-design-blog/wp-content/uploads/2024/05/cropped-SEG-1-32x32.pngHTML – DesignSavvy: Unleashing Creative Brilliancehttps://www.searchenginegenie.com/web-design-blog 32 32 HTML Sitemap vs. XML Sitemap: What’s the Difference?https://www.searchenginegenie.com/web-design-blog/html-sitemap-vs-xml-sitemap-whats-the-difference/ https://www.searchenginegenie.com/web-design-blog/html-sitemap-vs-xml-sitemap-whats-the-difference/#respond Thu, 26 Oct 2023 12:10:29 +0000 https://www.searchenginegenie.com/web-design-blog/?p=4275
image-4276

Sitemaps play a crucial role in guiding search engines through the content of a website. Among the various types of sitemaps, HTML and XML are two primary formats. While they serve the same purpose, they have distinct characteristics and are utilized in different ways. In this guide, we’ll delve into the key differences between HTML and XML sitemaps, and explore when to use each type.

I. HTML Sitemap: A User-Friendly Navigation Tool 

1. Designed for Humans:

   – HTML sitemaps are created primarily for website visitors. They provide a clear, organized list of links to help users navigate through a website’s content.

2. Improving User Experience:

   – HTML sitemaps enhance user experience by offering an alternative navigation option, especially on websites with complex structures or extensive content.

II. XML Sitemap: A Roadmap for Search Engines

1. Built for Search Engines:

   – XML sitemaps are specifically designed for search engine crawlers. They provide detailed information about the structure and content of a website.

2. Enhancing Crawling Efficiency:

   – XML sitemaps help search engines discover and index pages more efficiently, ensuring that all relevant content is included in search results.

III. HTML Sitemap: Navigational Benefits

1. Accessibility and Discoverability:

   – HTML sitemaps act as a secondary navigation tool, making it easier for users to find specific pages, especially when the site’s main menu may not provide a clear path.

2. Facilitating Deep Page Access:

   – They allow users to access deeper pages in the website hierarchy without having to follow multiple links from the homepage.

IV. XML Sitemap: Technical Advantages 

1. Providing Metadata for Search Engines:

   – XML sitemaps include additional information about each page, such as the last modification date, priority level, and frequency of updates, helping search engines make informed crawling decisions.

2. Handling Large and Complex Sites:

   – They are especially valuable for websites with numerous pages, dynamic content, or areas that may not be easily discoverable through standard crawling.

V. HTML Sitemap: User-Centric Design 

1. Visual Presentation:

   – HTML sitemaps are presented in a user-friendly, visually appealing format that is easy to navigate.

2. Categorization and Hierarchy:

   – They often include categorization and hierarchy, allowing users to quickly locate specific content or sections of the website.

VI. XML Sitemap: Technical Implementation 

1. Automated Generation:

   – XML sitemaps are typically generated using tools or plugins that automatically create and update the file based on the website’s content and structure.

2. Submission to Search Engines:

   – Webmasters submit the XML sitemap to search engines via the robots.txt file or through Google Search Console, enabling better indexation.

HTML and XML sitemaps are essential tools in optimizing a website’s visibility and navigation. Understanding their distinct purposes and benefits allows webmasters and SEO professionals to utilize them effectively to enhance user experience and facilitate search engine crawling. By implementing both types strategically, website owners can create a seamless browsing experience for users while ensuring that search engines can efficiently index and rank their content.

]]> https://www.searchenginegenie.com/web-design-blog/html-sitemap-vs-xml-sitemap-whats-the-difference/feed/ 0 How to shake an image using html and csshttps://www.searchenginegenie.com/web-design-blog/how-to-shake-an-image-using-html-and-css/ https://www.searchenginegenie.com/web-design-blog/how-to-shake-an-image-using-html-and-css/#respond Fri, 06 Oct 2017 13:41:18 +0000 https://www.searchenginegenie.com/web-design-blog/?p=3630 Hover over the image:
Pineapple
Step:1

Copy and paste the given code

]]> https://www.searchenginegenie.com/web-design-blog/how-to-shake-an-image-using-html-and-css/feed/ 0 Stylish Text Effecthttps://www.searchenginegenie.com/web-design-blog/stylish-text-effect/ https://www.searchenginegenie.com/web-design-blog/stylish-text-effect/#respond Tue, 18 Feb 2014 06:27:46 +0000 http://www.searchenginegenie.com/web-design-blog/?p=2574 Step 1 : Open a new Photoshop document
In the first step,  open a new document with preferred size.
We can use the keyboard shortcut ctrl+N to open a new document.

p1
image-2575

 

 

Step 2 : Fill the document with Balck
Set the foreground color as Black. Use the keyboard shortcut Alt+Backspace to fill the document with foreground color.

p2
image-2576

Step 3 : Add your text to the Document
Grab the type tool from the tools palette otherwise press T to work with keyboard shortcut.

p3
image-2577

Go to the option bar set font color, font size and font style.
Press letter X to swap foreground and background color so that we get white as a foreground color.

p4
image-2578

Type the text plastic and resizing the text size  by pressing ctrl+T.

p5
image-2579

Step 4 : Choose a color for your text using the color overlay layer style
To create plastic effect first we have to choose color overlay from layer styles which is in bottom of layer palette.

p6
image-2580

  

p7
image-2581

It brings up a color overlay dialog box. Click on color swatch and pick a lighter shade of the color.

p8
image-2582

p9
image-2583

Now the text color will appear like this

p10
image-2584

 

Step 5: Add An Inner Shadow To The Text Using The “Inner Glow” Layer Style
Now we are going to give a three dimensional look for our text by choosing Inner glow style.

p11
image-2585

Change the blend mode to multiply and change an opacity also to 50%.
Click on color swatch and pick a matching color, source will be an edge and the shadow size will be 13 pixels.

p12
image-2586

Now the text will look something like this

p13
image-2587

Step 6: Apply The “Bevel and Emboss” Layer Style
We have to add Bevel and Emboss effect to our text. For doing this we want to load new contours and append that.

p14
image-2588

To load new contours click on the down pointing arrow to the right side of the contour preview thumbnail.

p15
image-2589

p16
image-2590

p17
image-2591

p18

Select Large list from the options so that we can see both thumbnail preview and name of the contour .

p19
image-2592

Select the Ring-Triple and change the rest of Bevel and Emboss options.

p20
image-2593

p21
image-2594

Now the text looks like this

p22
image-2595

Step 7: Apply The “Contour” Layer Style
Add the contour layer style from the layer style palette.

p23
image-2596

p24
image-2597

Change the contour style and range to create plastic effect on our text

p25
image-2598

p26

After adding contour style the text will appear like this

p27
image-2599

Step 8: Duplicate The Text Layer
Duplicate the text layer so now there are two text layers in the layers palette.

p28
image-2600

Click on the original text layer, once again doing some changes in the original text.

p29
image-2601

Step 9: Add a Stroke To The Text
Click on layer style to create stroke effect on the text.

p30
image-2602

Change the Range and color

p31
image-2603

Move the mouse over the text we will see our mouse cursor will change into eyedropper icon.
Then click near the edge of one letter to sample shade of the color.
Then choose color midway between lighter and darkest colors in the text.

p32
image-2604

p33
image-2605

 

Step 10: Apply The “Bevel and Emboss” Style To The Stroke
Once again wsitch to Bevel and Emboss style to stroke itself.

p34
image-2606

Click on the down pointing arrow to change to stroke emboss.

p35
image-2607

Then change contour style and range

p36
image-2608

p37
image-2609

Finally we get the text with plastic effect

p38
image-2610

]]> https://www.searchenginegenie.com/web-design-blog/stylish-text-effect/feed/ 0 HTML5 Tutorial: Base Element Taghttps://www.searchenginegenie.com/web-design-blog/html5-tutorial-base-element-tag/ https://www.searchenginegenie.com/web-design-blog/html5-tutorial-base-element-tag/#respond Thu, 14 Jun 2012 13:30:50 +0000 http://www.searchenginegenie.com/web-design-blog/?p=1902 The HTML <base> tag is used to specify a base URI, or URL, for relative links. For example, you can set the base URL once at the top of your page, then all subsequent relative links will use that URL as a starting point.

The <base> tag must be between the document’s <head> tags. Also, there must be no more than one base element per document.

Example

Modify the code below, then click “Update”. See below for attributes.

Source Code

<head>
<base href=”http://www.searchenginegenie.com/javascript/” target=”_blank” />
</head>
<body>
<p>Learn about <a href=”javascript_arrays.cfm”>JavaScript Arrays</a></p><p>Note: The link above will actually resolve to <i>http://www.searchenginegenie.com/javascript/javascript_arrays.cfm</i> regardless of the URL of the current page. This is because the base URL (http://www.searchenginegenie.com/javascript/) is prepended to the (relative) URL indicated in the link (javascript_arrays.cfm)</p>
</body>
 
Result
 
Learn about JavaScript ArraysNote: The link above will actually resolve to http://www.searchenginegenie.com/javascript/javascript_arrays.cfm regardless of the URL of the current page. This is because the base URL (http://www.searchenginegenie.com/javascript/) is prepended to the (relative) URL indicated in the link (javascript_arrays.cfm)

 

]]> https://www.searchenginegenie.com/web-design-blog/html5-tutorial-base-element-tag/feed/ 0 Solution for HTML5 Accessibility in IEhttps://www.searchenginegenie.com/web-design-blog/solution-for-html5-accessibility-in-ie/ https://www.searchenginegenie.com/web-design-blog/solution-for-html5-accessibility-in-ie/#respond Wed, 02 May 2012 10:32:24 +0000 http://www.searchenginegenie.com/web-design-blog/?p=1822 OUTPUT (in IE) AFTER FIXING THE SOLUTION:

html5-solution-in-ie
image-1823

OUTPUT (in IE) BEFORE FIXING THE SOLUTION:

html5-without-solution-in-ie
image-1824

HTML5 CODE:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/HTML" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>My first HTML5 website</title>
</head>
<body style="padding-left: 35px;">
<header> Header Tag of HTML5 with
<nav><a href="#">&lt;nav&gt;</a> </nav>
</header>
<article>
<section>
<h2>Article & section Tag</h2>
<p>[…]</p>
<p>[…]</p>
<p>[…]</p>
</section>
</article>
<footer>Footer Tag of HTML5 </footer>
</body>
</html>

CSS CODE:

header {
background: #9e9e9e;
width: 600px;
height: 25px;
color:#FFF;
font-size:20px;
display: block;
text-align:center;
}
header a {
color: #FFF;
}
header a:hover {
color: #ebebeb;
}
article{
color: #CCC;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
footer {
background: #9e9e9e;
width: 600px;
height: 25px;
color:#FFF;
font-size:20px;
display: block;
text-align:center;
}

The main script should be added to the section. It only can access the HTML5 in IE. Without the below script you will not get the required output.

html5-solution-script
image-1825

That’s it…

]]> https://www.searchenginegenie.com/web-design-blog/solution-for-html5-accessibility-in-ie/feed/ 0 Photo Sliding Gallery using HTMLhttps://www.searchenginegenie.com/web-design-blog/photo-sliding-gallery-using-html/ https://www.searchenginegenie.com/web-design-blog/photo-sliding-gallery-using-html/#comments Fri, 20 Apr 2012 08:53:03 +0000 http://www.searchenginegenie.com/web-design-blog/?p=1657 #sliding{padding:0;margin:0 0 40px 0;list-style-type:none;overflow:visible;width:495px;height:240px;background:transparent url(https://www.searchenginegenie.com/web-design-blog/wp-content/uploads/2012/04/back.jpg)}#sliding li{float:left}#sliding li a{display:block;height:240px;width:28px;float:left;text-decoration:none;border-right:1px solid #fff;cursor:default}#sliding li a img{width:28px;height:240px;border:0}#sliding li a:hover{background:transparent;width:320px}#sliding li a:hover img{width:320px}

Final Preview:

Step:1 Open a new HTML Document in dreamweaver.

Step:2 Paste the following code in the HTML Document.

<ul id="sliding">
<li><a href="#nogo">
<img src="pic1.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic2.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic3.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic4.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic5.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic6.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic7.jpg"/></a></li>
</ul>

Step:3 Create embedded <style> style below <head> tag. Add the following CSS Code:

<style>
#sliding {
padding:0;
margin:20px 0 0 20px;
list-style-type:none;
overflow:hidden;
width:495px;
height:240px;
background:#fff url(back.jpg);
}
#sliding li {
float:left;
}
#sliding li a {
display:block;
height:240px;
width:28px;
float:left;
text-decoration:none;
border-right:1px solid #fff;
cursor:default;
}
#sliding li a img {
width:28px;
height:240px;
border:0;
}
#sliding li a:hover {
background:#eee;
width:320px;
}
#sliding li a:hover img {
width:320px;
}
</style>

Step:4 Place required images inside your HTML file folder.

Now run the Program.

]]> https://www.searchenginegenie.com/web-design-blog/photo-sliding-gallery-using-html/feed/ 1 CSS Navigation Menu using background positioninghttps://www.searchenginegenie.com/web-design-blog/css-navigation-menu-using-background-positioning/ https://www.searchenginegenie.com/web-design-blog/css-navigation-menu-using-background-positioning/#respond Thu, 12 Apr 2012 11:36:51 +0000 http://www.searchenginegenie.com/web-design-blog/?p=1596








Step-1 Open an html document. Write the following html code inside the body tag:

<ul id=”navigation”>
<li><a href=”#” id=”home”>Home Page</a></li>
<li><a href=”#” id=”about”>About Us</a></li>
<li><a href=”#” id=”webdesign”>Web Design</a></li>
<li><a href=”#” id=”graphicdesign”>Graphic Designs</a></li>
<li><a href=”#” id=”seo”>Search Engine Optimization SEO</a></li>
<li><a href=”#” id=”contact” >Contact Us</a></li>
</ul>



Step-2  Create a new CSS document and write the following CSS syntax and save it as MAIN.CSS.Here background position defined to draw the different position of the button into visible.

#navigation { list-style: none; margin: 0; padding: 0;}
#navigation:hover li a#webdesign { background-position: -280px; }
#navigation:hover li a#home { background-position: -206px; }
#navigation:hover li a#graphicdesign { background-position: -340px; }
#navigation:hover li a#contact { background-position: -232px; }
#navigation:hover li a#about { background-position: -242px; }
#navigation:hover li a#seo { background-position: -540px; }
#navigation li { float: left; }
#navigation li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }
#home { background: url(home.gif); width: 103px; }
#home:hover { background: url(home.gif) 0 0 !important; }
#about { background: url(about.gif); width: 121px; }
#about:hover { background: url(about.gif) 0 0 !important; }
#webdesign { background: url(webdesign.gif); width: 140px; }
#webdesign:hover { background: url(webdesign.gif) 0 0 !important; }
#graphicdesign { background: url(graphicdesign.gif); width: 170px; }
#graphicdesign:hover { background: url(graphicdesign.gif) 0 0 !important; }
#seo { background: url(seo.gif); width: 281px; }
#seo:hover { background: url(seo.gif) 0 0 !important; }
#contact { background: url(contact.gif); width: 116px; }
#contact:hover { background: url(contact.gif) 0 0 !important; }



Step-3 Paste the following code inside the <head></head> tag in HTML file to link the MAIN.CSS.

<link href=”web-design3_files/main2.css” type=”text/css” rel=”stylesheet” media=”screen”>



Step-4 Your HTML, CSS and below images should be in same folder.

image-1597

Now run the program.

]]> https://www.searchenginegenie.com/web-design-blog/css-navigation-menu-using-background-positioning/feed/ 0 How To Use The Article Element – HTML5https://www.searchenginegenie.com/web-design-blog/how-to-use-the-article-element-html5/ https://www.searchenginegenie.com/web-design-blog/how-to-use-the-article-element-html5/#respond Mon, 26 Dec 2011 12:19:36 +0000 http://www.searchenginegenie.com/web-design-blog/?p=1312 The <article> tag is new to HTML5 and it replaces <div> tag. It specifies self-contained content in a document, page or in a site. This can be use in Blog post, Magazine article, comments or in widgets.

How To Use The Article Tag:

<article>
<h1>heading</h1>
<p>content</p>
</article>

 

Coding:

<html>
<head>
<title>How To Use The Article Element – HTML5</title>
</head>
<style>
.wrapper{color:#000; width: 800px; }.wrapper article{ color:#FFF; font: Arial, Helvetica, sans-serif; font-size:14px; background-color:#3a3a3a; padding: 0px 20px 12px; border: #01a2e5 solid 0.01em;}.wrapper article p { color:#11a6dd;}
.wrapper article h3 { font-family: “Times New Roman”, Times, serif; color: #FFF;}
</style>
<body >
<div class=”wrapper”>
<article>
<h3>Heading</h3>
<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!</p>
<p>Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer</p>
</article>

</div >

</body>

</html>

 

Final Preview:

Heading

Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!

Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer

]]> https://www.searchenginegenie.com/web-design-blog/how-to-use-the-article-element-html5/feed/ 0