HTML NOTES
HTML Definition
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page.
Basic Structure
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Element
An HTML element is defined by a start tag, some content, and an end tag
Example: <tagname> Content goes here... </tagname>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like name="value"
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
Example: Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
Example: <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
Example: This text is bold
This text is italic
This is subscript and superscript
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML
source code.
Example: <!-- Write your comments here -->
HTML Links – Hyperlinks
The HTML <a> tag defines a hyperlink. It has the following syntax:
Example: <a href="url">link text</a>
HTML Images
Images can improve the design and the appearance of a web page.
Example: <img src="pic_trulli.jpg" alt="Italian Trulli">
HTML Page Title
The <title> element adds a title to your page
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Example:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Types
1. Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
2. Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
3. HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Div Element
The <div> element is used as a container for other HTML elements.
Example: Lorem Ipsum <div>I am a div</div> dolor sit amet.
HTML class Attribute
The HTML class attribute is used to specify a class for an HTML element.
HTML id Attribute
The HTML id attribute is used to specify a unique id for an HTML element.
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
<form>Element
The HTML <form> element is used to create an HTML form for user input:
Example:
<form>
.
form elements
.
</form>
<input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Example:
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many
choices)
<input Displays a checkbox (for selecting zero or more of many
type="checkbox"> choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input.
Example:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
<label> Element
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focuses on the input element
