HTML

HTML Introduction

What is HTML?
-> HTML is the standard markup language for creating Web pages.
qHTML stands for Hyper Text Markup Language
qHTML describes the structure of Web pages using markup
qHTML elements are the building blocks of HTML pages
qHTML elements are represented by tags
qHTML tags label pieces of content such as "heading", "paragraph", "table", and so on
qBrowsers do not display the HTML tags, but use them to render the content of the page

Example


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

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

</body>
</html>

Example Explained
qThe <!DOCTYPE html > declaration defines this document to be HTML5.
qThe <html> element is the root element of an HTML page.
qThe <head> element contains meta information about the document.
qThe <title> specifies a title for the document
qThe <body> element contains the visible page content.
qThe <h1> element defines a large heading.
qThe <p> element defines a paragraph.
HTML Tags
-> HTML tags are element names surrounded by angle brackets:
  <tagname>content goes here...</tagname>
qHTML tags normally come in pairs like <p> and </p>
qThe first tag in a pair is that start tag, the second tag is the end tag.
qThe end tag is written like the start tag, but with a forward slash inserted before the tag name.
qThe start tag is also called the opening tag , and the end tag the closing tag.
q
Web Browsers
qThe purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
qThe browser does not display the HTML tags, but uses them to determine how to display the document:
The <!DOCTYPE> Declaration
qThe <!DOCTYPE> declaration represented the document type , and helps browsers to display web pages correctly.
qIt must only appear once , at the top of the page (before any HTML tags).
qThe <!DOCTYPE> declaration is not case sensitive.
qThe <!DOCTYPE> declaration for HTML5.
HTML Basic
HTML Documents
qAll HTML documents must start with a document type declaration: <!DOCTYPE html>
qThe HTML document itself begins with <html> and ends with </html>
qThe 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
qHTML headings are defined with the <h1> to <h6> tags.
q<h1>  defines the most important heading . <h6> defines the least important heading.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

HTML Paragraphs
qHTML paragraphs are defined with the <p> tag.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
qHTML links are defined with the <a> tag.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>

</html>

qThe link's destination is specified in the href attribute.
qAttributes are used to provide additional information about HTML elements.
HTML Images
qHTML images are defined with the <img> tag.
qThe source file ( src ) , alternative text ( alt ) , width and height are provided as attributes:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>

</html>
HTML Buttons
qHTML buttons are defined with the <button> tag.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
</body>

</html>
HTML Lists
qHTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul
<h2>An Ordered HTML List</h2>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
</body>
</html>
HTML Elements 
HTML Elements
qAn HTML element usually consists of a start tag and end tag, with the content inserted in between:
q<tagname>Content goes here...</tagname>
qThe HTML element is everything from the start tag to the end tag:
q<p>My first paragraph.</p>
HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).
Nested HTML Elements
qHTML elements can be nested (elements can contain elements).
qAll HTML documents consist of nested HTML elements.


qThis example contains four HTML elements:

Example
<!DOCTYPE html>
<html>
<body
>
      <h1>My First Heading</h1>
      <p>My first paragraph.</p>
</
body>
</
html>
Example Explained
qThe <html> element defines the whole document.
qIt has a start tag <html> and an end tag </html>.
qThe element content is another HTML element (the <body> element.)
<html>
<body>

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

</body>
</html>
qThe <body> element defines the document body.
qIt has a start tag <body> and an end tag </body>.
qThe element content is two other HTML elements ( <h1> and <p>)
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body
>
qThe <h1> element defines a heading.
qIt has a start tag <h1> and an end tag </h1>.
qThe element content is: My First Heading
    <h1>My First Heading</h1>
qThe <p> element defines a paragraph.
qIt has a start tag <p> and an end tag </p>.
qThe element content is: My first paragraph.

    <p>My first paragraph.</p>

Comments

Popular posts from this blog

C++ Language

C Language

Java Language