QP School - HTML5 Tutorials

Creating hyperlinks in HTML5

Thu, 27 Jul 2023 15:23:52 +0200

The a element in HTML is used to create hyperlinks, allowing you to link to other web pages, resources, files, or specific sections within a page.

Example:

Code:







  

  Hyperlink Example





  Welcome to my website! Check out OpenAI.

Explanation:

Opening and Closing Tags:
The a element is an inline element and requires an opening a tag and a closing a tag to create a link.
The content between the opening and closing tags is what's displayed as the clickable link.

href Attribute:
The most crucial attribute of the a element is href, which specifies the destination URL or the target of the link.
In the example, href="https://openai.com" tells the browser to navigate to the OpenAI website when the link is clicked.

Link Text:
The content between the opening and closing a tags is known as the link text.
In our example, the link text is "OpenAI."
When the user clicks on this text, they will be redirected to the URL specified in the href attribute.

Absolute URL:
In the example, we used an absolute URL (https://openai.com) as the value for the href attribute.
This means the link will take the user directly to the OpenAI website.

Relative URL (optional):
Instead of an absolute URL, you can also use a relative URL for the href attribute.
A relative URL is relative to the current web page's location.
For example, if your current page is in the same directory as another page named about.html, you can use href="about.html" to create a link to the "about.html" page.

Linking to Files:
Besides web pages, you can use the a element to link to various resources like images, PDFs, videos, and more.
Just provide the correct URL to the file in the href attribute.

Linking to Sections within a Page (optional):
You can also link to specific sections within the same page by using the id attribute on an element and providing its value as the destination of the link. For example:

Code:







  

  Internal Link Example





  Section 1


  Welcome to Section 1. Jump to Section 2.




  Section 2


  Welcome to Section 2. Go back to Section 1.

In this example, we've created two sections with h2 headings, each having a unique id attribute.
The links within the paragraphs allow the user to jump back and forth between the sections within the same page.

Opening Links in a New Tab (optional): By default, when a user clicks on a link, the new content replaces the current page.
However, you can add the target="_blank" attribute to the a element to open the link in a new browser tab or window.

What's new in HTML5?

Thu, 27 Jul 2023 14:48:36 +0200

1. Semantic elements:

HTML5 introduces many new semantic elements that help describe the structure of the content better, making it easier for search engines and screen readers to understand the page's purpose. Some key semantic elements include header, nav, main, article, section, footer, aside, etc.

2. Multimedia:

HTML5 provides built-in support for audio and video without the need for plugins like Flash.
The audio and video elements allow embedding media directly into the page.

Example:

Code:

  Your browser does not support the audio element.

Code:

  Your browser does not support the video element.

3. Form enhancements:

HTML5 enhances form handling with new input types, validation attributes, and the datalist element for autocomplete suggestions.

Example:

Code:

4. Canvas:

The canvas element allows dynamic rendering of graphics, charts, animations, and games using JavaScript.
It provides a 2D drawing context and, with WebGL, can even support 3D graphics.

5. Offline web applications:

HTML5 includes an Application Cache feature that enables web applications to work offline and load faster by storing resources locally.
This is achieved using the manifest attribute in the html tag.

6. Geolocation:

HTML5 supports geolocation, allowing websites to access the user's location through the Geolocation API.

7. Web storage:

HTML5 introduces Web Storage (localStorage and sessionStorage) to store data locally on the user's browser for a more extended period compared to cookies.

8. Web workers:

Web Workers allow running JavaScript code in the background without interfering with the page's responsiveness, enabling multi-threading.

9. Drag and Drop:

HTML5 provides native support for drag-and-drop interactions, making it easier to implement intuitive UI elements.

What is HTML5?

Thu, 27 Jul 2023 14:43:27 +0200

HTML5 (Hypertext Markup Language 5) is the latest version of the standard markup language used for creating and structuring content on the web.
It comes with several new features and improvements over its predecessors.

Everything you need to know about HTML5

Tue, 25 Jul 2023 11:50:45 +0200

HTML5 (Hypertext Markup Language 5) is the latest version of the markup language used to create and structure content on the web. It was officially published as a W3C Recommendation on October 28, 2014, and has since become the standard for web development. Here are some key points about HTML5:

Structure and Elements: HTML5 introduces new semantic elements that provide better structure and meaning to web content. Some important elements include

Multi Line Comments in HTML5

Sun, 21 Feb 2021 20:00:42 +0100

Comments will be ignored by the browser.
You can use comments i.e. to make it easier to read your code for others when working in a team,
or to make it easier to understand what each part of the code does when trying to teach someone programming,
or for commenting out some parts of the code that didn't work as expected to fix them later.

Multi line comments are done as follows:

Multi line comment.jpg (Size: 3.27 KB / Downloads: 601)

If you have done it correctly your HTML document should look like this now:

Basic layout for servers with multi line comment.jpg (Size: 23.09 KB / Downloads: 519)

Single Line Comment in HTML5

Sun, 21 Feb 2021 19:58:14 +0100

Comments will be ignored by the browser.
You can use comments i.e. to make it easier to read your code for others when working in a team,
or to make it easier to understand what each part of the code does when trying to teach someone programming,
or for commenting out some parts of the code that didn't work as expected to fix them later.

Single line comments are done as follows:

Single Line Comment.jpg (Size: 2.52 KB / Downloads: 495)

If you have done it correctly your HTML document should look like this now:

Basic layout for servers with single line comment.jpg (Size: 19 KB / Downloads: 530)

HTML5 Doctype declaration

Sun, 21 Feb 2021 13:35:17 +0100

The doctype declaration itself is not a HTML tag.
It's information for the browser on what kind of document to expect.
We can tell the browser to expect HTML5 like this:

DOCTYPE HTML.jpg (Size: 2.49 KB / Downloads: 520)

Since the doctype declaration is not case sensitive other declarations are possible, too.
For example:

Other possible doctype declarations.jpg (Size: 5.68 KB / Downloads: 485)

Basic layout of a HTML5 document on a server

Sun, 21 Feb 2021 12:38:05 +0100

If you want to upload your HTML to a server and make sure that it works correctly
you should add a default charset and force the browser to make it responsible.
In order to do that we will add the following two lines in the head section of the HTML document:

Charset and responsive.jpg (Size: 9 KB / Downloads: 552)

If you have done it correctly your HTML document should look like this now:

Responsive basic layout of a HTML document with charset.jpg (Size: 21.2 KB / Downloads: 529)

Forcing the browser to read the basic HTML layout as HTML5

Sun, 21 Feb 2021 12:22:34 +0100

To force the browser to strictly read your HTML document as HTML we have to add the following line to the code:

DOCTYPE HTML.jpg (Size: 2.49 KB / Downloads: 520)

If you've done it correctly your HTML document should look like this now:

Forced HTML5 Basic layout of a HTML document.jpg (Size: 11.64 KB / Downloads: 461)

Basic layout of a HTML document

Sun, 21 Feb 2021 12:16:30 +0100

The basic layout of a HTML document looks like this:

Basic layout of a HTML document.jpg (Size: 10.14 KB / Downloads: 419)

If you save it as i.e. Index.html and open it in your browser it works.

Marking UP the Blog in HTML5

Sat, 29 Aug 2020 22:51:37 +0200

we will build Simple blog in HTML CSS JS and Jquery which can fall under JS category
lets start by Marking it up

Code:



  

      

              

        

        

    Derp Blog

    

  

  

 



  Home

  Facebook News

  About









HOME PAGE



     welcome to my simple blog its simple for sure ?


     well help yourself here am just expressing how much derps exist in this BEEEEEEEB world ?

here we added simple sidebar and the

Code:

tag defines a division or a section in an HTML document and is used as a container for HTML elements which is then styled with CSS or manipulated with JavaScript and easily styled by using the class or id attribute as we here using the class

Code:

the link tag here used to simply link my css file that contains my CSS codes to get applied during the page load and it should be between the

Code:

tags or it will not work

Code:

this meta tags here used to make the page responsive on mobile phones or small screens by scaling the page for it

Code:

the link tags here used to link my favicon which you can see at the right of browser tab as small icon

Code:

Home

are anchor tags they used to link a page on the website ... in nutshell
while the active class is when you select home page from CSS you will define the background color and text color of the selected
page in the sidebar or navigation bar

Code:

welcome to my simple blog its simple for sure ?

tags are the paragraph tags just add text in between to be seen in the bag

Code:
BEEEEEEEB

tags that showing text in ITALIC font