HTML5  COMPLETE  GUIDE IN ALL LANGUAGES 2021

HTML5  COMPLETE GUIDE IN ALL LANGUAGES 2021

What you read on this page:

• Introduction to HTML (HTML)
• HTML history (HTML)
• HTML (HTML)  How does it work?
• HTML features (HTML)
• Advantages and disadvantages of HTML (HTML)
• HTML Application (HTML)
• HTML Structure (HTML)
• HTML connection (HTML)  with  CSS  and JavaScript
• HTML code Editors (HTML)
• HTML example (HTML)

Introduction to HTML (HTML)

Hypertext Markup Language or  HTMLbriefly, is a standard markup language designed to display in a Web browser. Technologies such as CSS  and scripting languages such as JavaScript can be used. Web browsers receive HTML documents from a Web server or from local storage, and provide documents on multimedia Web pages. HTML  describes the structure of the Web page in a sense, and it essentially inserts signs to appear. HTML is a web design language  , and all the page codes, either the server side, and the client side are finally converted to  HTML codes and are displayed by the browser. To note that  HTML is not an arithmetic programming language.

HTML elements are the structural blocks of  HTML pages . With  HTMLelements, images and other objects, such as interactive forms, can be embedded in the presentation page. HTML  provides a means to create structural documents by showing the syntax meaning for text such as titles, paragraphs, lists, links, quotes, and more.  HTML elements are mapped by tags, which are written using angular brackets. tags such as  < IMG/>  and  < input/>  directly enter the content. Other tags like  < p >  Surround information about the document's text and may have other tags as sub-elements in encompass. Browsers   do not display HTML tags, but they are used to interpret the content of the page.

HTML can embed apps that are written in scripting language such as  JavaScript  , which influences the behavior and content of Web pages. The inclusion of the CSS specifies the display and layout of the content. The World Wide Web Consortium  (W3C), former  HTML guard  and the current holder  of the CSS standards, has encouraged the use of the CSS  to   provide an explicit presentationsince 1997   .

Video Player

00:00

00:00

HTML  and  HTML5 Differences

HTML5 is the newest version of the Web programming language, which has many changes over its previous versions. HTML5  has new features and features that simplify the work for web designers. Including these features can be pointed to the design of objects in two-dimensional form or playback of audio and video files without the need for side software.

New changes to HTML5

Typing Doctype  in  HTML  has been very simplified. DOCTYPE is  a command that represents the version used by  HTML  . In fact , the doctype is not an HTML  code . How to encrypt  (charset)  in  HTML5  is much easier. The most interesting new elements in  HTML5  are: Semantic elements such as  header,footer,article  and  section  have new form control attributes such as  number,date,time,calendar  and  range  of new graphics elements, such as  canvas  and  svg , new multimedia elements such as  audio  and  video  in the Support Section  HTML5  will explain to you how to update old browsers to support  HTML5 codes . Major browsers such asInternet Explorer,  opera,  firefox,  Chrome,  Safari have added new HTML5 features in their newer versions.

HTML history (HTML)

In 1980, Tim Berners-Lee physicist,  inquirecontractor, proposed a system for  CERN researchers to use and share documents. In 1989, Berners Lee wrote a note on the Internet-based hypertext system. Berners Lee revealed HTML  and in late 1990 the software wrote the browser and server. In that year, Robert Kalor engineer CERN Data System  , shared a joint request for funding, but the project   is not formally approvedby CERN.

The first description was publicly available from HTML, a document called  "html Tag",  which was first mentioned in late 1991 by Tim Berners Lee on the Internet. 18 elements include basic and relatively simple  HTML design . Apart from the hyper-link tag, these were heavily influenced by  sgmlguid, the internal standard-based document form  (SGML)  in  CERN  . There are eleven of these elements still in  HTML 4  وجود دارد.

HTML is a markup language that Web browsers use to interpret text, images, and other content in visual or audible Web pages. The default features for each item are defined by HTML markup in the browser and with the additional use of  CSS  by the Web page designer can change or enhance these features. Many html elements are found in the technical report  ISO 955 9537  techniques of using  SGML  , which in turn features basic text formatting languages, such as those that are prepared by the  runoff command used in the early 1960 decade for  ctss  تهیه شده است.

Berners Lee HTML is considered the application of SGML  . This work is formally defined by the  Task Force  Internet Engineering  (IETF)  with the release of the mid-year 1993 first offer for  HTMLspecifications, by Berners Lee and Dan Conley, which includes the definition of the type of document  SGML  to define grammar. This draft was expired after six months, but because the  NCSA Mosaic Browser Custom tag confirmation was significant for embedding inline images, and this reflects the IETF philosophy of the   Standard foundations of successful prototypes. After the expiration of the draft HTML  and  + HTML  in early 1994,  IETF  created an  HTML  Workgroup, which completed the 1995 "HTML 2.0" in the years , the first  HTML profile is intended to be used as a criterion based on which future implementationswere based.

Further development was halted under IETF supervision by rival interests. Since 1996, the HTML profile  with inputs from commercial software vendors has been preserved by the World Wide Web Consortium  (W3C)  . However, in 2000 years,  HTML also became an international standard. HTML 4.01  was released in late 1999, and its other uses were released until 2001. In 2004, development in  HTML5 was started in the Working Group  WHATWG , which was delivered to the W3C  in the year 2008 and was completed and standardized in 2008.

HTML (HTML)  How does it work?

HTML is used to describe the visual appearance of the داکیومنتی that are displayed by an Internet browser.  HTML documents are made up of directory tags that act to describe a direct visual appearance of a Web page or provide a guideline, such as inserting images or linking to another Web page in a document.  HTML documents are stored in text format and are designed to be viewed or edited in any operating system that is able to connect to the Internet. XHTML  refers to the newest version (s) of HTML definition,  which is designed to use the rules of defining the markup language and syntax to allow web developers to continue to advance Web page Progress.

What are the required parts of an HTML page ?

HTML documents are defined with tags that include an open and closed tag. All HTML documents   must have HTML  and  BODY  . tags in order to display in a Web browser, tag. Other common tags in  HTML pages include document tags  HEAD,  TITLE  and  P  (paragraph). For example:

HTML<>

<HEAD>

<TITLE>My Top Bits Web Page</TITLE>

</HEAD>

<BODY>

<H2>Page Heading</H2>

<P>My First Web Page paragraph</P>

</BODY>

</HTML>

Html < tags >  in the example code, this document specifies the page type from  THE HTML type. < HEAD tag >  contains a  < TITLE tag >  that is displayed at the top of a Web browser, and it can also include  Javascript  and other meta data information for the Web page. The  < BODY tag >  contains visible information in the  HTML document, and contains a title tag  < H2 >,  and defines a new paragraph tag  < P >  . Although an  HTML page can be displayed without all the tags with the pack of ice cream, but it is not a document, and if all the tags are closed, it may contain display errors. مشخص می کند. تگ

How does HTML  insert images?

Browsers are designed to embed images in GIF,  JPEG  or  PNG format , with the latest browsers, as well as the   تصویب  W3C Adoption Format for display support. HTML code   in order to display the correct image on the webpage, it offers the image reference that is stored in a Web server along with the size and other meta data. If the image cannot be retrieved from the Web server, the alternate display information is included in order to provide a text display or alternative information for those who are not able to view images. One of the most common tags used to display images in  HTMLdocuments,  < IMG tag is >  . For example, to insert the image in the previous example, add the following line of HTML code between the < BODY >  tags , open and close.  :

< IMG SRC = "http://halşxy.." alt = "My test image" >

The image code will attempt to recover the image and display the "My test image" text to the end userif the image could not be downloaded for viewing.

How does HTML link connect to webpages?

One common aspect of HTML documents  is too much communication to other Web pages or resources available on the Internet.  HTML tags used to link to another page are anchor tags ,  < A >. In between the flyer and closing anchor tags, you provide the text or image of the Web address for example:

< A href = "http://www.hallu.xyz" > Top Bits </A >

This word shows the words  "Top Bits" , which can be displayed to open a new window in your Web browser to display the top Bits Web page . The  hrefattribute is used to provide the URL  for the resource that is associated with the anchor tag statement.

Who controls HTML Tag definitions ?

The Global Web Consortium, Or W3C, is an international community with participating member organisations that work to develop and implement web standards. A common problem in the early use of the Internet was the lack of consistent standards for how to interpret and display Web pages. This has led to the end user's inconsistent quality and increased industry costs for scheduling pages for several web browsers. the W3C HTML Workgroup is designed to provide recommendations about the next versions of  HTML (or  XHTML) as international standards and by web browser companies, with industry and the university.

HTML features (HTML)

• Web workers:  Some Web applications use heavy scripts to perform functions. Web Workers  Use separate background themes for processing, and this has no effect on the performance of a Web page.
• Video:  You can embed the video without third-party proprietary plugins or codecs. The movie is easily embedded in the image.
• Canvas:  This feature allows a web developer to offer graphics on the fly. Like the movie, there's no need for a plugin.
• Application caches:  Web pages start to save more and more information locally on a visitor's computer. It works like cookies, but where cookies are small, the new feature allows for much larger files. Google Gears  is an excellent example of this feature.
• Geolocation:  Moving area known for use on mobile devices has  HTML5  است.

Advantages and disadvantages of HTML (HTML)

Advantages of HTML:

• The first advantage is that it is widely used.
• Each browser Supports HTML language.
• Easy to learn and use.
• By default it is in every window, so you don't need to purchase additional software.

HTML Disadvantages:

• It can only create static and simple pages, so if we need dynamic pages, HTML  is not useful.
• You need to write lots of code to create a simple Web page.
• The security features in HTML  are not good.
• If you need to create a long code to create a Web page, it will create complexity.

HTML Application (HTML)

Below are thetop 10 List of HTML applications:

• Web Development:  the  HTML  is heavily used to create pages that are displayed on the World Wide Web. Each page contains a set of  HTML tags including communication links that are used to connect to other pages. Every page we are seeing is written around the world, using the HTML code version   نوشته شده است.
• Creating Web Documents:  Creating documents on the Internet   is governed by HTML and its main concept is inserted through tags and  DOM, HTML tags,   before and after or phrases, to format and place them on the page. The Web document contains three sections  of title,Header  and  Body  . The title contains information about the identification of the document, including the title and other other important keywords. Title  is viewed in the browser bar, and the  Body Part is the main visible part of the website for the viewer. All three sections are designed and built using HTML tags. Each section has a set of specific tags that are specifically provided by keeping the  Header,Title  and  Body Concepts in the ring.
• Internet navigation:  This is one of the most important  HTML applications that is in its kind of revolutionary. This navigation is possible using the  Hypertext concept . It is essentially a text that refers to other Web pages or text and can move to text or referenced page when the user clicks on it. HTML  is strictly used for embedding links on webpages. The user can easily navigate the pages and between the websites, which are located on different servers.
• Cutting edge feature:  A collection of standards with its HTML5  and  API  are used to introduce some of the latest trends in website creation. Like multi-purpose libraries, which are well-supported by old browsers. The browser, like  Google Chrome , is a good option when you run the latest set of standards and   های  HTML5  APIs. The JavaScript library is called  Modernizr , which can explore features that allow developer to dynamically load different libraries as needed.
• Images  in Web pages:  at the elementary level in  HTMLApplications, it can be displayed to use the images, which are obviously the same. By using the srcset an img attribute in  HTML  and combining it with the image element, the developer can control how the user provides a picture fully. Now by using the  img element , you can load different types of image by resizing. The rules can be easily adjusted with the image element, we can declare the img element with the default source, and then for each item can be supplied the source.
• Client-side storage:   Previously, the user cannot save the browser data that stays during the sessions. To meet this requirement, the server-side infrastructure should be made or used by a user's cookies. But with  HTML5, client-side storage  is possible using localstorage   and   indexdb   . These two strategies have their own standards and characteristics. localstorage   basically gives the hash space of a string-based table. Its API  is very simple and offers the   SetItemmethods,getitem   and   removeitem   to the developer. On the other hand,  indexdb   stores a larger and better data store on behalf of the client. the   indexdb database   is extensible with the user's permission.
• Use offline features:  When data is stored in the browser, the developer can think of strategy to create applications, when disconnected from the connection. HTML5  has an application cache mechanism that defines how to manage the offline status browser. The cache of the app, responsible for the offline ability is actually comprised of a variety of components, which includes  the API methods that make up the update, reads the file of the manifesto and the events using the specific feature in  HTML5, the developer can check whether it is an online app or not. The developer can also specify the cache of the Web application, such as what browser resource Manager identifies for offline use. In the manifesto file, resources that are available offline can also be identified.
• Data entry support with HTML: the HTML5  standard and  the API set can be used to support data entry level. By implementing browsers , the new HTML5standards, developers can simply add features to the tag, indicating the required fields, text, format of data, and soon. HTML5 has been associated with several new features to guide the on-screen keyboard, authentication, and other log-in data. It is experienced that end-user can get better data.
• Use in game development:  before the advent of  HTML5, game development was exclusive  Flash domain and  Silverlight  . Since browsers use the new  HTML5 profile  including  CSS3  and fast JavaScript engine to experience the rich and new experience,  HTML5  can make the reality of the game development possible, which was previously  Flash  and  Silverlight  . Each  API features do not require implementation, but by removing the rest of the features can be used from the most appropriate.
• The use of APIs  to enrichthe website:  HTML5  adds many new capabilities and tools, which it was just imagined in the past. A large collection of new APIs  in relation to file system, geographic location, drag and drop, event handling, customer storage, etc. are features that make HTML5 easier to use than the past. App experience can be enhanced with other  APIs , such as  Fullscreen,Visibility , and  Media Capture  . Modern web App has asynchronous nature that can be strengthenedby using websockets  and web employees like  API .

HTML Structure (HTML)

In your HTML code , you can specify parts of the content based on their performance, you can use elements that reveal parts of the said content, and assistive technologies such as screen footage can know the elements and help things like "find main navigation." "Or" Find the original content "as we mentioned at the beginning of the period, the consequences of not using the appropriate element structure and the semantics for the appropriate occupation will be followed by many consequences. To implement such semantic markup,    We provide HTML-specific tags that you can use to display such sections, for example:

• Title: < > header.
• Navigation Pane: < nav >.
• Main content: < main >, with different subdivision of content that is displayedby < article > elements,< section >  and  < div >.
• Sidebar: < aside >isoften placed inside the main < > .
• Footnote: < footer >.

Describing an HTML element

Let's examine the paragraph element a bit more:

Our main element (the aforementioned element) are:

1. Open tag: This tag (character) contains the name of the desired element(here, the  P element), which is placed inside the angular bracket (i.e. the same  <  and  > Marks)  . This section is where our element starts and initiates, in which case it can be said that this section is where our paragraph starts.
2. Closed Tags: this tag is similar to the open tag, with the difference that contains a forward slash mark (ie/) before its name is the element. This section is where our elements end up. Not closing a tag is usually an error with which newbies can get it. That can cause load loss results.
3. Content: This is the element content, in which it is only a text.
4. Elements: The tag is opened to add tags depending on the content, the elements are said.

HTML connection (HTML)  with  CSS  and JavaScript

Imagine you are building an office building. You build the scaffolding and structure of the base concrete. At this point, you can go from the raw stairs up and down, but there is nothing else to be usable. You will then make flooring, color, ceiling, wooden work and other decorative works that make the structure usable and usable. Eventually, people are going into the building and they start working there.

Foundation structure is what HTML allows  you to create. It makes it possible to generate elements such as paragraph labels  (< p >  some text  </p >), Video labels  (< img src = "" ")   and many other items including forms,  div , etc. But they are just the same thing. They look raw, they don't come in much of theirown.

Then  you enter the bcc  (CSS)   . CSS  allows you  to style your raw HTML to exactly how you want it. For example, you use CSS  to set the font, size, color, position, text shading and items like  underline/Straterough ,   etc. for  Div , You can adjust the width/height, position, background. Color, transparency, borders and so on, without CSS, your page looks raw and tedious and requires a lot of effort to adjust the items just by using  HTML  همراه دارد. CSS  is an essential color and all-out. It defines the visual attributes of  HTML elements in your page. You will see the CSS code either on the page (bad practice) or in a separate file  . css that is known as a stylesheet,   which can be used by the  < link rel = "stylesheet" href = "stylesheet. CSS" >  to connectto the HTML page.

JavaScript   will add logic to your page. People who work in the building are brains that they know how to use the resources for a meaningful purpose. Similarly, JavaScript is possible to interact, function and target to a non-static page that looks good, but in addition to publishing information as text and images, it does not do a decent job. JavaScript will communicate with your page andcreate, read, delete, and manipulate HTML  and  CSS content, such as all the alerts you schedule when you use Facebook. When you type your status message and click on the button send you click,  JavaScript  that runs behind the scene will take your post, send it to the server, and finally enter it in a live feed so you can see it. JavaScript can Be directly on an  HTML page (generally a bad workout) or preferably in a   js file. Your particular wrote that can be labeled using  < script SRC = "MyApp. js" > </.pt >  linked to the  HTML page.

Three genuine HTML + CSS + JavaScript  together makes it a complete and Dynamic Web page, which has features and visual functions. If you have to use javascript  in your browser, it is necessary to create JavaScript to  HTML  . However,  JavaScript  is beyond Web pages. Also, to write programs that are running these days on the server (    node. js),  and even in the mobile phone  (ری اکت نیتیو  react Native) are used. So, practically , JS  is used beyond Web pages  (HTML) .

HTML code Editors (HTML)

The HTML  Editor is used to write the foundation of the website. Added functionality, error checking and everything about more visual editor, something that can reduce your life significantly. The basic principles of  HTML editors are the same, they help you to highlight the code by highlighting, typing, elements and common  HTML Structures as well as automatic preparation.

Text using the HTML editor  can also be translated into other languages, such as CSS,  x  (XML)  or  JavaScript  . But as we know, not everything is created equal. Some editors may use them more easily while others have more performance than others.

When should you use the HTML editor ?

Simply put, always! The HTML editor is also valued for both beginners and more advanced developers. We've already mentioned the basic features of  HTML editors  , such as highlighting syntax, inserting common HTML elements and AutoComplete . All of this will make your code clean with less effort.

For example, the editor informs you that you forget to put the end label </  in a code element. So you should not limit your use of some kind of HTML editor   . Two editor is available,  WYSIWYG  and  HTML editors.

The most important HTML code Editors can be pointed to the following:

Dreamweaver software (Adobe Dreamweaver)

Adobe Dreamweaver CC is coined and managed by Adobe's technology giant  , a privileged, powerful and versatile tool. This is both front and back development. Adobe  also provides support, extensions, and features to ensure you're always integrated the code. Dreamweaver  is one of the edits that supports both text and  WYSIWYG methods . Therefore, you choose whether you want to encrypt with a live visual display or go to the classic method.

Without installing any other software, you can easily design a website with Dreamweaver  help. It's a pretty smart app and it's simple to do with it. That's why it's not necessary to maintain all the code and edit the misspelled words. With  HTML language , you can design and create the site pages based on static or dynamic, using  FTP option in the software to transfer the created pages to the host.

Visual Studio Code (Visual Studio Code)

Visual Studio Code, a free code editor, multiplatform, super fast and lightweight that has been created by Microsoft for Windows, Linux and Mac  . The program includes support for Dilagging, built- in control gate  and  git  (GitHub), highlighting the sax, completing smart Code, snippet and code recorrection. It is highly configurable and provides users with the possibility to change themes, keyboard shortcuts, additional settings and install extensions that will add additional functionality.

Other functional editors include:

• Atom
• Notepad + +
• Sublime Text

HTML example (HTML)

The structure above has been shown with the following code.

<! DOCTYPE HTML >

Html<>

  <Head>

    <Meta  charset ="utf-8">

 

    <Title>My page title</title>

    <Link  href ="Https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"   rel ="stylesheet"  type ="text/css">

    Rel's <link   ="stylesheet"   href ="style. css">

 

    <!--The below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer->

    <!--[If Lt. IE 9] >

< Script src = "https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js" > </.pt >

<! [EndIf]->

  </Head>

 

  <Body>

    <!--Here is our main header that is used across all the pages of our website->

 

    <Header>

      <H1>Header</H1>

    </Header>

 

    <Nav>

      <Ul>

        <Li> <a   href ="#">Home</a> </li>

        <Li> <a   href ="#">Our Team</a> </li>

        <Li> <a   href ="#">Projects</a> </li>

        <Li> <a   href ="#">Contact</aa> </li>

      </Ul>

 

       <!--A Search form is another commmon non-linear way to navigate through A website. ->

 

       <Form>

         <Input  type ="Search"  name ="q"  placeholder ="search query">

         <Input  type ="Submit"  value ="Go!" >

       </Form>

     </Nav>

 

    <!--Here's our page's main content->

    Main> <

 

      <!--It contains an article->

      <Article>

        <H2>Article heading</H2>

 

        <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec Consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.           </P>

 

        <H3>subsection</h3>

 

        <P>donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut Turpis Felis, pulvinar a semper sed, adipiscing id dolor.       </P>

 

        <P>pelientesque auctor nisi ID magna consequat sagittis. Curabitur Dapibus, enim sit amet elit pharetra tincidunt feugiat NIST imperdiet. The Convallis libero in Accumsan urna ultrices. Donec sed odio eros        .   </P>

 

        <H3>Another subsection</h3>

 

        <P>donec viverra mi quis quam pulvinar at Malesuada arcu rhoncus. A. Soclis natoque penatibus et manis dis parturient montes, Nascetur ridiculus mus. In rutrum Accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.         </P>

 

        <P>vivamus fermentum semper Porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, Ligula semper consectetur sagittis, nisi diam iaculis velit, is Fringille sem nunc vet mi.       </P>

      </Article>

 

      <!--The aside content can also be nested within the main content->

      <Aside>

        <H2>Related</H2>

 

        <Ul>

          <Li> <a   href ="#">Oh I do like to be beside the seaside</a> </li>

          <Li> <a   href ="#">Oh I do like to be beside the sea</a> </li>

          <Li> <a   href ="#">Although in the North of England</a> </li>

          <Li> <a   href ="#">It never stops raining</a> </li>

          <Li> <a   href ="#">Oh Well... </A> </li>

        </Ul>

      </Aside>

 

    </Main>

 

    <!--And Here is our main footer that is used across all the pages of our website->

 

    <Footer>

      <P>© Copyright 2050 by nobody. All rights reversed. </P>

    </Footer>

 

  </Body>

</Html>

Did you like this post?