#h1 to h6 tags explained in html
Explore tagged Tumblr posts
Text
still day 1 - html
once again, technically not day 1, still doesn't matter,
common/basic html tags
<p> (closing </p>): creates a paragraph
<h1> (closing </h1>): creates a heading. this tag is used for the biggest headings in the page (example: a general, all encompassing title)
<h2> <h3> <h4> <h5> (closing </h2> </h3> </h4> </h5>): these four tags also create headings, each smaller than the next. h2 is bigger than h3 and so on (example: h2 can be used for a chapter title, and h3 for the title of each section of that chapter)
<h6> (closing </h6>): creates a heading. this tag is used for the smallest headings in the page
<strong> (closing </strong>): makes the text stronger, usually bolding it. this tag goes inside other tags, like <p> (example: <p>normal text <strong>bold text</strong> normal text</p>)
<em> (closing </em>): emphasizes the text, usually italicizing it. this tag goes inside other tags (example: <p>normal text <em>emphasized text</em> normal text</p>)
<a href="example"> (closing </a>): creates a clickable link. the link / path goes inside the quotes in the opening tag (in place of the word example that i put there for reference). the text you want to be able to click which directs to the link goes between the tags (example: <a href="link">text to be clicked</a>)
<br> (no closing tag): creates a line break inside a paragraph (since line breaks in the code are ignored). in other words, it sends the text after it to the next line, without creating a new paragraph, instead of having it stay in the same line as the text before it until it no longer fits
that was a lot but it's the basics i swear. also all these tags are used inside/between the <body></body> tags (explained in my "absolute basics" post which i will not link to right now sorry). that's it
26 notes
·
View notes
Text
HTML Elements & Tags
Element: anything from the start tag to the end tag.
Tag: a piece of markup language that is used to indicate the beginning and end of an html element in an html document.
Example: <p> your text here </p>
<header><;/header> - Represents a container for introductory content or a set of navigation links. Usually contains one or more heading elements (<h1> - <h6>), logo or icon, or authorship information.
<;h#></h#> - header element. The higher the number, the greater the importance. Only use one <h1> element per page. There can only be six. Main topic on a web page. When visitors to your website see the h1's, it draws attention as it stands out the most on the page as it generally appears as a larger font size and in bold.
<p></p> - paragraph. used to create a paragraph of text on websites. Always starts on a new line. A lot of browsers add some white space (a margin) before and after a paragraph.
<;!-- ____: _______ --> - comment. Used to notate code with text that will not appear on the website/browser display. It allows you to make code inactive. You can use them to explain your code, which can help you when you edit the source code at a later date.
<main></main> - an element that identifies a content area. The main element. Specifies the main content of a document. This type of element/tag makes your html easier to read and helps with Sear Engine Optimization and accessibility. Should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. When you put things inside the main element, this is called nesting. Nesting elements should be placed two spaces further to the right from the element they are nested in. This spacing is called indentation and is used to make html easier to read.
Example: <main> <h1>Tumblr Meme App</h1> <h2>Tumblr Photos</h2> <!-- TODO: Add link to Tumblr photos --> <;p>See more Tumblr memes in our gallery</p> </main>
<img> - used to images to your website. This element has an opening tag without a closing tag. A tag for an element without a closing tag is called a self-closing tag.
{{ under construction }}
#html#html coding#coding#web development#website development#web design#responsive web design#html web design#html how to#how to html#hot to html#html5#html elements#html tags
4 notes
·
View notes
Text
How to Edit Your Website If You're Not Tech-Savvy: A Simple Guide
Summary: This blog provides a simple guide for non-technical users on how to make basic HTML edits to their websites. It covers what HTML is, how to use tags such as <p> and </p>, and how to make text edits, add a new paragraph, or even include a table. The blog also introduces how to access your website files using cPanel and save changes. It is an informative guide that targets the search phrase website editor for non-tech users.

If you're running a website but need to be tech-savvy, making edits to your site might seem overwhelming. However, with a basic understanding of HTML, you can make simple updates to your website without needing to hire a developer. This guide explains how non-technical users can edit their websites and make common changes using HTML.
What Is HTML?
HTML, or HyperText Markup Language, is used to code and design websites. It defines the structure of your web pages by using tags that indicate elements like text, images, and links. Understanding a few basic HTML tags will allow non-tech users to make simple edits to the content on your site.
Basic HTML Tags You Should Know
HTML uses "tags" to mark different elements on your website. Tags usually come in pairs: a start tag and an end tag. The content in between the tags is what gets displayed on the webpage. Below are some of the most common tags you'll encounter:
<p> and </p>: These tags define a paragraph of text. For example, <p>This is a paragraph.</p> will display as a paragraph on your website.
<h1> to <h6>: These tags define headings, with <h1> being the largest and <h6> the smallest. Headings help organize content and improve readability.
<a href=""> and </a>: This tag is used to create links. For example, <a href= "https://example.com">Visit Example</a> creates a clickable link.
<table>, <tr>, <td>: These tags are used to create tables. The <table> tag starts the table, <tr> defines a row, and <td> defines each cell in the table.
How to Make Simple Text Edits
The process is straightforward if you're looking to update text on your website. To start, you'll need to access your website's HTML files. If your website is hosted on a platform that provides cPanel (a web hosting control panel), follow these steps:
Step 1: Log into cPanel
cPanel is where you manage your website's backend, including files, databases, and other settings. To log into cPanel, you'll need the login credentials provided by your hosting provider.
Step 2: Access the File Manager
Once inside cPanel, find the "File Manager" tool. The file manager allows you to view and edit your website's files. Navigate to the directory where your website files are located, typically in the "public_html" folder.
Step 3: Find the HTML File You Want to Edit
Locate the HTML file that contains the text you want to update. Standard files include "index.html" (your homepage) or pages like "about.html" or "contact.html."
Step 4: Edit the HTML File
Once you've opened the file, look for the paragraph tags <p> and </p>. The text between these tags is what you'll edit. Replace the existing text with the new content you want to display.
<p>Our business hours are 9 AM to 5 PM.</p>
Step 5: Save Your Changes
After editing the text, save the file. The changes should take effect immediately unless your server has caching settings that may delay the update. While caching typically affects images and other media files, it's a good practice to clear your browser cache or force a refresh (Ctrl+F5) to ensure that the latest version of the page is displayed.
Adding a New Paragraph or Heading
To add a new paragraph or heading, insert the appropriate HTML tags where you want the latest content to appear:
<p>This is a new paragraph.</p>
<h2>This is a new heading</h2>
The same principle applies when adding headings. Just choose the heading size you want (e.g., <h2> or <h3>), and your new heading will appear on the webpage.
Using HTML Tables
Tables are used to display data in a structured format. For example, you could display a pricing table or schedule. Here's a basic example of a table in HTML:
<table border="1"> <tr> <th>Product</th> <th>Price</th> </tr> <tr> <td>Product 1</td> <td>$10.00</td> </tr> <tr> <td>Product 2</td> <td>$15.00</td> </tr> </table>
The above example will create a table with two columns displaying product names and prices.
Conclusion
Even if you're not tech-savvy, editing your website is easier than you might think. By understanding some basic HTML tags and following simple steps, you can make straightforward updates, such as modifying text, adding paragraphs, and even creating tables. For non-tech users, finding the right website editor for non-tech users is essential. Learning these basic HTML skills provides a valuable way to maintain and update your website without having to rely on a developer.
0 notes
Text
Basics of HTML

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure and content of a webpage, which is then styled with CSS and made interactive with JavaScript. Let’s go through the basics of HTML:
1. HTML Document Structure
An HTML document starts with a declaration and is followed by a series of elements enclosed in tags:<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text on my first webpage.</p> </body> </html>
<!DOCTYPE html>: Declares the document type and version of HTML. It helps the browser understand that the document is written in HTML5.
<html>: The root element that contains all other HTML elements on the page.
<head>: Contains meta-information about the document, like its title and links to stylesheets or scripts.
<title>: Sets the title of the webpage, which is displayed in the browser's title bar or tab.
<body>: Contains the content of the webpage, like text, images, and links.
2. HTML Tags and Elements
Tags: Keywords enclosed in angle brackets, like <h1> or <p>. Tags usually come in pairs: an opening tag (<h1>) and a closing tag (</h1>).
Elements: Consist of a start tag, content, and an end tag. For example:
<h1>Hello, World!</h1>
3. HTML Attributes
Attributes provide additional information about HTML elements. They are always included in the opening tag and are written as name="value" pairs:<a href="https://www.example.com">Visit Example</a> <img src="image.jpg" alt="A descriptive text">
href: Used in the <a> (anchor) tag to specify the link's destination.
src: Specifies the source of an image in the <img> tag.
alt: Provides alternative text for images, used for accessibility and if the image cannot be displayed.
4. HTML Headings
Headings are used to create titles and subtitles on your webpage:<h1>This is a main heading</h1> <h2>This is a subheading</h2> <h3>This is a smaller subheading</h3>
<h1> to <h6>: Represents different levels of headings, with <h1> being the most important and <h6> the least.
5. HTML Paragraphs
Paragraphs are used to write blocks of text:<p>This is a paragraph of text. HTML automatically adds some space before and after paragraphs.</p>
<p>: Wraps around blocks of text to create paragraphs.
6. HTML Line Breaks and Horizontal Lines
Line Break (<br>): Used to create a line break (new line) within text.
Horizontal Line (<hr>): Used to create a thematic break or a horizontal line:
<p>This is the first line.<br>This is the second line.</p> <hr> <p>This is text after a horizontal line.</p>
7. HTML Comments
Comments are not displayed in the browser and are used to explain the code:<!-- This is a comment --> <p>This text will be visible.</p>
<!-- Comment -->: Wraps around text to make it a comment.
8. HTML Links
Links allow users to navigate from one page to another:<a href="https://www.example.com">Click here to visit Example</a>
<a>: The anchor tag creates a hyperlink. The href attribute specifies the URL to navigate to when the link is clicked.
9. HTML Images
Images can be embedded using the <img> tag:<img src="image.jpg" alt="Description of the image">
<img>: Used to embed images. The src attribute specifies the image source, and alt provides descriptive text.
10. HTML Lists
HTML supports ordered and unordered lists:
Unordered List (<ul>):
. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Ordered List (<ol>):
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
<ul>: Creates an unordered list with bullet points.
<ol>: Creates an ordered list with numbers.
<li>: Represents each item in a list.
11. HTML Metadata
Metadata is data that provides information about other data. It is placed within the <head> section and includes information like character set, author, and page description:<meta charset="UTF-8"> <meta name="description" content="An example of HTML basics"> <meta name="keywords" content="HTML, tutorial, basics"> <meta name="author" content="Saide Hossain">
12. HTML Document Structure Summary
Here’s a simple HTML document combining all the basic elements:<!DOCTYPE html> <html> <head> <title>My First HTML Page</title> <meta charset="UTF-8"> <meta name="description" content="Learning HTML Basics"> <meta name="keywords" content="HTML, basics, tutorial"> <meta name="author" content="Saide Hossain"> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first webpage. I'm learning HTML!</p> <p>HTML is easy to learn and fun to use.</p> <hr> <h2>Here are some of my favorite websites:</h2> <ul> <li><a href="https://www.example.com">Example.com</a></li> <li><a href="https://www.anotherexample.com">Another Example</a></li> </ul> <h2>My Favorite Image:</h2> <img src="https://images.pexels.com/photos/287240/pexels-photo-287240.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="300" alt="A beautiful view"> <hr> <p>Contact me at <a href="mailto:[email protected]">[email protected]</a></p> </body> </html>
Key Takeaways
HTML is all about using tags to structure content.
The basic building blocks include headings, paragraphs, lists, links, images, and more.
Every HTML document needs a proper structure, starting with <!DOCTYPE html> and wrapping content within <html>, <head>, and <body> tags.
With these basics, you can start building your web pages!
Source: HTML TUTE BLOG
0 notes
Text
Website Development Interview Questions.....
Website development interview questions:
In such a situation, it is critical to be ready for interviews, especially when entering the web development field. Irrespective of your plan of working with a leading organization such as SkyWeb Design Technologies, an organization that deals in web and mobile applications, or with any organization of your preference, it is important to learn the basics.
1. What is HTML, what is it used for?
Answer: HTML stands for Hyper Text Markup Language it’s most commonly used markup language in the creation of Web documents or anything related to the Web environment. It determines the layout of the material posted on the World Wide Web and includes such components as headings, paragraphs, hyperlinks, images, and others.
2. What makes HTML5 different from the prior version of HTML?
Answer: HTML5 is the version of HTML that is currently in use. It adds new elements and attributes and enhanced support for multimedia that are <article>, <section>, <header>, <footer>, <audio>, <video> and new APIs such as Canvas, Web Storage and Geolocation.
3. Here are some of the frequently used HTML tags and what they are used for:
Answer:
<p>: Defines a paragraph.
<h1> to <h6>:
<a>: Defines a hyperlink.
<img>: Embeds an image.
<ul> and <ol>: is unordered list, and ordered list.
<div>: division. So it defines a division or section.
<span>: Sets a block of text, mainly used for applying a style on.
4. What is CSS and why should one bother with it?
Answer: HTML is used to create a structure of a web page while CSS (Cascading Style Sheets) is used for appears of web pLAST EDITED: pages. It enables you to use aspects like colors font, space and position to your html elements which in turn creates aesthetically pleasing and more functional website to the users.
5. Please also provide me with a definition of what the box model in CSS .
Answer: The CSS box model describes the rectangular boxes generated for elements in the document tree and consists of:The CSS box model describes the rectangular boxes generated for elements in the document tree and consists of:
Content: The inner content area referred to as Knowledge Creation is:
Padding: Margin between the stuff and its visual frame.
Border: These are the line on the right and at the bottom of the padding and content.
Margin: (h) Space referring to the area beyond the border surrounding an element and other elements.
6. JavaScript is a programming language and web development tool, but how is it defined and what does it do?
Answer: JavaScript is also a language used in the designing of web sites to provide flexibility and impressive features on any web page. It lets you to work with HTML and CSS, manage events, verify data in forms, use animations, and work with servers.
7. What are variables in JavaScript and how can one declare them?
Answer: In JavaScript, variables refer to the means of storing data values. You can declare them using the var, let, or const keywords:You can declare them using the var, let, or const keywords:
javascript
var name = "ram";
let age = 25;
const isStudent = true;
8. What is the difference between let, const, and var?
Answer:
var: Any variable declared in a function block is either function-scoped or globally-scoped which even can be redeclared and again updated.
let: Local, write-only, specifically they allow updating the variable but not declaring it in the same block.
const: declared only in block can’t be updated, or redeclared after the declaration.
9. What is an array; Explain how you can define an array in JavaScript?
Answer: An array can be defined as a united variable for storing more than one value. We can create an array using square brackets []:
javascript
let fruits = [‘apple’, ‘banana’,’ cherries’];
10. What is a function and how does one describe or create one using JavaScript?
Answer: Function is a set of statements and instruction used to do a certain job or achieve a specific goal. we can define a function using the function keyword:
javascript
function greet(name) {
return ‘Hello, ‘ + name;
}
11. What is the event handling of JavaScript?
Answer: Javascript as the name suggests is an event driven language; this means that functions can be written that will take actions based on events such as a click, key press or even mouse movements. we can handle events by attaching event listeners to elements:
javascript
document. getElementById("myButton"). addEventListener("click", function() {
alert("Button clicked!");
});
12. What is the Document Object Model (DOM)?
Answer: DOM is a programming interface for the web documents. It depicts a document as a tree structure of nodes; this assist in managing the content and structures of the web pages by applying JavaScript.
13. How do you select an element by its ID in JavaScript?
Answer:
I can select an element by its ID using the getElementById method:
javascript
let element = document.getElementById("myElement");
14. What is responsive web design, and why is it important?
Answer:
Responsive web design ensures that web pages look good and function well on devices of various screen sizes and resolutions. It is important because it improves user experience and accessibility, and it is favored by search engines.
15. What are some basic steps to create a responsive web design?
Answer:
Use flexible grid layouts: Utilize relative units like percentages instead of fixed units like pixels.
Media queries: Apply different styles based on screen size, orientation, and other characteristics.
Flexible images: Ensure images scale appropriately within their containers.
Viewport meta tag: Set the viewport to control layout on mobile browsers.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
These questions and answers demystify basic facts which a fresher that wants to join the web development team should know.
Thanks for visit us……
For more Information to visit our website: skyweb design Technologies.
Address: 15th floor, manjeera trinity corporation ,kukkatpally , HYDERABAD.
#app development#website development interview questions#website development services#best website designers#skyweb design technologies#best app developers in hyderabad
0 notes
Text
HTML H1 to H6 Tag
HTML H1 to H6 Tag
The heading tags are used to define HTML headings. There are six levels of headings H1, H2, H3, H4, H5, and H6. The H1 is the highest (or most important heading) and the smallest H6. Syntax <h1>heading</h1> to <h6>heading</h6> Example <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> Try It Now Output: Global Attributes The <h1> to…

View On WordPress
#h1 - h6 tags#h1 to h6#h1 to h6 tags#h1 to h6 tags explained in html#h1 to h6 tags in html#h6#h6 tag#heading tags#heading tags in html#headings tags {h1 to h6}#how to write h1 to h6 tags in html#html h1 h2 h3 h4 h5 h6 tags#html h1 to h6 tag#html h1 to h6 tags#html h6 tag#html heading tags#html heading tags h1 to h6#html headings tags h1 to h6 with practical#html tags#html5#html5 heading tags#introduction to html#use of h1 to h6 tags in html
0 notes
Text
ever since i made THIS POST a lot of people have been asking for a tutorial, even though in pretty much all of the screenshots i included the specific part of inspect element showing exactly what i edited.
so buckle the fuck up I guess because the tumblr userbase want to find out how to make html pages unusable and who am I to deny you.
get ready for Baby's First HTML and CSS tutorial lmao
ok so first things first we need to go over BASIC HTML
html is made up of these things called "tags" which specify certain parts of the web page, such as
HEADERS (<h1> through <h6> in terms of importance)
PARAGRAPHS (<p>paragraph here</p>)
LINKS (<a href="linkhere"></a>)
BOLDED SECTIONS OF TEXT(<b>bold here</b>)
and a bunch of other stuff,
by default however, specifying all of this just gives us a plain white page with plain black text of varying sizes
that's of course, no fucking good, and sucks shit, so the arbiters of html decided to let us STYLE certain elements, by adding a STYLE parameter to the tag
this can change any number of elements about how things are formatted.
text colour, page colour, font, size, spacing between elements, text alignment, you name it? you can change it!
you might've noticed that, certain elements are nested in other elements
and that any changes that apply to one element, apply to everything included under that element!
how convenient!
anyway this method of styling things by adding a style=" " to their tags is called "in-line style"
i think because the "style" goes "in" the "line"
it's generally ALSO a pain in the ass to style an entire website like this and should be exclusively reserved for small changes that you only want to apply to specific parts of the page.
for any real change in style you want to create a <style> section in your page's header!
this can be used to make changes to how all elements of a type in your page are displayed
or even add new elements with whatever wacky styling you want that can be used with the <div> tag!
wow! isn't css just dandy!
and hell you can even use External CSS™ if you're making multiple pages and want them all to have a consistent theme, by pointing to a .CSS file (which is basically just a <style> header without the <style> tags lmao
ok this is all well and good and very interesting if, say, you're making your own website
*cough*neocities*cough*itsreallycoolandfree*cough*
but you came here because you want to FUCK UP A WEBSITE and make it look STUPID!!
so this is where the transform css property comes in~
you can read up on it HERE if you want the details but basically it allows you to apply mathematical transformations to any html element you want,
all of these fun bastards,
they can be really useful if you're doing some complicated stupid bullshit like me
OR for having fun >:)
if you'll remember, earlier i said that css properties apply to literally everything nested in an element,
and you MIGHT notice, that literally everything in pretty much all html files, is nested in an <html> tag
you can use style=" " or regular css on pretty much ANY html tag,
INCLUDING HTML!
ok ok that was a lot of buildup for something that i could've explained in one or two lines, but i gave you all this fundamental knowledge for a reason,
well, two reasons, go make a neocities
CHAPTER 2: THIS POST HAS CHAPTERS NOW
CSS KEY FRAMES BABYYYY
THESE FUCKERS DON'T WORK AS INLINE STYLING
I HAD TO TEACH YOU HOW CSS WORKED, TO GIVE YOU THE KNOWLEDGE YOU NEED, TO ANIMATE PAGES. TO MAKE THE FUCKERY COMPLETE!!!!
OKAY SO AGAIN READ UP ON THIS IF YOU WANT THE FULLEST POSSIBLE UNDERSTANDING
BUT WHAT KEYFRAMES ALLOW YOU TO DO, IS ANIMATE CSS PROPERTIES
and then make a class, which calls that animation...
and then assign that class. to your html tag.
and then vomit forever
we can do it in 3d too,
the only limit is your imagination... (and how many parameters you want to look up on w3schools and mozilla mdn web docs)
CHAPTER 3: APPLYING IN PRACTICE
ok now the fun thing about all of this, is you can apply it to your blog theme, literally right now
like literally RIGHT now
like step one, make sure you have a custom blog theme enabled in your settings, because that's turned off by default for some reason
step 2: edit theme
step 3: edit html:
step 4: apply knowledge in practice >:)
437 notes
·
View notes
Text
WhatsApp Clone Using HTML and CSS
What does cloning a website means?
To make a copy
Cloning a website means copying or modifying the design or script of an existing website to create a new website. Website cloning allows a designer to create a website without writing scripts from scratch.
Any website can be cloned. You are also free to integrate some additional new features while cloning your website.
Cloning a website is one of the proven methods you can use to learn web development faster. It provides basic to advanced ideas about how websites work and work, and how to integrate them.
Let’s learn how to clone a website just using HTML5 and CSS in a simple way.
Will take an example of WhatsApp Website and will clone it.
WhatsApp is a free cross-platform messaging service. iPhone and Android smartphone, Mac and Windows PC users can call or exchange text, photo, voice and video messages with anyone in the world for free, regardless of the recipient's device. WhatsApp uses Wi-Fi connections to communicate across platforms. This differs from Apple iMessage and Messages by Google, which require a cellular network and Short Message Service (SMS).
Key WhatsApp Terminology
Cross Platform
Messaging apps
End-to-end encryption
Video & Audio Calls
WhatsApp Business
HTML (Hyper Text Markup Language) –
HTML stands for Hyper Text Markup Language that is standard markup language to create web pages and web-based applications
It represents the structure of a web page
It comprises of series of elements which tells the browser how to display the content
Basic Structure of a HTML Document –
<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Clone</title>
</head>
<body>
<h1>let's learn Web Development</h1>
<p>My first project - WhatsApp Cloning</p>
</body>
</html>
Let’s Explain the above code –
- It is used to defines that the document is HTML5 document
- It is the root elements on an HTML Page
- It contains all the meta information about the HTML Page
- This element contains all the visible content of the page, such as paragraph, headlines, tables, list, etc.
- It defines the largest heading for any topic, it ranges from -
- It defines a paragraph in the HTML page
Elements –
It is the collection of start and end tag, and in between content is inserted between them.
It major components are–
Opening Tag – Used to tell the browser where the content starts.
Closing Tag – Used to tell the browser where the content material ends.
Content – Whatever written inside the opening and closing tag is content.
Some Most Commonly used tags are –
– Used to define a document or section, as it contains information related to titles and heading of related content.
– The navigation tag is used to declare navigation sections in HTML documents. Websites typically have a section dedicated to navigation links that allows users to move around the site
– Anchor tag is used for creating hyperlink on the webpage. It is used to link one web page from another.
– It is used to define a paragraph. Content written inside tag always starts from a new line.
– It is used to define heading of a web page. There are 6 different heading h1, h2, h3, h4, h5 and h6. H1 is the main heading and the biggest followed by h2, h3, h4, h5 and h6.
- It is used to group multiple elements together. It helps in applying CSS.
- Image tag is used to embed an image in a web page.
CSS (Cascading Style Sheet) –
CSS stands for Cascading Style Sheets, that describes HTML elements that appear on screen, paper, or other media.
It used for designing web pages, in order to make web pages presentable.
It is standardized across Web Browsers and is one of the core languages of the open web system/technology.
CSS Selector –
CSS Selectors are used to select or target the element that you want to style. Selectors are part of the CSS ruleset. CSS selectors select HTML elements by ID, class, type, attributes, etc.
Types of CSS Selectors –
Element Selector – It selects the HTML elements directly using name
ID Selector – It selects the id attribute of an element. ID is always unique, in the code. So, it is used to target and apply design to a specific or a unique element.
Class Selector - It selects the class attribute of an element. Unlike ID selector class selectors can be same of many elements.
Universal Selector – It selects all the elements of the webpage, and apply changes to it.
Group Selector – It is used when same style is to be applied on many elements. It helps in non-duplication of code.
Different ways of applying CSS -
CSS can be applied in different ways –
Inline CSS –
Styling is done using different attributed inside an element itself. It can be used to apply unique style for a single element.
<h1 style="color:blue;">Let's learn Web Development</h1>
Internal CSS –
It is defined or written within the <style> element, nested instead <head> section of HTML document.
It is mainly used when need to apply CSS on a particular page.
<style type="text/css">
h1 {
color:blue;
}
</style>
External CSS –
It is used to apply CSS on multiple pages. As all the styling is written in a different file with an extension “.css” Example style.css.
<link rel="stylesheet" type="text/css" href="style.css">
It is written instead head tag.
For more detailed guide – Click here
Let’s implement the above learnt concepts –
In this example will clone a static page of WhatsApp using Internal CSS-
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
:root {
font-size: 15px;
--primaryColor: #075e54;
--secondaryColor: #aaa9a8;
--tertierColor: #25d366;
}
* {
margin: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
}
body {
font-family: Helvetica;
font-weight: 300;
}
img {
object-fit: cover;
width: 100%;
}
.container {
margin: 0 1.2em;
}
header {
background-color: var(--primaryColor);
padding: 1.4em 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
header .logo {
font-size: 1.5rem;
font-weight: 300;
}
header .menu {
margin-left: 18px;
}
.nav-bar {
background-color: var(--primaryColor);
margin-bottom: 8px;
display: grid;
grid-template-columns: 16% 28% 28% 28%;
justify-items: space-between;
align-items: center;
text-align: center;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.nav {
color: var(--secondaryColor);
text-transform: uppercase;
padding: 1em 0;
}
.nav.active {
border-bottom: 3px solid white;
color: white;
}
.chat {
padding: 1em 0;
display: flex;
justify-content: space-between;
}
.chat .info {
display: flex;
}
.chat .username {
font-size: 1.2rem;
margin-bottom: 5px;
font-weight: 300;
}
.chat .recent-chat {
color: gray;
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.chat .recent-chat .read {
color: #34b7f1;
}
.chat .photo {
width: 55px;
height: 55px;
border-radius: 50%;
margin-right: 18px;
}
.chat .recent-chat-time {
font-size: 12px;
color: gray;
}
.contact-button {
padding: 1em;
border: 0;
border-radius: 50%;
color: white;
transform: rotate(0deg);
font-size: 1.3rem;
position: fixed;
bottom: 20px;
right: 1.2em;
background-color: var(--tertierColor);
}
</style>
<title>WhatsApp</title>
<link rel="icon" type="image/x-icon" href="wp.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>
<!-- Body section starte here -->
<body>
<header>
<div class="container">
<h1 class="logo">WhatsApp</h1>
<div>
<a role="button" class="bi bi-search icon"></a>
<a role="button" class="bi bi-three-dots-vertical icon menu"></a>
</div>
</div>
</header>
<nav class="nav-bar">
<span class="bi bi-camera-fill nav"></span>
<a role="button" class="nav active">Chats</a>
<a role="button" class="nav">Status</a>
<a role="button" class="nav">Calls</a>
</nav>
<!-- Chat section starts here -->
<!-- chat 1 -->
<section class="chats">
<div class="container">
<div class="chat">
<div class="info">
<!-- <img class="photo" src="user-2.png" alt="User" /> -->
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">Anurag</h6>
<p class="recent-chat">
<i class="bi bi-check2-all"></i> Yes, i remembered that! 😄
</p>
</div>
</div>
<small class="recent-chat-time"> 04:20 PM </small>
</div>
<!-- chat 2 -->
<div class="chat">
<div class="info">
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">Cipher</h6>
<p class="recent-chat">Do you wanna hangout?</p>
</div>
</div>
<small class="recent-chat-time"> 10:20 AM </small>
</div>
<!-- chat 3 -->
<div class="chat">
<div class="info">
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">CipherSchools</h6>
<p class="recent-chat">
<i class="bi bi-check2-all read"></i> Hey bro, time to band!
🥁🎸
</p>
</div>
</div>
<small class="recent-chat-time"> Yesterday </small>
</div>
<!-- chat 4 -->
<div class="chat">
<div class="info">
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">Schools</h6>
<p class="recent-chat">Hey, where are you now? 🙄</p>
</div>
</div>
<small class="recent-chat-time"> 7/22/21 </small>
</div>
<!-- chat 5 -->
<div class="chat">
<div class="info">
<img class="photo" src="user-2.png" alt="User" />
<div>
<h6 class="username">Anurag CS</h6>
<p class="recent-chat">
<i class="bi bi-check2-all read"></i> May i borrow your games
for 2 weeks?
</p>
</div>
</div>
<small class="recent-chat-time"> 7/22/21 </small>
</div>
<!-- Contact button on the whatsapp -->
<button type="button" class="bi bi-chat-right-text-fill contact-button"></button>
</div>
</section>
</body>
</html>
23 notes
·
View notes
Text
SEO in detail
What is SEO?
SEO stands for Search engine optimization, it is program improvement, that is that the application of accelerating the amount and quality of traffic to your web site through organic program results. Search engines are answer machines. They exist to find, understand, and organize the internet's content so as to supply the foremost relevant results to the queries searchers are asking.
Why SEO is Important
SEO is vital not just for obtaining top quality guests from search, however, it’s additionally how to boost the user-friendliness of your web site and increase its believability. Each business needs to put resources into website streamlining. Site design improvement is the way toward upgrading your site to amplify natural traffic from web crawlers. The main web search tools are Google, YouTube, Bing, and Yahoo.
How do search engine tools work?
Search engines have three essential capacities:
1. Crawl: Scour the net for content, trying over the code/content for every computer address they realize.
2. Index: Store and organize the content found throughout the travel method. Once a page is within the index, it’s within the running to be displayed as a result of relevant queries.
3. Rank: offer the items of content that may best answer a searcher's question, which implies that results are ordered by most relevant to least relevant.
What is web index crawling?
Crawling is that the discovery method within which search engines transmit a team of robots (known as crawlers or spiders) to search out new and updated content. Content will vary — it might be a webpage, an image, a video, a PDF, etc. — however despite the format, content is discovered by links
Google bot starts out by taking many websites so follow the links on those webpages to seek out new URLs. By hopping on this path of links, the crawler is in a position to seek out new content and add it to their index known as alkaloid — huge information of discovered uniform resource locators — to later be retrieved once a searcher is seeking information that the content thereon URL could be a sensible match for.
What is a search engine index? Search engines method associate degreed store data they notice in an index, enormous information of all the content they’ve discovered and view ok to dish up to searchers.
Search Engine Ranking
When somebody performs research, search engines scour their index for extremely relevant content and so orders that content within the hopes of determining the searcher's question. This ordering of search results by the condition is understood as ranking. In general, you'll be able to assume that the upper a web site is stratified, the additional relevant the program believes that web site is to the question.
It’s potential to dam program crawlers from half or all of your web site, or instruct search engines to avoid storing bound pages in their index. whereas there will be reasons for doing this, if you would like your content found by searchers, you have got to initial check that it’s accessible to crawlers and is indexable. Otherwise, it’s pretty much as good as invisible.
What goes into SEO?
To understand the truth which means of SEO, let's break that definition down and appearance at the parts:
Quality of traffic: you'll attract all the guests within the world, however, if they're coming back to your web site as a result of Google tells them you're a resource for Apple computers once extremely you're a farmer commerce apples, that's not quality traffic. Instead you wish to draw in guests UN agency are genuinely inquisitive about product that you simply supply.
Quantity of traffic: Once you've got the proper individuals clicking through from those program results pages (SERPs), a lot of traffic is healthier.
Organic results: Ads frame a major portion of the many SERPs. Organic traffic is any traffic that you simply don't get to obtain.
What is the keyword ?
the keyword is a search query search by a user.
There are two types of keywords
1. Short term keyword: 3 to 4 keywords
2. Long term keyword: more than 3 to 4 keywords
Keyword research
The power of keyword analysis lies in higher understanding your target market and the way they're looking for your content, services, or merchandise.
You can enter those keywords into a keyword analysis tool to find average monthly search volume and similar keywords.
In the method of discovering relevant keywords for your content, you may probably notice that the search volume of these keywords varies greatly. whereas you actually wish to focus on terms that your audience is finding out, in some cases, it's going to be a lot of advantage us to focus on terms with lower search volume as a result of they're so much less competitive.
Since each high- and low-competition keywords may be advantageous for your web site, learning a lot of regarding search volume will assist you place keywords and choose those which will offer your web site the most important strategic advantage.
What is ON Page SEO?
Parameters in on a page
1. Thin content
This practice created tons of thin, low-quality content across the web, which Google addressed specifically with its 2011 update known as Panda. This algorithm update penalized low-quality pages, which resulted in more quality pages taking the top spots of the SERPs. Google continues to iterate on this process of demoting low-quality content and promoting high-quality content today. Google is obvious that you simply ought to have a comprehensive page on a subject rather than multiple, weaker pages for every variation of a keyword.
2. Duplicate content
Like it sounds, “duplicate content” refers to content that's shared between domains or between multiple pages of one domain. “Scraped” content goes a step more and entails the blatant and unauthorized use of content from alternative sites. this will embody taking content and publication as-is, or modifying it slightly before publication, while not adding any original content or price. There are lots of legitimate reasons for internal or cross-domain duplicate content, therefore Google encourages the utilization of a rel=canonical tag to purpose to the initial version of the new content. whereas you don’t get to fathom this tag simply, however, the most issue to notice for now's that your content ought to be distinctive in word and in price.
Header tags are associate degree HTML part accustomed designate headings on your page. the most header tag, referred to as associate degree H1, is often reserved for the title of the page. it's like this:
<h1>Page Title </h1>
Page Title
There also are sub-headings that go from H2 to H6 tags, though victimization all of those on a page isn't needed. The hierarchy of header tags goes from H1 to H6 in digressive order of importance.
When you link to alternative pages on your web site, you make sure that program crawlers will notice all of your site’s pages, you pass link equity (ranking power) to alternative pages on your website, and you facilitate guests to navigate your website.
3. Anchor text
Anchor text is the text with that you link to pages. Below, you'll see an example of what a link while not anchor text and a hyperlink with anchor text would appear as if within the hypertext mark-up language.
4. Keyword Text
Images are the most important culprits of slow internet pages! the simplest thanks to solving for this is often to compress your pictures.
5. Alt text
Alt text (alternative text) inside pictures could be a principle of internet accessibility and is employed to explain pictures to the visually impaired via screen readers. It’s vital to possess elevation text descriptions so any visually impaired person will perceive what the photographs on your web site depict.
Search engine bots additionally crawl elevation text to higher perceive your pictures, which supplies you the additional benefit of providing higher image context to look engines. simply make sure that your elevation descriptions read naturally for individuals and avoid stuffing keywords for search engines.
Submit a picture sitemap
To ensure that Google will crawl and index your pictures, submit a picture sitemap in your Google Search Console account. This helps Google discovers pictures they'll have otherwise lost.
6. Robots.txt
Robots.txt files are settled within the root directory of internet sites (ex. yourdomain.com/robots.txt) and recommend that components of your website search engines ought to and shouldn't crawl, further because of the speed at that they crawl your website, via specific robots.txt directives.
How Google bot treats robots.txt
7. Title tags
A page’s title tag could be a descriptive, hypertext mark-up language part that specifies the title of a specific online page. they've nested at intervals the top tag of every page and appearance like this:
<head>
<title>Example Title</title>
</head>
Example Title
Each page on your web site ought to have a novel, descriptive title tag. What you input into your title tag field can show over here in search results, though in some cases Google could change however your title tag seems in search results
What makes an effective title tag?
Keyword usage, Length, Branding makes the title effective.
8. Meta descriptions
Like title tags, meta descriptions are markup language parts that describe the contents of the page that they’re on. they're additionally nested within the head tag, and appearance like this:
<head>
<meta name=”description” content=” Description of the page here.”/>
</head>
What makes an effective meta description?
Content relevancy, length of content makes the description effective.
What is Off Page SEO?
Off page, SEO refers to techniques you will use to boost the position of an online website within the program results page (SERPs).
In general, off Page SEO needs to do with promotion ways – on the far side website style –for the aim of ranking a web site higher within the search results.
Why is Off-Page SEO important?
Search engines are attempting for many years to search out the simplest way to come back the most effective results to the searcher.
To achieve this, they take into consideration the on-the-spot SEO factors (described above), other quality factors and off-page SEO.
Off-page, SEO provides them an awfully smart indication on however, the planet (other web sites and users) understand the actual website.
A web website that's top quality and helpful is additional seemingly to own references (backlinks) from alternative websites.
It is additional seemingly to own mentions on social media (Facebook likes, tweets, Pins, etc.) and it's additional seemingly to be bookmarked and shared among communities of similar users.
What are the advantages of ‘off-site SEO’ to web site owners?
A in off-site SEO strategy can generate the subsequent advantages to web site owners:
Increase in rankings – the web site can rank higher within the SERPs and this additionally means that additional traffic.
Increase in PageRank – Page rank could be a range between zero and ten that indicates the importance of an internet site within the eyes of Google.
1 note
·
View note
Text
How to Properly Use Heading Tags in WordPress (H1-H6 Explained)
Are you wondering about the proper way to use H1-H6 heading tags in WordPress? When you use headings effectively in your posts and pages, you make your content more readable, improve user experience, and boost your website’s SEO. In this article, we’ll show you how to properly use heading tags in WordPress. What Are Heading Tags in WordPress? Heading tags are HTML elements used to identify the…
View On WordPress
0 notes
Text
How to Properly Use Heading Tags in WordPress (H1-H6 Explained)
Are you wondering about the proper way to use H1-H6 heading tags in WordPress? When you use headings effectively in your posts and pages, you make your content more readable, improve user experience, and boost your website’s SEO. In this article, we’ll show you how to properly use heading tags in WordPress. What Are Heading Tags in WordPress? Heading tags are HTML elements used to identify the…
View On WordPress
0 notes
Text
How Meta Data Impacts Your SEO Efforts
Table of Contents
Key Takeaways
Meta Data is simply small snippets of code with a brief description of your page that is shown in search engine results pages.
It helps search engines to better understand the content of your page.
Metadata is an important part of search engine optimization efforts.
When it comes to the success of your SEO efforts, there are a few important themes to keep in mind – one of these is metadata or meta tags. Metadata has many different faces, but they all play a crucial role in search engine optimization.
As we know, SEO is all about organically ranking high in search engine results pages (SERPs) and metadata is key to achieving this. When used properly, metadata can have a lasting impact on your Google search results and conversion rates, which ultimately leaves potential clients with an overall positive experience.
In this blog post, we’ll explore the different types of metadata, cover how to find and use it, and explain some common mistakes that even experienced webmasters still make with metadata. Also, stay tuned for more on metadata and SEO in upcoming posts!
What Is a Meta Description?
Before we delve deeper into how to make these little packets of data work for you, you first need to understand what it is. Essentially, it is simply small snippets of code with a brief description of your page that is shown in search engine results pages or SERPs. Think of it as the digital description that tells search engines how to best present your page in online searches.
Now, the trick is to accurately describe both your website and its content to boost its visibility in search engine rankings and click-through rates, or CTRs for short. This is where an experienced SEO agency comes to the rescue.
Why Are Meta Descriptions Important for SEO?
Simple – it helps search engines to better understand the content of your page. This includes the title, meta description and keywords. A meta description should be short and to the point, with keywords that are relevant to your page’s topic. Make sure you update your meta descriptions regularly so that you’re providing accurate information to Google and other search engines.
How Meta Tags Can Be Found
Meta tags are embedded in the HTML, so it is not clearly visible to your average web user. Instead, search crawlers can extract this data to analyse it and determine how and where your website will appear in search results. This information relates to the content of your site and will include the titles, descriptions, and keywords.
Now, let’s take a look at the different types of metadata or metatags. These include a page or title tags, descriptions, keywords, and headings.
1. Title-Tags
Your page title is the most important part of your meta-tag strategy. It is the first thing that a search engine considers to place your website, so the right title, with the right keywords, can drive people to your website (or push them away if you fail in your efforts). As you can see, a basic understanding of keyword research is crucial to create catchy yet accurate titles. Ultimately, you want to target specific search terms.
Title tags are then further divided into headings and subheadings or titles, ranking from H1 to H6. Let’s take a look.
2. Heading Tags (H1-H6)
Each heading has a specific function and should be used appropriately to improve your SEO efforts. For example, the H1 tag is primarily used for the page’s title, while the H2 tag is used for the main section of the page, and so on. Your H1 title will obviously be the most important, while H6 is the least.
Therefore, your H1 heading is what Google’s algorithm looks at, your H1 should contain your most important keywords. Your H1 header will be the title of your post or something you want to draw attention to on the page. It is not the same as your title tag – your title tag is what people see in their browsers – so keep that in mind as well. The optimum length for headings tags is also worth a mention here – they should ideally be between 75 to 100 characters long. Anything shorter, and the search engine will ignore it, and anything longer won’t be allowed.
Just remember, Google no longer rewards spamming, so don’t try to cram keywords in your titles. So, make sure to tag your content appropriately, and watch your website’s ranking climb!
3. Heading Tags (H1-H6)
Meta description tags play a big role in your rankings as well, with short, paragraph-length descriptions that appear below the SERP. They should be catchy and relevant to your content, keyword rich, and free from spelling or grammar errors.
The goal of meta description is to capture a user’s attention and get them to click on your link. When you write your meta description, make sure to use keywords that you’re targeting for SEO purposes! They serve the same purpose as titles, but they can be longer – up to 200 characters.
4. Meta Keyword Tags
We are only listing meta keywords to show you what NOT to do. This was common practice about a decade ago. Companies stuffed their website content with certain keywords in the hopes to rank higher in search engines, but this is highly frowned upon today. In fact, you will now get penalized if you try.
5. Robot Meta Tags
Our last two examples of meta tags are a little bit more technical, but the list would not be complete without them. Next up, meta robots are simply pieces of code that give instructions to bot web crawlers on how to crawl or index any content on a specific page. There are also two types of robot meta tags – those that form part of the HTML page, and those sent by the web servers as HTTP headings.
6. Viewport Meta Tag
The viewport refers to the area of visibility of your page. As an example, the visible area is naturally smaller on a mobile device than on a computer screen. You (or hopefully an SEO expert, in this case), will use the viewport tags to enhance the presentation of your web page. It is used to create responsive pages that can adjust themselves according to the viewport parameters.
Make Your Website Pop With Meta Tags
Nowadays, everyone is aware that content is king. However, why is it so crucial? And why should you work with an SEO company to improve your content?
To increase your website’s SEO ranks on Google and Bing, you must be able to optimize the content of your website. To achieve this, you need to consider the best, most precise keywords and search-friendly language. A skilled SEO team can do:
In-depth keyword research
Modify material for the right keyword placement and density
Spot chances for more search engine-friendly wording, keyword synonyms, latent semantic indexing (LSI), etc.
Additionally, poor keyword techniques and content optimization are probably harming your SEO results. Another reason why you urgently need an SEO firm is that spammy “black hat” tactics can be actively harming your company.
from The Webjuice Agency https://webjuice.ie/meta-data-impacts-your-seo/
0 notes
Text
Web Development Interview Questions?
In such a situation, it is critical to be ready for interviews, especially when entering the web development field. Irrespective of your plan of working with a leading organization such as SkyWeb Design Technologies, an organization that deals in web and mobile applications, or with any organization of your preference, it is important to learn the basics.

1. What is HTML, what is it used for?
Answer: HTML stands for Hyper Text Markup Language it’s most commonly used markup language in the creation of Web documents or anything related to the Web environment. It determines the layout of the material posted on the World Wide Web and includes such components as headings, paragraphs, hyperlinks, images, and others.
2. What makes HTML5 different from the prior version of HTML?
Answer: HTML5 is the version of HTML that is currently in use. It adds new elements and attributes and enhanced support for multimedia that are <article>, <section>, <header>, <footer>, <audio>, <video> and new APIs such as Canvas, Web Storage and Geolocation.
3. Here are some of the frequently used HTML tags and what they are used for:
Answer:
<p>: Defines a paragraph.
<h1> to <h6>:
<a>: Defines a hyperlink.
<img>: Embeds an image.
<ul> and <ol>: is unordered list, and ordered list.
<div>: division. So it defines a division or section.
<span>: Sets a block of text, mainly used for applying a style on.
4. What is CSS and why should one bother with it?
Answer: HTML is used to create a structure of a web page while CSS (Cascading Style Sheets) is used for appears of web pLAST EDITED: pages. It enables you to use aspects like colors font, space and position to your html elements which in turn creates aesthetically pleasing and more functional website to the users.
5. Please also provide me with a definition of what the box model in CSS .
Answer: The CSS box model describes the rectangular boxes generated for elements in the document tree and consists of:The CSS box model describes the rectangular boxes generated for elements in the document tree and consists of:
Content: The inner content area referred to as Knowledge Creation is:
Padding: Margin between the stuff and its visual frame.
Border: These are the line on the right and at the bottom of the padding and content.
Margin: (h) Space referring to the area beyond the border surrounding an element and other elements.
6. JavaScript is a programming language and web development tool, but how is it defined and what does it do?
Answer: JavaScript is also a language used in the designing of web sites to provide flexibility and impressive features on any web page. It lets you to work with HTML and CSS, manage events, verify data in forms, use animations, and work with servers.
7. What are variables in JavaScript and how can one declare them?
Answer: In JavaScript, variables refer to the means of storing data values. You can declare them using the var, let, or const keywords:You can declare them using the var, let, or const keywords:
javascript
var name = "ram";
let age = 25;
const isStudent = true;
8. What is the difference between let, const, and var?
Answer:
var: Any variable declared in a function block is either function-scoped or globally-scoped which even can be redeclared and again updated.
let: Local, write-only, specifically they allow updating the variable but not declaring it in the same block.
const: declared only in block can’t be updated, or redeclared after the declaration.
9. What is an array; Explain how you can define an array in JavaScript?
Answer: An array can be defined as a united variable for storing more than one value. We can create an array using square brackets []:
javascript
let fruits = [‘apple’, ‘banana’,’ cherries’];
10. What is a function and how does one describe or create one using JavaScript?
Answer: Function is a set of statements and instruction used to do a certain job or achieve a specific goal. we can define a function using the function keyword:
javascript
function greet(name) {
return ‘Hello, ‘ + name;
}
11. What is the event handling of JavaScript?
Answer: Javascript as the name suggests is an event driven language; this means that functions can be written that will take actions based on events such as a click, key press or even mouse movements. we can handle events by attaching event listeners to elements:
javascript
document. getElementById("myButton"). addEventListener("click", function() {
alert("Button clicked!");
});
12. What is the Document Object Model (DOM)?
Answer: DOM is a programming interface for the web documents. It depicts a document as a tree structure of nodes; this assist in managing the content and structures of the web pages by applying JavaScript.
13. How do you select an element by its ID in JavaScript?
Answer:
I can select an element by its ID using the getElementById method:
javascript
let element = document.getElementById("myElement");
14. What is responsive web design, and why is it important?
Answer:
Responsive web design ensures that web pages look good and function well on devices of various screen sizes and resolutions. It is important because it improves user experience and accessibility, and it is favored by search engines.
15. What are some basic steps to create a responsive web design?
Answer:
Use flexible grid layouts: Utilize relative units like percentages instead of fixed units like pixels.
Media queries: Apply different styles based on screen size, orientation, and other characteristics.
Flexible images: Ensure images scale appropriately within their containers.
Viewport meta tag: Set the viewport to control layout on mobile browsers.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
These questions and answers demystify basic facts which a fresher that wants to join the web development team should know.
Thanks for visit us……For more Information to visit our website: skyweb design Technologies.
Adress: 15th floor, Manjeera trinity corporation, kukkatpally, HYDERABAD
#web development interview questions#skyweb design technologie#top15 interview questions#top 10 interview questions#web dev interview question for freshers
0 notes
Link
HTML -Heading and Paragraph tag in hindi | Web development #6 in this video, I will explain ✔️Heading tag - h1 to h6 ✔️Paragraph tag p this video is part of the web development playlist https://www.youtube.com/playlist?list... Flask web development playlist:- https://www.youtube.com/watch?v=uqvwm... python playlist: https://www.youtube.com/watch?v=73ncl... #Htmllearn #webdevlopment #learnwebdevlopment ►telegram group:- https://t.me/codewithsheetal ►Website- https://www.codewithsheetal.com ►Facebook - https://www.facebook.com/codewithsheetal ►Instagram - https://www.instagram.com/codewithshe... ►Personal Instagram A/c - https://www.instagram.com/sheetallife/
0 notes
Text
A Complete Guide to On and Off Page Local SEO Content
Search Engine Optimization (SEO) has been around for nearly as long as the web has been public, and since the good old days, associations have been utilizing it to contact new crowds, carry traffic to their sites, spread information, and drive development And for this you want a best tutor and we are giving the best digital marketing trainers in India.
In any case, SEO has changed an incredible arrangement since it was first used to stuff however many watchwords as would be prudent into content and fill pages with backlinks. Over the long run, SEO has turned into a complex and specialized practice that is exceptionally educated by momentum web client conduct, and the present manifestation utilizes both on-page and off-page strategies to guarantee top notch sites come to the highest point of web crawler result pages.
Be that as it may, what precisely are here and there page SEO, and how might computerized advertisers utilize them to serve clients? That is actually the thing the present conversation will be devoted to, so keep close by to learn all that you want to be aware of current SEO best practices.
Understanding On-Page SEO
On-page SEO includes all the on location methods you can utilize to guarantee a site page will rank on a SERP, and it can likewise assist with deciding how well that page positions. It utilizes both substance and specialized components to work on the nature of a page, so the more on-page SEO you do the more traffic you'll get to a site and the more applicable that traffic will be.
There are various specialized parts of a page that can be advanced with on-page SEO, and they include:
• Title labels
• Headings
• URL structure
• Alt text for pictures
• Site speed
• Interior connections
• Meta portrayals
• Responsiveness
On-Page SEO Technical Best Practices
Title labels are HTML components you can use to assign the name of a website page, and that get shown on SERPS as the interactive outcome title. Each title tag ought to be special, clear about what's going on with the page, upgraded with a watchword and under 60 characters long.
Headings are the titles you give your substance, and these ought to be in H1 design for the best outcomes. Headings ought to zero in on pertinent and clear words, and keeping in mind that you can enhance them with watchwords, don't stuff them full. To separate substance, you can likewise utilize subheadings (H2 through H6) following similar prescribed procedures, yet don't rehash watchwords or expressions all through a post.
URL structure is significant when web crawlers decide how important a page is contrasted with a question, and it ought to be elucidating of the page's subject. You can likewise streamline URLs with catchphrases, insofar as they're significant. Alt text or elective text gives web indexes more data about a picture, however it's commonly used to portray pictures to web guests who can't see them. All things considered, alt text ought to be explicit and expressive of the picture content, 125 characters or less, and enhanced with a watchword or expression provided that proper.
Page load speed is significant in light of the fact that sluggish stacking pages have high skip rates:47 percent of individuals anticipate that a site should stack in something like two seconds, and 40 percent will leave after three. All things considered, web crawlers punish slow-stacking pages with a lower positioning, so it's essential to guarantee quick page load speed.
Inner connections make your site simple to explore for guests, yet they additionally make it more straightforward for web crawlers to get your website and record your pages, and this will bring about a higher position. At any rate, each page on your site ought to connect back to its class or subcategory page and to the landing page.
Meta portrayals are brief however striking depictions that develop title labels, sum up a page's substance and explain to web clients why they ought to peruse your substance rather than another person's. The meta depiction shows up beneath the title and the URL, and it ought to be kept under 160 characters.
Responsiveness is a plan component that guarantees your page will show appropriately on any gadget, including cell phones and work area ones. This will keep on being a significant element as an ever increasing number of individuals all over the planet utilize cell phones for online pursuit.
At long last, a note about watchwords. Watchwords are the magic that binds your on-page SEO system since they can be consolidated into this multitude of specialized components to assist the perfect guests with tracking down you at the ideal time. To be viable, watchwords should be investigated and painstakingly chose, and they should be worked into content in a characteristic and consistent manner.
On-Page SEO and the Impact of Content
• While the specialized perspectives are significant, quite possibly the most critical component of on-page SEO is content since this carries traffic to your site.
In any case, in addition to any satisfied will do, and the present web clients are searching for pertinent, fascinating, drawing in, and useful substance that fills a need. At the end of the day, individuals should need to consume the substance you've made, which can arrive in various structures, for example,
• Online journals
• Site page duplicate
• Recordings
• Infographics
• Web recordings
• Whitepapers
• Digital books
• Interviews
• Contextual analyses
• Unique examination
• Audits
• Educational articles
• Tests and posts
Nonetheless, one more significant component about the substance you make is that others should have the option to connection to it, and that implies keeping away from content that requires a login, protected material, and certain slide shows.
Off-Page SEO and the Power of Quality Links
Similarly as catchphrase stuffing used to be a satisfactory practice that is gone the method of the dodo, so too is the act of purchasing or exchanging nasty backlinks with an end goal to increment page rank. The web search tools have been insightful to these practices for quite a while, and filling your page with unimportant backlinks will really get you punished instead of advanced.
Albeit the web indexes consider both the number and nature of your backlinks (as well as the quantity of alluding areas), quality is significantly more significant than amount.
The key action item is that while backlinks are indispensable to off-page SEO, a solitary quality backlink from a definitive site is worth more than 10 or even 100 inferior quality connections. Third party referencing isn't generally the least demanding assignment, however the following are four procedures.
Composing visitor online journals to advance yourself as a specialist in your field
• Compose content that specifies powerhouses in your field, since posts like this are exceptionally famous
• Scour sites (especially powerhouse websites) in your field for broken connections, and afterward propose supplanting the wrecked connection with content you've composed on a similar subject
• Exploit the fame of infographics by making bunches of them
For additional bits of knowledge on the best way to make linkable substance, see our article:4 winning systems to compose content that others connect to.
Last Thoughts
Great substance material is a significant a piece of a superb SEO procedure.
In expressions of local SEO, great substance material with area markers prompts Google to rank you more noteworthy in local pursuit results and the Map Pack.
Basically making top notch content material on your site is definitely not all the time adequate. You should likewise share it to your Google Business Profile, different local organizing sites, and your online entertainment feeds to expand webpage guests and exhibit your experience and reliability.
For additional tips about happy material publicizing, attempt SEJ's Complete Guide to Content Marketing.
0 notes
Text
D-DAY IS HERE
IT'S DEADLINE DAY!!
Art and Fics Due - September 26th, 11:59 PM (Midnight) PST (here is a timezone converter.) ~ We can't wait to see what you all have created and can't wait to share it with everyone! IMPORTANT NOTE: I will be sending out emails to our artists who were willing to pinch hit art, as we have one outstanding art claim, and we may delay Debut Day if it is not picked up. (There may also be a slight delay because the mods are sick and in school, but we are doing our best not to let that happen!) POSTING: In case you need a hand with posting or last minute questions, check under the cut for a rundown on how to post your final works to the 2018 Collection.
POSTING REQUIREMENTS Where do we post our completed fics? We are using AO3 collections, with the deadline for submission as September 26th, and the reveal date of October 1st. You can post them up early!! Post them up now, if you want! You can also post your fics anywhere else you like, just don't post them anywhere before the Debut Date. Everyone who has signed up for this challenge should have an AO3 account, but if you don't, you can still sign up. You can ask a friend for an invite code, or you can request from A03 here or at
ao3_invitecodes. If you are unfamiliar with it, here is the FAQ of AO3. Do not publish your fic for everyone to see at AO3. Instead, submit it for our 2018 collection. Only the author of a work can add it to a collection, and then the mods approve it and we'll reveal it on the Debut Date. Once you've done that, we are also asking you to drop an email to thehetbigbang [at] gmail dot com when you submit your work to A03, with the following information: Email Subject Line: (Fic or Art Submission. YOUR NAME.)
AO3 Name/LJ Name: (both) Fandom: Pairing: Artwork or Fic: (artwork for "Title of Fic, by Author") or (Fic: "Title, rating, and word count. Big Bang or Little Bang.") Summary: (if applicable.)
Further Posting guidelines below. (The pics used are for the old 2012 submissions, but just mentally adjust for 2018.) 1. Sign up for A03. You can ask a friend for an invite code, or you can request from A03 here or at
ao3_invitecodes. 2. DO NOT POST YOUR FICS/ARTS SO THAT THE GENERAL PUBLIC CAN SEE THEM. Double check after posting to make sure it doesn't get posted to the general audience. If it does, delete the work and start over. Instead, you need to allow the mods to collect your fic/arts so that we can reveal everything together on October 1st. Go here, to the 2018 Het Big Bang Collection, and go the "Post to Collection" button in the top right corner. The collection is currently open, moderated and unrevealed.
This will bring you to the normal template where you submit your fic/artwork. In the first block, you fill out all the tags: fandom, warnings, ratings, characters, pairings, additional tags, etc. In the second block, you fill out the preface information, including title, summary, and author's notes. 2a. For Artist: your summary line should include your author's name and the title of their story (if you know it). 3. In the third block, for "Associations" make sure the line for "Post to Collections/Challenges" lists "Het_Big_Little_Bang_Challenge_2018."
3a. For Artists: the next line, "Gift this work to:" should be filled out as well. Artist, you know your Author's A03 name, which should have been provided to you through your emails. If for some reason it was not, please contact your authors and get this name from them. Fill in the "Gift this work to:" line with your author's name. That will link your artwork to them. After the submissions have gone live on the Debut Date, we would like you to go back and edit your submission to add in a link to the specific story you created your artwork for. But until the entire big bang goes public, the main way you'll attach your artwork to the piece will be by identifying the author through gifting. When you finally get the chance to link to the story, edit your submission and use the HTLM coding: <*a href="INSERT THE URL HERE">Title, by Author. (Remove the *) You can put this in your author's note or summary. 3b. For Authors: After the submissions have gone live on the Debut Date, we would need you to go back and edit your submission to add in a link to the specific artwork that was created for your story. You don't have to "Gift this work to:" to the artist, but it'd be neat if you wanted to do so. When you finally get the chance to link to the artwork, edit your submission and use the HTLM coding: <*a href="INSERT THE URL HERE">Title, by Artist. (Remove the *) You can put this in your author's note or summary. 4. Formatting and coding guidelines are important. 4a. For Artists: AO3 video embeds are working from Youtube, Vimeo, blip.tv, Dailymotion, Viddler, Metacafe, and 4shared. So if you have a video, you upload it to Youtube for example, and then embed into an AO3 post. For images like artwork and icons and banners and cover art, use the <*img src="INSERT YOUR URL HERE"> HTML coding (remove the *). You can first upload your images at Tinypic or imgbox or a similar image hosting website, and then make an A03 post with the HTML coding. (*NOTE: As of 2017, photobucket no longers allows you to post and link without paying big bucks, so avoid photobucket.) 5. Submit your fic/artwork. You need to make sure when you hit "Post" that you see this text at the top of the resulting page:
"This work is part of an ongoing challenge and will be revealed soon! You can find details here: Het Big/Little Bang Challenge 2018"

6. Now, your fic should NOT be displayed to the general audience. It might not even show up on your dash, but fear not. You can still edit, add new chapters, mess around with it to your heart's content. We, the mods, unfortunately do not have access to your story. We cannot tell if it is properly formatted or not. THIS IS FRUSTRATING, but there's nothing we can do about it. We can only see your name. All works are titled "Mystery Works" until we reveal the entire big bang. So, please make sure your own fic is properly formatted. If you need to edit your fic, login and go to your dashboard. Go to the "Edit Works" button in the top right corner. From there, you can edit your works.
A03 will require you to format a header with all regular information on it. Remember to properly tag your works, including appropriate warnings. Both HTML and Rich Text are supported, and you can edit/delete, have multiple chapters, etc... 1. The Rich Text Editor lets you add formatting, links and pictures to text without using HTML tags. It also has an option for pasting from Word which will preserve some of your Word formatting, although please note that this is buggy. The Rich Text Editor is only available for your work text. 2. The HTML editor allows you to change the look of your text with HTML tags. It can be used in any place you can submit text, although some fields permit only a small subsection of allowed tags. You can see a full list of the allowed HTML on the Archive FAQ, but the standard HTML tags is as follows: b, big, blockquote, br, caption, center, datetime, div, dl, dt, em, h1, h2, h3, h4, h5, h6, height, hr, href, i, img, ins, small, span, src, strike, strong, sub, sup, table, u, and more. Also, a few years ago,
anr was a saint and provided you with a post that explained "how to format a fic for posting in less than 30 seconds no matter the story length or amount of formatting" trick. The mods won't be overly picky about formatting. I'd prefer for all dividers and scene breaks to use <*hr> (remove the *) which creates a horizontal line that serves perfectly as a scene break. However, that's optional. You choose your own way to format. Other optional suggestions, just for uniformity sake's: How do I do Chapter Titles: Bold 'em. How do I timestamp and do locations: Italicize the dates and locations. How do I do subtitle stuff: Italicize it. There is only one major fail regarding format, and that has to do with paragraphs breaks. There must be a full line break between paragraphs. Example of doing it wrong:
Chapter One: The Invasion March 6, 2005 - The City of Atlantis Elizabeth ducked quickly behind a console and attempted to catch her breath. A flush of pink colored her cheeks and a thin sheen of sweat had appeared on her brow. If the situation weren't so dire, John would have been turned on. As it was, however, he couldn't give it much thought as he had to focus on the batch of Ancient zombies that were slowly staggering in through the Stargate. "At least they can't run," he offered lamely. Elizabeth spared him a glare. "Why can't they run?" "I don't know." John shrugged. "But they never seem to run. They always lurch. Maybe when they're brought back to life they don't get knees?"
Example of doing it right:
Chapter Two: Ancient Ex-Girlfriends Yes, They're Zombies Too Elizabeth peeked around the consol. "Oh, my god," she breathed. "Is that--" "Chaya?!" John squeaked. "Talk about creepy ex-girlfriends." Rodney scrunched his nose. "She doesn't look good in green." John cringed and crouched down lower. "Do you think she's their leader?" Elizabeth looked thoughtful. "Well, this may be better for us." She narrowed her eyes at John. "We can give them you in trade for a cease fire--" Something caught her attention behind John and she broke off. "No, wait. Look to the left! That's... oh, god, John. That's Teer!" John and Rodney stared in disbelief. "Damn you, Kirk!" Rodney groused, and hit John upside the head. "We're going to be killed by a legion of your dead ex-girlfriends!" "Okay, everybody calm down," John soothed. "Let's not overreact and go blaming--" "Hey, look, your ex-wife!" "What?!!"
Grammar and Spelling fail: If your fic doesn't look beta'ed, we will call you on it, which will create an AWKWARD situation for both of us. Having a beta is a REQUIREMENT. Grammar, spelling, proper paragraph structure, etc... these are all REQUIREMENTS. You need to give your beta ample opportunity to go over your fic for mistakes and edits, so remember to factor that into your deadline. Don't have a beta? Check out this post!
Can I post it to my journal a few days early to show my friends? No. The first time you show your fic for this big bang must be on Debut Day, on this comm. Mods will handle the revealing details. There will be more posts on that to come. Once the Big Bang collection goes live on Oct 1, feel free to post your stuff wherever. Also, please remember that extensions for final fic and art submissions will not be granted. Please make sure your stories and art are submitted no later than September 26th. If you absolutely cannot make it, contact a mod immediately - either via email at thehetbigbang [at] gmail.com, or on the Page-A-Mod post, or PM
red_b_rackham or
traycer_. Lastly, remember if you need some to cry, scream, flail, yell triumphantly, encourage, cheerlead, etc, don't hesitate to check out the support comm and throw up some posts for each other!
YOU'RE ALMOST THERE!!
from Het Big Bang https://ift.tt/2zwUXAi via IFTTT
1 note
·
View note