Impressive Web Designing - HTML5 Basics

Fundamentals of the World Wide Web and Information Transmission

Online resources have become an integral part of daily life. The internet serves as a powerful medium for transmitting information via webpages, which are essentially pages of information displayed on the internet. Standards and formats for presenting graphics and text on the web are developed and approved by various World Wide Web (WWW) governing authorities. The invention of websites arose from a growing demand for the attractive presentation of information through electronic means.

The Operational Mechanism of the Web

The World Wide Web, commonly referred to as the web, operates through a specific sequence of communication between a client and a server.

Step 1: The user types a domain name (for example, www.EBalbharti.in) into a web browser. The browser sends a request to a Domain Name System (DNS) server to find the specific IP address of the WebServer. The DNS server acts similarly to a phonebook, mapping URLs to Server IPs.

Step 2: The DNS server identifies the IP address. In this specific scenario, the IP address is $10.0.2.3$ .

Step 3: The client machine sends a request for the specific webpage to the EBalbharti WebServer at IP $10.0.2.3$ .

Step 4: The WebServer provides the response, sending the actual webpage back to the client machine.

Core Components of the Web

The web utilizes several specific terms and technologies to function:

Webpage: A simple text file created using HyperText Markup Language (HTML).
Website: A collection of interlinked webpages that contain various media types, including text, images, audio, and videos. An example is www.ebalbharati.in.
Web Browser: Software used to view webpages or websites on the internet. Examples include Internet Explorer, Google Chrome, and Mozilla Firefox.
Web Server: An application or computer that transmits webpages over the internet using the HTTP protocol. It manages the functionality of a website. Examples include Apache, nginx, and IIS.
URL (Uniform Resource Locator): The specific address of a webpage on the internet, used to retrieve pages from their original location.
HTTP (HyperText Transfer Protocol): The protocol used by the WWW for communication between clients and servers.
HTML (HyperText Markup Language): The language that enables the writing of code for webpages. Hypertext links are used to link all webpages within a website to one another.

Introduction to HTML5 and Basic Structure

HTML is the standard language for developing and creating interactive websites and was introduced by Tim Berners Lee. HTML documents can be created in any text editor and executed on any computer equipped with a web browser. It is compatible with the majority of web browsers.

HTML tags are keywords enclosed within angular brackets that define how a browser formats and displays content. Tags are not case sensitive. Every HTML page is enclosed between the <html> and </html> tags. The document is divided into two internal sections:

Head Section: Contained within <head> and </head>, this section includes the <title> of the document. Text here is not displayed on the webpage but is used for search engine optimization.
Body Section: Contained within <body> and </body>, this section contains the actual text and content of the document to be displayed in the browser.

An attribute defines a specific property for an element. It consists of an attribute and a value, appearing within the start tag of an element. For example, in <body bgcolor="green">, bgcolor is the attribute and green is the value.

Classification of HTML Tags

HTML tags are categorized into two types based on their structure:

Container Tags: Also known as paired tags, these have both a beginning tag and an end tag. The end tag includes a forward slash / before the tag name. Examples include <head></head> and <body></body>.
Empty Tags: Also known as singular or standalone tags, these do not have an end tag. For example, <br> is an empty tag used to specify a line break.

Document Structure in HTML5

HTML5 introduces specific semantic tags to define the structure of a document. The first line of an HTML5 document must be the declaration <!DOCTYPE html>, which informs the browser about the flavor of HTML being used.

<header>: Defines a header for a document or a specific section.
<nav>: Defines a container for navigation links.
<section>: Defines a distinct section within a document.
<article>: Defines an independent, self-contained article.
<aside>: Defines content aside from the main content, such as a sidebar.
<footer>: Defines a footer for a document or a section.
<details>: Defines additional details that the user can view or hide.
<title>: Content within this tag is displayed on the browser's title bar.

Text Formatting Elements

Text formatting is employed to enhance the appearance and attractiveness of a document. The following tags are used for text-level formatting:

<b>: Displays text in Bold.
<i>: Displays text in Italics.
<u>: Displays text with an underline.
<small>: Displays text in a smaller font size.
<sub>: Displays text in subscript form.
<sup>: Displays text in superscript form.
<ins>: Displays text as inserted, usually with an underline.
<del>: Displays text as deleted, usually with a strikethrough.
<mark>: Defines marked or highlighted text.

Heading Levels and Alignment

HTML provides six levels of heading tags, ranging from <H1> to <H6>.

<H1>: Displays text in bold and represents the largest heading level.
<H6>: Represents the smallest heading level.

All heading levels support the align attribute, which can take the values left, right, or center. For example: <h1 align="center">Largest heading size which is center aligned.</h1>.

Inserting Multimedia and Structural Lines

The <IMG> tag is an empty tag used to insert images. It utilizes several key attributes:

src: Specifies the path of the image file (common extensions include .png, .jpg, and .gif).
height: Specifies the height of the image in units of $pixels$ .
width: Specifies the width of the image in units of $pixels$ .
alt: Provides alternate text as a description of the image if it cannot be displayed.

The syntax for an image is: <IMG src="Desert.jpg" height="400" width="400" alt="Desert image">.

The <HR> tag is a singular tag used to display a horizontal ruled line. Its attributes include:

color: Sets the color of the line.
width: Specifies the length of the line in either $pixels$ or as a percentage ( $%$ ).
size: Sets the thickness of the ruled line.

The <P> tag is a container tag used to define paragraphs within the text.

Creating and Customizing Tables

A table consists of rows and columns and is created using the <table> container tag.

<table>: Indicates the start of a table.
<caption>: Specifies the table heading. It has an align attribute with values top (default) or bottom.
<tr>: Defines a row within the table.
<th>: Defines a table heading cell, typically used in the first row. Content is displayed in bold.
<td>: Specifies the data or cell content within the table.

Table Attributes:

border: Required to display borders for the table and columns; it takes a numbered value.
bordercolor: Sets a specific color for the border.
align: Aligns the entire table to the left, right, or center.
bgcolor: Sets the background color for the entire table.

Attributes for , , and :

align: Aligns text horizontally (left, right, or center).
colspan: Used in <td> or <th> to span a single cell across multiple columns. It takes a numbered value.
rowspan: Used in <td> or <th> to span a single cell across multiple rows. It takes a numbered value.
bgcolor: Can be applied to <tr>, <th>, or <td> to set background colors for specific rows or columns.

Hyperlinks and Navigation

Hyperlinks connect documents to one another and are created using the <a> (anchor) tag.

Syntax: <a href="URL">Link Text</a>
href: Specifies the address of the file or URL to be opened upon clicking.

Link States and Default Colors:

Unvisited link: Blue and underlined.
Visited link: Purple and underlined.
Active link: Blue and underlined.

Image Hyperlinks: Images can also function as links. For example: <a href="Mypage2.htm"><Img src="arrow.gif" alt="Click on arrow"></a>.

Form Elements and User Input

Forms are used to accept user input and are created using the <form></form> element. A form is a collection of controls such as textboxes, radio buttons, and checkboxes.

Form Attributes:

Name: Assigns a name to the form.
Action: Specifies the path where form data is submitted. If omitted, it defaults to the current page.
Method: Specifies how data is sent: GET or POST.
- GET: The default method. Data is visible in the address bar. It is not suitable for sensitive data and has character limits depending on the browser.
- POST: Data is not displayed in the address bar, making it secure for personal or sensitive information. It has no size limitations.

The Tag and its Types:

type="text": Creates a one-line textbox.
type="radio": Creates a radio button for selecting one option from multiple choices.
type="checkbox": Creates a checkbox for selecting multiple options.
type="submit": Displays a button to submit form data to a server.
type="password": Creates a field where input is masked with asterisks ( $*$ ) or discs.
type="reset": Clears all entered content in the form.
type="button": Displays a push button that activates on events.

Attributes of the Tag:

name: A user-defined value required for each input field to ensure its data is submitted.
maxlength: Used with text and password to set the maximum number of characters allowed.
size: Used with text and password to specify the width of the textbox.
checked: Sets the default selection for radio buttons or checkboxes.
value: For text, sets default text; for checkbox and radio, defines the value sent to the server; for submit and reset, defines the button label.

Multi-line Text and Selection Menus

Tag: Used for multi-line user input.

rows: Specifies the number of lines.
cols: Specifies the width.
placeholder: Provides a short hint about the expected value.
required: Ensures the field cannot be left blank.

Used to create drop-down lists.

<select> attributes include name, multiple (for selecting multiple values), and size (number of visible values).
<option> attributes include selected (to pre-select an option) and value (the value assigned to that option).

Questions & Discussion

Q: What is a collection of webpages called? A: A collection of webpages is called a website.

Q: What is the address of a webpage called? A: The address of a webpage is called a URL (Uniform Resource Locator).

Q: Can a ruled line be colored in blue? A: Yes, by using the color attribute within the <hr> tag, such as <hr color="blue">.

Q: What is the syntax for displaying a table without borders? A: The syntax would be <table border="0"> or simply omitting the border attribute.

Q: Which attribute spans two or more columns of a table? A: The colspan attribute is used to span two or more columns.

Q: What is the required tag to insert a photograph in a webpage? A: The required tag is <IMG>.

Note on Scripting: PHP is a server-side scripting language. For example, in the form code <form method="post" action="data.php">, data.php is the name of the PHP file that stores the accepted data.