.jpg)
Blog Intro:
Welcome to our blog post on web programming! In today's digital age, websites have become an integral part of our lives, serving as gateways to information, entertainment, and communication. Behind every successful website lies a powerful web programming language, and one such language is HTML (Hypertext Markup Language). In this article, we will delve into the essential aspects of organizing text, links and URLs, and tables using HTML. Whether you're a seasoned web developer or just starting your journey in the world of programming, this article will provide you with valuable insights to enhance your web development skills. So, let's dive in and uncover the secrets of effective organization in web programming!ORGANIZING TEXT IN HTML:
1) HTML Heading:
A title or a subtitle that you wish to appear on the web page may be defined
using an HTML header tag. When you use the heading tags , the text is shown in
bold on the browser, and the size of the text is decided by the number of
headings. When a heading is displayed, the browser inserts one line before and
one line after it.
The <h1> to <h6> tags are used to specify the six different HTML
headers. The greatest heading tag is <h1> and the lowest is <h6>.
As a result, the most significant heading is h1 and the least important is
<h6>.
Example of heading tags in html:
<!DOCTYPE html> <html> <head> <title>Heading Tags Example</title> </head> <body> <h1>This is a Heading Level 1</h1> <p>Some text goes here...</p> <h2>This is a Heading Level 2</h2> <p>Some more text goes here...</p> <h3>This is a Heading Level 3</h3> <p>Even more text goes here...</p> <h4>This is a Heading Level 4</h4> <p>And more text goes here...</p> <h5>This is a Heading Level 5</h5> <p>Yet another text goes here...</p> <h6>This is a Heading Level 6</h6> <p>Final text goes here...</p> </body> </html>
In this example, we have used six different heading tags (<h1> to <h6>) to create headings of varying levels. The main purpose of heading tags is to define the structure and hierarchy of content on a webpage. The <h1> tag represents the highest level of heading, typically used for the main heading or the title of the page. Subsequent heading tags, such as <h2>, <h3>, and so on, are used for subheadings or sections within the page.
When you view this example in a web browser, you'll notice that the headings are displayed in different sizes, with <h1> being the largest and <h6> being the smallest. This default styling can be modified using CSS (Cascading Style Sheets) to match the design of your website.
Remember, using appropriate heading tags not only helps in organizing and structuring your content but also improves accessibility and SEO (Search Engine Optimization) by providing semantic meaning to the text on your web page.
2) HTML Paragraph:
A paragraph in a webpage is defined by the HTML paragraph tag. It's
important to note that a browser will automatically insert an empty line
before and after a paragraph. The <p> element in HTML denotes the
start of a new paragraph. When you use a lot of spaces inside the HTML
<p> tag, the browser eliminates the excess spaces and lines when the
page is shown. The browser considers the number of spaces and lines to be
one. < p >…….. is the syntax for the < p > tag.
The href property, which identifies the link's destination, is the most important attribute of the <a> element. The section of the link text that will be visible to the reader is the link text.
The reader will be directed to the given URL address by clicking on the link text.
Links will open in the current window or frame by default. If you want
the link to open in a different window or frame than the one it's in,
you'll need to add a target attribute in <a> element.
Put the <img> element within the <a> tag to use an image as a
link. With the SRC property, the <img> element is used to display an
image in an HTML page.
<table> tag:
Example of paragraph tag in html-
<!DOCTYPE html> <html> <head> <title>Paragraph Tag Example</title> </head> <body> <h1>Welcome to My Website!</h1> <p>This is a paragraph of text. It can contain multiple sentences or even just a single sentence. Paragraphs are often used to group related information together and provide a logical flow of content.</p> <p>Here's another paragraph. You can use paragraphs to break up your content and make it more readable. It's a good practice to keep your paragraphs concise and focused on a specific topic.</p> <p>And here's one more paragraph to demonstrate the usage of the paragraph tag. You can include any type of text within a paragraph, including links, images, or other HTML elements.</p> <p>If you need to add additional paragraphs, simply include more <code><p></code> opening and closing tags around your content.</p> </body> </html>
In this example, we have used the `<p>` tags to create paragraphs of text. Each paragraph is enclosed within an opening `<p>` tag and a closing `</p>` tag. You can have as many paragraphs as you need on your webpage.
Paragraph tags are commonly used to structure and format textual content on a webpage. They help separate different blocks of text and make the content more readable and organized. By default, the browser adds some vertical spacing between paragraphs, creating visual separation.
It's important to note that the `<p>` tag is a block-level element, which means it takes up the full width of its parent container. If you need inline text instead of a block, you can use the `<span>` tag or apply CSS styling to achieve the desired result.
3) HTML Division:
In an HTML document, the <div> element denotes a division or
section. The <div> tag serves as a container for HTML components,
which may then be decorated using CSS or modified using JavaScript. The
class or id attribute can be used to style the div element. It is a block
level tag It's a term that refers to a collection of HTML tags that may be
used to build sections and apply styles to them. < div >…….. <div>
is the syntax for the < div > tag.
Example of division tag in html:
Here's an example of how the division tag (`<div>`) is used in HTML:
<!DOCTYPE html> <html> <head> <title>Division Tag Example</title> <style> .container { background-color: lightgray; padding: 20px; } .box { background-color: white; border: 1px solid black; padding: 10px; margin-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="box"> <h2>Section 1</h2> <p>This is the content of section 1.</p> </div> <div class="box"> <h2>Section 2</h2> <p>This is the content of section 2.</p> </div> <div class="box"> <h2>Section 3</h2> <p>This is the content of section 3.</p> </div> </div> </body> </html>
In this example, we have used the `<div>` tag to create
divisions or containers within the HTML document. The
`<div>` tag is a block-level element that is commonly used
as a container for other HTML elements, allowing you to group and style
content together.
In the given example, we have a container `<div>` with the
class `container`, which has a light gray background and some
padding. Inside the container, there are three separate
`<div>` elements with the class `box`. Each box
contains a heading (`<h2>`) and a paragraph
(`<p>`) with some sample content.
By using the `<div>` tag, you can apply CSS styles, such as
background colors, borders, padding, and margins, to create visual
separation and organize the content on your webpage.
The `<div>` tag is highly versatile and is often used in
combination with CSS to create complex layouts, responsive designs, and
grid systems.
4) Font:
HTML5 does not support this. The font style for the text within it is
defined by the HTML <font> element. In an HTML document, it
specifies the font size, colour, and face of the text. <font>….
</font> is the syntax for the <font> tag with attributes
size, color and face.
Example of font tag in html-
The `<font>` tag was used in older versions of HTML to specify
the font, size, and color of text. However, it has been deprecated in
HTML5, and it is not recommended to use it anymore. Instead, it's
better to use CSS (Cascading Style Sheets) to style your text and
maintain a separation of concerns between content and presentation.
For illustration purposes, I'll provide an example of how the
`<font>` tag used to work in older HTML versions, but please be
aware that you should avoid using it in modern web development:
<!DOCTYPE html> <html> <head> <title>Font Tag Example (Deprecated)</title> </head> <body> <font face="Arial" size="4" color="blue">This is some blue text in Arial font and size 4.</font> <p>However, this paragraph uses the default font and size.</p> <font face="Times New Roman" size="5" color="red">This is some red text in Times New Roman font and size 5.</font> </body> </html>
In this example, we have used the `<font>` tag to set the
font, size, and color of the text within the tag. The `face`
attribute specifies the font family, the `size` attribute sets
the font size, and the `color` attribute defines the text
color. However, using this tag is not recommended because it mixes
content with presentation, making the HTML less maintainable and
harder to style consistently.
Instead, you should use CSS to style your text. Here's how the
equivalent styling would look using CSS:
<!DOCTYPE html> <html> <head> <title>CSS Example</title> <style> .blue-text { font-family: Arial; font-size: 16px; color: blue; } .red-text { font-family: "Times New Roman"; font-size: 20px; color: red; } </style> </head> <body> <p class="blue-text">This is some blue text in Arial font and size 16px.</p> <p>However, this paragraph uses the default font and size.</p> <p class="red-text">This is some red text in Times New Roman font and size 20px.</p> </body> </html>
In this updated example, we've used CSS classes to style the text.
This approach separates content from presentation, making it easier to
manage and apply consistent styles throughout your website.
5) LINKS AND URLS IN HTML:
A link is connection between two web pages. Hyperlinks are HTML links. You can jump to another document by clicking on a link. The mouse arrow will change into a tiny hand when you move the mouse over a link.The href property, which identifies the link's destination, is the most important attribute of the <a> element. The section of the link text that will be visible to the reader is the link text.
The reader will be directed to the given URL address by clicking on the link text.
In all browsers, links will display as follows by default:
1) link : A link that has not been visited is highlighted in
blue.
2) vlink : A visited link is highlighted in purple.
3) alink : An active link is highlighted in red and underlined.
The syntax of the link (`<a>`) tag in HTML is as follows:
<a href="url">Link Text</a>
Let's break down the components of the link tag:
- `<a>`: This is the opening tag of the link element.
- `href="url"`: The `href` attribute specifies the
destination URL of the link. It can be an absolute URL (e.g.,
`https://www.example.com`) or a relative URL (e.g., `about.html`). The
URL can also include email addresses, phone numbers, or anchor tags
for linking within the same page.
- `Link Text`: This is the text or content that will be
displayed as the clickable link. It can be any text or HTML content
that you want to show to the user.
Here are a few examples to demonstrate the syntax:
<a href="https://www.example.com">Visit Example Website</a>
<a href="about.html">About</a>
<a href="mailto:info@example.com">Send Email</a>
<a href="#section1">Go to Section 1</a>
Remember to close the link tag with the closing `</a>`
tag.
You can also add additional attributes to the link tag, such as
`target="_blank"` to open the link in a new tab or window, or
`title="Tooltip text"` to provide a tooltip when the user hovers over
the link.
The following are predefined targets:
1) _blank: opens the page in a new browser window.
2) _self: the page is loaded into the current window.
3) _parent: loads the page into the frame above the one in which the
hyperlink is located.
4) _top: closes all frames and loads the page in the whole browser
window.
URL stands for Uniform Resource Locator. It refers to an internet/web
address for a resource.
The following elements make up a URL:
1. Scheme/Protocol: The scheme or protocol specifies the
communication protocol to be used to access the resource. Common
examples include "http://" for Hypertext Transfer Protocol (HTTP) and
"https://" for HTTP Secure.
2. Domain/Host: The domain or host identifies the specific
website or server where the resource is located. It can be a
registered domain name (e.g., example.com) or an IP address (e.g.,
192.0.2.1).
3. Port: The port number is an optional element that identifies
the specific network port to be used for the communication. It is
typically specified after the domain or host separated by a colon. For
example, "example.com:8080" specifies port 8080 for the communication.
4. Path: The path represents the specific location or file path
on the web server where the resource is located. It provides the
hierarchical structure to navigate to the desired resource. For
example, "/products/index.html" specifies the path to the "index.html"
file within the "products" directory.
5. Query Parameters: Query parameters, also known as the query
string, allow passing additional information to the server. They are
specified after the path and preceded by a question mark. Query
parameters are in the form of key-value pairs, separated by
ampersands. For example, "?category=books&page=1" passes the
parameters "category" and "page" with their respective values.
6. Fragment/Anchor: The fragment or anchor refers to a specific
section within the resource being accessed. It is indicated by the
hash symbol (#) followed by an identifier. Fragments are often used to
navigate to specific sections of a web page. For example, "#section1"
directs the browser to the section with the "section1" identifier.
Here's an example of a URL that incorporates these elements:
https://www.example.com:8080/products/index.html?category=books&page=1#section1
URLs play a crucial role in web browsing, as they enable users and web
browsers to locate and access resources on the internet using a
standardized addressing system.
URL having two types - A relative URL and an absolute URL.
A relative URL begins with the forward slash and directs the browser to
stay within the current site.
An absolute URL is the full URL of the page that you link to.
Example of <a> tag in html:
Certainly! Here are examples of `<a>` tags in HTML using
absolute URLs, relative URLs, and image links:
1. Absolute URL:
<a href="https://www.example.com">Visit Example Website</a>
In this example, the `<a>` tag creates a link to an external
website using an absolute URL.
2. Relative URL:
<a href="about.html">About</a>
In this example, the `<a>` tag creates a link to a relative URL,
assuming that the "about.html" file is in the same directory as the
current HTML file.
3. Image Link:
<a href="https://www.example.com"> <img src="image.jpg" alt="Image"> </a>
In this example, the `<a>` tag wraps an
`<img>` tag, creating an image link. Clicking on the image
will navigate to the specified URL (`https://www.example.com`).
Remember to adjust the URLs and file names according to your specific
needs. The `<a>` tag is versatile and can be used to create
various types of links, including text links, image links, and more.
6) TABLES IN HTML:
HTML tables allow website designers to organise data such as text, photos, links, and other tables into rows and columns of cells. The <table> element is used to build HTML tables, with the <tr> tag used to produce table rows and the <td> tag used to create data cells. By default, the items under <td> are regular and left aligned. The <th> element is used to specify the table heading.1) <table>: specifies a table.
2) <tr>: specifies a row in a table.
3) <th> : specifies a header cell in a table.
4) <td> : specifies a cell in a table.
5) <caption> : specifies the table caption.
6) <colgroup> : specifies a group of one or more columns in a
table for formatting.
7) <col> : used with <colgroup> element to specify
column properties for each column.
<table> attribute:
1) border: pixels Specifies the border width. A value of "0" means
no border.
2) align: Used to define Visual alignment in right, left, centre or
justify.
3) bgcolor: The background colour of the tableis defined in
rgb(x,x,x) , #hexcode or colorname.
4) cellpadding: The distance between the cell borders and their
contents is defined in pixels or %.
5) cellspacing : The distance between cells is defined in pixels or
%.
6) width : The width is defined in pixels or %.
Example of <table> in html-
Certainly! Here's an example of how to create a basic table using the
`<table>` tag in HTML:
<!DOCTYPE html> <html> <head> <title>Table Example</title> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: lightgray; } </style> </head> <body> <h1>Employee Directory</h1> <table> <tr> <th>Name</th> <th>Position</th> <th>Department</th> </tr> <tr> <td>John Doe</td> <td>Manager</td> <td>Operations</td> </tr> <tr> <td>Jane Smith</td> <td>Supervisor</td> <td>Human Resources</td> </tr> <tr> <td>Mark Johnson</td> <td>Engineer</td> <td>Research and Development</td> </tr> </table> </body> </html>
In this example, we have used the `<table>` tag to create a
table with employee directory information. The table consists of rows
(`<tr>`) and columns (`<th>` for table header
cells and `<td>` for regular table cells).
We've also added some basic CSS styles to the table for better
readability. The `width: 100%` makes the table expand to the full
width of its container, `border-collapse: collapse` removes the
spacing between cells, and `border: 1px solid black` adds a
border around each cell.
The `<th>` tags define the table headers, and the
`<td>` tags represent the data cells. The first row
contains the column headers, and subsequent rows contain the data for
each employee.
6.1 Colspan and Rowspan attributes of <table>
A table is divided into rows, with each row containing cells. We may
need
the table to spread across (merge) multiple columns or rows. We can use
the Colspan and Rowspan attributes in this case.
1.Colspan:
The colspan parameter specifies how many columns a cell should display
horizontally.
<!DOCTYPE html> <html> <head> <title>Table Example</title> <style> table { width: 100%; border-collapse: collapse; border: 1px solid black; /* Add border to the table */ } th, td { border: 1px solid black; /* Add border to the cells */ padding: 8px; text-align: left; } th { background-color: lightgray; } </style> </head> <body> <table> <tr> <th>Name</th> <th colspan="2">Contact Information</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>555-123-4567</td> </tr> </table> </body> </html>
Output:
| Name | Contact Information | |
|---|---|---|
| John Doe | john.doe@example.com | 555-123-4567 |
2.Rowspan:
The rowspan parameter is used to define how many rows a cell should
display vertically.
<!DOCTYPE html> <html> <head> <title>Table Example</title> <style> table { width: 100%; border-collapse: collapse; border: 1px solid black; /* Add border to the table */ } th, td { border: 1px solid black; /* Add border to the cells */ padding: 8px; text-align: left; } th { background-color: lightgray; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Contact Information</th> </tr> <tr> <td rowspan="2">John Doe</td> <td>john.doe@example.com</td> </tr> <tr> <td>555-123-4567</td> </tr> </table> </body> </html>
Output:
| Name | Contact Information |
|---|---|
| John Doe | john.doe@example.com |
| 555-123-4567 |
.jpg)
