Scribd
Upload
18 views

HTML Course Outline

The document is an HTML course outline by Dr. Zeeshan Bhatti, covering various topics including HTML structure, elements, attributes, formatting, links, images, tables, lists, layout, and forms. Each section provides specific HTML tags and their usage, along with examples. The course aims to teach the fundamentals of HTML for web development.

Uploaded by

RANA MUHAMMAD ABDULLAH Zahid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

HTML Course Outline

The document is an HTML course outline by Dr. Zeeshan Bhatti, covering various topics including HTML structure, elements, attributes, formatting, links, images, tables, lists, layout, and forms. Each section provides specific HTML tags and their usage, along with examples. The course aims to teach the fundamentals of HTML for web development.

Uploaded by

RANA MUHAMMAD ABDULLAH Zahid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML Course Outline

By. Dr. Zeeshan Bhatti

1. HTML Introduction
a. What is HTML
b. Scripting Language,
c. Interpreter Based
d. Syntax Free
e. Save as .html, execute in browser

2. HTML Element Structure


a. < tags > </tags>
b. <html>
c. <head>, <body>,
d. <title>
e. Syntax Free
f. Nested Elements/Tags
g. HTML is Not Case Sensitive
h. Empty HTML Elements <br> (HTML elements with no content are called empty elements)

3. HTML Headings
a. <h1> to <h6>

4. HTML Paragraphs
a. <p> </p>
b. <pre> </pre>

5. HTML Attributes
a. <a href=””>

6. HTML Styles
a. <tagname style="property:value;">
b. property is a CSS property. The value is a CSS value
c. <h1 style="font-size:60px;">Heading 1</h1>
d. <body style="background-color:powderblue;">
e. <p style="color:red;">This is a paragraph.</p>
f. <p style="font-family:courier;">This is a paragraph.</p>

7. HTML Formatting
a. <b> - Bold text
b. <strong> - Important text

1
c. <i> - Italic text
d. <em> - Emphasized text
e. <mark> - Marked text
f. <small> - Smaller text
g. <del> - Deleted text
h. <ins> - Inserted text
i. <sub> - Subscript text
j. <sup> - Superscript text
k.

8. HTML Quotations
a. <abbr> Defines an abbreviation or acronym
b. <address> Defines contact information for the author/owner of a document
c. <bdo> Defines the text direction
d. <blockquote> Defines a section that is quoted from another source
e. <cite> Defines the title of a work
f. <q> Defines a short inline quotation

9. HTML Comments
a. <!-- Write your comments here -->

10.HTML Links
a. <a href="url">link text</a>
b. Href=”#”
c. target="_blank"
d. _self - Default. Opens the document in the same window/tab as it was clicked
e. _blank - Opens the document in a new window or tab
f. _parent - Opens the document in the parent frame
g. _top - Opens the document in the full body of the window

11.HTML Images
a. <img src="pic_trulli.jpg" alt="Italian Trulli">
b. Background Imgae
<p style="background-image: url('img_girl.jpg');">
c. Repeat or No Repeat image background-repeat: no-repeat;

12.HTML Favicon
a. A favicon is a small image displayed next to the page title in the browser tab
b. <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

13.HTML Tables
a. <table>

2
b. <tr> Table Row
c. <td> Each Table Column/Data
d. <table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
e. Table Headers - th stands for table header.
f. <table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
g. Border : border: 1px solid black;
h. Color :<tr> <td style= “background-color: #96D4D4;”>
i. Border Color: border-color: #96D4D4;

14.HTML Lists
a. Unordered HTML List
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
b. Ordered HTML List
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
c. List Style <ul style="list-style-type:disc;"> (circle, disc, square, none)
d. Ordered HTML List - The Type Attribute <ol type="1">
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

3
15.HTML <div> and <span> tag
a. There are two display values: block and inline
b. A block-level element always starts on a new line and takes up the full width available
c. An inline element does not start on a new line and it only takes up as much width as necessary

d. The <div> element is often used as a container for other HTML elements.
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in
the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div>
e. When used together with CSS, the <div> element can be used to style blocks of content
f. The <span> element is an inline container used to mark up a part of a text, or a part of a
document.
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>
g.

4
HTML Layout
1. HTML Layout Elements
a. HTML has several semantic elements that define the different parts of a web page

2. <header> - Defines a header for a document or a section


3. <nav> - Defines a set of navigation links
4. <section> - Defines a section in a document
5. <article> - Defines an independent, self-contained content
6. <aside> - Defines content aside from the content (like a sidebar)
7. <footer> - Defines a footer for a document or a section
8. <details> - Defines additional details that the user can open and close on
demand
9. <summary> - Defines a heading for the <details> element

5
HTML Forms
1. Form Tag
a. The HTML <form> element is used to create an HTML form for user input
b. <form>
.
form elements
.
</form>
2. Form Attributes
a. The action attribute defines the action to be performed when the form is submitted
<form action="/action_page.php">
b. The method attribute specifies the HTTP method to be used when submitting the form data.
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
c.
3. The <input> Element
a. The HTML <input> element is the most used form element
b. An <input> element can be displayed in many ways, depending on the type attribute
c. <input type="text"> Displays a single-line text input field
d. <input type="radio"> Displays a radio button (for selecting one of many choices)
e. <input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
f. <input type="submit"> Displays a submit button (for submitting the form)
g. <input type="button"> Displays a clickable button
4. Label Element
a. The <label> tag defines a label for many form elements.
b. <label for="fname">First name:</label><br>
5. The HTML <form> Elements
a. The HTML <form> element can contain one or more of the following form elements:
b. <input>
c. <label>
d. <select>
e. <textarea>
f. <button>
g. <fieldset>
h. <legend>
i. <datalist>
j. <output>
k. <option>
l. <optgroup>
6.

You might also like