Hyper Text Markup Language is used to create web pages that will be displayed online. All web pages communicate in this language. This is an independent language. This can be used on any platform like Windows, Linux, Macintosh, and so on. Its collection of "tags" used to create web documents are displayed using browsers on the Internet.
The latest version of Hyper Text Marking Language is HTML5 provided below.
There are no minimum system requirements for HTML5 development; you can do it in any text editing program with any type of computer and any other application. That's the beauty of HTML! you can use any editor you like. To test your work, you will need a HTML5-compatible Web browser application. The latest versions of Google Chrome and Firefox (both free online) will work best for this.
< header >…< /header > Identifies the header block for an individual section or a document.
< footer > …< /footer > Shows the footer block for the individual section or document.
< main >…< /main >. Details the main content of a document.
< article > …< /article > Indicates an article inside a document.
< aside >…< /aside > Defines the content that is contained in a document sidebar.
< section >…< section > Defines the section block in a document.
< details >…< details > Details additional facts or information the user can either view or hide.
< dialog >…< dialog > Refers to a dialog box or window.
< figcaption > …< /figcaption > This element is a caption that details the figure.
< figure > … < figure > This tag represents an independent content block that includes diagrams, photos, illustrations, and more.
< mark > …< /mark > Shows the highlighted portion of text within the content of the page.
< nav >…< nav >Refers to navigation links that can be used in the document.
< menuitem >…< menuitem > Identifies the specific menu item that a user can get from a pop-up menu.
< meter >…< meter > Details the scalar measurement of a known array.
< progress > … < progress >Shows the progress of a task that is usually presented in a progress bar.
< rp >… < rp >Shows the text within browsers that do not support ruby annotations.
< rt > …< rt > Shows details of East Asian typography characters.
< ruby >…< ruby > Details a ruby annotation for East Asian typography.
< summary > …< summary > Includes a visible heading for a element.
< bdi > …< bdi > Allows you to format part of the text in a different direction from other text.
< time > …< time > Shows the time and date.
< wbr > Shows a line-break within the content.
- Basic understanding of HTML and its tags
- Tools: Notepad ( Windows ), Notepad++, Sublime Text 3, TextEdit ( Mac )
- A Computer and Internet connection
- Passion for learning!!!
< ! -- Communicates the html version to the browser -- >
< !DOCTYPE html >
< ! -- The lang sets the language for all the text on the page -- >
< html lang = " en-US " >
< ! -- Head tag contains title, meta, script, noscript, link, base, style -- >
< head >
< ! -- Configures the character encoding -- >
< meta charset = " UTF-8 " >
< ! -- Include meta tag to ensure proper rendering and touch zooming -- >
< meta name = " viewport " content = " width = device-width, initial-scale = 1 ">
< ! -- Wright your page title here -- >
< title > < /title >
< ! -- Linking HTML and CSS -- >
< ! -- rel attributes specifies the relationship between the HTML document and an external resource -- >
< ! -- href defines the destination of the link -- >
< ! -- style/style.css [Folder/File Name] -- >
< link rel = " stylesheet " type = " text/css " href = " style/style.css " >
< ! -- End of the head -- >
< /head >
< ! -- All the viewable content will be here in the body tag -- >
< body >
< ! -- Linking HTML and JS -- >
< ! – src - Source attribute tells the browser where to find the file -- >
< ! – js/ script.js [Folder/File Name] -- >
< script src = " js/script.js " >< /script>
< ! -- Ending the body tag -- >
< /body >
< ! -- Ending the container -- >
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and line breaks.
< ! -- figure- Contains one or more images, graphics, code samples -- >
< figure name = "value" >
< put here link >< figcaption > Image < / figcaption >
< ! -- Alternative solution for the wrapper or container -- >
< main >
< /main >
< ! -- Input type can be text, email, number, radio, checkbox, hidden, submit -- >
< form action = " " method = " get " >
< input type = " text " name = " first-name " value = " " maxlength = " 100 " style = " width: 120px;" spellcheck = " false "
autocomplete = " off " placeholder = " Rasel " autofocus required >
< input type = " text " name = " last-name " value = " " maxlength = " 100 " style = " width: 120px;" spellcheck = " false "
autocomplete = " off " placeholder = " Mia " autofocus required >
< /form >
< ! -- A output has oninput value , output name and type. here is input type is number -- >
< ! -- Take two id and type with numbers and give oninput value in the form -- >
< ! -- form oninput="bangladesh.value = rasel.valueAsNumber * mia.valueAsNumber" -- >
< ! -- input type="number" id="rasel" * -- >
< ! -- input type="number" id="mia" = -- >
< ! -- output name="bangladesh" for="rasel mia" -- >
< ! -- /form -- >
Here you will find header tag, nav tag, main tag, article tag, section tag, aside tag, address tag, footer tag.
The header appears at the top of each page on the site. Contains relevant information for all pages (such as site name or logo) and an easy-to-use navigation system.
< header >
< div id = " logo" > HTML < /div >
< nav >
< ul >
< li >< a href = " /" > Home < /a >< /li >
< li >< a href = " /link" > Page < /a >< /li >
< /ul >
< /nav >
< /header >
Main is the largest region, containing different content on the current page.
Stuff on the side:
1) Information complementing the main content; 2) information shared among a subset of pages; 3) alternative navigation system. In fact, not all of the page's main content is absolutely necessary.
< main role = " main " >
< article >
< h2 > Title < /h2 >
< p > Content < /p >
< /article >
< article >
< h2 > Title2 < /h2 >
< p > Content2 < /p >
< /article >
< /main >
< section > A group of related content < /section >
< aside >
< /aside >
The footer is visible at the bottom of all the pages on the site. As a subject, it contains less-known global information such as legal notices or contact details.
< footer >
< p >©HTML Sheet < /p>
< address >
Content < a href = " mailto: firstname.lastname@example.org" > Me < /a >
< /address >
< /footer >
Offline Storage – Cache Manifest
Work without a connection
1. Create cache manifest file
2. Set server to allow for manifest file type
3. Link to manifest file in HTML
An application cache offers the following benefits:
Users can navigate the site even when they are offline.
Cached resources are local, so they load faster.
Reduced server load:
The browser only downloads resources that have changed from the server.
A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.
This is the default section for entries in the cache manifest file. Files listed under the cache header or (immediately after the cache expression line) are clearly stored after they have been downloaded for the first time.
The files listed in the network header directory in the cache manifest file are white-written resources that require a connection to the server. All app requests exceed the repository, even if the user is offline. The wildcard * character can only be used once. Most sites require *.
The back up section specifies the back pages the browser should use if the app is not accessible. Each entry in this category includes two URIs - the first is the resource, the second is the fallback. Both URIs must be related and come from the same source as the expression file. Wild cards can be used. The CACHE, NETWORK, and FALLBACK sections can be written in any order in the cache manifest file, and each section may appear multiple times in one manifest.