Tumgik
#anchor tag in html
izicodes · 7 months
Text
Convert HTML to Image: A Step-by-Step Guide ✨
Tumblr media
Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?
Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!
This is an old tutorial I made 🐼
Tumblr media
💛 Set your environment
Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:
Tumblr media
We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.
Your page should resemble the following:
Tumblr media
As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.
💛 Using the html2canvas JavaScript Library
The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:
The steps to put the library in your project:
Visit the html2canvas website for more information.
Copy the CDN link from here
Tumblr media
and include it in a script tag in your project's head tag in the HTML file:
Tumblr media
That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.
💛 JavaScript Functionality
Here's the JavaScript code to handle the conversion:
Tumblr media
In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.
I also put the button into a variable in const button = document.querySelector("button");
I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!
You can find similar code like this in the documentation of the html2canvas library:
Tumblr media
What is happening here is:
We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)
Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc
Created an anchor/link tag, added the href attribute to imageDataURL
The download attribute is where we will give the default name to the image file, I added "dog.png"
Perform the click() function to the anchor tag so it starts to download the image we created
And that's it!
💛 The End
And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.
Tumblr media
If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼
Tumblr media
128 notes · View notes
suzy-queued · 10 months
Text
Tag Game Wednesday
Thank you for the tags, @deedala @creepkinginc @energievie
1. if you could switch bodies with anybody for only one hour who would it be and what would you do? Ooh, can I go to the space station? I want to switch places with an astronaut. Preferably a man so I can try out a male body (for fic writing research).
2. whats your most trivial / dumbest hot take? That candy corns are the worrrrrsssstttt
3. if you had to teach a college course what would it be in? HTML and PHP coding. Website development in general.
4. season 12 of shameless is suddenly happen and you've been put in charge! what plot point(s) are you gonna make happen? I know people want Carl to run the bar, but I'd love to see Ian and Mickey run the Alibi. I want them to be the new anchor couple of the neighborhood and be the center of everyone's shenanigans.
5. who would be your godly parent? (can be any mythology). Loki. We'd have so much fun together.
6. what’s something you love about yourself? My adaptability to new situations.
7. describe your day in 5 emojis: 📧🐈🚘👨‍👩‍👧👩‍🍳
8. what shameless character do you think you could beat in a fight? Sammi. I'd trick her into making a mistake.
9. tell us 2 truths and a lie, we’ll try to guess the lie! - I was in a bus safety video filmed in the 80s. - I was on the TV show Dawson's Creek. - I was in the movie Evan Almighty.
10. do you have a pet(s). if so how did they get their name? Buttercup, who was named after Princess Buttercup from The Princess Bride. Shadow, who was named using a long whole-family voting process. Calypso, who was named for the god Calypso. Pogo, named after the character in The Umbrella Academy.
11. show us a meme (or picture) that captures your essence.
Tumblr media
12. whats your typical coffee / tea / beverage order? Hot chai with oat milk
13. use a song to describe the last 5 years of your life? Things are Getting Better by N.E.R.D.
I'll tag ... @tsuga-of-mars @look-i-love-u @depressedstressedlemonzest @gembu-tortuesouscafeine @tanktopgallavich @francesrose3 @sweetbee78
16 notes · View notes
kaecodes · 9 months
Text
Universal Scroll Button(Autochange Direction) For Any Host
Hey, do you have a site with a lot of forums? Does your host allow you to use Javascript? Boy does this weirdo have a deal for you! For the low low price of free, you can get right now access to a scroll button that swaps directions when you scroll automatically, as well as changing the target & title on hover! Act fast, this deal won't last! I kid, but enough of the ShamWowery. In reality, this is a very simple script that reads how far you have scrolled a window, & applies or removes a class to your scroll button, as well as changing the target of said scroll button & adjusting the title to reflect which way it will take you!
It's so simple, crediting me seems superfluous but if you want, feel free to credit with a link to my blog <3 I hope the new verse of our song is eminently kind to everyone!
See it In Action(Click, or look Below):
I currently use this code on two different WIPS, so feel free to check out some gifs;
Tumblr media Tumblr media
To Begin
Before the end of your </body> tag in your wrappers(for Jcink) or wherever the HTML templates go on other sites, you want to place this script:
<script> $(window).scroll(function() { if ($(this).scrollTop() > 800) { $('#scroll').attr("title","To Top?").attr("href","#Top").addClass('totop'); } else { $('#scroll').attr("title", "To Bottom?").attr("href","#Bottom").removeClass('totop'); } });</script>
This seeks out an id of Scroll to adjust the href & title as needed depending on the scroll position within the relevant window. The scroll amount is in px, so to change how quickly it changes the button, alter the number 800 to whatever you desire, fiddle with it; one size never fits all.
The Styling
Once you've saved that, move to your CSS, or wherever your Style tag is to add styling for the link itself. Keep in mind the link should be contained within a container that handles its positioning for it as otherwise the script will fuck with the positioning as well as the transformation & you really just want it to spin upwards.
The styling for the link should be as follows;
#scroll { display: inline-block; positioning: relative; transform: rotate(0deg); transition: transform .5s ease-in-out; /*** ^ change the .5s to alter duration or the ease-in-out to alter the timing of the transition between button states ***/ }
#scroll.totop { transform: rotate(180deg); }
The first statement defines the default state (linking to the bottom) of the scroll button on the load of the page, the second defines the change of position once the window has been scrolled far enough to activate one's script.
The HTML
Now you've got the behaviour defined via JS & the styling defined via CSS, it's time to input the HTML, or the bone structure of the code itself. In your wrappers, template, or wherever HTML goes on your host, locate three places;
One, where you want the TOP scroll location to be. This is where the scroll button will take you once it has changed states on scrolling a certain distance. Here, you place an anchor span as follows;
<span id="Top"></span>
Two, Where you desire for the BOTTOM or BODY scroll location to be, as in where the scroll button will take you on click initially. This could also be a scroll to the start of content, in which case I recommend changing #Bottom & id="Bottom" respectively to reflect the syntax, it's entirely up to you. Here, you place an anchor span as follows;
<span id="Bottom"></span>
Finally, It's time to add the scroll button. Keep in mind, where you put it is a function of utility & design choice. Some like it persistently hovering in a fixed position, some like it in a sidebar or on userlinks, some prefer it in the navigation bar.
Wherever you place it, try to ensure that it's easily accessible on any device, screen size, & matches the User Interface logic you've used everywhere else. If you have all text buttons, don't use just an icon, if you have all icons, don't suddenly use just text. Match your action calls, so users don't feel confused while using your site.
Once you've decided where you want it, place the following code, NOTING that there should be a container for this code that positions it for you. I've provided two options; the Icon Font option (courtesy of Phosphoricons -- a free & reliable Icon Font I recommend -- As well as one which includes text, so both UI/UX design philosophies are accommodated.
Note the option with text will only rotate the caret from downwards to upwards, so the scroll text shouldn't need editing unless you want to add or supplement flavourtext.
Please choose the appropriate option for yourself;
Icon Font
<a id="scroll" class="ph-fill ph-caret-down"></a>
Icon Font with Text
<span>Scroll <a id="scroll" class="ph-fill ph-caret-down"></a>?</span>
Some Notes:
I just want to add a bit of info:
If your browser isn't scrolling smoothly to your anchors? Check your settings, & be sure the root of your CSS has scroll-behaviour: smooth; in it.
If you use this guide & have problems getting it to work, please let me know! I will troubleshoot this for you & tumblr has strange coding, I may have futzed something up, I want this to be as accessible as possible, so don't be silent; questions help!
If you are not using Jcink, or another host with a Jquery library pre-loaded, be aware that one is needed for this script to work. Most hosts will have a default Jquery library, but if yours doesn't or you're self hosting, any should do. The Jcink file is below, however, if you want to just use that.
8 notes · View notes
boysplanetrecaps · 9 months
Text
The Great Produce 48 Rewatch
Tumblr media
Hello, lovies! This post marks the start of my Produce 48 Recaps. For those of you who don't know, this show was the first time we met various trainees who went on to join a bunch of other groups, including Alice/Elris, Bugaboo, Cherry Bullet, Everglow, H1-Key, IVE, Kep1er, Le Sserafim, Lightsum, Purple Kiss, Queenz Eye, Rocket Punch, Secret Number, and of course IZ*one. Some of them also appeared on Girls Planet 999 and/or Queendom Puzzle.
Since the show is so iconic, and so messy, I'm going to back to 2018 to recap it in my own chatty, opinionated way. This post will be the anchor post and I'll add links to other episodes as we go along. Welcome to the ride!
I've decided to split the difference with respect to spoilers. No one wanted me to write it as if it's still 2018, but some people did want me to avoid spoiling who makes the final lineup, and I'm going to go with that. I'm going to tell you who goes on to be in every other group EXCEPT for who makes it into IZ*one, because that spoils this specific show and will make it less fun to watch along if that's what you want to do. I'm also not going to spoil things like when people go home and what their final ranks will be. However, after each elimination round, I'll tell you where people are now.
In case you want to either find or filter out all these recaps, I'm tagging them all with "BPR recaps P48."
If you want to start watching the show, this link is the least crappy one I've found. https://kshow123.tv/show/produce-48/episode-1.html
Intro: Episode 1: Entrances
The audition round: Episode 1: Auditions 1-10, Auditions 11-24 Episode 2: Auditions 25-36 , the unaired auditions (and audition wrap up)
Signal song mission: Episode 2: Dorm Move in and Practicing for Nekkoya Part 1 Episode 2: Practicing for Nekkoya Part 2 and final prep Episode 2: Grade Reassignment, Part 1 Episode 2: Phone Calls Home and Judges Table (Grade Reassignment Part 2) Episode 3: Grade Reassignments, Concluded Interlude: A bit of Grade Analysis Episode 3: Signal Song Performance + Start of Challenge Mission 1
Challenge Mission 1: Episode 3: The teams start practicing and we visit each one Episode 3: Love Whisper Episode 3-4: Peekaboo Episode 4: Short Hair Episode 4: Mamma Mia Episode 4: High Tension Episode 4: Boombayah (featuring Hell-bayah) (part 1) )(part 2) Episode 4: Like Ooh Ah Episode 4: Very Very Very (featuring half of Iz*one) Episode 4: Ep 4 Wrap Up and BRAPPY Awards
8 notes · View notes
anandparikh · 3 months
Text
Complete #Onpage #SEO Techniques:
Tumblr media
On-page #SEO refers to optimizing individual web pages to rank higher and earn more relevant traffic in search engines.
1. #Title Tags:
- Include the target keyword.
- Keep it within 50-60 characters.
- Make it compelling and descriptive.
2. #Meta Descriptions:
- Summarize the content of the page.
- Include the target keyword.
- Keep it within 150-160 characters.
- Make it compelling to improve click-through rates.
3. #Headings (H1, H2, H3, etc.):
- Use a single H1 tag that includes the main keyword.
- Use H2, H3, etc., for subheadings.
- Make sure headings are relevant and keyword-rich.
4. #URL Structure:
- Keep URLs short and descriptive.
- Include the target keyword.
- Use hyphens to separate words.
5. #Content:
- Ensure high-quality, original, and relevant content.
- Use target keywords naturally within the content.
- Include related keywords and synonyms.
- Aim for a content length that is competitive for your keyword.
6. #Images and Alt Text:
- Use descriptive filenames for images.
- Include target keywords in the alt text.
- Optimize image file sizes for faster loading.
7. #InternalLinking:
- Link to relevant pages within your site.
- Use keyword-rich anchor text.
- Ensure a logical internal linking structure.
8. #ExternalLinks:
- Link to high-quality, relevant external sources.
- Open external links in a new tab to keep users on your site.
9. #MobileFriendliness:
- Ensure your site is responsive and works well on all devices.
- Use Google's Mobile-Friendly Test to check.
10. #PageSpeed:
- Optimize images and use a content delivery network (CDN).
- Minimize CSS, JavaScript, and HTML.
- Leverage browser caching.
11. #UserExperience (UX):
- Ensure easy navigation and a clean layout.
- Use clear calls to action (CTAs).
- Improve readability with bullet points, short paragraphs, and whitespace.
12. #Schema Markup:
- Add structured data to help search engines understand your content.
- Use JSON-LD for structured data implementation.
13. #Social Sharing:
- Include social sharing buttons.
- Use Open Graph tags for better social media integration.
14. #Keyword Optimization:
- Conduct thorough keyword research.
- Focus on primary and secondary keywords.
- Avoid keyword stuffing.
15. #Content Freshness:
- Regularly update content to keep it relevant.
- Add new information or improve existing content.
By optimizing these #SEO elements, you can improve your site's visibility and ranking on search engine results pages.
2 notes · View notes
Text
Tumblr media
This is definitely a long time coming, but I finally wrote a text only fic for Sterek, complete with a stylized AND plain text view for reading! Also my first long fic that I've written since...I don't even know when (aka it's NOT a drabble or ficlet!!). This is also belated from July, but for reasons you can read more about below the cut. Inspired by @yearoftheotpevent's July prompt "stars," as well as sniperjade's Masturbation Midsummer Bingo 2023, using the square "I can't anymore," and Summer of Cum 2023 prompts "creampie," "come marking," "precome," "come swallowing," "coming untouched," and "coming in pants" (yeah, there's definitely a spicy theme here :P).
Title: Feel You Breathing (<- on AO3) Rating: Explicit WC: 8.4k Tags: Texting/Sexting, Established Relationship, UST, Porn with Feelings, Porn With Plot, Fantasizing, Teasing, Banter, Filthy, Dirty Talk, Masturbation, Idiots in Love, Writer Derek Hale, Bartender and Graduate Student Stiles Stilinski, Business Trip, Flight Delays, Coming In Pants, Coming Untouched, Nipple Play, Light Dom/sub, Bad Pick-Up Lines, Humor, Shopping, Sex Toys, Kink Exploration, Werewolf Mates, Anchors, Love Confessions, Pet Names, Romantic Angst, Stiles AND Derek are Little Shits, POV Alternating
Summary: Derek: So, you need a distraction. Stiles: Maybe Stiles: It’d be better if you were here to help me with that. Stiles: ;D [Or: Sexy things start late one night when Derek gets a text from Stiles and escalate from there. A few secrets are revealed along the way.]
Some of my lovely Sterek friends know I've been dabbling in and out of writing text fics since last year (2022). Easier said than done 1000%, I'm going to tell you that right now. It only took me 3 tries to get it right! (And yes, it means my other 2 WIPs need to be reworked, le sigh.) It's one thing to write a text fic, but it's a completely different beast to style the damned thing with AO3 skins while making it as legible and accessible as possible. I thankfully know how to code in CSS and HTML, but it took me quite a long time to create a custom skin template that I liked and could reuse while getting the look and feel just right for our idiotic boys and the overall Teen Wolf world. Texting and sexting is legit an art. There are so many ways to approach how to write a text because each person does that differently. There's also intention required when using emojis, figuring out how someone would react to things, and hell, even playing around with timestamps and timezones is important. A text fic isn't just about words. All the tiny details add up and make a new experience. I think I took a full week to QA this whole fic because I wanted the aesthetic to look good, and it was worth it! It was nice to make something for myself, which let me write dialogue and banter and a lot of fun things I normally wouldn't had this been a different kind of fic. Super grateful for having a Write-A-Thon sprint weekend, which motivated me to finish the bulk of this baby up. And when I think about it now, this labor of love was originally supposed to be an experiment for me to play around and learn more about coding intricacies. It was supposed to be a short Porn without Plot thingie (but uhhh, it's definitely Porn with Plot and Feelings because that's the way it is). 1-2k words somehow became 8k+ words. No regrets though. It has been a long time since I've felt good about writing something this long and doing something different than the norm. It has been such a blast coming up with all the texts in this fic, because they're humorous and spicy with the usual banter and sarcasm we love between Derek and Stiles. But hey, there's some romantic angst too (they might be texting and using words, but they could do better, of course). Anyway, I hope you give this a read when you have a chance. Enjoy!
8 notes · View notes
nokingsonlyfooles · 8 months
Text
The menus don't work, the menus don't work, the menus DON'T WORK...
Tumblr media
OK, my few readers. I took a break, I went back to fix the navigation, it's unfixable as-written.
I need some complex stuff in places, I was willing to forgive WP for putting out a new site editing interface that barely works - as long as it has the basic features someone would use on a storefront. I'm an outlier. I know this.
BUT IT IS NO LONGER POSSIBLE TO CREATE A MENU WITH A WORKING SUB-MENU IN IT. IF YOU TRY, THE SUB-MENU LINKS ARE UNCLICKABLE.
I am using their site editor and their 2024 theme, I should say.
I crossed my fingers and looked for the (now liable to vanish from anything more complicated than a paragraph) "edit as html" option. Nope! It's gone! I can't fix it. I would have to hack the interface somehow to fix this for WordPress, within WordPress.
I had to go looking for plugins. I HAD TO GO LOOKING FOR 3RD PARTY SOFTWARE TO GET A FUNCTIONAL MENU. And, of course, they paywall features I need. I found a "floating" menu that actually does work well enough (it's a little cramped on mobile unless you put the screen in landscape mode, but at this point you should really do that anyway, I can only format so much) but the sub-menu function is paywalled. And I'm actually fucking tempted to buy (haha, I mean "rent") it. Because the damn thing works in dark mode and across devices. And it sticks to the side in a fairly unobtrusive way, which WP's menu will not. It won't stick anywhere. And it sure as hell won't do that thing where you scroll up and it plops down for your convenience.
But if I use that floating menu without sub-menus, it's gonna get longer, and longer, and longer, until it doesn't fit on your mobile screen anymore, or potentially your tablet or desktop, and then I dunno what happens. Also, in order to keep it small, everything is a cryptic icon that displays a title when you tap it (on mobile) or hover over it (on desktop). That's kinda counterintuitive, I don't know if I want my one working menu to be like that.
I might keep looking and find another plugin that also works that well but... it's not likely. Or, if I do, I may run into another paywall. They gotta get their rent somehow!
This is a stupid problem and so far I am unable to come with with a non-stupid solution. I can:
Put all the links in the header menu, and you'll have to scroll through EVERYTHING to find the actual content every time.
Put all the links in the content area, in different places and different combinations depending on the page. (And this would mean doing some reformatting on every instalment AGAIN.)
Start fucking around with the sidebar - I don't know if it works and I'd have to rip up every template I've already made to add it.
Put all the links in the footer menu, and nobody will notice them.
Put all the links in the floating menu (see above for the issues with that).
Make sub-pages for Misc/Notes and similar that are just lists of links and serve the function of a sub-menu.
Actually put the content on the sub-page and have it navigable via anchors (this seems like it would be a bitch to load, but most of my content is just text).
Make a list of links that isn't actually tagged as a menu, thus losing the collapsible function for small screens.
Kill God.
That last one is probably the most doable but I feel like someone would get mad at me. Like, Hazbin Hotel finally got its first season on Amazon, and if God dies they might have to rewrite some shit.
If I don't lay out the money for the cryptic icon menu, we're probably going to end up with three or four accordions that are not technically menus at the top of every page. And I'll hafta check back every once in a while to see if WP fixed their shit yet.
If they don't stick with that site editor and make it useable, all this work is going to vanish like chalk marks in the rain.
I WANTED to put up another six-pack in February. I have it ready to go! But the site doesn't work. If I can't fix it this week, I won't even be able to put things up without illustrations. And forget having time to fill in the missing artwork. I got enough to do trying to kill God!
3 notes · View notes
raviws23 · 11 months
Text
Exploring the Basics of HTML: A Journey into Web Development with an Online Compiler for HTML
In the vast universe of web development, HTML (Hypertext Markup Language) is the essential building block that transforms creative ideas into interactive web experiences. HTML provides the structural foundation for web content, allowing web developers to create well-organized and readable web pages. In this article, we will embark on a journey into the basics of HTML, exploring its core elements and their functions. Additionally, we will introduce you to a valuable resource: the Online Compiler for HTML, a tool that empowers aspiring web developers to experiment, test, and refine their HTML skills in a practical and user-friendly online environment.
Tumblr media
HTML: The Language of the Web
HTML is the language of the web, serving as a markup language that defines the structure of web content. Its fundamental elements, or tags, are used to identify and format various aspects of a web page. Let's dive into some of the basic elements that form the foundation of HTML:
1. HTML Document Structure: An HTML document starts with the <!DOCTYPE html> declaration, which defines the document type. It is followed by the <html> element, which encapsulates the entire document. The document is divided into two main sections: the <head> and the <body>. The <head> contains metadata and information about the document, such as the page title, while the <body> contains the visible content.
2. Headings: Headings are essential for structuring content and providing hierarchy to text. HTML offers six levels of headings, from <h1> (the highest level) to <h6> (the lowest level). Headings help create a clear and organized content structure.
3. Paragraphs: To create paragraphs of text, the <p> element is used. This element defines blocks of text separated by blank lines and is a fundamental tool for organizing and formatting content.
4. Lists: HTML allows for the creation of both ordered (numbered) and unordered (bulleted) lists. Ordered lists are created with the <ol> element and list items with <li>. Unordered lists are created with the <ul> element, also with list items using `<li>.
5. Links: Hyperlinks are a crucial feature of the web. HTML provides the <a> (anchor) element for creating links. The href attribute within the <a> element specifies the URL of the page or resource to which the link should navigate.
6. Images: To embed images in a web page, HTML employs the <img> element. The src attribute within the <img> element points to the image file's location.
Introducing the Online Compiler for HTML
To practice and experiment with these basic HTML elements, there's a valuable resource at your disposal: the Online Compiler for HTML. This user-friendly online tool allows aspiring web developers to write, modify, and test HTML code in a practical environment. What sets it apart is its real-time rendering feature, enabling users to see immediate results as they make changes to their HTML code. It's an ideal platform for beginners and experienced developers alike to fine-tune their HTML skills and explore the language's capabilities.
Conclusion: The Journey Begins
Understanding the basics of HTML is the first step in your journey into the world of web development. HTML's fundamental elements serve as the building blocks upon which you'll construct your web pages. With the assistance of the Online Compiler for HTML, you have a practical and interactive resource to help you explore and master the language. As you become more proficient in HTML, you'll gain the ability to structure content, create links, and embed images, laying the foundation for the websites and web applications of the future. The journey into web development has just begun, and HTML is your trusty guide.
5 notes · View notes
blogpreetikatiyar · 2 years
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
darrylhudson86 · 9 months
Text
How To Boost The Indexability Of A New Website 🔥
🔥 Skyrocket your website's indexability and conquer the search engine rankings! 🌟 Buckle up, folks, because I've got some insider secrets and juicy tips that'll turbocharge your site's visibility. Let's dive in! 💪
1️⃣ Speed is 🔑: Did you know that a slow website can make spiders crawl slo-mo? ⌛ Yup, search engines love speedy sites! Optimize loading times by compressing images, minifying CSS/JavaScript, and leveraging caching techniques. ⚡️ Slow websites ain't got no time for rankings!
2️⃣ XML Sitemaps for the Win 🗺️: A well-crafted XML sitemap is the magic 🔮 that helps search engines understand your website structure. Create and submit one to Google Search Console, Include all your pages, prioritize 'em, and watch as the bots scuttle through your content. 🕷️
3️⃣ Mobile-Friendly FTW 📱: it's a no-brainer to know that mobile searches surpasses desktop searches. Ensure your site is responsive and looks fab on all devices. Mobile-friendly sites win bonus points with the search bots and get blessed with better indexability. 🙌
4️⃣ Link Juice Matters 💪🧃: Internal linking is like a power-packed energy drink for your SEO efforts. 🥤 Pass that link juice around by interlinking your pages with relevant anchor texts. Search engines adore such connected websites, and it helps them find all your cool content.
5️⃣ Clear the Dead Ends ☠️: Broken links are like ghosts haunting your website. 👻 Sweep 'em away, my friend! Regularly audit your site for 404 errors and redirect 'em to relevant pages. Goodbye dead ends, hello smooth and indexable pathways! 🛠️
6️⃣ Hail the Hierarchy 🏰: A well-structured website hierarchy is a superhero cape for indexability. 🦸‍♂️ Use clear headings, subheadings, and semantic HTML to organize your content. It helps search engines understand the context better and boost your chances of claiming that top spot. 🥇
7️⃣ Snacks for Spiders 🍴🕷️: Meta tags bring all the spiders to the yard! Craft compelling meta titles and descriptions that entice users and search engines alike. Use relevant keywords, be concise, and ooze that click-worthy appeal. 🤩 Meta tags are the snacks search bots love to munch on!
⚠️ Hold up, folks! This is just a taste of the SEO buffet I've got for you. For a full-on feast of technical SEO expertise, check out my guide, "Unlock the Secrets of Technical SEO" 📚🔓. It's packed with even more insider info to supercharge your website's indexability and beyond! 🚀🎉
#SEO #TechnicalSEO #Indexability #SearchTraffic #WebOptimization #HustleHard #onpageseo #intetnallinks #internallinking #boosttraffic #organictraffic #freetraffic #searchengineoptimization #onpageoptimization #indexability #sitemaps #metatags #websitespeed #seomarketing #seosecrets #seostrategy #makemoneyonline #earnmoneyonline #workfromhome #homebusiness #onlinebusiness #onlinemarketing #internetmarketing #digitalmarketing #contentmarketing #digitalmarketer #affiliatemarketing
4 notes · View notes
crackjob · 11 months
Text
target="_blank" vs target="blank" in HTML:
Q01. What is the difference between target="_blank" and target="blank" in HTML? Q02. What is the Target Attribute in HTML? Q03. What are the different possible values of the Target Attribute in HTML? Q04. What is the meaning of target = "_blank" in the anchor tag of HTML? Q05. What is the meaning of target = "blank" in the anchor tag of HTML? Q06. What is the difference between target="_blank" vs. target="blank"?
5 notes · View notes
max--phillips · 1 year
Text
This coding thing I’m using trying to learn HTML: this is an anchor tag! And here’s how you add a link in HTML :)
Me, a tumblr user who had to learn how to put links in their description manually bc this website is a dumpster fire: yeah yeah <a href=“link”>Display Text</a> we’ve all seen it
5 notes · View notes
maryellencarter · 1 year
Text
am building WOBSITE
the visible parts are almost all placeholder text right now, so I'm not linking it, but I'm having a ton of fun.
i looked at wordpress, but it wants everything to be boxes you drag and drop, which does not sound conducive to fiddling with it on my phone between customers. also you have to pay for an "ad-free experience" and i wasn't clear if i was being advertised *to* or having ads put *on* my site, but neither of those sounded fun. also as far as i can tell it's still fundamentally a blog (probably?) and if i wanted a blog i understood the construction of i'd just make another dreamwidth
then i went and looked at neocities, which is a name i have heard Around. apparently they were created originally for people to import their geocities sites onto, when geocities was in the process of going kablooie, and their goal is to provide a way for people to build that kind of real simple website with html and css mostly.
and it turns out they are EXACTLY what i was looking for!
(1) not a blog. they give you an index.html homepage and you can do whatever from there. completely flexible.
(2) they promise never to put ads on your site.
(3) very not gatekeepery. when you create a new html page for your website, they helpfully format it for you with all the machine-readable header shit so that it will display like a website rather than raw code, and connect it to a basic css stylesheet so you can use things like headers, and even include some basic code like "This is a paragraph! Here's how you make a link! Here's how you add emphasis and strong tags! Here's how you insert a picture! (placeholder picture of their logo)" They seem quite enthusiastic about wanting everybody to have fun making little wobsites. They have a bunch of tutorials too, which I haven't really dug into because most of what I actually need to brush up on is specific googleable questions like "how do I put an internal anchor link to a footnote again"
(4) In-browser HTML editor. This is the one that really sold me on it. I was using Gdocs for the convenience factor of being able to make quick gameplay notes at work. Now I can make notes the same way, but organized and cross-referenced and *flappy hands*
(5) You get a gigabyte of storage for free, and a certain amount of bandwidth. If you subscribe at $5 a month as a "supporter" (their only paid tier), you get 50 GB of storage, custom domain name options instead of being only at [name].neocities.org, the ability to create multiple websites with one login, and some other stuff too.
(6) I have currently used about 75 KB of my gigabyte. That's so little that it's still showing as 0.0% usage. It's also, slightly horrifyingly, roughly 15,000 "words" at the typing-speed standard count of 5 characters per word. I know I booted up my laptop after work and did a bunch of template building, so I can make all my listings and stuff consistent, but... that's almost three hours of straight typing at the speeds I use at work. I didn't think I'd been doing *that* much hunt-and-peck coding on my phone. Weekends are so busy too.
(7) Oh, they have a handy button for "Download your entire website" on your dev page too. And another one for "Mount your website as a drive on your computer", which I have no idea what I'd do that for, but that's the kind of open source mindset I like to see. The kind where they provide (usable, helpfully documented) tools to create shit, and then make it easy to take your shit wherever you want.
(8) I strongly doubt I'm going to use up this gigabyte anytime soon, especially if I stick to just HTML and don't start hosting pictures of all the item drops like a wiki, but I might subscribe anyway if I haven't burned out on this project in like a week, because it really is providing me *exactly* what I was picturing for the platform to build this wobsite on, and I had no idea that existed, so I would like it to continue to exist.
(9) I like their terms and conditions too. Anti-censorship, a statement that by using the service you agree that you might run across any type of the crap people put on the interwebs (including sexually explicit material, specifically called out) and the site isn't responsible for censoring any of it that isn't illegal. Standard provisions for determining what content is legal according to the laws of the state of Oregon specifically [which is considered a very permissive place for the US and is probably pretty unlikely to outlaw queer content in the near future], strict provisions against knowingly collecting any personal information from anyone under 18, and a *lot* of strict provisions against using the service to spam, hack, DDOS, or otherwise commit cybercrimes. I approve of these priorities.
(Also, my HTML is still at least as fluent as my Latin, which pleases me.)
4 notes · View notes
Text
One benefit to being a Fandom/Online Crone is that back in the late 1990s/early 2000s, I learned some basic HTML coding in order to create and manage my own fan fiction website. Fast-forward to today, and I'm dredging up that ancient knowledge from the depths of my brain to create a table of contents with anchor tags for my syllabus so students can use a link to jump to the specific info they need.
3 notes · View notes
munchlax-musings · 2 years
Text
What is HTML? - steno vocab list
im practicing using hard copy today, and the webpage i just completed is:
i only know as much HTML and CSS as needed to customize a Neopets webpage at this point.
my goal for taking this course is to be able to redesign my Tumblr blog. the color scheme isnt where i want it to be. not high enough contrast for ppl who rly need the high contrast, and it definitely makes it awful for basically anyone, tbh. not good or accessible.
anyway, by practicing to this webpage, i think im rly hitting two balls with one bat here. or maybe im not actually taking in any of the info at all lol idk
this wont be an exhaustive list of all terms on the page (that would literally be most of the words lol). this is just what i needed to note while writing
Click read more to see my list!
Tags:
here is my workaround for writing the tags:
TKPWA* -> {^ ^}{#shift(comma)}
TKPW*E -> {#shift(period)}{^^}
TKPWA*T -> {#shift(comma)}{^^}
TKPW*ET -> {#shift(period)}
these, combined, can produce:
space <tag>word<tag> space
Additionally:
STKPWA*T -> {^^}{#shift(comma)}{&/}{^^}
STKPW*ET -> {#shift(period)}
can produce:
word</tag> space
Also:
STKPWA*ET -> {#shift(period)}{^^}
can produce:
tag>WordNoSpace
and
tag><NoSpace tag></NoSpace
when combined with TKPWA*T and STKPWA*T
These have been added to my Google doc called legal transcription commands, captioning commands, and punctuation.
Words in my dictionary, but i didn't know/didn't remember how to write:
Words/Briefs:
KRAET -> create
PRAUSZ -> process
PRAUSZ/-R -> processor
WRAZ -> whereas
TKEUFRPBS -> difference
KPAOURTS -> computers
TPH/TWEUGZ -> intuition
PH-LD -> immediately
STRUR -> structure
AEUFPL -> HTML
KPAEL -> exactly
HEU/P-R -> hyper
PHARBG/-P -> markup
WRAPG -> wrapping
KPAPL -> exam
KP-FPL -> example
APBG/-R -> anchor
TKRAESZ -> address
KPEPGZ -> exception
TKPWRAFPGZ -> congratulation
REFR -> refer
REFRD -> referred
TKEBG/HR-RGZ -> declaration
SPOEUF/-G -> specifying
SEBGD -> second
PRAURP -> proper
PRAURPT -> property
PRAURPTS -> properties
KPHOPB -> common
KPHOPBL -> commonly
TPH-FRPL -> inform
TPH-FRGZ -> information
Phrases:
STHAULD -> is that you would
THAULD -> that you would
PHOERPB -> more than
T/PHUB -> it must be
PHUB -> must be
TELT -> tell the
TH-S -> this is
SUFPS -> such as
TAO*GT -> to get
UPBD/-G/-F -> understanding of
HOUT -> how the
WUFT -> one of the
STHAEUR -> is their
TPHOERDZ -> in other words
PW-T -> about the
TPHORD -> in order
Words I had to define myself:
Words/Briefs:
TKAUPLT -> document
PHAOEUBG/SAUFT -> Microsoft
PHAOEUBG/SAUFT/WORD -> Microsoft Word
TKPWAOG/-L/TK*OBG -> Google Doc
TKPWAOG/-L/TKOBG -> Google doc
ET/SET/RU/R-R -> etc.
TK-FRPBS -> difference
PAEUR/TKPWR-F -> paragraph
STKR-PT/-R -> descriptor
STKREUPT/-R -> descriptor
TKE/SKREUPT/-R -> descriptor
KWREPL -> email
KWR*EPL -> e-mail
Phrases:
WRAPB -> where an
W-PB -> within
PHO*EFT -> most of the
These have been added to my trello card for this course.
2 notes · View notes
v2websolutions · 2 years
Text
WordPress Block Editor – How Does It Differ From Classic Editors?
Tumblr media
What Are Content Blocks In WordPress?
According to the official WordPress help website, content blocks are “the components for counting content in the new WordPress block editor.” To make a post and page design simpler, easier, and more flexible via blocks, this editor replaces the Tiny MCE editor used by earlier WordPress versions.
He suggested printing your website and cutting out each piece of content to help you understand the various blocks. For example, it would allow you to see that your headlines, photos, paragraphs, videos, buttons, and other elements are all separate blocks.
Beyond the content blocks listed above, WordPress also provides a broader range of content blocks, including but not limited to:
Gallery
List
Quote
Audio
Custom HTML
Table
Navigation
Template Part
Site Logo
Query Loop
Post Title
Post Excerpt
Post Featured Image
Post Categories
Post Tags
What Makes The WordPress Block Editor Different From The Classic Editor?
First, the classic TinyMCE content editor:
The traditional editor makes me think of Microsoft Word. There is a space for you to type and a formatting toolbar to design your information (bold, italics, etc.).
The new WordPress Block Editor creates material using a block approach. As a result, this WordPress block editor not only looks more professional and contemporary but also lets you:
Add tables (once more, without needing to learn to code or install plugins);
Text and media items may be moved around and combined by simply dragging and dropping them;
Allows to create content columns easily;
Allows to adjust each block’s background hues and font sizes;
Reuse blocks that you often utilize (to save yourself time).
It’s Just the top of the iceberg.
Thus, both editors (WordPress Block Editor and Classic Editor) are distinct.
Types Of WordPress Blocks Editors (And How To Use Them)
Here are all of the block kinds that Gutenberg (WordPress Block Editor) offers, organized by category:
Standard Blocks The fundamental (or “common”) components that individuals frequently utilize in their blog posts are included in this category of blocks. These blocks will be used more often than not by most bloggers and authors.
Paragraph Block The paragraph block is a blank space to type your text. The usual formatting choices include text alignment, font size, background, text colors, drop caps, and more.
Image Block By selecting it from the WordPress media library, uploading it from your computer, or pasting its URL, you may quickly insert a picture into an Image Block. You may add a description, change the image’s size, add alt text, and use the usual WordPress image settings.
List Block You may make an unordered list of items or one with numbers by using a list block (numbered list). Additionally, you may format the text, include anchor links, and create sub-items for each primary item in the list.
Quote Block You may add your favorite quotations in a lovely, elegant way with the Quote Block. After writing the content and identifying the author, format it as a paragraph block. You can choose to utilize a bigger font size or the standard size.
Heading Block You may start a new part of your post with a heading block. There are six header sizes available. The lesser ones may be found on the sidebar to the right of the editor, while the first three are visible inside the block.
File Block You may include any content using File Blocks for your visitors to download, including photos, archives, documents, PDFs, and more. You may select to link to a media file or an attachment from the sidebar, display a download button, and open the document in a new tab.
Video Block You may add videos by using the Video Block. You can choose to mute or autoplay them. You may supply a poster picture for the thumbnail if you don’t want to show the featured capture it gets by default, which is a great option.
Cover Block You may produce a picture or video with text overlay using a Cover Block. It may be used as a header or as the featured picture for a post. Additionally, you may change the background color and opacity.
Formatting Blocks Pull quotes, tables, and verses are among the formatting-focused blocks that fall under this heading.
Code Block If you wish to provide your readers with code sample examples, use the Code Block. The code will show uniquely so that it sticks out to your readers rather than being executed.
Classic Block With a Classic Block, you can add a block resembling the classic editor and its classic formatting options. It’s a small TinyMCE editor inside a partnership.
Table Block Without the need for plugins or HTML coding knowledge, a Table Block makes it simple to insert a table in WordPress. Choose the layout (default or stripes), enter the required rows and columns, and you’re done. After that, you may add rows and columns to the table’s beginning or end with a single click.
Verse Block Verse Blocks allow you to include poetry or music lyrics. Instead of jumping to a new block, as in the paragraph block, when you click enter, it will hop to a new row. As far as you stay in the same league, you can write as many verses as you like.
Custom HTML Block With Custom HTML Blocks, you can write HTML code and quickly preview the changes.
Pull Quote Block With a Pull Quote Block, you may separate off a section of your content that you wish to emphasize into its block. The formatting of a Pull Quote Block sets it apart from a Quote Block. The edges of a Pull Quote Block are colored.
Preformatted Block A Preformatted Block allows you to show the text on the front end precisely as you input it, much like the preformatted text option in the original TinyMCE editor. All the characters in the preformatted text have the same width since it is in a monospaced typeface.
Layout Elements You may use the blocks in this category to make your post more attractive and arrange it visually appealing. It provides building blocks for adding media items, bright columns, and buttons in various colors.
Button Block You may include a button in your post by using a Button Block. Its shape (round, square, etc.), color, and the result of clicking it may all be changed.
Columns Block The Columns Block makes it quick and simple to show your content in columns (newspaper format) rather than in full width.
Media & Text Block In the traditional editor, aligning graphics and text needed some programming knowledge. You may complete it quickly using the Media & Text Block.
Lines And Separators Block As its name suggests, a Lines and Separators Block enables you to insert separators between different pieces of material. It covers things like line breaks and page breaks.
Final Lines
According to the official WordPress help website, content blocks are “the components for counting content in the new WordPress block editor.” To make a post and page design simpler, easier, and more flexible via blocks, this editor replaces the Tiny MCE editor used by earlier WordPress versions.
Also, if you’re looking for any assistance in WordPress, feel free to contact V2 Web Solutions 🙂
I hope this article helps!
3 notes · View notes