Difference between revisions of "HTML"

Revision as of 09:14, 10 March 2020

HTML stands for HyperText Markup Language.

Learn Basics

Unlike scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content.

Example:

To define a paragraph

 <p> I'm a paragraph </p>

The <html> Tag

The structure of an HTML document has been compared with that of a sandwich. As a sandwich has two slices of bread, the HTML document has an opening and closing HTML tags.

<html>
 …
</html>

The <head> Tag

Immediately following the opening HTML tag, you'll find the head of the document, which is identified by opening and closing head tags.

The head of an HTML file contains all of the non-visual elements that help make the page work.

<html>
   <head>…</head>
</html>

Defines information about documents, including metadata and scripts

The <body> Tag

The body tag follows the head tag. All visual-structural elements are contained within the body tag.

Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag.

<html>
   <head>
   </head>
   <body>
   </body>
</html>

The <title> Tag

To place a title on the tab describing the web page, add a <title> element to your head section:

<html>
   <head>
      <title>first page</title>
   </head>
   <body>
      This is a line of text. 
   </body>
</html>

The title element is important because it describes the page and is used by search engines.

Pharagraph

Single Line Break

Use the br tag to add a single line of text without starting a new paragraph:

<html>
   <head>
      <title>first page</title>
   </head>
   
   <body>
      <p>This is a paragraph.</p>
      <p>This is another paragraph. </p>
      <p>This is <br /> a line break </p>
   </body>
</html>

Text Formatting

In HTML, there is a list of elements that specify text style.

<html>
    <head>
        <title>first page</title>
    </head>
   
    <body>
        <p>This is regular text </p>
        <p><b>bold text </b></p>
        <p><big> big text </big></p>
        <p><i> italic text </i></p>
        <p><small> small text </small></p>
        <p><strong> strong text </strong></p>
        <p><sub> subscripted text </sub></p>
        <p><sup> superscripted text </sup></p>
        <p><ins> inserted text </ins></p>
        <p><del> deleted text </del></p>
    </body>
</html>

This is regular text

bold text

big text

italic text

small text

strong text

_{subscripted text}

^{superscripted text}

inserted text

~~deleted text~~

Headings, Lines and Comments

Headings

HTML includes six levels of headings, which are ranked according to importance. These are h1, h2, h3, h4, h5, and h6.

<html>
   <head>
      <title>first page</title>
   </head>
   <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>

Horizontal Lines

To create a horizontal line, use the hr tag.

<html>
   <head>
      <title>first page</title>
   </head>
   
   <body>
      <p>This is a paragraph </p>
      <hr />
      <p>This is a paragraph </p>
   </body>
</html>

In HTML5, the hr tag defines a thematic break.

Comments

The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.

<!-- Your comment goes here -->

Elements

HTML documents are made up of HTML elements. An HTML element is written using a start tag and an end tag, and with the content in between.

HTML documents consist of nested HTML elements. In the example below, the body element includes the p tags, the br tag and the content, "This is a paragraph".

Some HTML elements (like the br tag) do not have end tags.

Some elements are quite small. Since you can't put contents within a break tag, and you don't have an opening and closing break tag, it’s a separate, single element

Attributes

Attributes provide additional information about an element or a tag, while also modifying them. Most attributes have a value; the value modifies the attribute.

The Align Attribute

In this example, the value of "center" indicates that the content within the p element should be aligned to the center.

<p align="center"> 
   This text is aligned to the center
</p>

<html>
    <head>
        <title>Attributes</title>
    </head>
    <body>
        <p align="center">This is a text <br />
            <hr width="10%" align="right" /> This is also a text.
        </p>
    </body>
</html>

Attributes are always specified in the start tag, and they appear in name="value" pairs.

Attribute Measurements

As an example, we can modify the horizontal line so it has a width of 50 pixels.

This can be done by using the width attribute:

<hr width="50px" />

An element's width can also be defined using percentages:

<hr width="50%" />

Images

The <img> Tag

The <img> tag is used to insert an image. It contains only attributes, and does not have a closing tag. The image's URL (address) can be defined using the src attribute.

The HTML image syntax looks like this:

<img src="image.jpg" />

Image Location

You need to put in the image location for the src attribute that is between the quotation marks.

For example, if you have a photo named "tree.jpg" in the same folder as the HTML file, your code should look like this:

<html>
   <head>
      <title>first page</title>
   </head>
   <body> 
      <img src="tree.jpg" alt="" />
   </body>
</html>

In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. The alt attribute is required.

Image Resizing

To define the image size, use the width and height attributes. The value can be specified in pixels or as a percentage:

<html>
   <head>
      <title>first page</title>
   </head>
   <body> 
      <img src="tree.jpg" height="150px" width="150px" alt="" />
      <!-- or -->
      <img src="tree.jpg" height="50%" width="50%" alt="" />
   </body>
</html>

Image Border

By default, an image has no borders. Use the border attribute within the image tag to create a border around the image.

<img src="tree.jpg" height="150px" width="150px" border="1px" alt="" />

Links

The <a> Tag

Links are also an integral part of every web page. You can add links to text or images that will enable the user to click on them in order to be directed to another file or webpage. In HTML, links are defined using the <a> tag.

Use the href attribute to define the link's destination address:

<a href=""></a>

Creating Your First Link

<a href="http://www.xxxxx.com"> Learn HTML </a>

Once the code has been saved, "Learn HTML" will display as a link:

Learn HTML

The target Attribute

The target attribute specifies where to open the linked document. Giving a _blank value to your attribute will have the link open in a new window or new tab:

<a href="http://www.sololearn.com" target="_blank">
   Learn Playing
</a>

Lists

Ordered Lists

An ordered list starts with the ol tag, and each list item is defined by the li tag. Here is an example of an ordered list:

<html>
   <head>
      <title>first page</title>
   </head>
   <body>
      <ol>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ol>  
   </body>
</html>

The list items will be automatically marked with numbers.

Red
Blue
Green

Unordered List

An unordered list starts with the ul tag.

<html>
   <head>
      <title>first page</title>
   </head>        
   <body>
      <ul>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ul>  
   </body>
</html>

Red
Blue
Green

Tables

Creating a Table

Tables are defined by using the table tag.

Tables are divided into table rows with the tr tag.

Table rows are divided into table columns (table data) with the td tag.

<table>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
   </tr>
</table>

The border and colspan Attributes

A border can be added using the border attribute:

<table border="2">

A table cell can span two or more columns:

<table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td><br /></td>
      <td colspan="2"><br /></td>
   </tr>
</table>

Red	Blue	Green

Colspan Attribute

The example below demonstrates the colspan attribute in action:

<table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Yellow</td>
      <td colspan="2">Orange</td>
   </tr>
</table>

Red	Blue	Green
Yellow	Orange

Rowspan Attribute

To make a cell span more than one row, use the rowspan attribute.

<table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Yellow</td>
      <td rowspan="2">Orange</td>
   </tr>
</table>

Red	Blue	Green
Yellow	Orange

The align and bgcolor Attributes

To change your table's position, use the align attribute inside your table tag:

<table align="center">

Now let's specify a background color of red for a table cell. To do that, just use the bgcolor attribute.

<table border="2"align="center">
    <tr>
        <td bgcolor="red">Red</td>
        <td>Blue</td>
        <td bgcolor="pink">Green</td>
    </tr>
    <tr>
        <td bgcolor="blue"<Yellow</td>
        <td colspan="2">Orange</td>
    </tr>
</table>

Red	Blue	Green
Yellow	Orange

Inline and Block elements

Types of Elements

In HTML, most elements are defined as block level or inline elements. Block-level elements start from a new line. For example: <h1, <form, <li, <ol, <ul, <p, <pre, <table, <div, etc.

Inline elements are normally displayed without line breaks. For example: <b, <a, <strong, <img, <input, <em, <span, etc.

The div element is a block-level element that is often used as a container for other HTML elements. When used together with some CSS styling, the div element can be used to style blocks of content:

<html>
    <body>
        <h1>Headline</h1>
        <div style="background-color:pink; color:blue; padding:20px;">
            <p>Some paragraph text goes here.</p>
            <p>Another paragraph goes here.</p>
        </div>
    </body>
</html>

Some paragraph text goes here.

Another paragraph goes here.

Similarly, the <span element is an inline element that is often used as a container for some text. When used together with CSS, the <span element can be used to style parts of the text:

<html>
  <body>
    <h2>Some 
      <span style="color:red">Important</span>
    Message</h2>
  </body>
</html>

Other elements can be used either as block-level elements or inline elements. This includes the following elements:

APPLET - embedded Java applet
IFRAME - Inline frame
INS - inserted text
MAP - image map
OBJECT - embedded object
SCRIPT - script within an HTML document

You can insert inline elements inside block elements. For example, you can have multiple elements inside a div> element.

@@ Line 472: / Line 472: @@
    </body>
 </html></pre>
+Other elements can be used either as block-level elements or inline elements. This includes the following elements:
+*'''APPLET''' - embedded Java applet
+*'''IFRAME''' - Inline frame
+*'''INS''' - inserted text
+*'''MAP''' - image map
+*'''OBJECT''' - embedded object
+*'''SCRIPT''' - script within an HTML document
+You can insert inline elements inside block elements. For example, you can have multiple <span> elements inside a '''div>''' element.
 ==See also==