Search This Blog

Tuesday, February 22, 2022

Hyper Text Markup Language-HTML

5:25 AM  AAA  1 comment



Hyper Text Markup Language-HTML

 

 

Introduction

What is HTML?
HTML is a language for describing web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML is a markup language
  • A markup language is a set of markup tags
  • The tags describes document content
  • HTML documents containHTML tags and plain text
  • HTML documents are also called web pages
  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
HTML Tags
HTML markup tags are usually called HTML tags
  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>

 

HTML Elements

"HTML tags" and "HTML elements" are often used to describe the same thing.But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags: HTML Element:
<p>This is a paragraph.</p>

Web Browsers

The purpose of a web browser (Chrome, Internet Explorer, Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
Writing HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
Step 1: Start Notepad
Step 2: Edit Your HTML with Notepad - Type your HTML code into your Notepad:
Step 3: Save Your HTML- Select Save as..in Notepad's file menu. When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you. Save the file in a folder that is easy to remember, like test.
Step 4: Run the HTML in Your Browser -Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links:HTML links are defined with the <a> tag.
<a href="http://www.w3schools.com">This is a link</a>

HTML Elements

An HTML element is everything from the start tag to the end tag:
Start tag *
Element content
End tag *
<p>
This is a paragraph
</p>
<a href="default.htm">
This is a link
</a>
<br>


* The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax

·         An HTML element starts with a start tag / opening tag
·         An HTML element ends with an end tag / closing tag
·         The element content is everything between the start and the end tag
·         Some HTML elements have empty content
·         Empty elements are closed in the start tag
·         Most HTML elements can have attributes

Empty HTML Elements

·         HTML elements with no content are called empty elements.
·         <br> is an empty element without a closing tag (the <br> tag defines a line break).

HTML Lines

The <hr>tag creates a horizontal line in an HTML page. Thehr element can be used to separate content:
<p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<hr><p>This is a paragraph</p>

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
<!-- This is a comment -->

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).
Note:
Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!
Example:
<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.
The HTML <title> Element
The <title> tag defines the title of the document.
The title element is required in all HTML/XHTML documents.
The title element:
  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>
HTML Hyperlinks (Links)
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
1.    To create a link to another document, by using the href attribute
2.    To create a bookmark inside a document, by using the name attribute
Syntax:<a href="url">Link text</a>
Example:             <a href="http://www.bing.com/">Visit Bing</a>
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
New Browser
<a href="http://www.Bing.com/" target="_blank">Visit W3Schools!</a>
Same Browser
<a href="http://www.Bing.com/" target="_Top">Visit BING!</a>

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<imgsrc="boat.gif" alt="Big Boat">

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<imgsrc="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
Example: Aligning image With Paragraph
<!DOCTYPE html>
<html>
<body>

<p>
<imgsrc="smiley.gif" alt="Smiley face" align="left" width="32" height="32">A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.
</p>

<p>
<imgsrc="smiley.gif" alt="Smiley face" align="right" width="32" height="32">A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.
</p>

</body>
</html>
Hyperlink Image:
<p>Create a link of an image:
<a href="default.asp">
<imgsrc="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p>

HTML Text Formatting Tags

Tag
Description
<b>
Defines bold text
<big>
Defines big text
<em>
Defines emphasized text 
<i>
Defines a part of text in an alternate voice or mood
<small>
Defines small text
<strong>
Defines strong text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text

HTML Citations, Quotations, and Definition Tags

Tag
Description
<abbr>
Defines an abbreviation
<acronym>
Defines an acronym
<address>
Defines contact information for the author/owner of a document
<bdo>
Defines the text direction
<blockquote>
Defines a section that is quoted from another source
<q>
Defines an inline (short) quotation
<cite>
Defines the title of a work
<dfn>
Defines a definition term

Example: Alignment
<!DOCTYPE html>
<html>
<body>
<p>An image
<imgsrc="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32">with align="bottom".</p>
<p>An image
<imgsrc="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">with align="middle".</p>
<p>An image
<imgsrc="smiley.gif" alt="Smiley face" align="top" width="32" height="32">with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><imgsrc="smiley.gif" alt="Smiley face" width="32" height="32">An image before the text.</p>
<p>An image after the text.
<imgsrc="smiley.gif" alt="Smiley face" width="32" height="32"></p>
</body>
</html>

Posted in:
Twitter Delicious Facebook Digg Stumbleupon Favorites More