Hello everyone! Today we will create ecommerce blog page using HTML CSS & Bootstrap.
This short tutorial will through how to create a simple full-screen loading spinner with HTML and CSS.
-- CHAPTERS --
0:26 The HTML
0:58 The CSS
-- CHAPTERS --
0:25 Inner HTML
2:12 Create Element
4:05 Loading Order
Learn HTML in Hindi & Urdu step by step easy tutorial for beginner to Advanced. In this video i will teach you how you can start designing website or web page using HTML. If you want to learn web programming language HTML then this is the Complete Course For Beginners to start HTML coding, you can start learning HTML at home as this video cover following topics :
00:00:00 Section 1: Introduction to this course
00:08:27 Section 2: Create First HTML File
00:15:52 Section 3: Basic Structure of HTML
00:23:39 Section 4: Doctype
00:28:08 Section 5: Elements and Attribute
00:34:37 Section 6: Indentation
00:38:53 Section 7: HTML Comments
00:41:31 Section 8: Headings
00:45:10 Section 9: Paragraph
00:50:19 Section 10: Formatting
00:58:01 Section 11: Quotation and citation
01:03:22 Section 12: HTML Links
01:09:21 Section 13: Email Links
01:12:20 Section 14: Images
01:15:56 Section 15: Marquee
01:18:18 Section 16: Ordered List
01:23:12 Section 17: Unordered List
01:27:18 Section 18: Description List
01:29:44 Section 19: HTML Table
01:43:50 Section 20: Nested Table
01:46:29 Section 21: Div and Span
01:56:04 Section 22: Iframe
01:59:53 Section 23: HTML Audio
02:03:57 Section 24: HTML Video
02:08:38 Section 25: Embed PDF
02:12:46 Section 26: Embed Youtube Video
02:15:46 Section 27: Embed Google Maps
02:17:14 Section 28: HTML Entities
02:23:13 Section 29: HTML Symbols
02:25:33 Section 30: Emojis in HTML
02:26:57 Section 31: Semantic Elements
02:33:04 Section 32: HTML Image Maps
02:46:24 Section 33: HTML Forms
02:51:47 Section 34: Form Input Types
03:01:43 Section 35: Form File Upload
03:03:51 Section 36: HTML Input Attribute
03:15:15 Section 37: HTML Textarea and image button
03:19:49 Section 38: Select Option
03:25:41 Section 39: Radio Button
03:30:39 Section 40: Checkbox
03:33:32 Section 41: DataList
03:37:47 Section 42: Label, Fieldset and legends
03:45:39 Section 43: SEO Tags
03:53:35 Section 44: Favicon
03:59:08 Section 45: Style in head Tag
04:02:14 Section 46: Script and no script
04:06:00 Section 47: Open Graph and Twitter card Tag
04:12:15 Section 48: Viewport Meta TAg
04:15:27 Section 49: Right to Left Website
04:18:16 Section 50: W3c HTML Validation
In this tutorial i will talk about HTML validation and What is W3C And W3C Markup Validation
The World Wide Web Consortium is the main international standards organization for the World Wide Web. Founded in 1994 and currently led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working together in the development of standards for the World Wide Web.
The Markup Validation Service is a validator by the World Wide Web Consortium that allows Internet users to check HTML and XHTML documents for well-formed markup. Markup validation is an important step towards ensuring the technical quality of web pages.
In this tutorial i will talk about How to RTL (right-to-left) a website and how to use Arabic or Urdu Language in html.
You can convert you website from left-to-right to right-to-left pretty easily than you would have thought it to be. Firstly, you need to change the direction of all the LTR elements to RTL. You can do this by using the dir attribute of HTML. You can edit the html tag to include dir="rtl"
The dir attribute is used to set the base direction of text for display. It is essential for enabling HTML in right-to-left scripts such as Arabic, Hebrew, Syriac, and Thaana. Numerous different languages are written with these scripts, including Arabic, Hebrew, Pashto, Persian, Sindhi, Syriac, Dhivehi, Urdu, Yiddish, etc.
This article looks at basic usage of the dir attribute for structural markup in HTML, at the document level and for elements like paragraphs, tables and forms. For handling bidirectional text with inline markup you should read the separate article, Inline markup and bidirectional text in HTML. It also describes some other elements and attributes related to direction.
In this tutorial i will talk about Viewport Meta Tag. How Viewport Meta Tag Make Website Responsive.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.
Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.
In this tutorial i will talk about What is OG Tag, Open Graph Tags and Twitter card tags for sharing webapge on social media.
What are Open Graph meta tags?
Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. They're part of Facebook's Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent).
Why are Open Graph tags important?
People are arguably more likely to see and click shared content with optimized OG tags, which means more social media traffic to your website.
In this tutorial i will talk about script and noscript tag. How to add script in html webpage.
Noscript tag: The noscript tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.
The noscript element can be used in both head and body. When used inside head, the noscript element could only contain link, style, and meta elements.
In this tutorial i will talk about Style and Link Tag to attach style with html webpage.
Style tag: The style tag is used to define style information (CSS) for a document. Inside the style element you specify how HTML elements should render in a browser. When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.
Link tag: The link tag defines the relationship between the current document and an external resource. The link tag is most often used to link to external style sheets. The link element is an empty element, it contains attributes only. When used for style sheets, the link tag is supported in all major browsers. No real support for anything else.
In this tutorial i will talk about how to Add A Favicon to A Website in HTML and How to generate Favicon.
A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs.
To add a favicon to your Web site, you'll need both an image and a method for specifying that the image is to be used as a favicon. This document explains the method preferred by W3C for specifying the favicon. There is another common method that is illustrated below, with an explanation of why that method is inconsistent with some principles of Web architecture.
In this tutorial i will talk about SEO Tag Which are Title, Meta Description, canonical, keyword, and robots Tag.
Five meta tags to improve the optimization of your site
1. Title tag: The title tag is one of the first things that users notice in the SERPs. It’s the title of your page that offers a preview of what your content is about.
2. Meta description: The meta description is of equal importance to the title tag. If the title tag is the title that appears at the top of a search result, the meta description is the snippet that displays underneath.
3. Robots meta tag: The robots meta tag informs search engines which pages on your site should be indexed. This meta tag serves a similar purpose to robots.txt; it is generally used to prevent a search engine from indexing individual pages, while robots.txt will prevent it from indexing a whole site or section of a site.
4. Canonical tag: If you have pages on your site that are almost identical, then you may need to inform search engines which one to prioritize. Or you might have syndicated content on your site which was republished elsewhere. You can do both of these things without incurring a duplicate content penalty – as long as you use a canonical tag.
5. Keyword Tag: Meta Keywords are a specific type of meta tag that appear in the HTML code of a Web page and help tell search engines what the topic of the page is. Meta keywords are distinguished from regular keywords because they appear “behind the scenes,” in the source code of your page, rather than on the live, visible page itself.
In this tutorial i will talk about HTML Forms Lable, Fieldset and Legend.
The label tag defines a label for several elements.
Proper use of labels with the elements above will benefit:
Screen reader users (will read out loud the label, when the user is focused on the element)
Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the label element, it toggles the input (this increases the hit area).
Group related elements in a form. The fieldset tag is used to group related elements in a form. The fieldset tag draws a box around the related elements.
The legend element is used to add a caption to a group of related form input elements that have been grouped together into a fieldset.
In this tutorial i will talk about HTML Forms DataList.
The datalist element specifies a set of pre-defined options for an input element. It can be used to provide the quick choices for an input field like an "autocomplete" feature. Its not only saves the time of a user but also reduces errors, because the user has less likelihood of making a spelling mistake. The list attribute of the input element is used to bind it together with a datalist element.