Webpage

Webpages are the building blocks of the World Wide Web, and they are accessed through web browsers such as Google Chrome, Mozilla Firefox, or Safari. When a user types a URL (Uniform Resource Locator) or clicks on a link, the browser sends a request to the server hosting the webpage, and the server responds by sending back the HTML content of the requested webpage.

Websites

Websites are collections of webpages that are interconnected and accessible over the internet. They serve as online destinations where individuals or businesses can share information, provide services, sell products, or engage with their audience.

there are two different types of websites they are:

1.static websites :

A static website is a simple type of website where the content doesn't change. It's like a brochure that shows the same information to everyone who visits. Here's what you need to know about static websites:

1. Fixed Content: The content on a static website is already created and doesn't change based on user actions or inputs.

2. HTML and CSS: Static websites are made using HTML, which defines the structure and content, and CSS, which adds styles like colors and fonts to make it look good.

3. Limited Interactivity: Static websites don't have advanced features or interactive elements like user login, comments, or real-time updates.

4. Easy to Maintain: Since static websites don't have complex databases or server-side coding, they are easy to update and maintain. You can simply edit the HTML and CSS files when you want to make changes.

2.dynamic websites

Dynamic websites are websites that can change and show different content based on user interactions or real-time data. They use special scripts to generate and deliver this dynamic content.

There are two main ways to create dynamic websites:

1. Server-Side Scripting: The web server processes the user's request and generates the web page on the server. It can use scripting languages like PHP, Python, Ruby, or Java to interact with databases or perform calculations. The server then sends the completed web page to the user's browser.

2. Client-Side Scripting: The web browser itself executes scripts embedded in the web page. JavaScript is the main scripting language used here. The scripts can modify the web page in real-time, interact with the user, and make requests to servers to get or send data.

Dynamic websites are useful because they can provide personalized content, real-time updates, and interactive features. They are commonly used for things like online shopping, social media, news websites, and online banking.

In web programming we use HTML5, CSS, and JAVASCRIPT these are the platform we use for doing web programming .lets learn in detail about these topics.

HTML5(Hyper text markup language)

HTML 5 is the latest version of HTML (HyperText Markup Language), the standard language used for creating web pages on the internet. HTML5 introduces new features and enhancements that enable developers to create more interactive and multimedia-rich websites.

DHTML(Dynamic Hypertext markup language)

DHTML stands for Dynamic HTML. It refers to a combination of technologies—HTML, CSS (Cascading Style Sheets), and JavaScript—that enable interactive and dynamic elements on web pages. DHTML allows web developers to create dynamic effects, such as animations, rollovers, and content updates, without requiring page reloads. It enhances the user experience by adding interactivity and responsiveness to web pages.

XHTML(ExtensibleHypertext markup language)

XHTML stands for Extensible HyperText Markup Language. It is a stricter and cleaner version of HTML, following the rules of XML (eXtensible Markup Language). XHTML combines the syntax and rules of HTML with the stricter structure and requirements of XML.

Structure of html5

1. <header>: Represents the introductory content or a container for a group of introductory content at the beginning of a section or page.

2. <nav>: Defines a section of navigation links, such as menus or navigation bars.

3. <section>: Represents a standalone section of content within a document. It groups related content together and typically has its own heading.

4. <article>: Represents a self-contained composition, such as a blog post, article, or news story.

5. <aside>: Represents content that is tangentially related to the main content, such as sidebars, pull quotes, or related links.

6. <footer>: Defines the footer of a section or the whole document. It typically contains information about the author, copyright notice, or links to related documents.

7. <figure> and <figcaption>: <figure> represents self-contained content, such as images, illustrations, diagrams, or code snippets. <figcaption> provides a caption or description for the content within <figure>.

8. <main>: Specifies the main content of a document. There should be only one <main> element per page, and it should contain the primary content.

9. <video> and <audio>: <video> is used to embed videos, and <audio> is used to embed audio content within a web page. These tags provide native support for media playback without the need for external plugins.

10. <canvas>: Enables drawing and graphics rendering on the fly using JavaScript. It provides a platform for creating interactive graphics, animations, and games directly within the web browser.

These are just a few examples of HTML5 tags. HTML5 also enhanced existing tags like <form>, <input>, and <table>, introducing new attributes and behaviors to improve form handling, input types, and table structures.

Here are some basic HTML5 tags that are commonly used:

1. <html>: Represents the root element of an HTML document.

2. <head>: Contains metadata about the HTML document, such as the title, character encoding, linked stylesheets, and scripts.

3. <title>: Specifies the title of the web page, which is displayed in the browser's title bar or tab.

4. <body>: Contains the visible content of the web page, including text, images, links, and other elements.

5. <h1> to <h6>: Represent different levels of headings, with <h1> being the highest (most important) and <h6> being the lowest.

6. <p>: Defines a paragraph of text.

7. <a>: Creates a hyperlink to another web page or a specific location within the same page.

8. <img>: Embeds an image in the web page.

9. <ul>: Creates an unordered list (bulleted list).

10. <ol>: Creates an ordered list (numbered list).

11. <li>: Defines a list item within an unordered or ordered list.

12. <div>: Provides a container or a block-level division for grouping and styling other elements.

13. <span>: Provides an inline container for grouping and styling small portions of text or elements.

14. <table>: Creates a table for organizing tabular data.

15. <tr>: Defines a table row.

16. <td>: Represents a table cell within a row.

17. <form>: Creates a form to collect user input.

18. <input>: Defines an input field for user input.

19. <button>: Creates a clickable button.

20. <textarea>: Provides a multi-line text input field.

These are just a few of the many HTML5 tags available. HTML5 also introduced tags for audio and video playback, semantic elements like <header>, <nav>, <section>, and more. Each tag serves a specific purpose and contributes to the structure and functionality of web pages.

HTML5 has applications in:

1. Website development

2. Mobile app development

3. Web-based games

4. Video and audio streaming

5. E-learning and online education

6. Web applications

7. Digital advertising

8. Internet of Things (IoT)

9. Data visualization

HTML5's versatility makes it crucial for modern web and app development across various industries and platforms.

Here is a small example program for html5

<!DOCTYPE html>
<html>
<head>
  <title>Hello, World!</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Explanation:

• The <!DOCTYPE html> declaration specifies that the document is an HTML5 document.

• The <html> element is the root element of the HTML document.

• The <head> element contains meta-information about the HTML document, such as the title displayed in the browser's title bar.

• The <title> element sets the title of the web page, which appears in the browser tab.

• The <body> element contains the visible content of the web page.

• The <h1> element is a heading that displays the "Hello, World!" message.

When you save the above code in an HTML file (e.g., hello.html) and open it in a web browser, you will see the "Hello, World!" message displayed on the page.

In the next blog, we will learn about CSS(cascading style sheet)

THANK YOU FOR READING!

Do follow me on LinkedIn for further blogs.

linkedin.com/in/manasa-j-03b633238