Basic HTML Documents
By
Walujjo stephen
• All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is
between <body> and </body>.
Example
•<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
•HTML headings are defined with the <h1> to <h6> tags.
•<h1> defines the most important heading. <h6> defines
the least important heading:
Example
•<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
•Example
•<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
•Example
•<a href="https://www.mtac.com">This is a link</a>
•The link's destination is specified in the href attribute.
•Attributes are used to provide additional information
about HTML elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are
provided as attributes:
Example
<img src="mtac.jpg" alt=“mtac" width="104" height="142">
HTML <button> Tag
•Example
A clickable button is marked up as follows:
<button type="button">Click Me!</button>
Definition and Usage
•The <button> tag defines a clickable button.
•Inside a <button> element you can put text (and tags
like <i>, <b>, <strong>, <br>, <img>, etc.). That is not
possible with a button created with the <input> element!
•Tip: Always specify the type attribute for
a <button> element, to tell browsers what type of button
it is.
Attributes
Attribute
autofocus
Value
autofocus
Description
Specifies that a button should
automatically get focus when the page
loads
disabled disabled Specifies that a button should be disabled
form form_id Specifies which form the button belongs
to
formaction URL Specifies where to send the form-data
when a form is submitted. Only for
type="submit"
formenctype application/x-www-form-urlencoded Specifies how form-data should be
multipart/form-data encoded before sending it to a server.
text/plain Only for type="submit"
formmethod get Specifies how to send the form-data
post (which HTTP method to use). Only for
type="submit"
formnovalidate formnovalidate Specifies that the form-data should not
be validated on submission. Only for
type="submit"
formtarget _blank Specifies where to display the response
_self after submitting the form. Only for
_parent type="submit"
_top
framename
name name Specifies a name for the button
• Type button reset submit Specifies the type of button
Value text Specifies an initial value for the button
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
• Item
• Item
• Item
• Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
HTML Lists cont…
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
The list items will be marked with bullets (small black circles) by
default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
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 List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
End of HTML Document
