Difference between revisions of "HTML"

Latest revision as of 11:21, 28 September 2023

HTML stands for HyperText Markup Language.

1 Learn Basics
2 Pharagraph
- 2.1 Single Line Break
3 Text Formatting
4 Headings, Lines and Comments
5 Elements
6 Attributes
- 6.1 The Align Attribute
- 6.2 Attribute Measurements
7 Images
8 Links
9 Lists
- 9.1 Ordered Lists
- 9.2 Unordered List
10 Tables
11 Inline and Block elements
- 11.1 Types of Elements
12 Forms
13 HTML Colors
- 13.1 Color Values
- 13.2 Background and Font Colors
14 Frames
- 14.1 The <frame> Tag
- 14.2 Working with Frames
15 Related
16 See also

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[edit]

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[edit]

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[edit]

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[edit]

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[edit]

Single Line Break[edit]

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[edit]

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[edit]

Headings[edit]

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[edit]

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[edit]

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

<!-- Your comment goes here -->

Elements[edit]

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[edit]

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[edit]

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[edit]

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[edit]

The <img> Tag[edit]

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[edit]

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[edit]

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[edit]

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[edit]

The <a> Tag[edit]

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[edit]

<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[edit]

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[edit]

Ordered Lists[edit]

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[edit]

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[edit]

Creating a Table[edit]

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[edit]

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[edit]

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[edit]

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[edit]

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[edit]

Types of Elements[edit]

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.

Forms[edit]

The <form> Element[edit]

HTML forms are used to collect information from the user. Forms are defined using the <form element, with its opening and closing tags:

<body>
   <form>…</form>
</body>

Use the action attribute to point to a webpage that will load after the user submits the form.

<form action="http://www.sololearn.com"> 
</form>

The method and name Attributes[edit]

The method attribute specifies the HTTP method (GET or POST) to be used when forms are submitted (see below for description):

<form action="url" method="GET">

<form action="url" method="POST">

When you use GET, the form data will be visible in the page address.

Use POST if the form is updating data, or includes sensitive information (passwords). POST offers better security because the submitted data is not visible in the page address.

To take in user input, you need the corresponding form elements, such as text fields. The <input element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc.

The example below shows a form requesting a username and password:

<form>
   <input type="text" name="username" /><br />
   <input type="password" name="password" />
</form>

Form Elements[edit]

If we change the input type to radio, it allows the user select only one of a number of choices:

<input type="radio" name="gender" value="male" /> Male <br />
<input type="radio" name="gender" value="female" /> Female <br />

The type checkbox allows the user to select more than one option:

<input type="checkbox" name="gender" value="1" /> Male <br />
<input type="checkbox" name="gender" value="2" /> Female <br />

The <input tag has no end tag.

The submit button submits a form to its action attribute:

<input type="submit" value="Submit" />

EXAMPLE: The form will include Name, Email, and Message fields. We'll also add a Submit button.

<!DOCTYPE html>
<html>
    <head>
        <title>My Blog</title>
        <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
    </head>
    <body>
        <!-- Form section start -->
       <div class="section">
            <h1><span>Contact Me</span></h1>
            <form>
                <input name="name" type="text" /><br/>
                <input name="email" type="email" /><br/>
                <textarea name="message" ></textarea>
                <input type="submit" value="SEND" class="submit" />
            </form>
        </div>
        <!-- Form section end -->
    </body>
</html>

This is just a static HTML page, so it won't work to actually submit the form. You'd need to create the server-side code in order to submit a real form and process the data.

HTML Colors[edit]

HTML colors are expressed as hexadecimal values.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F As you can see, there are 16 values there, 0 through F. Zero represents the lowest value, and F represents the highest.

Colors are displayed in combinations of red, green, and blue light (RGB).

Hex values are written using the hashtag symbol (#), followed by either three or six hex characters.

Color Values[edit]

All of the possible red, green, and blue combinations potentially number over 16 million. Few of them:

#00FF00

#F0F00F

#F0F0FF

#FFF0F0

#0000F0

Background and Font Colors[edit]

The bgcolor attribute can be used to change the web page's background color.

This example would produce a dark blue background with a white headline:

<html>
   <head> 
      <title>first page</title>  
   </head>
   <body bgcolor="#000099">
       <h1>
        <font color="#FFFFFF"> White headline </font>
       </h1> 
   </body>
</html>

Frames[edit]

The <frame> Tag[edit]

A page can be divided into frames using a special frame document.

The <frame tag defines one specific window (frame) within a <frameset>. Each <frame> in a <frameset can have different attributes, such as border, scrolling, the ability to resize, etc.

The <frameset element specifies the number of columns or rows in the frameset, as well as what percentage or number of pixels of space each of them occupies.

<frameset cols="100, 25%, *"></frameset>
<frameset rows="100, 25%, *"></frameset>

Working with Frames[edit]

Use the <noresize> attribute to specify that a user cannot resize a <frame> element:

<frame noresize="noresize">

Frame content should be defined using the src attribute.

Lastly, the <noframes> element provides a way for browsers that do not support frames to view the page. The element can contain an alternative page, complete with a body tag and any other elements.

<frameset cols="25%,50%,25%">
   <frame src="a.htm" />
   <frame src="b.htm" />
   <frame src="c.htm" />
   <noframes>Frames not supported!</noframes>
</frameset>