Setting Up a New Page:
To create an HTML page, all you need is a simple text editor like Notepad (Windows) or TextEdit (Mac).
Open your text editor, and save your file with a .html extension. This tells the computer that it's an
HTML file.
Document Structure:
Every HTML page begins with a document type declaration and an <html> tag. Inside the <html> tag,
there are two main sections: <head> and <body>. The <head> section contains meta-information about
the page, while the <body> section holds the visible content.
html
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Adding Headings:
Headings help to structure your content. There are six levels of headings, from <h1> (the main heading)
to <h6> (the smallest subheading).
html
<h1>This is the Main Heading</h1>
<h2>This is a Subheading</h2>
<!-- ...and so on up to h6 -->
Creating Paragraphs:
To write regular text, you simply use <p> tags for paragraphs.
html
<p>This is a paragraph. It's like talking to your visitors.</p>
Inserting Images:
You can add images using the <img> tag. Remember to provide the src attribute with the image file's
location.
html
<img src="image.jpg" alt="Description of the image">
Creating Links:
Hyperlinks connect different web pages. Use the <a> tag with the href attribute to specify the link's URL.
html
<a href="https://www.example.com">Click me to visit Example.com!</a>
Making Lists:
Lists organize information in an ordered or unordered format. Use <ul> for unordered lists and <ol> for
ordered lists, with <li> for each list item.
html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
Using Tables:
Tables help you display data in rows and columns. Use <table> to create the table, <tr> for table rows,
and <td> for table cells (data).
html
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Remember to close all tags you open. For example, <p> needs a </p> to close it. Also, make sure to
practice and experiment with these elements to become more comfortable with HTML.
Formatting:
HTML allows you to control how your text appears on the webpage. You can use the following tags for
basic text formatting:
<strong>: Makes text bold.
<em>: Italicizes text.
<u>: Underlines text.
<del>: Represents deleted text (strikethrough).
<ins>: Represents inserted text (underlined by default).
<mark>: Highlights text with a yellow background.
<sub>: Subscripts the text (appears below the baseline).
<sup>: Superscripts the text (appears above the baseline).
Font:
While it's not recommended to use the <font> tag for modern web development, you can use it
to set the font, size, and color of your text.
<p><font face="Arial" size="4" color="blue">This text is in Arial font, size 4, and blue
color.</font></p>
Text:
HTML provides some additional text-related tags for specific purposes:
<abbr>: Defines an abbreviation or acronym.
<blockquote>: Represents a long quotation.
<code>: Represents computer code.
<kbd>: Represents keyboard input.
<p><abbr title="Computer Applications Technology">CAT</abbr> is an exciting subject
for learners.</p>
<blockquote>
<p>"The only way to do great work is to love what you do." - Steve Jobs</p>
</blockquote>
<p>If you want to display a code snippet, use the <code><html></code> tag.</p>
<p>To save your work, press <kbd>Ctrl + S</kbd>.</p>
Graphics:
HTML allows you to add images to your webpage using the <img> tag.
<img src="path/to/your/image.jpg" alt="Description of the image">
