HTML 5 – The Brainstorm!

Hello tribe! today we are going to talk about the html tags that go inside the head of the document! Bring out the umbrella because it’s raining brains! halleluyah! 🎼

As we had mentioned so far, in the structure of an HTML document there are two main HTML tags: “head” and “body” . The head tag contains the metadata tags (information about the document) as well as making connections or relationships with other documents and the body tag allows us to display the content.



“Connection” tags:

  • Title : title of the web page
  • meta: where you set data such as the language developed on the page.
  • Script: to load js
  • Style: to load css on the current page
  • Link:In my opinion the most important because it allows to load css, improves SEO, establishes relationships with other pages, or alternative versions of our website etc… It is the Swiss knife of tags!



Examples

<head>
        <title>My cute page</title>
        <meta charset="utf-8">
        <link rel="alternate" href="document-en.html" hreflang="en" /> //create a alternative page
</head>

👁 Script is best placed in the body and Style with a link.



Meta tag:

Perhaps the tag with the greatest number of possibilities in the header of an HTML document is the tag. In it, and through attributes, we can indicate a large amount of metadata to the document.

Meta has the following attributes:

  • description
  • keywords
  • author
  • language
  • generator
  • theme-color
  • viewport

If you want me to go deeper into tags, let me know in the comments! Well tribe that’s all for now, see you in the next post and remember to always be the best version of you!


Source link

Programmatically Rendering PDFs from HTML using Chrome and Puppeteer

I’ve been a web developer for a long time, and one concept that always comes up is turning HTML into a PDF. It’s a pretty natural request; HTML is a nice display oriented format and has great layout and styling abilities. Plus, for a web app, I probably already have code written to produce the exact content I want. I just need to turn that content into a read-only, portable PDF for downloading or attaching to an email, without forcing the user to print to pdf manually.

I’ve used numerous technologies for doing that conversion, including WebSuperGoo’s ABCpdf.net, and Rotativa’s free library. (We even have an article on how to use it.) The latter is still in use on some of my projects, but it—and its newer .Net Core version—is based on wkhtmltopdf.exe, which is a problem. More about that later.

Most of these tools work by using a browser to render the HTML and create the PDF document. The browser engine already knows how to render HTML (and use CSS and JavaScript), so why reinvent the wheel?

The issue with wkhtmltopdf—and any tool that uses it—is that it’s based on the WebKit rendering engine used by Safari. If you haven’t heard, WebKit is the new Internet Explorer in terms of holding back standards adoption and preventing us from having nice things. Okay, yes, that’s bombastic hyperbole, but I’ve honestly run into more than my fair share of styling and layout issues in which wkhtmltopdf just won’t render like all other browsers will. Maybe that’s a function of wkthtmltopdf, rather than WebKit itself, but still, my problem remains in search of a solution.

The latest solution I’ve found is Puppeteer. It’s a Node.Js package that manipulates a headless (i.e. no browser window) version of Chrome. Chrome updates frequently, supports good standards, and renders well. The PDF output from Puppeteer matches pretty exactly with the output you would get using Chrome to print to a PDF manually.

Puppeteer supports great options like headers and footers (with template content for “Page N of X”), control of print margins, printing background images, different page sizes, and more. Since you are rendering in a real browser, you can even use JavaScript to generate dynamic content as needed.



Implementation Details

Step one is to generate your HTML. There are two ways to do this; you can point Puppeteer at a URL or at a local (temp) file with HTML. The former might be convenient, but only if your web application allows anonymous access to the URL you want to print. That’s not usually the case for me, so I often end up with the local file route. The only catch there is to make sure any resources like CSS files or images you reference are publicly accessible—and that your HTML has the full URLs for them (or a element in the head to specify the base URL for relative requests).

Step two is to call Puppeteer and tell it what to print, what options, and where to put the output PDF.

Step three is simply to wait for Puppeteer to finish rendering, grab the bytes of the file and send it to the response pipeline. Clean up your temp files, and voila!



The Gory ASP.Net details

Step two above was leaving a lot unsaid! How do I actually call a Node.Js package from my Asp.Net web application? Here are the steps I took, which are about the same for Asp.Net or Asp.Net Core (though a little easier in the latter).

  1. Install Node.JS on the webserver. You’ll be running a node “application” there now, so you’ll need it. You’ll also need it on your development machine, but you might already have it since it’s a part of a lot of build tool chains now.

  2. Create a folder in your project and on the server that will host the new node scripts.
    This folder should be outside of the web application; it doesn’t need to be served by your web server, so it shouldn’t be web accessible.

  3. Use npm to install Puppeteer and any other packages you need in that folder (separate from any npm packages you use elsewhere in your project). I do this on my dev machine. Then I copy the package.json (and package-lock.json) to the server folder and “npm install” there. I don’t deploy the node_modules folder, though I guess you could, instead of deploying package.json. Be aware that the modules needed for Chrome are 200+MB, so you don’t want them in your source repository!

  4. Write a simple JavaScript file that exports a function that runs Puppeteer with whatever inputs you want.
    The Puppeteer project has some samples that can serve as a starting point for this code.

  5. Now the tricky part is calling that script from ASP.Net!
    I used AspNetCore.NodeServices to manage the Node.js executable instance. Despite the name, older versions of that library run fine under Asp.Net (non-core), though it has an embarrassing number of dependencies. (Annoying, but worth it in my case.) If you are using this from Asp.Net Core it’s pretty straightforward. From the older Asp.net platform you’ll need to jump through some small hoops to setup dependency injection, but they aren’t too difficult (aside from your learning curve if you aren’t familiar), and don’t need to impact the rest of your codebase.

  6. That library has a nice simple method to invoke your script and wait for it to finish. One gotcha is that your script function should take a “callback” function as the first argument. The function should call this with either an error or the success results like so:

//AddNumbers.js

module.exports = async (callback, a, b) =>

var rv = (parseInt(a,10) + parseInt(b,10)).toString();

callback(null /error/, rv /success/);

;



Summary

I find needing to install node.js on the server and the concept of having a separate node.js “application” deployed and running on the server, separate from my web application, to be a strange architecture.

It’s not that much worse than wkhtmltopdf solutions though, since they also need a large separate application to be deployed to the server. Those solutions just hide the complexity better through wrapper libraries.

Even if more complex, the results of this Node.js/Puppeteer/Chrome solution are worth it! I can use modern layouts and CSS (e.g. flexbox) to create PDFs that look as good as the browser. And PDF generation speed is fast! Since Chrome updates frequently, I expect that this will be a solution I can support for years to come.

_This is a technical/business article catered to developers, hiring/project managers, and other technical staff looking to improve their skills. Sign up to receive our articles in your email inbox.

If you’re looking for a job in the tech industry, visit our job board to see if you qualify for some of our positions. If you’re looking to hire technical talent for your company, please contact us.

Stout Systems is the software consulting and staffing company Fueled by the Most Powerful Technology Available: Human Intelligence®. We were founded in 1993 and are based in Ann Arbor, Michigan. We have clients across the U.S. in domains including engineering, scientific, manufacturing, education, marketing, entertainment, small business and robotics. We provide expert level software, Web and embedded systems development consulting and staffing services along with direct-hire technical recruiting and placements._


Source link

How to create a two-column layout with HTML & CSS (YouTube Clone – part 1)

Welcome to this lesson which is a part of a series of tutorials to build a YouTube Clone unlike what you have seen before.

In this lesson, we are going to discuss how to make the layout of our YouTube clone project with HTML and CSS and you are going to learn how to make a two-column layout.

If you have been struggling to build a real website with HTML & CSS, you’re so lucky to be reading this because I am about to teach you to do it step by step to reduce your struggle.

Just wait: If you’re a total beginner and you can’t operate computers properly, please check out the video below to learn everything you need…


If you know me very well, you would have known I am an advocate of breaking things up into sections, sub-sections and components. So, we have to break this YouTube clone into smaller units and we’re going to be building each of them step by step.

In this YouTube clone, the website has about 6 units:

Youtube clone

  1. Header: It contains three sections (left, center and right). The left section contains the logo and menu; the center section contains the search box and an icon, while the right section contains navigation icons. The icons have a similar element, which means, we design an icon element; then, copy, paste and edit it to create others.

  2. Main: It contains two sections (sidebar and content). The navigation links in the sidebar are also similar, so they are just one thing. The same thing happens to the videos in the content section.

So, it has a header, main, sidebar, content, video-card, navigation link and navigation icon as the major units. That is the breakdown of the units of the web page we want to create.

The first thing we have to do is create the layout structure of the YouTube clone with HTML as in below:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <!-- CSS File -->
    <link rel="stylesheet" href="styles/index.css" />
    <title>Youtube Clone with HTML & CSS</title>
  </head>
  <body>
      <header class="header">.</header>
      <main>
          <div class="side-bar">.</div>
          <div class="content">.</div>
      </main>
  <!-- Main Body Ends -->
</body>
</html>

In this lesson, I assume you have an understanding of how to use HTML meta tags and how to link a CSS file. If you don’t, learn more about it later in the video I added above. But you don’t need to understand them for what we are learning in this lesson, so keep on reading.

We have a header tag to create the header section of the YouTube clone. YouTube logo, search box and other navigation icons will be added to the header later.

There is also the main section that contains side-bar and content. The side-bar will contain some navigation links while the content will contain videos. So, that is it for the structure with just HTML.

Then, let’s add CSS to it to really create a YouTube layout.

Here is the CSS step by step:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

Let’s start with “import url(‘path’)…What does it do? It is used to link to the Google font called Roboto so that we can use it as the font of our website.

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;

The (*) is CSS selector that selects all HTML tags on our page and we set their margin and padding to 0; We finally set their box-sizing to border-box. Why do we do that?

We want width or height, border, margin and padding to be sum up to be the total length. This is what I meant. In css, if a box has width of 100px and padding of 10px, the width of the box will now be 110px

but we don’t want that, we want everything to be 100px. Width should still be 100px including the margin of 10px instead of making it 110px. That is what box-sizing: border-box does.

Note: when you’re using it, you will understand better but that gives an insight a beginner can quickly relate with.

body 
  font-family: 'Roboto', sans-serif;

We select the body tag and set it font-family to Roboto and use sans-serif as a fall-back in case Roboto is not available.

/* header section*/
.header 
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 15px;
  

.header class name is used to select (or connect to) the header section of our website so that we can add some styles to it. We set its display property to flex to create a layout out of it and then, we can easily divide it into sections. We will divide it into sections later.

Justify-content: space-between means we want the contents in the header to have space between each other once they are more than one.

Align-items: centre is used to move all the contents of the header to the centre-left of your screen. That is called vertical alignment. We finally set the height of the header to 60px and its padding to 15px. Do you know what padding is? Well, we will talk about it later.

main 
    height: calc(100vh - 70px);
    display: flex;
    background-color: #f9f9f9;
  

We set the height of the main section to calc( 100vh - 70px)…What does it mean? V stands for a viewport which is the visible part of a window’s screen without scrolling while “height” means vertical length and we may also use “w” which means width – horizontal length. In short, 100vh means the total height that is visible in a browser without scrolling. And we use calc ( 100vh – 70px) to run a calculation that subtract 70px from 100vh.

We set its display property to flex to create a layout out of it. Finally, we set its background colour to #f9f99f which is a kind of silver or ash.

/* Sidebar */ 
.side-bar 
    height: 100%;
    width: 17%;
    background-color: white;
    overflow-y: hidden;
   

The height of the .side-bar is set to 100% of its parent. That means it will have the same height as its parent. Its width is set to 17% of its parent and background colour set to white. Hey! What is overflow-y: hidden? When Twitter loads 10 tweets at once, you can’t see everything at once and you have to scroll, right? In this case, we hide the scroll bar. Gracias!

@media (max-width: 768px) 
    .side-bar 
      display: none;
    
  

This media query is used to make a website responsive on mobile, tablet and desktop. When the YouTube clone is on a device whose screen is less or equal to 768px (e.g mobile & tablet), the sidebar will disappear. Also, max-width: 768px means such device’s screen can be less or equal to 768px.

Yeah, we have built the layout of our YouTube clone. Below is the result…next time, we will add some other things. See you soon.

youtube clone layout.PNG



One more thing

Learn more by joining one of the groups below:

Discord:
https://discord.com/invite/Ef5Sqd2w

Telegram:
https://t.me/+HEUn1Y-ME6GW9ssD


Source link

A11y tips: hide content from screen readers

If you want to hide content for screen readers but still be available to sighted or keyboard users, just use aria-hidden="true".

A classic example where it is useful is to hide icons that serve as visual support for a text:

<style>
  .icon-star: before content: "★"; 
</style>

<span>
  <span class="icon-star" aria-hidden="true"></span>
  Favorite
</span>

In this way the icon that we insert with CSS only appears for sighted users, while screen readers will announce only “Favorite“, instead of “Black Star Favorite“.

It is best to avoid using this ARIA attribute on focusable elements, as being able to receive focus but hiding from screen readers can cause confusion for their users. You could use a tabindex="- 1" to avoid focus but then it would be out of use for sighted keyboard users.

This and other tips on the use of aria-hidden="true" can be found in the already named article by Scott O’Hara, and on the use of icon fonts in the article by Zach Leathermann, from which the example is taken.


Source link

Finding Remote job/intern Front-End Developer

Hi! Assalamu Alaikum! I am Israt Zahan Sathi. I am a MERN Stack Web Developer and have great experience in Front-end development. I build user-friendly, responsive websites and maintain all the following parts like Security, Performance, User friendly, Proper maintainability code.

  • I am currently studying Computer Technology at Dhaka Mohila Polytechnic Institute, Dhaka, Bangladesh. I love learning anything computer related.

  • I can work with HTML5, CSS3, Bootstrap, Tailwind, JavaScript, ES6, React JS, React Router Dom, API, Material-UI, Node-JS, Express-JS, MongoDB, Firebase for Authentication etc.
    My tools include GitHub, VS Code, Chrome Dev tool, Microsoft Edge, Heroku, Netlify.

  • I have no experience working in any organization, but I have done a few projects for learning. But I have confidence that with the above technology I can do any project.

  • InshaAllah

  • My Resume https://drive.google.com/file/d/1NTxWflQBfqCn6YRumOJYAXGkGfBIS2kN/view?usp=sharing


Source link

How to sanitize your urls in angular

Project: codeverFile: backup-bookmarks-dialog.component.ts

On Codever you can backup your bookmarks and snippets. When backing up you are presented a dialog where you can choose to display the items in browser. For that we use a blob URL we know for sure it is safe.

To not get the unsafe prefix in your generated html I use the DomSanitizer and its method bypassSecurityTrustUrl as shown in the example below:

export class BackupBookmarksDialogComponent implements OnInit {

  backupType: string; // 'bookmarks' | 'snippets';
  blobUrl: any;
  sanitizedBlobUrl: any;
  filename: string;

  constructor(
    private dialogRef: MatDialogRef<BackupBookmarksDialogComponent>,
    private router: Router,
    @Inject(MAT_DIALOG_DATA) data,
    private sanitizer: DomSanitizer
  ) 
    this.sanitizedBlobUrl = 
    this.sanitizer.bypassSecurityTrustUrl(data.blobUrl);
    this.blobUrl = data.blobUrl;
    this.backupType = data.backupType;
    const currentDate = new Date();
    this.filename = `$this.backupType_$currentDate.toISOString().json`;
  

In the html component the sanitizedBlogUrl is injected in the href attribute of the a html element

  <a [href]="sanitizedBlobUrl" [download]="filename" type="button" class="btn btn-primary btn-sm mr-2" (click)="download()"><i class="fas fa-download"></i> Download
  </a>


Reference –

https://angular.io/api/platform-browser/DomSanitizer

Shared with ❤️ from Codever. Use 👉 copy to mine functionality to add it to your personal snippets collection.


Source link

30 HTML Interview Question

Disclaimer: All 30 questions are taken from tweet of @eugZolotarenko, if you are not following, the please follow him. You can also follow me @imknitesh. I really liked all this questions and wanted to have a single place where I can also look up for the answer for the same.

Question Tweet link: https://twitter.com/eugZolotarenko/status/1472555078246711301

1. What is HTML?

HTML is the standard markup language for creating Web pages. It stands for Hyper Text Markup Language. It describes the structure of a Web page. It tells the browser how to display the content. HTML consist of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.

2. What is the purpose of using HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

  • Publish online documents with headings, text, tables, lists, photos, etc.
  • Retrieve online information via hypertext links, at the click of a button.
  • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
  • Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

3. What are the advantages and limitations of HTML?

Advantages :

  • HTML is widely used.
  • Every browser supports HTML Language.
  • Easy to learn and use.
  • HTML is light weighted and fast to load.
  • Do not get to purchase any extra software because it’s by default in every window.
  • Easy to use
  • Loose syntax (although, being too flexible won’t suit standards).
  • HTML is easy enough to write
  • HTML is that it is easy to code even for novice programmers.
  • HTML also allows the utilization of templates, which makes designing a webpage easy.
  • Very useful for beginners in the web designing field.
  • HTML can be supported to each and every browser, if not supported to all the browsers.
  • HTML is built on almost every website, if not all websites.
  • HTML is increasingly used for data storage as like XML syntax.
  • Free – You need not buy any software.
  • HTML is present in every window by default so you not need to buy the software which cost too much.
  • HTML has many tag and attributes which can short your line of code.

Disadvantages :

  • It cannot produce dynamic output alone, since it’s a static language.
  • Making the structure of HTML documents becomes tough to understand.
  • Errors can be costly.
  • It is the time consuming as the time it consume to maintain on the colour scheme of a page and to make lists, tables and forms.
  • It can create only static and plain pages so if we’d like dynamic pages then HTML isn’t useful.
  • Required to write a lot of code for just creating a simple webpage.
  • Security features offered by HTML are limited.
  • If we need to write down long code for creating a webpage then it produces some complexity.
  • HTML can create only static and plain pages so if we’d like dynamic pages then HTML isn’t useful.
  • Security features are not good at HTML.

Read More

4. How can we integrate JS into an HTML document?

You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code.

The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.

Generally, JavaScript code can go inside of the document <head> section in order to keep them contained and out of the main content of your HTML document. However, if your script needs to run at a certain point within a page’s layout — like when using document.write to generate content — you should put it at the point where it should be called, usually within the <body> section.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>
<body>
</body>
</html>

5. How can we integrate CSS into an HTML document?

You can add CSS to an HTML document in three ways

  • Inline CSS: Requires the style attribute placed inside an HTML element.
    <element style="CSS property: value">
  • Internal CSS: Requires the <style> element placed inside the head section of an HTML file.
  • External CSS: Requires the <link> element placed inside the head section of an HTML file.

6. What is a Tag in HTML?

An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML element in an HTML document.

As part of an HTML element, HTML tags help web browsers convert HTML documents into web pages. For example, the <p> tag is used to organize text content into paragraph elements and the <img> tag is used to embed image elements.

Many tags, though not all, use an opening tag and closing tag to wrap around the content that they are used to modify. Closing tags are denoted with a backslash like this: </tag_name>. HTML tags are not visible in the browser.

7. What is the difference between HTML Elements and Tags?

Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element, as you can see in the above illustration.

However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag is an element is a tag. For simplicity’s sake of this website, the terms “tag” and “element” are used to mean the same thing — as it will define something on your web page.

8. What are Attributes and how do you use them?

Attributes are used to provide additional information about a specific element on an HTML page.

Attributes are specified in the opening tag of an HTML document and are usually specified in a name/value pair. For instance, an attribute called name with the value value would appear like this: name=value.

9. What semantic elements do you know?

Listed below are few semantic elements

Header tags <h1> through <h6>
<blockquote>
<code>
<em>
<header> defines a header for the document or a section
<footer> defines a footer for the document or a section
<nav> defines navigation links in the document
<main> defines the main content of a document
<section> defines a section in the document—the spec defines this as “a thematic grouping of content, typically with a heading,” so you can think of it as being like a chapter
<article> defines an article in the document
<aside> defines content aside from the page content
<address> defines the contact information for the author/owner of a document or an article
<figure> defines self-contained content, like illustrations, diagrams, photos, code blocks, etc.

There are many more semantic HTML tags to use as you build a standards-compliant website.

10. Why should we use semantic elements?

Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance. Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content.
Perhaps the greatest advantage that semantic markup offers is that it allows search engines and crawlers to better understand the content they’re scraping. While there is no evidence that the use of this markup directly affect page rank, it can make your results stand out more.

11. What do you know about HTML Entities?

From MDN
An HTML entity is a piece of text (“string”) that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard.

For e.g., &lt;, &gt;, &amp;
Official Character List

12. What HTML formatting tags do you know?

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<s> - Incorrect text
<sub> - Subscript text
<sup> - Superscript text
<h1...h6> - Header

More html formatting tags

13. When to include JS code in the head and when in the body?

<script> tags are run when the browser encounters them when loading the page. The <head> can’t contain content for the page, it can only contain meta-information (titles, descriptions, etc), styles and scripts. Therefore if you place a <script> tag in the <head>, you are ensuring that it is run before the browser has started loading the content of the page (which must go in the <body>).

If you want to manipulate the content of the page, you need to make sure your script appears after the content you are manipulating. This is why put scripts at the end of the <body>.

The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.

The <script> tag inside the <head>tag usually makes the html page loading slower. This is because the html parser is loaded first and as soon as it encounters <script> it has to load the JavaScript interpreter first and then after the script is loaded it has to return back to the html parsing. This wastes some time.

Instead putting it after the <body> tag first lets the parser to load the html content first and then start loading the script. Thus here there is only one switching b/w the parser and interpreter. Thus, this approach is better.

14. What Inline elements in HTML do you know?

List of inline element

<a>
<img>
<span>
<button>
<img>
<input>

15. What block elements in HTML do you know?

List of block elements

<div>
<article>
<aside>
<footer>
<form>
<li>
<ul>
<p>

16. What is the difference between block and inline elements?

From MDN: The basic conceptual differences between inline and block-level elements:

Content model
Generally, inline elements may contain only data and other inline elements. You can’t put block elements inside inline elements.

Formatting
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).

Further Reading

17. What is the difference between figure tag and img tag?

The <figure>tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%" />
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

  • src – Specifies the path to the image
  • alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"

Read Pluralsight blog

Read More

18. Why do we need “alt” in the img tag?

The alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

<img src="img_girl.jpg" alt="Girl in a jacket">

19. What input types do you know?

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Note: default input type is text

Read More

20. What ways of optimizing website assets loading do you know?

  • Make fewer HTTP requests
  • Use a Content Delivery Network
  • Add an Expires header
  • Gzip components
  • Put CSS at the top
  • Move scripts to the bottom
  • Avoid CSS expressions
  • Make JavaScript and CSS external
  • Reduce DNS lookups
  • Minify JavaScript
  • Avoid redirects
  • Remove duplicate scripts
  • Configure ETags

21. What is the difference between “class” and “id”?

Read on CSS-Tricks

22. What type of lists do you know?

  • Ordered lists <ol>
  • Unordered lists <ul>
  • Description lists <dl>

Read More

23. How to create a nested webpage in HTML?

Nested webpages cane be created using

  • Using <iframe> tag
  • Using <embed> tag

Read More

24. What is an image map?

From W3School
The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" />

<map name="workmap">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Computer"
    href="computer.htm"
  />
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm" />
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm" />
</map>

25. What is the use of a span tag?

From MDN The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

26. What is the difference between HTML and XHTML?

HTML is short for Hypertext Markup Language. It is used to create websites and web applications. Let’s break it down, so we understand the name better:

Hypertext: Hypertext refers to the “text wrapped within a text.” It is very similar to hyperlinks and contains an underlying text that, when clicked, redirects to a new webpage.

Markup language: A markup language is not necessarily a programming language. Instead, it is used to apply formatting and layout to a simple text document. This leads to more interactive and dynamic text content.

What is XHTML?

  • XHTML stands for Extensible Hypertext Markup Language
  • XHTML is almost similar to HTML but it is stricter than HTML
  • It is swift, accurate, easily maintained, convertible, and formatted
  • All major browsers support XHTML

Read on W3School

27. What are logical and physical tags in HTML?

Physical tags: Physical tags are used to indicate that how specific characters are to be formatted or indicated using HTML tags

<sup>  Superscript is usually used for showing elements above base-line
<sub> The subscript is used for alternate baseline.
<i> An Italic tag is used to define a text with a special meaning.
<big> Big tag increase the font size by 1 (Note: You can not use the big tag in HTML 5)
<small> A small tag defines the small text, and it is used while writing copyright.
<b> Bold increases the importance of the text because bold tag covert the text into bold size.
<u> It is used to underline the text.
<tt> Teletype text gives the default font-family which is monospace.
<strike> It is an editing markup that tells the reader to ignore the text passage.

Logical Tags: Logical tags are used to tell the browser what kind of text is written inside the tags. Logical tags are also known as Structural tags because they specify the structure of the document.

<abbr> Defines the abbreviation of text.
<acronym> Defines the acronym.
<address> Contact information of a person or an organization.
<cite> Defines citation. It displays the text in italic format.
<code> Defines the piece of computer code.
<blockquote> Defines a long quotation.

Read More

28. What are forms and how to create forms in HTML?

HTML Form is a document which stores information of a user on a web server using interactive controls. An HTML form contains different kind of information such as username, password, contact number, email id etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons etc. Using these elements the information of an user is submitted on a web server.
The form tag is used to create an HTML form.

<form>
  Username:<br />
  <input type="text" name="username" />
  <br />
  Email id:<br />
  <input type="text" name="email_id" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

29. What is the usage of a novalidate attribute for the form tag?

The novalidate attribute in HTML is used to signify that the form won’t get validated on submit. It is a Boolean attribute and useful if you want the user to save the progress of form filing. If the form validation is disabled, the user can easily save the form and continue & submit the form later. While continuing, the user does not have to first validate all the entries.

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email" /><br /><br />
  <input type="submit" />
</form>

30. What is SVG? Can we use it inside an HTML document?



What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • Every element and every attribute in SVG files can be animated
  • SVG is a W3C recommendation
  • SVG integrates with other W3C standards such as the DOM and XSL

Yes SVG can be use inside HTML documents. e.g.,

<!DOCTYPE html>
<html>
  <body>
    <h1>My first SVG</h1>

    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="green"
        stroke-width="4"
        fill="yellow"
      />
    </svg>
  </body>
</html>



SVG Code explanation

  • An SVG image begins with an <svg> element
  • The width and height attributes of the <svg> element define the width and height of the SVG image
  • The <circle> element is used to draw a circle
  • The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle’s center is set to (0, 0)
  • The r attribute defines the radius of the circle
  • The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green “border”
    The fill attribute refers to the color inside the circle. We set the fill color to yellow
  • The closing </svg> tag closes the SVG image

Note: Since SVG is written in XML, all elements must be properly closed!

Huge thanks to Eugene, for creating this questions. Answers has been sourced from well known websites like MDN, w3schools & GeeksForGeeks

CoverPhoto by Jackson So on Unsplash




Source link

How to toggle dark mode

Hi all. In this post, I’ll show you how to create a toggle button to switch between dark and light mode.



HTML

<!DOCTYPE html>
<html lang="en" data-theme ="light">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>

    <title>toggleDark</title>
</head>
<body>

    <div class="toggle-container">
        <input type="checkbox" id="toggle" name="toggle">
        <label for="toggle"></label>
    </div>

    <h1>Long Live Rock 'n Roll</h1>
    <p>Rock and Roll ain't noise pollution!
Rock and Roll will never die!
I like that old time Rock and Roll!</p>

</body>
</html>



CSS

*
    box-sizing: border-box;


body
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;

    min-height: 100vh;
    flex-direction: column;
    padding: 5rem;
    transition: background 0.4s linear, color 0.4s linear;
    font-size: 2rem;


body.dark
    background: #201e1e;
    color: white;


label
    user-select: none;
    cursor: pointer;
    background-color: #201e1e;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    transition: background 0.4s linear;


body.dark label
    background-color: #ffff;


.toggle-container
    position: fixed;
    top: 10px;
    right:10px


input
    visibility: hidden;



Javascript

const toggle = document.getElementById("toggle")

toggle.addEventListener('change', (e)=>
document.body.classList.toggle('dark',e.target.checked)

) 



Final Result

I hope you find this tutorial useful. See you on the next article.
Here’s the Source Code on GitHub
Here’s the YouTube Video where I code it from scratch.
Check it out on CodePen

Follow me on




Source link