Scribd
Upload
8 views

HTML Notes

Cat grade 12 html tag summary notes

Uploaded by

joshuameyer066
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

HTML Notes

Cat grade 12 html tag summary notes

Uploaded by

joshuameyer066
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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>&lt;html&gt;</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">

You might also like