HTML is the basics of building Web Pages and Web Application. HTML stands for HYPERTEXT MARKUP LANGUAGE. The HTML specifications , updates are maintained by World Wide Web Consortium (W3C). HYPERTEXT simply means link inside inside,it refers to links that connect web pages to one another, either within a single website or between websites. MARKUP signifies a computer language that consists of easily understood keywords, names, or tags that help format the overall view of a page and the data it contains.

BASIC STRUCTURE OF A HTML CODE:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Importance of <!DOCTYPE html> in a code:

Enhances Readability.

Time Saver.
External users can easily understand the document type and the version of HTML used.

ELEMENTS AND ATTRIBUTES IN HTML:

ELEMENT in a HTML is the composition of the start tag,content,end tag.Every information that we see in a web page is in a element whereas, the ATTRIBUTES are the additional info that we add about the element.

DECLERATION OF ELEMENT

a start tag, some content, and an end tag

<start> content </start>

Every tag in a html is colsed by using "/",but there are some tags that do not have closing tags. These tag's attribute is only its content.

For Ex. -

(image tag)
(line break tag)

COMMENTS IN HTML:

Comments in HTML are used to hide the contents or information that we do not want to show in our web page. The comments are useful as we can distuinguish various sections by adding the comment in the code. They are also useful in the modifications.

HTML comment:

<!--This is a comment. Comments are not displayed in the browser -->

HEADINGS IN HTML:

Headings in HTML is used to write the Titles and Subtitles in the web page. They are defined with < h1 > to < h6 > tags.The headings vary in tags as the vary in the size.

< h1 > tag is the most important heading in a HTML. < h6 > tag is the least important heading in a HTML. They also differ in size as < h1 > is largest heading and its keeps on decreasing till < h6 > making < h6 > smallest.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraph:

A HTML prargraph represents a paragraph. In the paragraph tag the line breaks,spaces are automatically removed. The content written inside < p > < /p > is a whole one paragraph.

 <p> This is a paragraph. </p>

Links in HTML:

HTML links are hyperlinks.You can click on a link and jump to another document.When you move the mouse over a link, the mouse arrow will turn into a little hand like arrow that depicts that it is a link. Anchor Tag is used to add the HTML links.

<a href="url">link text</a>

Links TARGET-attribute:

This specifies where to open the linked link,document,webpage.

Target attribute can have the following values:

_self - Default. Opens the document in the same window/tab as it was clicked.
_blank - Opens the document in a new window or tab.
_parent - Opens the document in the parent frame.
_top - Opens the document in the full body of the window.

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML emails links:

For emails there is a specific way in HTML:

<a href = "mailto: abc@example.com">Send Email</a>

Also we can attach the default subject with the email:

<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Send Feedback
</a>

HTML image:

The HTML tag is used to embed an image in a web page. The image tag is only a opening tag it do not contain any closing tag. The tag has two required attributes:

src - Specifies the path to the image alt - Specifies an alternate text for the image

<img src="url">

Also we can add a ALT attribute whose value will appear if the image is not loaded.

<img src="url" alt="alternatetext">

List in HTML:

There are 3 types of the list in the HTML:

Ordered List
Unordered List
Descriptive List

Ordered List This list is used to create a list with the specific order in it. ex:1,2....A,B...

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Unordered List This is the list with no order in it.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Descriptive List

This list is a list with the descriptions,The < dl > tag defines the description list, the < dt > tag defines the term (name), and the < dd > tag describes each term.

<dl>
  < dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Table in HTML:

Table tag in HTML hepls to form a table and arrange data in rows and columns. columns in table is given by the tag < tr>< /tr > and inside these the columns are given with tag < td >

For headings in the table we use the tag< th >< /th >

<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>

COLSAPN is the attribute used to combine the columns.

ROWSPAN is the attribute used to combine the rows.

HTML Block and Inline Elements:

Block-level elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

Inline-level elements

An inline element does not start on a new line. An inline element only takes up as much width as necessary.

HTML-Semantic elements:

A semantic element describes the meaning to both the browser and the developer.

Examples of non-semantic elements: < div > and < span > - Tells nothing about its content.

Examples of semantic elements: < form >, < table >, and < article > - Clearly defines its content.

##HTML-SEO Tags:

SEO stands for Search Engine Optimisation,these are added inside the head of the code and are used by google for ranking and optimisation.

Html For Beginners

Table of contents