HTML Basics
Lets learn about some basic elements of HTML like Headings, Paragraphs, Images, Links, Buttons and Lists
Lets start with a simple HTML Document or Webpage
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Heading</h1>
<p>Paragraph</p>
</body>
</html>
Explaination
- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta-information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph
HTML Headings
HTML provide six headings from <h1> to <h6>.
Heading <h1> is the largest heading and <h6> is the smallest heading.
<h1>Page Heading1</h1>
<h2>Page Heading2</h2>
<h3>Page Heading3</h3>
<h4>Page Heading4</h4>
<h5>Page Heading5</h5>
<h6>Page Heading6</h6>
HTML Paragraphs
Paragraphs in HTML are defined by <p> tag.
Heading <h1> is the largest heading and <h6> is the smallest heading.
<p>First Paragrph</p>
<p>Second Paragrph</p>
<p>Third Paragrph</p>
Lists
HTML provides two types of lists
- Ordered Lists/Numbered Lists represented by <ol> tag.
- Unordered lists/Bulleted Lists represented by <ul> tag.
List items are represented by <li> tag.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
</ol>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
</ul>
Links
In HTML links are created using the anchor tag <a>.
The destination url is added in href="... " attribute.
<a href="https://www.themelites.com/">HTML Link</a>
Buttons
Buttons in HTML are created by <button> tag.
<button>HTML Button</button>
Images
HTML defines the images with <img> tag.
Some attributes used in it are:
- src="..." attribute is used to add the image address/url.
- alt="..." attribute is used to provide an alternate text for slow connections.
- height="..." and width="..." attributes are used for specifyinng the height and width of the image respectively.
<img src="https://1.bp.blogspot.com/-2d2IbdRqDU8/XrK4zu3uavI/AAAAAAAAPuc/jRF4Cylkdxc3QH6KLJvWB81XliNYfpxigCK4BGAsYHg/w400-h225/Blogger.jpg" alt="Blogger" height="100px" width="100px" />
Comments
Post a Comment